/* Parte 9 (modo noche v3, 27/09/2026): tableros internos según la maqueta p9-1 y el tablero para
   el cliente (p9-2, apagado). Solo tokens de tokens.css; se carga con estatico('css/tableros.css')
   desde base.html, como las demás hojas. */

.tableros__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tableros__cabecera .encabezado-pagina { padding-bottom: 0; }
.tableros__selector { display: flex; flex-wrap: wrap; gap: 8px; }
.tableros__opcion {
    display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 14px;
    border-radius: var(--radio-etiqueta); border: 1px solid var(--linea); color: var(--secundario-movil-carga);
    font-size: 13px; text-decoration: none; background: var(--blanco);
}
.tableros__opcion, .tableros__migas .boton-enlace, .encabezado-pagina__titulo { overflow-wrap: anywhere; white-space: normal; }
.tableros__opcion:hover { color: var(--azul-marca); border-color: var(--azul-marca); }
.tableros__opcion--activa { border-color: var(--azul-marca); color: var(--azul-marca); font-weight: 600; }
.tableros__pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

.tableros__grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.tableros__tarjeta {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.tableros__tarjeta--ancha { grid-column: span 2; }
.tableros__tarjeta--completa { grid-column: 1 / -1; }
.tableros__titulo {
    margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--secundario); font-weight: 600; display: flex; justify-content: space-between;
    align-items: center; gap: 8px;
}
.tableros__nota { margin: 0; font-size: 12px; color: var(--secundario-movil-carga); }
.tableros__vacio { margin: 0; font-size: 13px; color: var(--terciario); }
.tableros__exportar { font-size: 12px; text-transform: none; }

/* Barras verticales (cumplimiento por semana). */
.tableros__columnas { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 10px; position: relative; }
.tableros__columna { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.tableros__columna-valor { font-size: 13px; color: var(--secundario-movil-carga); }
.tableros__columna-barra { width: 100%; border-radius: 2px 2px 0 0; background: var(--sin-avance); min-height: 2px; }
.tableros__columna-barra--alta { background: var(--azul-marca); }
.tableros__columna-barra--media { background: var(--celeste-marca); }
.tableros__columna-rotulo { font-size: 12px; color: var(--terciario); }

/* Barras horizontales (causas, antigüedad, rubros). */
.tableros__fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) minmax(2.5em, max-content); align-items: center; gap: 10px; font-size: 12px; }
.tableros__pista { height: 8px; background: var(--pista-barra); border-radius: 4px; display: flex; overflow: hidden; }
.tableros__relleno { background: var(--celeste-marca); }
.tableros__relleno--fuerte { background: var(--azul-marca); }
.tableros__relleno--aviso { background: var(--restriccion-abierta-anillo); }
.tableros__relleno--vencido { background: var(--avance-negativo); }
.tableros__numero { text-align: right; font-weight: 700; color: var(--azul-marca); }
.tableros__pie { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--separador-fila); font-size: 12px; }
.tableros__pie strong { color: var(--avance-negativo); }
/* V14-R6 (revisión): la marca de estado («Vencida · 13 días») no se parte ni se sale de la tarjeta; el texto de la izquierda cede. */
.tableros__pie > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tableros__pie > .s-estado { flex: none; white-space: nowrap; }

/* Mapa de calor nivel × rubro. */
.tableros__mapa { display: grid; gap: 4px; font-size: 12px; }
.tableros__mapa-encabezado { font-size: 13px; color: var(--terciario); text-align: center; }
/* v14 (H45): el mapa del tablero del cliente es una tabla (sin estilos en la plantilla). */
.tableros__mapa-tabla { border-collapse: separate; border-spacing: 4px; font-size: 12px; width: 100%; }
.tableros__mapa-tabla th { font-weight: 600; }
.tableros__mapa-tabla th.tableros__mapa-nivel { text-align: left; white-space: nowrap; }
.tableros__mapa-nivel { font-weight: 600; color: var(--secundario); display: flex; align-items: center; }
.tableros__celda { border-radius: 4px; text-align: center; padding: 6px 2px; background: var(--fondo-resumen); color: var(--sin-avance); }
.tableros__celda--1 { background: var(--calor-1-fondo); color: var(--calor-texto); }
.tableros__celda--2 { background: var(--calor-2-fondo); color: var(--calor-texto); }
.tableros__celda--3 { background: var(--celeste-marca); color: var(--blanco); }
.tableros__celda--4 { background: var(--azul-marca); color: var(--blanco); }

