/* ══════════════════════════════════════════════════════════════════════
 * tesoreria.css — Estilos compartidos del módulo de Tesorería
 * ──────────────────────────────────────────────────────────────────────
 * Las seis pantallas del módulo (recibos, editor de recibo, panel de pagos,
 * medios de pago, conceptos y familias) comparten badges de estado, chips
 * de filtro e importes. Están acá una sola vez en lugar de repetidos en
 * cada .razor.css.
 *
 * Lo específico de cada pantalla sí vive en su .razor.css.
 * Prefijo: tes-
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Badges de estado ─────────────────────────────────────────────────── */
.tes-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Borrador: a medio cargar, todavía no cuenta en los totales. */
.tes-badge--borrador {
    background-color: #FFF4E5;
    color: #8A5300;
}

/* Confirmado: cuadrado y contabilizado. */
.tes-badge--confirmado {
    background-color: #E6F4EA;
    color: #1E6B2A;
}

/* Anulado: queda el rastro pero no suma. */
.tes-badge--anulado {
    background-color: #F3F1EE;
    color: #7A7169;
    text-decoration: line-through;
}

.tes-badge--baja {
    background-color: #F3F1EE;
    color: #7A7169;
}

.tes-badge--activo {
    background-color: #E6F4EA;
    color: #1E6B2A;
}

/* Tipos de concepto. */
.tes-badge--mensual {
    background-color: #E3F0FB;
    color: #14558A;
}

.tes-badge--campamento {
    background-color: #EDE7F6;
    color: #4A2E83;
}

.tes-badge--otro {
    background-color: #FFF8E1;
    color: #7A5C00;
}

/* ── Importes ─────────────────────────────────────────────────────────── */
.tes-importe {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-text, #37474F);
    white-space: nowrap;
}

.tes-importe--cero {
    color: #B6ADA3;
    font-weight: 500;
}

.tes-importe--descuadre {
    color: #B3261E;
}

.tes-importe--ok {
    color: #1E6B2A;
}

/* ── Chips de filtro (estado, rama) ───────────────────────────────────── */
.tes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tes-chip {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #E4DCCF;
    background-color: #fff;
    color: #6D6259;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tes-chip:hover {
    border-color: #2E7D32;
    color: #2E7D32;
}

.tes-chip--activo {
    background-color: #2E7D32;
    border-color: #2E7D32;
    color: #fff;
}

.tes-chip--activo:hover {
    color: #fff;
}

/* ── Barra de acciones de la toolbar ──────────────────────────────────── */
.tes-toolbar-acciones {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.tes-btn-primario {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background-color: #2E7D32;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.tes-btn-primario:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12);
}

.tes-btn-primario:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}

.tes-btn-secundario {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid #E4DCCF;
    background-color: #fff;
    color: #6D6259;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tes-btn-secundario:hover {
    border-color: #2E7D32;
    color: #2E7D32;
}

/* ── Checkbox de "ver bajas" ──────────────────────────────────────────── */
.tes-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #6D6259;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tes-check input {
    accent-color: #2E7D32;
    cursor: pointer;
}

/* El nowrap de arriba es para la barra de herramientas, donde la etiqueta es
   corta ("Ver dadas de baja") y cortarla en dos renglones descuadra la fila.
   Dentro de un modal la etiqueta es una frase entera —"Responsable — es una caja,
   un banco o una cuenta: hay que decir quién tiene esa plata"—, y el nowrap la
   empujaba más allá del ancho del modal: aparecía una barra de scroll
   horizontal y la mitad del texto quedaba afuera.

   El checkbox no se encoge (flex-shrink) y se alinea con el primer renglón,
   no con el centro del bloque de texto. */
.modal-body .tes-check {
    display: flex;
    align-items: flex-start;
    white-space: normal;
    margin-bottom: 0.5rem;
}

.modal-body .tes-check input {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ── Fila dada de baja / anulada ──────────────────────────────────────── */
.tes-fila-inactiva {
    opacity: 0.55;
}

/* ── Resumen (totales arriba de una tabla) ────────────────────────────── */
.tes-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.9rem;
    border-radius: 0.75rem;
    background-color: #FAF8F4;
    border: 1px solid #EDE6DA;
}

.tes-resumen-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tes-resumen-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(55, 71, 79, 0.55);
}

.tes-resumen-valor {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #37474F;
}

/* El saldo pendiente en rojo: es el número que dice si hay algo que reclamar. */
.tes-resumen-valor--alerta {
    color: #D9534F;
}

@media (max-width: 575.98px) {
    .tes-resumen {
        gap: 0.9rem;
    }

    .tes-resumen-valor {
        font-size: 0.95rem;
    }
}

/* Respeta la preferencia de movimiento reducido del sistema. */
@media (prefers-reduced-motion: reduce) {
    .tes-chip,
    .tes-btn-primario,
    .tes-btn-secundario {
        transition: none;
    }
}

