/*
 * Sistema visual V2 del portal de socios (orden de Codex 2026-08-11
 * 18:10, especificacion vinculante en
 * .docs_global_associasuite/operativo/portal-socios-pagos/ESPECIFICACION_VISUAL_PORTAL_V2.md).
 * Solo tres colores son configurables por club (marca/--color-primario,
 * --color-secundario, --color-acento, via Config::temaClub()); todos
 * los neutros y semanticos de esta hoja son fijos, no configurables.
 * El color de marca aparece como maximo en tres lugares por pantalla:
 * escudo, bloque de estado con deuda y una accion primaria.
 */

:root {
    color-scheme: light;
    /* Tema del club: sobrescrito por un bloque <style> propio por
       vista, ya validado por Config::temaClub(). Estos son el
       fallback seguro. */
    --color-primario: #B5121B;
    --color-secundario: #FFFFFF;
    --color-acento: #B5121B;

    /* Neutros y semanticos V2: fijos, no configurables por club. */
    --color-tinta: #172033;
    --color-texto-secundario: #475467;
    --color-atenuado: #667085;
    --color-borde: #E4E7EC;
    --color-superficie: #FFFFFF;
    --color-lienzo: #F7F7F5;
    --color-exito-fondo: #D1FADF;
    --color-exito-texto: #067647;
    --color-alerta-fondo: #FEE4E2;
    --color-alerta-texto: #B42318;

    --radio-tarjeta: 12px;
    --radio-cuota: 10px;
    --radio-control: 8px;
    --radio-credencial: 14px;
    --sombra-tarjeta: 0 1px 3px rgba(23, 32, 51, 0.08);
    --sombra-elevada: 0 2px 8px rgba(23, 32, 51, 0.1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--color-lienzo);
    color: var(--color-tinta);
    font-size: 15px;
    line-height: 1.45;
}

a {
    color: var(--color-tinta);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-primario);
    outline-offset: 2px;
}

/* Escala tipografica V2: 8 niveles, 12-28px. */
.texto-cifra {
    font-size: 28px;
    font-weight: 500;
}

.texto-titulo {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}

.texto-estado {
    font-size: 26px;
    font-weight: 500;
    margin: 8px 0 0;
}

.texto-seccion {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 12px;
}

.texto-cuerpo {
    font-size: 15px;
    font-weight: 400;
}

.texto-dato {
    font-size: 14px;
    font-weight: 400;
}

.texto-apoyo {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-atenuado);
}

.texto-metadato {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-atenuado);
}

.portal {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 12px 24px;
}

/* Encabezado: tres zonas (disparador de menu, nombre de club
   centrado, escudo), sticky, dentro de la misma columna que el
   contenido. Separador inferior de 0.5px. */
.encabezado-portal {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    background: var(--color-superficie);
    border-bottom: 0.5px solid var(--color-borde);
}

.encabezado-portal__nombre {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-tinta);
    overflow-wrap: anywhere;
}

.encabezado-portal__escudo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.encabezado-portal__retroceso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--color-tinta);
    text-decoration: none;
    font-size: 20px;
    flex-shrink: 0;
}

/* Panel de menu: <details> nativo, abre/cierra sin JavaScript. El
   disparador es solo el icono de hamburguesa; nombre de club y
   escudo quedan fuera y no son interactivos. */
.menu-portal {
    flex-shrink: 0;
}

.menu-disparador {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}

.menu-disparador::-webkit-details-marker {
    display: none;
}

.menu-disparador__icono {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.menu-disparador__icono span {
    display: block;
    height: 2px;
    background: var(--color-tinta);
    border-radius: 1px;
}

.panel-menu {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 9;
    background: rgba(23, 32, 51, 0.35);
}

.panel-menu__contenido {
    max-width: 480px;
    margin: 0 auto;
    background: var(--color-superficie);
    box-shadow: var(--sombra-elevada);
    border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
    overflow: hidden;
}

.panel-menu__cabecera {
    background: var(--color-primario);
    color: var(--color-secundario);
    padding: 16px;
}

.panel-menu__club {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.panel-menu__responsable {
    margin: 4px 0 0;
    font-size: 14px;
}

.panel-menu__numero {
    margin: 2px 0 0;
    font-size: 12px;
    opacity: 0.85;
}

.panel-menu__items {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.panel-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    color: var(--color-tinta);
    text-decoration: none;
    font-size: 15px;
    border-left: 3px solid transparent;
}

.panel-menu__item--activo {
    border-left-color: var(--color-primario);
    font-weight: 500;
}

.panel-menu__item:hover {
    background: var(--color-lienzo);
}

.panel-menu__contador {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-alerta-fondo);
    color: var(--color-alerta-texto);
    font-size: 12px;
    font-weight: 700;
}

.tarjeta {
    background: var(--color-superficie);
    border-radius: var(--radio-tarjeta);
    padding: 16px;
    margin-bottom: 18px;
    border: 0.5px solid var(--color-borde);
}

.tarjeta--aviso {
    text-align: center;
}

.identidad-label {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--color-atenuado);
    margin: 0 0 4px;
}

