
body {
    font-family: "Barlow Semi Condensed", "Arial Narrow", "Arial", sans-serif;
    font-size: 15px;
    margin: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

form {
    margin-bottom: 15px;
    line-height: 1.8;
}

@media screen and (min-width: 500px) {
.formulario {
    padding: 0 0 0 20%;
}
}

input, select, textarea {
    margin-left: 5px;
    margin-bottom: 5px;
    padding-left: 4px;
    width: 231px;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

input[type="checkbox"], input[type="radio"], input[type="submit"] {
    width: auto;
}

table {
    border-collapse: collapse;
}

th {
    background-color: #175ebb;
    color: white;
    padding: 5px 7px;
    }
    
th a {color: #fff;}

td {
    padding: 3px 7px;
}

th, tr, td {
  border: solid 1px #e0e0e0;
}

.col-izq td:nth-child(1) {text-align: left; padding-left: 10px;}
.col-der td:nth-child(2) {text-align: right; padding-right: 10px;}

.tabla2 {
    width: 100%;
}

.tabla2 tr {
    border: 0;
    border-bottom: 1px solid #d4d4d4;
}
.tabla2 td {
    border: 0;
    padding-left: 10px;
}

.vista-datos {
    font-size: 15px;
    }
    
.centrar-pag {
    display: flex;
    align-items: center;
    justify-content: center;
}
    
.centrar-popup {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 350px) {
input, textarea {
    max-width: 280px;
    }
}

.texto-largo {
    max-width: 300px;
    white-space: nowrap; /* Evitar que el texto se divida en varias líneas */
    overflow: hidden; /* Ocultar el texto que se desborda */
    text-overflow: ellipsis;
}

h1 {font-size: 24px; font-weight: 600; line-height: 1.2; margin: 7px;}
h2, h3, h4, h5 {font-weight: 600; line-height: 1.2; margin: 5px;}

ul, ol {margin: 5px;}

p {margin: 5px 0;}

@media screen and (max-width: 800px) {
    .texto-celular {
        p, span, li, div, form { font-size: 14px !important; line-height: 1.31 !important;}
        h1 {font-size: 23px !important; line-height: 1.3 !important;}
        h2 {font-size: 18px !important; line-height: 1.2 !important;}
        h3 {font-size: 17px !important; line-height: 1.1 !important;}
        h4 {font-size: 14px !important; line-height: 1 !important;}
    }
}

@media screen and (max-width: 800px) {
    .texto-celular2 {
        p, span, li, td, form { font-size: 12.5px; line-height: 1;}
        h1 {font-size: 20px; line-height: 1.3; margin: 0;}
        h2 {font-size: 18px; line-height: 1.2; margin: 0;}
        h3, legend {font-size: 16px; line-height: 1.1; margin: 0;}
        h4 {font-size: 13px; line-height: 1.1; margin: 0;}
        td { font-size: 12.5px; line-height: 0.95; margin: 0;}
    }
}

td a {line-height: 1.4;}

/* Estilos para filas

tr:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para filas pares
}
tr:nth-child(odd) {
    background-color: #ffffff; /* Color de fondo para filas impares
} */

.sombra-tabla tr:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para filas pares */
}
.sombra-tabla tr:nth-child(odd) {
    background-color: #ffffff; /* Color de fondo para filas impares */
}

a {
    font-weight: 600;
    text-decoration: none;
    color: #1063a7;
}

.ocultar {display: none;}

.izquierda {float: left;}
.derecha {float: right;}

.marco {
    padding: 5px 15px;
    border: 2px solid #000;
}

.resaltar {
  text-decoration: underline;
}

fieldset {
    border: 2px solid #000;
    background: #f9f9f9;
}

@media print {
    .ocultar-imprimir {
        display: none;
    }
    .mostrar-imprimir {
        display: inline-block;
    }
}

.recuadro {
    border: 2px solid #000;
    padding: 10px;
}

/* Filas y Columnas */

.fila {
    display: flex;
}
@media screen and (max-width: 800px) {
.fila {
    display: block;
} }

.columna {
    flex: 1; /* Crecen para llenar el contenedor */
}

    .col {flex-basis: auto;}
    .col-10 {flex-basis: 10%; padding: 0 10px;}
    .col-20 {flex-basis: 20%; padding: 0 10px;}
    .col-25 {flex-basis: 25%; padding: 0 10px;}
    .col-30 {flex-basis: 30%; padding: 0 10px;}
    .col-40 {flex-basis: 40%; padding: 0 10px;}
    .col-45 {flex-basis: 45%; padding: 0 10px;}
    .col-50 {flex-basis: 50%; padding: 0 10px;}
    .col-60 {flex-basis: 60%; padding: 0 10px;}
    .col-70 {flex-basis: 70%; padding: 0 10px;}