/* ── Columna de acciones fija a la derecha ────────────────────────────────
 *
 * Las tablas de Recibos y Conceptos tienen ocho o nueve columnas y no entran
 * en la pantalla de una notebook. El contenedor scrollea, pero la columna de
 * acciones quedaba cortada contra el borde de la tarjeta: había que descubrir
 * que se podía scrollear, y recién ahí llegabas a confirmar o anular, que es
 * la acción principal de la pantalla.
 *
 * Fijándola a la derecha está siempre visible, y lo que se desplaza por
 * debajo son los datos —que se leen igual salteados—.
 *
 * Es opt-in con la clase en el <table>, y no una regla general de .adm-table,
 * para no cambiarle el comportamiento a las tablas del resto del sistema.
 * ─────────────────────────────────────────────────────────────────────── */
/* Piso de ancho: sin esto la tabla se estira al 100% del contenedor y el
   navegador aplasta las columnas hasta hacerlas ilegibles antes de decidir
   que hay que scrollear. Con el piso puesto, el scroll es una decisión y no
   un accidente — y la columna fija hace que no moleste. */
.tes-tabla-acciones-fijas {
    min-width: 940px;
}

.tes-tabla-acciones-fijas .adm-th-actions,
.tes-tabla-acciones-fijas .adm-td-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    /* Opaco sí o sí: la celda se desplaza por encima del resto de la tabla. */
    background-color: var(--scout-white);
    /* La línea marca dónde termina lo fijo y empieza lo que se mueve. */
    box-shadow: -1px 0 0 var(--gray-200);
}

/* El encabezado tiene que tapar a las celdas del cuerpo, no al revés. */
.tes-tabla-acciones-fijas .adm-th-actions {
    z-index: 3;
    background-color: var(--gray-50);
}

/* Sin esto la celda fija se queda blanca mientras la fila se pinta, y parece
   que no fuera parte de la fila. */
.tes-tabla-acciones-fijas .adm-tr:hover .adm-td-actions {
    background-color: var(--gray-50);
}

/* Los botones ocupan menos y así la columna necesita menos ancho. */
.tes-tabla-acciones-fijas .adm-td-actions,
.tes-tabla-acciones-fijas .adm-th-actions {
    padding-left: 0.75rem;
    padding-right: 0.9rem;
}

/* La separación entre filas la dibuja el <tr>, y con border-collapse el fondo
   opaco de la celda fija se la come. Se repone acá, salvo en la última. */
.tes-tabla-acciones-fijas .adm-td-actions {
    border-bottom: 1px solid var(--gray-200);
}

.tes-tabla-acciones-fijas .adm-tr:last-child .adm-td-actions {
    border-bottom: none;
}

/* ══════════════════════════════════════════════════════════════════════
   CAMPOS DE IMPORTE
   ══════════════════════════════════════════════════════════════════════
   Las flechitas del input type="number" no sirven para nada acá: los importes
   se escriben enteros y nadie va a subir una cuota de a un centavo por clic.
   Lo único que hacen es comerse ancho de un campo que ya es angosto y ofrecer
   un clic que no se usa.

   Va en la hoja global y no en una hoja aislada de componente a propósito: el
   aislamiento de CSS de Blazor le agrega su atributo al último selector, y
   ::-webkit-inner-spin-button es un pseudo-elemento del navegador que no lo
   acepta, así que la regla no se aplicaría nunca.

   Se pone con la clase .tes-input-num y no sobre todos los input[type=number]
   para no cambiarle el comportamiento a las pantallas de otros módulos. */
.tes-input-num::-webkit-outer-spin-button,
.tes-input-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tes-input-num {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ══════════════════════════════════════════════════════════════════════
   IMPRIMIR EL COMPROBANTE DEL RECIBO
   ══════════════════════════════════════════════════════════════════════
   Al apretar Imprimir, el JS le pone la clase al <body> y saca todo menos el
   comprobante. Se hace así y no abriendo una ventana nueva con el contenido
   porque los bloqueadores de pop-ups matan la ventana nueva sin avisar, y el
   tesorero se queda mirando una pantalla donde no pasó nada.

   Va en la hoja global porque la regla toca al <body>, que está fuera de
   cualquier componente. */
@media print {
    body.imprimiendo-comprobante * {
        visibility: hidden;
    }

    body.imprimiendo-comprobante .tes-comprobante,
    body.imprimiendo-comprobante .tes-comprobante * {
        visibility: visible;
    }

    /* Sacado del flujo para que empiece arriba de la hoja: si no, sale con
       todo el hueco del encabezado de la pantalla arriba. */
    body.imprimiendo-comprobante .tes-comprobante {
        position: absolute;
        top: 0;
        left: 0;
        border: none;
    }
}