/* Tablas (económicos, despliegue, calidad). */
.tableros__tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableros__tabla th { text-align: left; font-size: 13px; color: var(--terciario); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tableros__tabla td { padding: 8px; border-bottom: 1px solid var(--separador-fila); vertical-align: top; }
.tableros__tabla .numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableros__tabla tfoot td { font-weight: 700; border-top: 1px solid var(--linea); }
.tableros__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tableros__cifra { display: flex; flex-direction: column; gap: 2px; }
.tableros__cifra-valor { font-size: 20px; font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
.tableros__cifra-rotulo { font-size: 12px; color: var(--terciario); }
.tableros__prueba { color: var(--rojo-alerta); font-weight: 700; }
.tableros__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tableros__fotos img { width: 100%; height: auto; border-radius: var(--radio-campo); display: block; }
.tableros__migas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--terciario); margin: 8px 0 0; }

@media (max-width: 899px) {
    .tableros__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .tableros__grilla { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tableros__tarjeta--ancha { grid-column: auto; }
    .tableros__tarjeta { padding: 14px 16px; }
    .tableros__tabla--movil thead { display: none; }
    .tableros__tabla--movil tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--separador-fila); }
    .tableros__tabla--movil td { border: 0; padding: 0; }
    .tableros__tabla--movil td[data-rotulo]::before { content: attr(data-rotulo) " "; color: var(--terciario); font-size: 12px; }
    .tableros__tabla--movil td:first-child { grid-column: 1 / -1; font-weight: 600; }
    .tableros__desliza { overflow-x: auto; }
}
/* Revisión de diseño (R-DIS, P1): en el celular los rótulos del mapa se cortan en su columna (con
   guion) en lugar de pisarse ("CableadoTableros"), y el nombre de la fila no invade las celdas. */
.tableros__mapa > * { min-width: 0; }
.tableros__mapa-encabezado, .tableros__mapa-nivel { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; line-height: 1.2; }
@media (max-width: 899px) {
    /* El botón de la fila («Evidencia ›», «Ver frentes ›») en su propio renglón, a todo el ancho. */
    .tableros__tabla--movil td:last-child:has(> a.boton) { grid-column: 1 / -1; margin-top: 6px; }
}

/* Tableros v2 (docs/especificaciones/tableros/, modo noche v8): pantallas de dirección (2A) y
   Administración (3A), detalle al tocar (2C), ficha del residente (2D) y el control al aprobar (4).
   Colores de la app (TABLEROS_V2 §1.5): rojo = --avance-negativo (#8A5A00), amarillo =
   --amarillo-acento, bien = --azul-marca. Solo tokens de tokens.css. */
.tablero2__punto { display: inline-block; width: var(--tamano-punto); height: var(--tamano-punto); border-radius: 999px; flex-shrink: 0; background: var(--sin-avance); }
.tablero2__punto--rojo { background: var(--avance-negativo); }
.tablero2__punto--amarillo { background: var(--amarillo-acento); }
.tablero2__punto--bien { background: var(--azul-marca); }
.tablero2__punto--sin_datos { background: var(--linea); }

/* La franja «La plata» de la Portada: los resultados 1 a 5 con su punto. */
.portada-d__plata { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.portada-d__plata-item + .portada-d__plata-item { border-top: 1px solid var(--separador-fila); }
.portada-d__plata-enlace { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; color: var(--texto); text-decoration: none; font-size: 13px; }
.portada-d__plata-titulo { flex: 1; min-width: 0; color: var(--secundario); }
.portada-d__plata-valor { font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; white-space: nowrap; }
.portada-d__plata-estado { font-size: 12px; color: var(--secundario); white-space: nowrap; }
@media (min-width: 900px) {
    .portada-d__plata { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .portada-d__plata-item + .portada-d__plata-item { border-top: 0; border-left: 1px solid var(--separador-fila); }
    .portada-d__plata-enlace { flex-wrap: wrap; align-items: baseline; }
    .portada-d__plata-titulo { flex-basis: calc(100% - 20px); font-size: 12px; }
    .portada-d__plata-valor { flex-basis: 100%; font-size: 15px; }
    .portada-d__plata-estado { flex-basis: 100%; }
}