/* El conciliador. Usa la base de gps.css (controles, tabla, gráficas) y
   agrega lo suyo. */

#tabla.tabla-conciliacion { min-width: 520px; }
#t-tipos, #t-muestra, #t-archivo { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12.5px; margin-top: 8px; }
#t-tipos th, #t-muestra th, #t-archivo th { font-weight: 400; color: var(--suave); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde); font-size: 11.5px; }
#t-tipos td, #t-muestra td, #t-archivo td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
#t-tipos td:first-child, #t-archivo td:first-child { font-family: var(--serif); font-size: 15px; color: var(--texto); }
#t-tipos td:nth-child(2), #t-tipos td:nth-child(3), #t-tipos th:nth-child(2), #t-tipos th:nth-child(3) { text-align: right; white-space: nowrap; }
#t-muestra td.mal, #t-archivo td.mal { color: var(--rojo); }
#t-muestra td.ojo { color: var(--ambar); }
#t-tipos tr:last-child td, #t-muestra tr:last-child td, #t-archivo tr:last-child td { border-bottom: 0; }
.tabla-ancha { overflow-x: auto; }

/* las dos configuraciones */
.linea.serie-a { stroke: var(--azul); }
.linea.serie-b { stroke: var(--verde-vivo); stroke-dasharray: 6 4; }
.leyenda .serie-a { color: var(--azul); }
.leyenda .serie-b { color: var(--verde-vivo); }
.blanco { fill: transparent; }
.blanco:hover { fill: var(--azul); opacity: .25; }
.grafica text.unidad { fill: var(--tenue); }

/* la antigüedad */
.barra-edad { fill: var(--suave); opacity: .8; }
.barra-edad.por-vencer { fill: var(--rojo); opacity: .9; }
.leyenda .edad { color: var(--suave); }
.leyenda .por-vencer { color: var(--rojo); }

/* tus archivos */
.archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; }
.archivos input[type="file"] { font-family: var(--mono); font-size: 12.5px; color: var(--suave); margin-top: 6px; width: 100%; }
.texto-res { font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; color: var(--suave); }

/* en el teléfono: cada renglón con sus valores debajo, cada uno con su etiqueta */
@media (max-width: 620px) {
  #tabla.tabla-conciliacion { min-width: 0; }
  #tabla.tabla-conciliacion thead { display: none; }
  #tabla.tabla-conciliacion tbody { display: block; }
  #tabla.tabla-conciliacion tbody tr { grid-template-columns: repeat(2, 1fr); }
  #t-tipos thead, #t-muestra thead, #t-archivo thead { display: none; }
  #t-tipos tbody, #t-muestra tbody, #t-archivo tbody { display: block; }
  #t-tipos tr, #t-muestra tr, #t-archivo tr { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--borde); padding: 6px 0; }
  #t-tipos td:first-child, #t-muestra td:first-child, #t-archivo td:first-child { grid-column: 1 / -1; }
  #t-muestra td:nth-child(2) { grid-column: 1 / -1; }
  #t-tipos td, #t-muestra td, #t-archivo td { border-bottom: 0; padding: 3px 4px; font-size: 12px; text-align: left !important; }
  #t-tipos td[data-col]::before, #t-muestra td[data-col]::before, #t-archivo td[data-col]::before, #tabla.tabla-conciliacion td[data-col]::before {
    content: attr(data-col); display: block; font-size: 9.5px; color: var(--tenue); font-weight: 400; margin-bottom: 2px;
  }
}

/* los casos de muestra: que el texto se acomode en vez de salirse */
#t-muestra td { white-space: normal; }
#t-muestra td:nth-child(2) { font-family: var(--serif); font-size: 14.5px; color: var(--texto); min-width: 12em; }