/* Tableros v2 (docs/especificaciones/tableros/, modo noche v8, 28/09/2026): pantallas de dirección
   (maqueta 2A) y Administración (3A), el detalle al tocar (2C), la ficha del residente (2D) y el
   control al aprobar (4). Solo tokens de tokens.css (TABLEROS_V2 §1.5: rojo = --avance-negativo,
   amarillo = --amarillo-acento, bien = --azul-marca). Se carga con estatico() desde base.html. */

.tablero2 { display: flex; flex-direction: column; gap: 16px; }
.tablero2__encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tablero2__encabezado .encabezado-pagina { padding-bottom: 0; }
.tablero2__herramientas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tablero2__filtro { position: relative; }
.tablero2__filtro-boton {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
    padding: 0 14px; border: 1px solid var(--linea); border-radius: var(--radio-campo); background: var(--blanco);
    color: var(--azul-marca); font-weight: 700; font-size: 13px;
}
.tablero2__filtro-boton::-webkit-details-marker { display: none; }
.tablero2__filtro-lista {
    position: absolute; right: 0; z-index: 5; margin: 4px 0 0; padding: 6px 0; list-style: none; min-width: 220px;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-campo);
}
.tablero2__filtro-lista a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--texto); text-decoration: none; font-size: 13px; }
.tablero2__filtro-lista a[aria-current] { color: var(--azul-marca); font-weight: 700; }
.tablero2__excel {
    display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 16px;
    border: 1px solid var(--azul-marca); border-radius: var(--radio-campo); color: var(--azul-marca);
    font-weight: 600; font-size: 13px; text-decoration: none; background: var(--blanco);
}

.tablero2__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tablero2__tarjeta {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px; min-width: 0; container-type: inline-size;
}
.tablero2__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tablero2__rotulo { margin: 0; font-size: 12px; color: var(--secundario); font-weight: 700; }
.tablero2__rotulo a { color: inherit; text-decoration: none; }
.tablero2__rotulo a:hover { color: var(--azul-marca); text-decoration: underline; }
.tablero2__explica { margin: 0; font-size: 12px; color: var(--terciario); line-height: 1.35; }
.tablero2__valor { font-family: var(--fuente-titulos); font-weight: 600; font-size: 24px; color: var(--azul-marca); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@supports (container-type: inline-size) {
    .tablero2__valor { font-size: 24px; white-space: nowrap; overflow-wrap: normal; }
}
.tablero2__valor--rojo { color: var(--avance-negativo); }
.tablero2__sub { margin: 0; font-size: 13px; color: var(--secundario-movil-carga); line-height: 1.4; }
.tablero2__renglones { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--separador-fila); display: flex; flex-direction: column; }
.tablero2__renglon { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12px; }
.tablero2__renglon-texto { color: var(--secundario-movil-carga); min-width: 0; overflow-wrap: anywhere; }
.tablero2__renglon-valor { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto); text-align: right; }
.tablero2__renglon-valor--rojo { color: var(--avance-negativo); }
.tablero2__renglon-valor--amarillo { color: var(--avance-negativo); }
.tablero2__pie { margin-top: auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--separador-fila); padding-top: 8px; }
.tablero2__acciones { display: flex; flex-wrap: wrap; gap: 0 14px; }
.tablero2__accion-form { margin: 0; display: inline; }
.tablero2__accion {
    display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--celeste-marca);
    text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.tablero2__dato-al { font-size: 12px; color: var(--terciario); }
.tablero2__vacio { margin: 0; font-size: 13px; color: var(--terciario); }
.tablero2__leyenda { margin: 0; padding-top: 10px; font-size: 12px; color: var(--secundario-movil-carga); }
.tablero2__leyenda--bajo { color: var(--avance-negativo); }
.tablero2__leyenda--aceptable { color: var(--aviso-texto); }
.tablero2__leyenda--meta { color: var(--azul-marca); }
.tablero2__leyenda--sobresaliente { color: var(--celeste-marca); }

