/* ══════════════════════════════════════════════════════════════════════
 * contabilidad.css — Estilos compartidos del módulo de Contabilidad
 * ──────────────────────────────────────────────────────────────────────
 * Las pantallas del módulo (gastos, cierre de caja, plan de cuentas,
 * centros de costo, centros de costo, responsables, terceros, libro diario, balance y
 * tablero) comparten estas piezas.
 *
 * ⚠️ ESTE ARCHIVO NO REPITE NADA DE tesoreria.css. Los badges de estado,
 * los importes, los chips de filtro, los botones y la franja de resumen
 * son los MISMOS: contabilidad y tesorería son el mismo mundo visual, y
 * duplicar esos estilos garantizaría que tarde o temprano uno quede
 * distinto del otro. Acá está sólo lo que la contabilidad agrega.
 *
 * Prefijo: cnt-
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.cnt-select-anio,
.cnt-select {
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #E4DCCF;
    background-color: #fff;
    color: var(--color-text, #37474F);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.cnt-select-anio:focus,
.cnt-select:focus {
    outline: none;
    border-color: var(--color-primary, #2E7D32);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.20);
}

.cnt-chips {
    margin-bottom: 0.6rem;
}

/* ── Celdas de tabla ──────────────────────────────────────────────────── */
.cnt-fecha,
.cnt-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* El código de cuenta es de ancho fijo: alineado, el árbol se lee solo. */
.cnt-codigo {
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #546E7A);
    white-space: nowrap;
}

.cnt-detalle {
    max-width: 420px;
}

.cnt-nro,
.cnt-responsable,
.cnt-asiento {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    color: #8A8178;
    white-space: nowrap;
}

/* Un comprobante sin medio de pago no es un dato faltante: es una deuda. */
.cnt-impago {
    color: #8A5300;
    font-weight: 600;
}

/* ── Sangría del plan de cuentas ──────────────────────────────────────── */
.cnt-nivel-1 { padding-left: 0; font-weight: 700; }
.cnt-nivel-2 { padding-left: 1rem; font-weight: 600; }
.cnt-nivel-3 { padding-left: 2rem; }
.cnt-nivel-4 { padding-left: 3rem; }

/* Las cuentas de grupo no admiten movimientos: se ven como encabezado. */
.cnt-fila-grupo {
    background-color: #FBF9F5;
}

