/* v20 · Administración: adm_caja (diseno/v20/administracion/AdmCaja). Solo variables de tokens.css.
   Celular (< 768 px): todo en una columna, el gráfico se achica, la tabla «Por obra» como tarjetas. */
.adm-caja { display: flex; flex-direction: column; gap: var(--espacio-16); min-width: 0; }
.adm-caja .s-encabezado { margin-bottom: 0; }
.adm-caja p { margin: 0; }
.adm-caja__bajada { color: var(--secundario); font-size: var(--letra-texto); }

.adm-caja__numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-16); }
.adm-caja__numero .s-tarjeta-numero__frase { color: var(--secundario); }
.adm-caja__estado { margin-top: var(--espacio-4); }

.adm-caja__medio { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--espacio-16); align-items: start; }
.adm-caja__tarjeta {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    padding: var(--espacio-16) 18px; min-width: 0; display: flex; flex-direction: column; gap: 12px;
}
.adm-caja__tarjeta .s-pestanas { margin: 0; align-self: flex-start; }
.adm-caja__titulo {
    margin: 0; font-family: var(--fuente-titulos); color: var(--azul-marca);
    font-size: var(--letra-texto-destacado);
}
.adm-caja__leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--letra-texto-chico); color: var(--secundario); }
.adm-caja__leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.adm-caja__muestra { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--celeste-marca); }
.adm-caja__muestra--ritmo { border-top-style: dotted; }
.adm-caja__muestra--plazo { border-top: 2px dashed var(--rotulo-tabla); }
.adm-caja__grafico { width: 100%; min-width: 0; }
.adm-caja__grafico .grafico { max-width: 100%; }
.adm-caja__conclusion { font-size: var(--letra-texto); }
.adm-caja__conclusion b { color: var(--avance-negativo); }
.adm-caja__falta { color: var(--secundario); font-size: var(--letra-texto); }

.adm-caja__barra { display: flex; height: 22px; border-radius: var(--radio-etiqueta); overflow: hidden; background: var(--pista-barra); }
.adm-caja__barra-parte { display: block; height: 100%; }
.adm-caja__barra-parte--entra { background: var(--azul-marca); }
.adm-caja__barra-parte--anticipo { background: var(--pista-barra); }
.adm-caja__barra-parte--retencion { background: var(--rotulo-tabla); }
.adm-caja__partes { margin: 0; display: flex; flex-direction: column; }
.adm-caja__partes > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--separador-fila); font-size: var(--letra-texto); }
.adm-caja__partes dt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.adm-caja__partes dd { margin: 0; white-space: nowrap; }
.adm-caja__muestra-cuadro { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--linea); }
.adm-caja__netos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm-caja__neto { background: var(--fondo-resumen); border-radius: var(--radio-campo); padding: 10px 12px; font-size: var(--letra-texto-chico); color: var(--secundario); min-width: 0; }
.adm-caja__neto-monto { font-family: var(--fuente-titulos); font-weight: 700; color: var(--azul-marca); font-size: var(--letra-texto-destacado); overflow-wrap: anywhere; }
.adm-caja__nota { font-size: var(--letra-texto-chico); color: var(--secundario); }

.adm-caja__cabeza { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.adm-caja__enlaces { font-size: var(--letra-texto); font-weight: 700; }
.adm-caja__enlaces a, .adm-caja__tabla a { color: var(--azul-marca); display: inline-flex; align-items: center; justify-content: center; min-height: var(--tamano-toque); min-width: var(--tamano-toque); }
.adm-caja__tabla .s-estado { flex-wrap: wrap; }
.adm-caja__tabla { width: 100%; border-collapse: collapse; font-size: var(--letra-texto-tabla); }
.adm-caja__tabla th, .adm-caja__tabla td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--separador-fila); vertical-align: middle; }
.adm-caja__tabla thead th { border-top: 0; color: var(--secundario); font-weight: 600; font-size: var(--letra-texto-chico); }
.adm-caja__tabla tbody th { font-weight: 700; }
.adm-caja__tabla td { font-variant-numeric: tabular-nums; }
.adm-caja__mas { color: var(--secundario); font-weight: 700; }
.adm-caja__pie { font-size: var(--letra-texto-chico); color: var(--secundario); }

@media (max-width: 1100px) {
    .adm-caja__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-caja__medio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
    .adm-caja__numeros { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .adm-caja__tarjeta { padding: 14px; }
    .adm-caja__netos { grid-template-columns: minmax(0, 1fr); }
    .adm-caja__partes > div { flex-wrap: wrap; }
    /* La tabla «Por obra» como tarjetas: cada dato con su rótulo. */
    .adm-caja__tabla thead { display: none; }
    .adm-caja__tabla, .adm-caja__tabla tbody, .adm-caja__tabla tr, .adm-caja__tabla th, .adm-caja__tabla td { display: block; width: 100%; box-sizing: border-box; }
    .adm-caja__tabla tr { border: 1px solid var(--linea); border-radius: var(--radio-campo); padding: 4px 12px; margin-bottom: 10px; }
    .adm-caja__tabla th, .adm-caja__tabla td { border-top: 0; padding: 6px 0; overflow-wrap: anywhere; }
    .adm-caja__tabla td::before { content: attr(data-rotulo); display: block; font-size: var(--letra-texto-chico); color: var(--secundario); }
}
.adm-caja__enlaces-nota { font-size: var(--letra-texto-chico); color: var(--secundario); }
.adm-caja__exacta { display: block; font-size: var(--letra-texto-chico); font-weight: 600; color: var(--secundario); }
/* La barra es un SVG (sin estilos escritos en la plantilla): el ancho va en los rect. */
svg.adm-caja__barra { display: block; width: 100%; }
.adm-caja__barra rect.adm-caja__barra-parte--entra { fill: var(--azul-marca); }
.adm-caja__barra rect.adm-caja__barra-parte--anticipo { fill: var(--pista-barra); }
.adm-caja__barra rect.adm-caja__barra-parte--retencion { fill: var(--rotulo-tabla); }

/* v23d-1 · N5: Caja › Resumen. Nada se sale del ancho del celular (nombres de obra largos, montos y estados). */
.adm-caja-resumen p, .adm-caja-resumen li { overflow-wrap: anywhere; }
.adm-caja-resumen .s-estado { flex-wrap: wrap; max-width: 100%; }
/* Las celdas de montos no cortan renglón: sus notas chicas sí (iban de costado en el celular con una nota larga). */
.adm-caja-resumen td .d-nota { display: block; white-space: normal; }
.adm-caja-resumen__monto { white-space: nowrap; }