/**
 * Pagos — estado de cuenta del delegado (front). Mobile-first; reusa los tokens de
 * base.css (var(--mo-*)) y las clases de badge/notice/botón del tema.
 */

.mo-torneo-invierno-pagos {
    margin-top: 1.5rem;
}

.mo-torneo-invierno-pagos__banco {
    background: var(--mo-surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--mo-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--mo-radius, 12px);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.mo-torneo-invierno-pagos__banco ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.mo-torneo-invierno-pagos__banco code {
    word-break: break-all;
    /* Sin esto, el <code> hereda el fondo blanco por defecto → texto claro sobre
       blanco = ilegible en el tema oscuro. Chip con tinte sutil + texto claro. */
    background: rgba(152, 206, 240, 0.14);
    color: var(--mo-torneo-invierno-on-surface, #EAF2FF);
    padding: 0.1em 0.45em;
    border-radius: 4px;
    font-size: 0.95em;
}

.mo-torneo-invierno-pagos__banco-nota {
    margin: 0.5rem 0 0;
    font-size: 0.9em;
    opacity: 0.8;
}

.mo-torneo-invierno-pagos__tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.mo-torneo-invierno-pagos__tabla th,
.mo-torneo-invierno-pagos__tabla td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--mo-border, rgba(255, 255, 255, 0.10));
    vertical-align: middle;
}

.mo-torneo-invierno-pagos__tabla th {
    font-weight: 600;
    opacity: 0.75;
}

.mo-torneo-invierno-pagos__form {
    background: var(--mo-surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--mo-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--mo-radius, 12px);
    padding: 1rem 1.25rem;
}

.mo-torneo-invierno-pagos__form-title {
    margin: 0 0 0.35rem;
}

.mo-torneo-invierno-pagos__hint {
    margin: 0 0 0.75rem;
    font-size: 0.9em;
    opacity: 0.8;
}

.mo-torneo-invierno-pagos__cargos {
    border: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.mo-torneo-invierno-pagos__cargo {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    cursor: pointer;
}

/* --- Monto declarado: hint + eco en vivo ---------------------------------
   El separador decimal de type="number" es siempre el punto: "45.000" vale 45.
   El eco muestra lo interpretado al lado de lo que suman los cargos tildados,
   para que el error se vea antes de enviar. El guard real es de servidor. */

/* El hint también se usa como <span> debajo del input (no sólo como <p>). */
.mo-torneo-invierno-pagos__hint {
    display: block;
}

.mo-torneo-invierno-pagos__eco {
    display: block;
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: var(--mo-surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--mo-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--mo-radius, 12px);
    font-size: 0.95em;
    line-height: 1.5;
}

/* Gana sobre el display:block de arriba (el JS lo togglea con [hidden]). */
.mo-torneo-invierno-pagos__eco[hidden] {
    display: none;
}

.mo-torneo-invierno-pagos__eco-linea {
    display: block;
}

.mo-torneo-invierno-pagos__eco-alerta {
    display: block;
    margin-top: 0.35rem;
    font-weight: 600;
    color: var(--mo-torneo-invierno-warning, #D97706);
}

/* Desvío imposible (el /1000 del separador de miles): que no pase desapercibido. */
.mo-torneo-invierno-pagos__eco.is-alerta {
    border-color: var(--mo-torneo-invierno-warning, #D97706);
    background: rgba(217, 119, 6, 0.12);
}

/* --- Mis pagos -----------------------------------------------------------
   Lo que YA PAGÓ, que es otra pregunta que lo que DEBE (la tabla de arriba) y por eso es
   otra lista y no otra columna. Tarjetas y no tabla: son tres datos por fila y el destino
   es entrar al detalle, así que toda la fila tiene que ser el blanco tocable — en el
   teléfono, un link de texto de 16px es un blanco de 16px. */

.mo-torneo-invierno-pagos__lista {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.mo-torneo-invierno-pagos__pago a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mo-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--mo-radius, 12px);
    background: var(--mo-surface-2, rgba(255, 255, 255, 0.04));
    color: inherit;
    text-decoration: none;
}

.mo-torneo-invierno-pagos__pago a:hover,
.mo-torneo-invierno-pagos__pago a:focus-visible {
    background: rgba(152, 206, 240, 0.12);
}

.mo-torneo-invierno-pagos__pago strong {
    font-variant-numeric: tabular-nums;
}

/* El medio y la fecha bajan solos de línea: son la respuesta a «¿cuál de todos?», no a
   «¿cuánto?» ni «¿cómo está?», que son los dos datos de arriba. */
.mo-torneo-invierno-pagos__pago small {
    flex: 1 0 100%;
    font-size: 0.85em;
    opacity: 0.8;
}

/* En pantallas anchas la tabla respira; en móvil scrollea si hace falta. */
@media (max-width: 540px) {
    .mo-torneo-invierno-pagos__tabla {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* ⚠️ El `nowrap` de arriba vale para las columnas cortas —concepto, monto, estado—,
       que partidas en dos líneas se leen peor. El DETALLE no: desde que dice la jornada y
       los dos equipos («Fecha 4 · Titanes A vs Deportivo Río Pico Veteranos») en una sola
       línea empuja la tabla al DOBLE de ancho, y el delegado tiene que arrastrar media
       pantalla para llegar a la columna de estado. Acá el corte por palabra gana. */
    .mo-torneo-invierno-pagos__detalle {
        white-space: normal;
        min-width: 11ch;
        max-width: 20ch;
        overflow-wrap: anywhere;
    }
}