/*
  Librería de estilos específicos de cada cliente 
  Se ubica en css de cada proyecto y se cargan por ruta relativa en cada formulario.
  Se crea en 26ABR2021 para facilitar las personalizaciones de cada cliente

  OJO 
  Para utilizar la fuenta Marvel, cambiar la que esté en font-famly: 'xxx', por Marvel + serif
  Para utilizar la fuenta Open Sans, cambiar la que esté en font-family: 'xxx', por Open Sans + sans-serif;
  Para utilizar la fuenta Ubuntu, cambiar la que esté en font-family: 'xxx' por Ubuntu + sans-serif;
  Liberar la correspondiente $ffam de _vargem del cliente
  */

  :root{
    --fondo-body: #F0ECEB;
    --fondo-titus: #319ACC;
    --fondo-solina: #D6EAF8;
    --fondo-det1: #BEDEF6;
    --fondo-det2: #E6EEF3;
    --fondo-det3: #CCDBEB;
    --fondo-ipt: #CCDBEB;
    --fondo-sel: transparent;
    --fuente-gral: #000000;
    --fuente-bot: #FFFFFF;
    --fuente-etiq: #000000;
    --fuente-deta: #000000;
    /*
    --fondo-body: #F0ECEB;
    --fondo-titus: #000000;
    --fondo-solina: #FAFAD2;
    --fondo-det1: #BEDEF6;
    --fondo-det2: #E6EEF3;
    --fondo-det3: #CCDBEB;
    --fondo-ipt: #CECECE;
    --fondo-sel: #CECECE;
    --fuente-gral: #000000;
    --fuente-bot: #EABE3F;
    --fuente-etiq: #EABE3F;
    --fuente-deta: #000000;
    */
  }
  
  body{
    font-family: 'Ubuntu', sans-serif;
    color: var(--fuente-gral);
    margin: 0;
    padding: 0;
    background-color: var(--fondo-body);
    background: url(../img/fondo_tj.png) right bottom no-repeat #FBFBFB;
  }
  
  /*  Para el fondo de la función _tittab que pone titulo a los formularios  */
  .tittab{
    background-color: var(--fondo-titus);
    height: 50px;
  }

  /*  Efectos de cambio de colores en detalle. Valor defecto */
  .detmo{
    background-color: transparent;
    color: #000000;
    font-size: 12px;
  }


  /*  Efectos de cambio de colores en detalle. Valor defecto en wdcv5/css/core.css. Opcion 1 para el cambio */
  .det1{
    background-color: var(--fondo-det1);
    color: var(--fuente-deta);
    font-size: 12px;
  }
  
  /*  Efectos de cambio de colores en detalle. Valor defecto en wdcv5/css/core.css. Opcion 2 para el cambio */
  .det2{
    background-color:  var(--fondo-det2);
    color: var(--fuente-deta);
    font-size: 12px;
  }
  
  /*  Efectos de cambio de colores en detalle. Valor defecto en wdcv5/css/core.css. Opcion 3 para el cambio */
  .det3{
    background-color: var(--fondo-det3);
    color: var(--fuente-deta);
    font-size: 12px;
  }
  
  /*  Efectos de cambio de colores en detalle. Valor defecto en wdcv5/css/core.css. Opcion 2 para el cambio */
  .detmo2{
      background-color: #E4E6E7;
      color: var(--fuente-gral);
  }
  
  /* para usar en input, password y textarea con fuente en 16px sin negrilla*/
  ._iptg{
    padding: 12px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px; 
    color: var(--fuente-gral); 
    border: solid 1px var(--fondo-ipt);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--fondo-ipt);
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en input, password y textarea con fuente en 16px con negrilla*/
  ._iptgn{
    padding: 12px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px var(--fondo-ipt);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--fondo-ipt);
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en input, password y textarea con fuente en 14px sin negrilla*/
  ._iptn{
    padding: 10px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px; 
    color: var(--fuente-gral); 
    border: solid 1px var(--fondo-ipt);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--fondo-ipt);
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en input, password y textarea con fuente en 14px con negrilla*/
  ._iptnn{
    padding: 10px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px var(--fondo-ipt);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--fondo-ipt);
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en input, password y textarea con fuente en 12px sin negrilla*/
  ._iptp{
    padding: 8px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px; 
    color: var(--fuente-gral); 
    border: solid 1px var(--fondo-ipt);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--fondo-ipt);
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en input, password y textarea con fuente en 12px con negrilla*/
  ._iptpn{
    padding: 8px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px var(--fondo-ipt);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--fondo-ipt);
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en input, password y textarea con fuente en 10px sin negrilla*/
  ._iptep{
    padding: 6px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px; 
    color: var(--fuente-gral); 
    border: solid 1px var(--fondo-ipt);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--fondo-ipt);
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en input, password y textarea con fuente en 10px con negrilla*/
  ._iptepn{
    padding: 6px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px var(--fondo-ipt);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--fondo-ipt);
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en selects con fuente en 16px sin negrilla*/
  ._selg{
    padding: 12px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    background-color: var(--fondo-sel);
    /*
    para agregar sombra
    -moz-box-shadow: 4px 4px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 4px 4px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en selects con fuente en 16px con negrilla*/
  ._selgn{
    padding: 12px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    background-color: var(--fondo-sel);
    /*
    para agregar sombra
    -moz-box-shadow: 4px 4px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 4px 4px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en selects con fuente en 14px sin negrilla*/
  ._seln{
    padding: 10px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    background-color: var(--fondo-sel);
    /*
    para agregar sombra
    -moz-box-shadow: 4px 4px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 4px 4px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en selects con fuente en 14px con negrilla*/
  ._selnn{
    padding: 10px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    background-color: var(--fondo-sel);
    /*
    para agregar sombra
    -moz-box-shadow: 4px 4px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 4px 4px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en selects con fuente en 12px sin negrilla*/
  ._selp{
    padding: 8px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    background-color: var(--fondo-sel);
    /*
    para agregar sombra
    -moz-box-shadow: 4px 4px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 4px 4px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /* para usar en selects con fuente en 12px con negrilla*/
  ._selpn{
    padding: 8px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    background-color: var(--fondo-sel);
    /*
    para agregar sombra
    -moz-box-shadow: 4px 4px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 4px 4px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /*  Opciones de estilos para checkbox y radios  */
  ._chrag{
    padding: 12px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #CCDBEB;
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  ._chragn{
    padding: 12px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #CCDBEB;
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  ._chran{
    padding: 10px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #CCDBEB;
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  ._chrann{
    padding: 10px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #CCDBEB;
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  ._chrap{
    padding: 8px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #CCDBEB;
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  ._chrapn{
    padding: 8px; 
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px; 
    font-weight: bold; 
    color: var(--fuente-gral); 
    border: solid 1px #CCDBEB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #CCDBEB;
    /*
    para agregar sombra
    -moz-box-shadow: 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
    */
  }
  
  /*  Opciones de estilos para checkbox y radios  */
  
  /* Sombra y borde cliente: 1 px de sobra con 0.2 de opacidad 1 px de radio */
  ._soyboc{
    -moz-box-shadow: 1px 1px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: 1px 1px rgba(0, 0, 0, 0.2);  
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border-radius: 1px;
    background-color: #CCDBEB;
  }
  
   /*  Boton grande, letra de 16px y redondeado 4px  */
  ._botg{
    padding: 16px;
    background-color: var(--fondo-titus);
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    color: var(--fuente-bot);
    border: solid 1px var(--fuente-bot);
    text-transform: uppercase;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
  }

  /*  Boton grande on mouse over  */
  ._botg:hover{
    background-color: var(--fuente-bot);
    color: var(--fondo-titus);
    border: solid 1px var(--fondo-titus);
  }

  /*  Boton normal, letra de 16px y redondeado 3px  */
  ._botn{
    padding: 14px; 
    background-color: var(--fondo-titus);
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px; 
    font-weight: bold; 
    color: var(--fuente-bot); 
    border: solid 1px var(--fuente-bot);
    text-transform: uppercase;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px;
    text-align: center;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
  }
  
  /*  Boton normal on mouse over  */
  ._botn:hover{
    background-color: var(--fuente-bot);
    color: var(--fondo-titus); 
    border: solid 1px var(--fondo-titus);
  }
  
  /*  Boton pequeño, letra de 12px y redondeado 2px  */
  ._botp{
    padding: 12px; 
    background-color: var(--fondo-titus);
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px; 
    font-weight: bold; 
    color: var(--fuente-bot); 
    border: solid 1px var(--fuente-bot);
    text-transform: uppercase;
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px;
    text-align: center;
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); 
    box-shadow: inner 0 0 2px rgba(0, 0, 0, 0.2);
  }
  
  /*  Boton pequeño on mouse over  */
  ._botp:hover{
    background-color: var(--fuente-bot);
    color: var(--fondo-titus); 
    border: solid 1px var(--fondo-titus);
  }

  /*  Boton muy pequeño, letra de 10px y redondeado 2px  */
  ._botmp{
    padding: 10px; 
    background-color: var(--fondo-titus);
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px; 
    font-weight: bold; 
    color: var(--fuente-bot); 
    border: solid 1px var(--fuente-bot);
    text-transform: uppercase;
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px;
    text-align: center;
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); 
    box-shadow: inner 0 0 2px rgba(0, 0, 0, 0.2);
  }
  
  /*  Boton muy pequeño on mouse over  */
  ._botmp:hover{
    background-color: var(--fuente-bot);
    color: var(--fondo-titus); 
    border: solid 1px var(--fondo-titus);
  }

  /*  Estilo para botaf para que herede las propiedades de las variables enviadas */
  ._botaf{
    background-color: var(--fondo-titus);
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold; 
    color: var(--fuente-bot); 
    border: solid 1px var(--fuente-bot);
    text-transform: uppercase;
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px;
    text-align: center;
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); 
    box-shadow: inner 0 0 2px rgba(0, 0, 0, 0.2);
  }
  
  /*  Boton muy pequeño on mouse over  */
  ._botaf:hover{
    background-color: var(--fuente-bot);
    color: var(--fondo-titus); 
    border: solid 1px var(--fondo-titus);
  }

  /*  Estilo de texto del TITTAB Grande */
  .textt{
    font-size: 14px;
    text-transform: uppercase;
    color: var(--fuente-bot);
    padding: 4px 4px 4px 4px;
  }

  /*  Estilo de texto del TITTAB normal */
  .texttn{
    font-size: 12px;
    text-transform: uppercase;
    color: var(--fuente-bot);
    padding: 4px 4px 4px 4px;
  }

  /*  Estilo de texto del TITTAB pequeño */
  .texttp{
    font-size: 10px;
    text-transform: uppercase;
    color: var(--fuente-bot);
    padding: 4px 4px 4px 4px;
  }

  /*  Etiqueta extra grande */
  .etiqeg{
    font-size: 18px;
    text-transform: uppercase;
    color: var(--fuente-etiq);
    padding: 4px 4px 4px 4px;
  }
  
  /*  Etiqueta extra grande sin transformacion  */
  .etiqegs{
    font-size: 18px;
    text-transform: none;
    color: var(--fuente-etiq);
    padding: 4px 4px 4px 4px;
  }
  
  /*  Etiqueta grande */
  .etiqg{
    font-size: 16px;
    text-transform: uppercase;
    color: var(--fuente-etiq);
    padding: 4px 4px 4px 4px;
  }
  
  /*  Etiqueta grande sin transformación */
  .etiqgs{
    font-size: 16px;
    text-transform: none;
    color: var(--fuente-etiq);
    padding: 4px 4px 4px 4px;
  }
  
  /*  Etiqueta normal con transformacion a mayusculas */
  .etiq{
    font-size: 14px;
    text-transform: uppercase;
    color: var(--fuente-etiq);
    padding: 4px 4px 4px 4px;
  }

  /*  Etiqueta normal sin transformacion */
  .etiqs{
    font-size: 14px;
    text-transform: none;
    color: var(--fuente-etiq);
    padding: 4px 4px 4px 4px;
  }

  /*  Etiqueta pequeña con transformacion a mayuscula */
  .etiqp{
    font-size: 12px;
    text-transform: uppercase;
    color: var(--fuente-etiq);
    padding: 3px 3px 3px 3px;
  }

  /*  Etiqueta pequeña sin transformacion */
  .etiqps{
    font-size: 12px;
    text-transform: none;
    color: var(--fuente-etiq);
    padding: 3px 3px 3px 3px;
  }
  
  /*  Etiqueta extra pequeña con transformacion a mayusculas */
  .etiqep{
    font-size: 10px;
    text-transform: uppercase;
    color: var(--fuente-etiq);
    padding: 3px 3px 3px 3px;
  }

  /*  Etiqueta extra pequeña sin transformacion */
  .etiqeps{
    font-size: 10px;
    text-transform: none;
    color: var(--fuente-etiq);
    padding: 3px 3px 3px 3px;
  }

  /*
  Inicio clases para el menú del index del proyecto.
  */
  ._vermen{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 60px;
    text-align: center;
    background-color: transparent;
    transition: width 0.5s;
    /*display: block;*/
  }

  ._opci{
    position: fixed;
    left: 0px;
    top: 0px;
    height: 60px;
    width: 0px;
    text-align: center;
    overflow: hidden;
    background-color: transparent;
    transition: width 0.5s;
    /*border: 1px solid #000000;*/
  }

  ._menu{
    position: fixed;
    left: 0px;
    top: 60px;
    /*  width: 0px; */
    text-align: center;
    overflow: hidden;
    background-color: transparent;
    transition: width 0.5s;
    /*display: none;*/
  }

  ._subm{
    position: fixed;
    /*  left: 95px; */
    width: 0px;
    overflow: hidden;
    background-color: transparent;
    transition: width 0.5s;
    /*display: none;*/
  }
  
  ._almi{
    position: fixed;
    right: 0px;
    bottom: 61px;
    width: 0px;
    height: 24px;
    text-align: center;
    overflow: hidden;
    background-color: transparent;
    transition: width 1s;
    /*display: none;*/
  }

  ._vemein{
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 100px;
    height: 60px;
    text-align: center;
    background-color: transparent;
    transition: width 0.5s;
    /*display: block;*/
  }

  ._mein{
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 0px;
    height: 60px;
    text-align: center;
    overflow: hidden;
    background-color: transparent;
    transition: width 0.5s;
  }

  ._gestmein{
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 0px;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
    transition: height 0.3s;
  }

  ._alch{
    position: fixed;
    right: 0px;
    text-align: center;
    overflow: hidden;
    background-color: transparent;
    transition: width 1s;
    /*border: 1px solid #000000;*/
  }

  /* Tags para mostrar alertas */
  ._tagale{ 
    position: fixed;
    right: 0px;
    text-align: center;
    overflow: hidden;
    background-color: transparent;
    transition: width 1s;
    /*border: 1px solid #000000;*/
  }

  .titgrid{
    background-color: var(--fondo-titus);
    padding: 8px;
    color: var(--fuente-bot);
    font-size: 10px;
    text-transform: uppercase;
  }

  /*  SOLapa ACTiva */
  .solact{
    padding: 10px;
    background-color: var(--fondo-titus);
    color: var(--fuente-bot);
    height: 14px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
  }

  /*  SOLapa INActiva */
  .solina{
    padding: 10px;
    background-color: var(--fondo-solina);
    color: var(--fondo-titus);
    height: 10px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
  }