/* 8 · Residentes: tabla en la computadora, tarjetas en el celular. */
.tablero2__calibracion { padding: 8px 12px; border-radius: var(--radio-campo); background: var(--fondo-resumen); font-size: 12px; color: var(--secundario-movil-carga); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tablero2__calibracion strong { color: var(--azul-marca); }
.tablero2__tabla { display: flex; flex-direction: column; }
.tablero2__tabla-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--separador-fila); font-size: 13px; }
.tablero2__tabla-fila--titulos { display: none; }
.tablero2__tabla-fila > [data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: 12px; color: var(--terciario); margin-bottom: 2px; }
.tablero2__persona { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1px; }
.tablero2__persona-nombre { font-weight: 700; color: var(--texto); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; } /* v23i · IC.7: no se estira a todo el ancho */
.tablero2__persona-obras { font-size: 12px; color: var(--terciario); }
.tablero2__medicion { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tablero2__medicion-valor { font-variant-numeric: tabular-nums; font-weight: 600; }
.tablero2__nivel { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--radio-etiqueta); }
.tablero2__nivel--bajo { background: var(--nivel-bajo-fondo); color: var(--avance-negativo); }
.tablero2__nivel--aceptable { background: var(--aviso-fondo); color: var(--aviso-texto); }
.tablero2__nivel--meta { background: var(--fondo-resumen); color: var(--azul-marca); }
.tablero2__nivel--sobresaliente { background: var(--nivel-sobresaliente-fondo); color: var(--celeste-marca); }
.tablero2__reconocimientos { font-size: 12px; color: var(--secundario-movil-carga); }

/* 6 · Semáforo. */
.tablero2__obra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--separador-fila); align-items: center; }
.tablero2__obra-nombre { font-weight: 700; color: var(--azul-marca); font-size: 13px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.tablero2__estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--azul-marca); }
.tablero2__estado--rojo { color: var(--avance-negativo); }
.tablero2__estado--amarillo { color: var(--aviso-texto); }
.tablero2__estado .tablero2__punto { width: var(--tamano-punto); height: var(--tamano-punto); }
.tablero2__motivos { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--texto); line-height: 1.4; }
.tablero2__motivos li::before { content: "· "; }
.tablero2__sin-motivos { color: var(--terciario); }
.tablero2__areas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.tablero2__area { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--secundario); }
.tablero2__area .tablero2__punto { width: var(--tamano-punto); height: var(--tamano-punto); }
.tablero2__mas { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--secundario-movil-carga); }
.tablero2__mas p { margin: 0; }

/* Detalle al tocar (2C) y ficha del residente (2D). */
.tablero2__volver { font-size: 13px; font-weight: 600; color: var(--celeste-marca); display: inline-flex; align-items: center; min-height: 44px; }
.tablero2__casos { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablero2__casos th { text-align: left; font-size: 12px; color: var(--terciario); font-weight: 600; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--linea); }
.tablero2__casos td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--separador-fila); vertical-align: top; }
.tablero2__caso-detalle { display: block; font-size: 12px; color: var(--terciario); }
.tablero2__caso-valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tablero2__caso-valor--rojo { color: var(--avance-negativo); }
.tablero2__caso-valor--amarillo { color: var(--avance-negativo); }
.tablero2__notas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tablero2__notas h3 { margin: 0 0 4px; font-size: 12px; color: var(--secundario); }
.tablero2__notas p { margin: 0; font-size: 13px; color: var(--secundario-movil-carga); }
.tablero2__semanas { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--separador-fila); }
.tablero2__semanas li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12px; color: var(--secundario-movil-carga); }
.tablero2__semanas strong { color: var(--texto); }
.tablero2__condicion { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--separador-fila); font-size: 13px; }
.tablero2__semanas li strong { text-align: right; overflow-wrap: anywhere; min-width: 0; }
/* Decisión 17: el residente y el analista ven los guaraníes del destaque solo en la computadora. */
.tablero2__solo-computadora { display: none; }
@media (min-width: 900px) { .tablero2__solo-computadora { display: inline; } }

@media (max-width: 899px) {
    /* La tabla del detalle en el celular: una tarjeta por caso, sin deslizar de costado. */
    .tablero2__casos thead { display: none; }
    .tablero2__casos, .tablero2__casos tbody, .tablero2__casos tr, .tablero2__casos td { display: block; width: 100%; box-sizing: border-box; }
    .tablero2__casos tr { padding: 10px 0; border-bottom: 1px solid var(--separador-fila); }
    .tablero2__casos td { border: 0; padding: 2px 0; }
    .tablero2__casos td[data-etiqueta]::before { content: attr(data-etiqueta) " · "; color: var(--terciario); font-size: 12px; }
}