.identidad-numero {
    color: var(--color-atenuado);
    margin: 4px 0 0;
    font-size: 13px;
}

/* Bloque de estado: unico elemento de la pantalla con fondo
   saturado. Con deuda: fondo de marca e importe total en 28px
   blanco. Sin deuda: fondo de exito, sin accion de pago. */
.bloque-estado {
    border-radius: var(--radio-tarjeta);
    padding: 16px;
    margin: 0 0 18px;
    text-align: center;
}

.bloque-estado--deuda {
    background: var(--color-primario);
    color: var(--color-secundario);
}

.bloque-estado--exito {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.bloque-estado__contexto {
    margin: 0;
    font-size: 15px;
    opacity: 0.9;
}

.bloque-estado--exito .bloque-estado__contexto {
    opacity: 1;
}

.bloque-estado__importe {
    margin: 8px 0 16px;
}

.bloque-estado__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    background: var(--color-secundario);
    color: var(--color-primario);
    border-radius: var(--radio-control);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

/* Botones por rol V2. */
.btn-primario {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radio-control);
    background: var(--color-primario);
    color: var(--color-secundario);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

.btn-secundario {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-control);
    background: var(--color-superficie);
    color: var(--color-tinta);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

.btn-terciario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--color-texto-secundario);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    list-style: none;
}

.btn-terciario::-webkit-details-marker {
    display: none;
}

.btn-terciario--destructivo {
    color: var(--color-alerta-texto);
}

/* Acceso a carnets. */
.lista-grupo-familiar {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-grupo-familiar li {
    border: 0.5px solid var(--color-borde);
    border-radius: var(--radio-control);
    margin-bottom: 10px;
}

.lista-grupo-familiar a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--color-tinta);
    text-decoration: none;
    font-size: 14px;
}

/* Cuotas. */
.seleccionar-todas {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: 12px;
    font-size: 15px;
}

.seleccionar-todas input,
.cuota-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primario);
    flex-shrink: 0;
}

.lista-cuotas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cuota {
    border: 0.5px solid var(--color-borde);
    border-radius: var(--radio-cuota);
    margin-bottom: 10px;
    overflow: hidden;
}

.cuota--seleccionada {
    border: 1.5px solid var(--color-primario);
}

/* Progresivo sin JavaScript: si el navegador soporta :has(), la
   fila tambien se resalta por CSS puro; portal.js ademas aplica la
   clase .cuota--seleccionada como mecanismo principal. */
.cuota:has(.cuota-checkbox:checked) {
    border: 1.5px solid var(--color-primario);
}

.cuota label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
}

.cuota-texto {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.cuota-periodo {
    font-size: 16px;
    font-weight: 500;
}

.cuota-total {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

.cuota-vencimiento {
    display: block;
    font-size: 13px;
    color: var(--color-atenuado);
    padding: 0 12px 8px 42px;
}

.cuota-detalle {
    border-top: 0.5px solid var(--color-borde);
}

.cuota-detalle summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px 0 42px;
    font-size: 13px;
    color: var(--color-texto-secundario);
    cursor: pointer;
    list-style: none;
}

.cuota-detalle summary::-webkit-details-marker {
    display: none;
}

.cuota-detalle summary::before {
    content: "Ver detalle";
}

.cuota-detalle[open] summary::before {
    content: "Ocultar detalle";
}

.detalle-cuota {
    list-style: none;
    margin: 0;
    padding: 0 12px 12px 42px;
    font-size: 13px;
    color: var(--color-texto-secundario);
}

.resumen-seleccion {
    background: var(--color-superficie);
    box-shadow: var(--sombra-elevada);
    border-radius: var(--radio-control);
    padding: 12px 16px;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 500;
}

#boton-pagar {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radio-control);
    font-size: 15px;
    font-weight: 500;
}