.cnt-fila-grupo .adm-cell-title {
    color: var(--color-text-secondary, #546E7A);
    letter-spacing: 0.01em;
}

/* ── Tarjetas mobile ──────────────────────────────────────────────────── */
.cnt-card {
    background-color: #fff;
    border: 1px solid #EFE9DF;
    border-radius: 0.75rem;
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.7rem;
}

.cnt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.cnt-card-detalle {
    font-size: 0.86rem;
    color: var(--color-text, #37474F);
    margin-bottom: 0.35rem;
}

.cnt-card-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ── Secciones y ayudas dentro de los modales ─────────────────────────── */
.cnt-seccion {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text, #37474F);
    margin: 1.1rem 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #EFE9DF;
}

.cnt-seccion:first-child {
    margin-top: 0;
}

/* La explicación de por qué el campo existe, no de qué hace. */
.cnt-ayuda {
    display: block;
    font-weight: 400;
    font-size: 0.72rem;
    color: #8A8178;
    margin-top: 0.15rem;
}

.cnt-aviso {
    background-color: #FFF8E7;
    border-left: 3px solid var(--color-accent-dark, #F9A825);
    border-radius: 0.35rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    color: #6B5A2E;
    margin-bottom: 0.9rem;
}

.cnt-aviso--error {
    background-color: #FDECEA;
    border-left-color: #B3261E;
    color: #8C1D18;
}

.cnt-aviso--ok {
    background-color: #E9F5EC;
    border-left-color: var(--color-primary, #2E7D32);
    color: #1E6B2A;
}

.cnt-aviso ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

/* ── Grillas de campos ────────────────────────────────────────────────── */
.cnt-grid-2,
.cnt-grid-3 {
    display: grid;
    gap: 0 0.8rem;
}

.cnt-grid-2 { grid-template-columns: 1fr 1fr; }
.cnt-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 720px) {
    .cnt-grid-2,
    .cnt-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ── La grilla de imputación (pantalla de gastos) ─────────────────────── */
.cnt-imputacion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cnt-linea {
    display: grid;
    grid-template-columns: 2.2fr 1.4fr 1fr 0.9fr auto;
    gap: 0 0.6rem;
    align-items: end;
    padding: 0.5rem 0.6rem;
    background-color: #FBF9F5;
    border: 1px solid #EFE9DF;
    border-radius: 0.55rem;
}

.cnt-linea .modal-label {
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
}

.cnt-linea .modal-select,
.cnt-linea .modal-input {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
}

.cnt-linea-quitar {
    border: none;
    background: none;
    color: var(--color-danger, #C62828);
    cursor: pointer;
    padding: 0.35rem 0.4rem;
    border-radius: 0.4rem;
    line-height: 1;
}

.cnt-linea-quitar:hover {
    background-color: rgba(198, 40, 40, 0.1);
}

.cnt-agregar {
    align-self: flex-start;
}

/* Los pesos de un renglón en dólares: calculados, no escritos. Se ven como
   dato y no como campo para que nadie los intente corregir a mano — el que
   manda es el importe en dólares por la cotización. */
.cnt-convertido {
    margin: 0;
    padding: 0.35rem 0;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary, #546E7A);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .cnt-linea {
        grid-template-columns: 1fr 1fr;
    }

    .cnt-linea-cuenta {
        grid-column: 1 / -1;
    }

    .cnt-linea-quitar {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* ── El control de cuadratura ─────────────────────────────────────────── */
.cnt-cuadre {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.8rem;
    padding: 0.55rem 0.8rem;
    background-color: #F6F3EE;
    border-radius: 0.5rem;
}

.cnt-cuadre-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #546E7A);
}

.cnt-cuadre-de {
    font-size: 0.8rem;
    color: #8A8178;
}

.cnt-cuadre-falta {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: #B3261E;
}

/* ── Buscador de scouts (responsables y terceros) ────────────────────────── */
/* Se ESCRIBE, no se elige de un desplegable: son cientos de scouts y una
   lista así no se puede recorrer. Es el mismo patrón que el filtro por
   scout del listado de recibos. */
.cnt-scout-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem 0.35rem 0.7rem;
    border-radius: 999px;
    background-color: #E9F5EC;
    color: #1E6B2A;
    font-size: 0.82rem;
    font-weight: 600;
}

.cnt-scout-quitar {
    border: none;
    background: none;
    color: #1E6B2A;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 999px;
    line-height: 1;
}

.cnt-scout-quitar:hover {
    background-color: rgba(30, 107, 42, 0.15);
}

.cnt-scout-resultados {
    margin-top: 0.35rem;
    border: 1px solid #E4DCCF;
    border-radius: 0.5rem;
    background-color: #fff;
    max-height: 220px;
    overflow-y: auto;
}

.cnt-scout-opcion {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    color: var(--color-text, #37474F);
    cursor: pointer;
    border-bottom: 1px solid #F6F2EB;
}

.cnt-scout-opcion:last-child { border-bottom: none; }

.cnt-scout-opcion:hover {
    background-color: #F1F7F2;
}

/* ── El cierre de caja ────────────────────────────────────────────────── */
.cnt-dia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.9rem;
    background-color: #fff;
    border: 1px solid #EFE9DF;
    border-radius: 0.7rem;
    margin-bottom: 0.55rem;
}

.cnt-dia--elegido {
    border-color: var(--color-primary, #2E7D32);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.14);
}

.cnt-dia-fecha {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #37474F);
}

.cnt-dia-datos {
    font-size: 0.78rem;
    color: #8A8178;
}

/* El asiento propuesto, mostrado antes de que exista. */
.cnt-asiento-previo {
    background-color: #fff;
    border: 1px solid #EFE9DF;
    border-radius: 0.7rem;
    overflow: hidden;
    margin-top: 0.8rem;
}

.cnt-asiento-previo table {
    width: 100%;
    border-collapse: collapse;
}

.cnt-asiento-previo th,
.cnt-asiento-previo td {
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
    border-bottom: 1px solid #F2EDE5;
    text-align: left;
}

.cnt-asiento-previo th {
    background-color: #FBF9F5;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #546E7A);
}

.cnt-asiento-previo .cnt-col-importe {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cnt-asiento-previo tfoot td {
    font-weight: 700;
    background-color: #F6F3EE;
    border-bottom: none;
}

/* La diferencia de arqueo. Se muestra, no se esconde: es el dato más útil
   del cierre y sólo se puede capturar en el momento. */
.cnt-diferencia {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cnt-diferencia--mal { color: #B3261E; }
.cnt-diferencia--ok  { color: #1E6B2A; }

/* ── El tablero ───────────────────────────────────────────────────────── */
.cnt-tablero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.cnt-panel {
    background-color: #fff;
    border: 1px solid #EFE9DF;
    border-radius: 0.75rem;
    padding: 0.95rem 1.05rem;
}

.cnt-panel-titulo {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text, #37474F);
    margin-bottom: 0.6rem;
}

/* Qué mira el panel, en una línea. Un título de dos palabras alcanza para el
   que ya sabe y no le dice nada al que no. */
.cnt-panel-ayuda {
    font-size: 0.76rem;
    line-height: 1.35;
    color: #8A8178;
    margin: -0.3rem 0 0.6rem;
}

.cnt-panel-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px dashed #F2EDE5;
    font-size: 0.83rem;
}

.cnt-panel-fila:last-child { border-bottom: none; }

.cnt-panel-vacio {
    font-size: 0.8rem;
    color: #8A8178;
}

/* Tarjetas de número grande del tablero. */
.cnt-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cnt-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #546E7A);
}

.cnt-kpi-valor {
    font-size: 1.45rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #37474F);
}

.cnt-kpi-valor--positivo { color: #1E6B2A; }
.cnt-kpi-valor--negativo { color: #B3261E; }

/* ── Accesos del tablero ──────────────────────────────────────────────── */
.cnt-accesos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.1rem;
}

.cnt-acceso {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    background-color: #fff;
    border: 1px solid #EFE9DF;
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--color-text, #37474F);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.cnt-acceso:hover {
    border-color: var(--color-primary, #2E7D32);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--color-text, #37474F);
}

.cnt-acceso > i {
    font-size: 1.1rem;
    color: var(--color-primary, #2E7D32);
    margin-bottom: 0.15rem;
}

.cnt-acceso-titulo {
    font-family: var(--font-serif, Georgia, serif);
    font-weight: 700;
    font-size: 0.92rem;
}

.cnt-acceso-sub {
    font-size: 0.75rem;
    color: #8A8178;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .cnt-acceso {
        transition: none;
    }

    .cnt-acceso:hover {
        transform: none;
    }
}

/* ── Filtros del libro diario ─────────────────────────────────────────── */
.cnt-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background-color: #fff;
    border: 1px solid #EFE9DF;
    border-radius: 0.7rem;
    margin-bottom: 0.8rem;
}

.cnt-filtro {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 140px;
}

.cnt-filtro .modal-label {
    font-size: 0.7rem;
    margin-bottom: 0;
}

.cnt-filtro-boton {
    flex-direction: row;
    gap: 0.4rem;
    min-width: 0;
    margin-left: auto;
}

/* El número de asiento, clickeable para abrirlo completo. */
.cnt-link-asiento {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary, #2E7D32);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* ── Los renglones del asiento manual ─────────────────────────────────── */
/* A diferencia de la imputación de un gasto, acá la cantidad de campos
   cambia según la cuenta: sólo se piden las etiquetas que exige, porque el
   trigger rechaza las que sobran. Por eso el grid es fluido y no fijo. */
.cnt-renglon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.55rem 0.65rem;
    background-color: #FBF9F5;
    border: 1px solid #EFE9DF;
    border-radius: 0.55rem;
}

.cnt-renglon .cnt-linea-campo {
    flex: 1 1 140px;
    min-width: 120px;
}

.cnt-renglon .cnt-linea-cuenta {
    flex: 3 1 260px;
}

.cnt-renglon .modal-label {
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
}

.cnt-renglon .modal-select,
.cnt-renglon .modal-input {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
}

.cnt-cuadre-inline {
    margin: 0;
    padding-top: 0.45rem;
}

/* ── Reportes: libro diario, mayor, balance y EERR ────────────────────── */
.cnt-col-importe {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* La primera línea de un asiento lleva fecha y leyenda; las demás no, para
   que el asiento se lea como un bloque y no como filas sueltas. */
.cnt-fila-continuacion .cnt-fecha,
.cnt-fila-continuacion .cnt-leyenda {
    color: transparent;
}

.cnt-leyenda {
    max-width: 340px;
}

.cnt-etiquetas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cnt-etiqueta {
    font-size: 0.68rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background-color: #F2EDE5;
    color: #6B6259;
    white-space: nowrap;
}

/* El total del libro y del balance: si no cuadra, tiene que gritar. */
.cnt-totales {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1.1rem;
    padding: 0.7rem 1rem;
    margin-top: 0.7rem;
    background-color: #F6F3EE;
    border-radius: 0.6rem;
}

.cnt-total-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.cnt-total-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #546E7A);
}

@media (max-width: 720px) {
    .cnt-totales {
        justify-content: space-between;
    }
}

/* ── Cierre de caja: elegir quién se queda con la plata ────────────────────
   El responsable se decide ACÁ, al cerrar el día, que es el único momento en que
   se sabe. Antes la celda era texto y, si no había default, el cierre quedaba
   trabado sin forma de destrabarlo desde esta pantalla. */
.cc-responsable {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.cc-responsable-select {
    min-width: 130px;
    max-width: 190px;
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
}

.cc-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid #e4dccf;
    border-radius: 6px;
    background: #fff;
    color: rgba(55, 71, 79, 0.7);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cc-mini-btn:hover {
    background: #f8f5f0;
    color: #37474f;
}

.cc-mini-btn--quitar:hover {
    background: #ffebee;
    border-color: rgba(198, 40, 40, 0.4);
    color: #c62828;
}

/* De qué centro de costo es la plata de esta caja. Va chiquito y arriba del importe: es
   un dato de contexto, no una cifra más para leer. */
.cc-centros-costo {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #8A8178;
    margin-bottom: 0.2rem;
    white-space: normal;
}

/* La segunda parte de una caja partida. No repite el nombre del medio: es la
   misma plata dividida, y repetirlo hace pensar que entró dos veces. */
.cc-parte-de {
    color: rgba(55, 71, 79, 0.55);
    font-size: 0.78rem;
    font-style: italic;
}

/* El contador de la solapa "a medio cargar". Va pegado al texto y no como
   badge suelto: es parte del nombre de la solapa, no un dato aparte. */
.cnt-contador {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background-color: #C62828;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
}

/* El equivalente en pesos de una caja en moneda extranjera. Va chiquito y
   debajo del importe de verdad: sirve para dimensionar, no para operar — ese
   número cambia todos los días sin que entre ni salga un billete. */
.cnt-equivalente {
    display: block;
    font-size: 0.7rem;
    color: #8A8178;
    white-space: nowrap;
}

/* La marca de un saldo dado vuelta: una cuenta deudora que quedó acreedora, o
   al revés. No es un dato más, es un asiento cargado del lado que no va. */
.cnt-alreves {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.35rem;
    background-color: #FDECEA;
    color: #B3261E;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* ── Vista previa del asiento de revaluación ──────────────────────────────
   Dos columnas: la cuenta a la izquierda, el importe a la derecha. Es una
   lista y no una tabla porque son dos o tres renglones y una tabla con dos
   filas pide más ancho del que el modal --sm tiene. */
.cnt-reval-lista {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--cnt-borde, rgba(0, 0, 0, 0.08));
}

.cnt-reval-lista li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--cnt-borde, rgba(0, 0, 0, 0.08));
    font-size: 0.85rem;
}

/* Tabular para que los importes de los renglones alineen entre sí. */
.cnt-reval-lista strong {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}