@media (min-width: 900px) {
    .tablero2__grilla--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tablero2__grilla--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tablero2__obra { grid-template-columns: 1.3fr 1.1fr 3.8fr 1.3fr; gap: 16px; }
    .tablero2__motivos, .tablero2__areas { grid-column: auto; }
    .tablero2__areas { justify-content: flex-end; }
    .tablero2__notas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .tablero2__grilla--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tablero2__tabla-fila { grid-template-columns: 1.3fr 1.2fr 1.2fr 1.2fr 1.2fr 1fr; align-items: start; }
    .tablero2__tabla-fila--titulos { display: grid; font-size: 12px; color: var(--terciario); padding: 10px 0 8px; border-bottom: 1px solid var(--linea); }
    .tablero2__tabla-fila > [data-etiqueta]::before { display: none; }
    .tablero2__persona { grid-column: auto; }
}
.tablero2__excel--principal { background: var(--azul-marca); color: var(--blanco); }
.tablero2__reconocer { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 10px; }
.tablero2__reconocer input[type="date"] { min-height: 44px; }
.tablero2__faltan summary { list-style: none; cursor: pointer; }
.tablero2__faltan summary::-webkit-details-marker { display: none; }
.tablero2__opcion-regimen { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; }

/* Administración (3A): el recorrido del certificado. */
.tablero2__etapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tablero2__etapa { border: 1px solid var(--linea); border-radius: var(--radio-campo); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tablero2__etapa--lenta { border-color: var(--amarillo-acento); background: var(--aviso-fondo); }
.tablero2__etapa-nombre { font-size: 13px; font-weight: 700; color: var(--texto); }
.tablero2__etapa-valor { font-family: var(--fuente-titulos); font-size: 20px; font-weight: 600; color: var(--azul-marca); }
.tablero2__etapa--lenta .tablero2__etapa-valor { color: var(--avance-negativo); }
.tablero2__etapa-hoy { font-size: 12px; color: var(--secundario-movil-carga); }
.tablero2__renglon--mas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.tablero2__renglon--mas .tablero2__caso-detalle { grid-column: 1 / -1; }
@media (min-width: 1100px) {
    .tablero2__grilla--admin-a { grid-template-columns: 3fr 1fr; }
    .tablero2__grilla--admin-c { grid-template-columns: 1fr 1fr 2fr; }
    .tablero2__etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Control al aprobar (maqueta 4). */
.control-aprobar { margin: 16px 0; }
.control-aprobar__columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.control-aprobar__bloque { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.control-aprobar__barra { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.control-aprobar__aviso { margin: 4px 0 0; padding: 8px 12px; border-radius: var(--radio-campo); border: 1px solid var(--linea); font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.control-aprobar__aviso--amarillo { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso-texto); }
/* Ensayo v10, V2: el rojo se veía igual que el amarillo (crema con punto marrón): borde y punto en el
   rojo de alerta, fondo del nivel «Bajo el mínimo» (sin colores nuevos: tokens existentes). */
.control-aprobar__aviso--rojo { background: var(--nivel-bajo-fondo); border-color: var(--rojo-alerta); border-left-width: 4px; color: var(--texto); }
.control-aprobar__aviso--rojo .tablero2__punto--rojo { background: var(--rojo-alerta); }
.control-aprobar__en-rojo { color: var(--rojo-alerta); white-space: nowrap; }
.control-aprobar__nota { margin: 0; font-size: 13px; color: var(--secundario-movil-carga); }
.certificado__motivo-aprobar { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.certificado__motivo-aprobar input { min-height: 44px; }
@media (min-width: 900px) {
    .control-aprobar__columnas { grid-template-columns: 1.6fr 1fr 1fr; }
}

/* Revisión de capturas (T9.2): en la computadora los tableros usan el ancho de la maqueta (hasta
   1360 px), más que el resto de la app; los montos de cada renglón no se cortan. */
@media (min-width: 1100px) {
    .tablero2 { --ancho-tablero: min(1360px, calc(100vw - 80px)); width: var(--ancho-tablero); margin-inline: calc((100% - var(--ancho-tablero)) / 2); }
    .tablero2__renglon-valor { white-space: nowrap; }
}
@media (max-width: 899px) {
    .tablero2__casos td.tablero2__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
}
/* T9: el título que abre el detalle se toca con el dedo (44 px de alto útil sin cambiar el diseño). */
/* Mejora 8 (revisión de usabilidad, ensayo v10): con padding de 14 px medía 43 px; alto mínimo de
   44 px, con el mismo lugar ocupado en la tarjeta (el margen negativo lo compensa). */
.tablero2__rotulo a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0; margin: -15px 0; }

/* Marca Consta (T10.3): Configuración › La empresa › Marca. */