/* Orden mínima B2 (corrección de assets y estado, 2026-08-20 22:15):
   el aspecto gris/"not-allowed" queda exclusivamente para el estado
   realmente deshabilitado (sin pasarela configurada); con la pasarela
   habilitada, el botón se ve y se comporta como una acción primaria. */
#boton-pagar:disabled {
    background: #D0D5DD;
    color: var(--color-atenuado);
    cursor: not-allowed;
}

#boton-pagar:not(:disabled) {
    background: var(--color-primario);
    color: var(--color-secundario);
    cursor: pointer;
}

#boton-pagar:not(:disabled):hover {
    filter: brightness(0.92);
}

#boton-pagar:not(:disabled):focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
}

.boton-pagar__estado {
    font-size: 13px;
    color: var(--color-texto-secundario);
    margin: 8px 0 0;
    text-align: center;
}

.abandonar-confirmacion {
    margin-top: 12px;
    margin-bottom: 0;
    text-align: center;
}

.abandonar-confirmacion .btn-secundario {
    margin-top: 8px;
}

.tarjeta--comprobante-muestra {
    border: 1px dashed var(--color-borde);
    background: var(--color-lienzo);
}

.etiqueta-muestra {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-atenuado);
    text-transform: uppercase;
    margin: 0 0 8px;
}

.tarjeta--comprobante-muestra dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0;
}

.tarjeta--comprobante-muestra dt {
    color: var(--color-atenuado);
    font-size: 13px;
}

.tarjeta--comprobante-muestra dd {
    margin: 0;
    font-size: 14px;
}

/* Carnet: banda de marca + cuerpo blanco, QR sin recuadro propio. */
.tarjeta--carnet {
    padding: 0;
    overflow: hidden;
    text-align: center;
    border-radius: var(--radio-credencial);
}

.carnet-banda {
    background: var(--color-primario);
    color: var(--color-secundario);
    padding: 16px;
}

.carnet-banda__escudo {
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    display: block;
}

.carnet-banda__club {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.carnet-banda__localidad {
    margin: 2px 0 0;
    font-size: 12px;
    opacity: 0.85;
}

.carnet-cuerpo {
    padding: 20px 16px;
}

.carnet-cuerpo__nombre {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
}

.carnet-cuerpo__numero {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--color-atenuado);
}

.carnet-qr {
    margin: 20px auto;
    max-width: 200px;
}

.carnet-qr svg {
    width: 100%;
    height: auto;
    display: block;
}

.carnet-leyenda {
    margin: 0;
    font-size: 12px;
    color: var(--color-atenuado);
}

.carnet-sin-qr {
    color: var(--color-atenuado);
    margin: 0 0 16px;
    font-size: 14px;
}

.carnet-form {
    margin: 0;
}

.revocar-confirmacion {
    text-align: center;
    margin: 0 0 18px;
}

.revocar-confirmacion__texto {
    font-size: 13px;
    color: var(--color-texto-secundario);
    margin: 8px 0;
}

.revocar-confirmacion .carnet-form {
    display: inline-block;
}

.revocar-confirmacion .carnet-form button {
    background: none;
    border: none;
    min-height: 44px;
    padding: 0 4px;
    color: var(--color-alerta-texto);
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}

/* Validador. */
.tarjeta--validacion {
    text-align: center;
}

.validacion-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 999px;
    font-size: 26px;
}

.tarjeta--validacion-exito .validacion-icono {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.tarjeta--validacion-alerta .validacion-icono {
    background: var(--color-alerta-fondo);
    color: var(--color-alerta-texto);
}

.tarjeta--validacion h1 {
    font-size: 19px;
    font-weight: 500;
    margin: 12px 0 0;
}

.validador-al-dia,
.validador-pendiente {
    font-size: 26px;
    font-weight: 500;
    margin: 8px 0 0;
}

.validador-al-dia {
    color: var(--color-exito-texto);
}

.validador-pendiente {
    color: var(--color-alerta-texto);
}

.validacion-sello {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-atenuado);
}

@media (max-width: 480px) {
    .cuota-texto {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bloque-estado__accion,
    .panel-menu__item,
    .btn-primario,
    .btn-secundario {
        transition: background-color 0.15s ease, color 0.15s ease;
    }
}

@media (min-width: 600px) {
    .portal {
        max-width: 560px;
        padding: 0 24px 32px;
    }

    .panel-menu__contenido {
        max-width: 560px;
    }
}