@use 'mixins' as m;

:root {
    --fuenteHeading: 'PT Sans', sans-serif;
    --fuenteParrafos: 'Arial Narrow, Open Sans', sans-serif;
    --fuentemenuoclit38: 'Arial, Open Sans', sans-serif;

    --primario: #784d3c;
    --gris: #e1e1e1;
    --blanco: #ffffff;
    --negro: #000000;
    --titular: #008040;
    --navajo: #ffdead;
    --marron: #804000;
    --rojo: #ff0000;
    --verde: #008040;
    --azul: #004080;
    --silver: #c0c0c0;
    --ivory: #ivory; 
    --color-tr: #f4f6f7;

}

html {
    box-sizing: border-box;
    font-size: 62.5%;  /* esto es para que 1rem sea igual a 10px */

}
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    line-height: 2;  /*  al ser un blog se recomieda que el interlineado siempre sea 2 para facilitar su lectura  */
}

    /**  GLOBALES  **/
.contenedor {
    max-width: 200rem;
    width: 95%;
    margin: 0 auto;    /* para centrar el contenido horizontalmente */


}


a {
    text-decoration: none;
}

h1, h2, h3, h4 {
        font-family: var(--fuenteHeading);
        line-height: 1.2;
}

h1 {
    font-size: 3.5rem;
}

h2 {
 //   font-size: 3rem;
    color: var(--marron);   
}

h3 {
    color: var(--titular);
    text-align: center;
    font-weight: bold;
    font-size: 2.5rem;
}

h4 {
    font-size: 2.0rem;
}

img {
    max-width: 100%;

}

.logo_empresa {
    width: 126px;
    height: 50px;
    align: left;

}

.titulo_pagina {
    color: var(--titular);
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
}


/*  Titulo de oficina de atencion ventanilla	*/
.titulo_oficina {          
    color: var(--negro);
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}


.titulo-opcion {
    color: var(--negro);
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}


/* titulos para mostrar cliente a quien se le esta realizando una operacion    */
.titulo-cliente {    
    color: var(--titular);
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

/*- datos del cliente a quien se le este realizando una operacion   */
.datocliente {      
    color: var(--negro);
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
}



/*- otros datos en otras opciones que van como titulos  */
.otros-datos {      
    color: var(--negro);
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
}


/*  Titulo en ventanilla codigo operacion  */
.titulo_opciones {           
    color: var(--titular);
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
}


.titulo_seguridad {
    color: var(--titular);
    text-align: center;
    font-size: 2rem;
}



.otros_titulo {
    color: var(--titular);
    text-align: right;
    font-size: 1.5rem;
    font-weight: bold;
}



.otros_titulol {
    color: var(--negro);
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
}


.otros_tituloc {
    color: var(--negro);
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}




.titulo_oclit38 {
    color: var(--marron);
    text-align: right;
    font-size: 1.5rem;
    font-weight: bold;
}



.titulo_oclit38_datos {
    color: var(--negro);
    text-align: right;
    font-size: 1.75rem;
    font-weight: bold;
}


.alerta_oclit38 {
    color: var(--rojo);
    text-align: right;
    font-size: 1.5rem;
    font-weight: bold;
}

.menu_oclit38 {
    color: var(--marron);
    font-family: var(--fuentemenuoclit38);
    text-align: left;
    font-size: 1.050rem;
    font-weight: bold;
}






/*  Para mostrar las constantes de textos en los formularios que no esten en tablas */
.texto_constantes {    
    text-align: left;
    font-family: var(--fuenteParrafos);
    font-size: 1.5rem;
    color: var(--negro);

}


.texto_constantes-right {
    text-align: right;
    font-family: var(--fuenteParrafos);
    font-size: 1.5rem;
    color: var(--negro);

}




.texto_constantes_c {
    text-align: center;
    font-family: var(--fuenteParrafos);
    font-size: 1.5rem;
    color: var(--marron);

}


.mensaje-inicial {
    text-align: center;
    font-family: var(--fuenteParrafos);
    font-size: 3rem;
    color: var(--marron);

}

.seguridad_constantes {
    text-align: right;
    font-size: 2rem;
    color: var(--marron);
    font-weight: bold;
}

.input_numero {
    text-align: right;
}

    /**  FIN GLOBALES  **/

    /**  UTILIDADES  **/
.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.centrar-texto {
    text-align: center;
}

    /**  FIN UTILIDADES  **/

    /**  HEADER  **/
    .webp .header {
        background-image: url(../img/banner.webp);

    }
    .no-webp .heades {
        background-image: url(../img/banner.jpg);

    }

.li {
    text-align: left;
}

.header {
    height: 60rem;
    background-size: cover;   /* para que tome todo el espacio  */
    background-repeat: no-repeat;
 //   background-position: center center;   /* permite centrar la imagen el primer center es horizontal y el segubdo vertical  */


}
.header__texto {
    text-align: center;
    color: var(--blanco);
    margin-top: 5rem;
}



.tablas-titulo-00-c {
     //color: var(--blanco);
     //background-color: var(--verde);
     text-align: center;
     font-family: var(--fuenteParrafos);
     font-size: 2rem;
     font-weight: bold;
     text-transform: uppercase;

}


.tablas-titulo-00 {
     //color: var(--blanco);
     //background-color: var(--verde);
     text-align: left;
     font-family: var(--fuenteParrafos);
     font-size: 1.5rem;
     font-weight: bold;
     text-transform: uppercase;

}



.tablas-titulo-01 {
     color: var(--blanco);
     background-color: var(--verde);
     text-align: center;
     font-family: var(--fuenteParrafos);
     font-size: 1.5rem;
     font-weight: bold;
     text-transform: uppercase;

}




.tablas-titulo-01-l {
     color: var(--blanco);
     background-color: var(--verde);
     text-align: left;
     font-family: var(--fuenteParrafos);
     font-size: 1.5rem;
     font-weight: bold;
     text-transform: uppercase;

}




.tablas-titulo-01-r {
     color: var(--blanco);
     background-color: var(--verde);
     text-align: right;
     font-family: var(--fuenteParrafos);
     font-size: 1.5rem;
     font-weight: bold;
     text-transform: uppercase;

}


.tablas-titulo-02 {
     color: var(--verde);
     background-color: var(--navajo);
     text-align: center;
     font-family: var(--fuenteParrafos);
     font-size: 1.4rem;
     font-weight: bold;
     text-transform: uppercase;
}

.tablas-titulo-02-l {
     color: var(--verde);
     background-color: var(--navajo);
     text-align: left;
     font-family: var(--fuenteParrafos);
     font-size: 1.4rem;
     font-weight: bold;
     text-transform: uppercase;
}

.tablas-titulo-02-r {
     color: var(--verde);
     background-color: var(--navajo);
     text-align: right;
     font-family: var(--fuenteParrafos);
     font-size: 1.4rem;
     font-weight: bold;
     text-transform: uppercase;
}

.tablas-contenido-01 {        // Para mostrar textos
     color: var(--negro);
     font-family: var(--fuenteParrafos);
     font-size: 1.3rem;
     text-align: left;

}

.personas-lavado {
     padding: 1rem 1rem;

}

/* Para mostrar numeros   */
.tablas-contenido-01n {       
     color: var(--negro);
     font-family: var(--fuenteParrafos);
     font-size: 1.3rem;
     text-align: right;

}


/* Para mostrar otros a la izquierda   */
.tablas-contenido-01c {       
     color: var(--negro);
     font-family: var(--fuenteParrafos);
     font-size: 1.3rem;
     text-align: left;

}


/* Para mostrar otros centrado    */
.tablas-contenido-01-c {       
     color: var(--negro);
     font-family: var(--fuenteParrafos);
     font-size: 1.3rem;
     text-align: center;

}

/* Para mostrar texto justificado    */
.tablas-contenido-01-j {       
     color: var(--negro);
     font-family: var(--fuenteParrafos);
     font-size: 1.3rem;
     text-align: justify;

}

.contenedor {
     width: 100%;
     max-width: auto;
     margin: auto;

}

/* para controlar el font y su tamano en los montis de las operaciones a realizar */
.dato-entradan {
     color: var(--negro);
     font-family: var(--fuenteParrafos);    
     font-size: 20px;
     text-align: right;
 
}

.table {
     width: 100%;
     border: 1px solid #ccc;
     border-collapse: collpse;
     margin: 0;
     padding: 0;
     table-layout: auto;
}

.table caption {
     font-family: var(--fuenteParrafos);
     font-size: 1.5rem;
     font-weight: bold;
     text-transform: uppercase;

}

.table tbody tr {
 //    background-color: var(--gris);
     border: 1px solid var(--negro);

}

.tabless tbody td {
 //    background-color: var(--gris);
     border: 1px solid var(--negro);

}


 //  Para sombrear la fila donde este el mouse

//.table tbody tr:hover {            
//     background-color: rgba(0, 0, 0, 0.2); 
//     cursor: pointer;
//     
//}

 //  Para sombrear la fila donde este el mouse

//.table tbody td:hover {            
//     background-color: rgba(0, 0, 0, 0.3); 
//     cursor: pointer;
//     
//}




//  Para sobrear una fila si otra no de una tabla

//.table td:nth-child(even) {  
//       background-color: var(--gris);
//
//}



.alerta-seguridad {
    color: var(--rojo);
    text-align: center;
    font-size: 1rem;
}


.advertencia {
    color: var(--rojo);
    text-align: center;
    font-size: 3rem;
}




.seccion {
     padding: 1rem 2rem;
    text-align: center;

}


.table-top {
    vertical-align: top;

}


.titulo_pagina {
    color: var(--titular);
}

    /**  FIN HEADER  **/

.boton {
    display: block;
    color: var(--negro);
    font-family: var(--fuenteHeading);
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.3rem;
//    text-transform: uppercase;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-right: 1rem;
    border: yes;
    style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; FONT-FAMILY: Arial; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #004080; FONT-SIZE: 14px; BORDER-TOP: 0px; BORDER-RIGHT: 0p x"
}


.boton-oclit38 {
    display: block;
    color: var(--negro);
    font-family: var(--fuenteHeading);
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.3rem;
//    text-transform: uppercase;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-right: 1rem;
    border: yes;
}




/* Botones de atencion al publico en ventanilla   */
.boton-operaciones {	
    display: block;
    color: var(--negro);
    font-family: var(--fuenteHeading);
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.3rem;
/*  text-transform: uppercase;  */
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-right: 1rem;
    border: yes;
}


/* Boton Aceptar de atencion al publico en ventanilla   */
.boton-operaciones-aceptar {	
    color: var(--negro);
    font-family: var(--fuenteHeading);
}


.boton:hover {
    cursor: pointer;
}

.boton-firma:hover {
    cursor: pointer;
}



.boton-operaciones:hover {
    cursor: pointer;
}

@media (min-width: 768px) {
    .boton {
        display: inline-block;
       
    }
    .boton-operaciones {
        display: inline-block;
       
    }

}


.mensaje_error {
    color: var(--rojo);
    font-weight: bold;
    text-align: center;
    font-size: 2rem;

}

.datos-obligatorios {
    color: var(--rojo);
    font-weight: bold;
    text-align: center;
    font-size: 2.5rem;

}

/* para hacer responsivas las tablas   */
@medias screen and (max-width: 768px) {   
      .table {
               border: 0px;
                      
      }
      .table caption {
               font-size: 22px; 

      }
      .table thead {
               display: none;
      }
      .table tbody tr {
               margin-botton: 8px;
               border-botton: 15rem solid var(--red);
               background-color: var(--color-tr);
               display: block;
      }
      .table th, .table td {
               font-size: 12px;

      }
      .table td {
               display: block;
               background-color: var(--color-tr);
               border-botton: 15rem solid var(--red);
               text-align: right;
               
      }
      .table td:last-child {
               border-botton: 0px;
      }
      .table td::before {
               content: attr(data-label);
               font-weight: bold;
               text-transform: uppercase;
               float: left;
      }
     

      .seccion {
               display: block;
      }

      .boton {
               display: block;

       }
      .boton-operaciones {
               display: block;

       }

      .container-tablas {
  		display: flex;
  		flex-wrap: wrap;
  		justify-content: space-between;
}
       }
}

@media (orientation: landscape) {
  <!-- Aquí van todos los estilos CSS -->
}