/* =====================================================================
   Club de Fidelidad · Estilos base (unificado, mobile-first)
   ---------------------------------------------------------------------
   Los colores de marca viven en assets/css/theme-<centro>.css
   (variables --club-*). Aquí sólo hay estructura y componentes.
   Se carga DESPUÉS de bootstrap y ANTES del tema del centro.
   ===================================================================== */

/* ------------------------------------------------- Variables por defecto */
:root {
    /* Marca (las sobrescribe cada theme-<centro>.css) */
    --club-primary: #2b2b2b;
    --club-primary-dark: #2b2b2b;
    --club-primary-ink: #ffffff;   /* texto sobre --club-primary */
    --club-accent: #18abac;        /* sólo tarjeta virtual e icono de OK */

    /* Niveles del socio (Bronce / Plata / Oro) */
    --club-gold: #e5b423;
    --club-silver: #929292;
    --club-bronze: #c17421;
    --club-tier-ink: #201a06;      /* texto sobre la pastilla de nivel */

    /* Superficies y texto */
    --club-page-bg: #f5f7fa;
    --club-surface: #f0f0f0;
    --club-field: #f8fafc;
    --club-line: #dde3ea;
    --club-text: #1a2230;
    --club-muted: #5d6879;
    --club-box-bg: #eff8ff;        /* aviso informativo */

    /* Estados */
    --club-error: #b3261e;
    --club-ok: #dff0d8;

    /* Forma */
    --club-radius: 16px;
    --club-radius-sm: 12px;
}

/* ------------------------------------------------------------------ Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; }

body.club-body {
    background-color: var(--club-page-bg);
    color: var(--club-text);
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    /* Áreas seguras (notch) y hueco para la barra inferior en móvil */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { body.club-body { padding-bottom: 0; } }

/* :where() = especificidad 0, así cualquier clase (botones, nav...) gana sin !important */
:where(.club-body) a { color: var(--club-primary-dark); }
img { max-width: 100%; height: auto; }

.club-link { color: var(--club-primary-dark); text-decoration: underline; }
.club-link:hover { color: var(--club-primary); }

.club-link-btn {
    background: none; border: 0; padding: 0;
    color: var(--club-primary-dark); text-decoration: underline; cursor: pointer;
}
.club-link-btn:hover { color: var(--club-primary); }

/* Texto sólo para lectores de pantalla */
.club-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Campo honeypot: invisible para las personas, visible para los bots */
.club-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

/* ------------------------------------------------- Cabecera e idiomas */
.club-header { padding: 0 0 6px; }

.club-header-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 14px 0;
}

.club-logo { display: inline-block; line-height: 0; text-decoration: none; }
.club-logo img { max-height: 70px; width: auto; }
.club-logo-text {
    font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
    color: var(--club-primary);
}

.club-langs {
    display: flex; gap: 2px; padding: 3px; white-space: nowrap;
    background: var(--club-surface); border: 1px solid var(--club-line); border-radius: 999px;
}
.club-lang-sep { display: none; }
.club-lang {
    padding: 5px 10px; border-radius: 999px;
    font-size: .8rem; font-weight: 600; color: var(--club-muted); text-decoration: none;
}
.club-lang:hover { color: var(--club-primary); }
.club-lang.is-active { background: var(--club-primary); color: var(--club-primary-ink); }

/* ------------------------------------------------------------ Navegación
   Móvil: barra fija inferior. Escritorio: píldoras bajo la cabecera. */
.club-user-nav { display: flex; gap: 8px; }
.club-nav-link {
    display: flex; align-items: center;
    border-radius: var(--club-radius-sm);
    color: var(--club-muted); font-weight: 600; text-decoration: none;
}
.club-nav-link .bi { line-height: 1; }

/* Enlace activo (sin tocar el PHP): se deduce de data-page del body */
.club-body[data-page="cuenta"]  .club-nav-link[href*="-cuenta"]:not(.club-nav-logout),
.club-body[data-page="tarjeta"] .club-nav-link[href*="-tarjeta"],
.club-body[data-page="kids"]    .club-nav-link[href*="-kids"] { color: var(--club-primary); }

@media (max-width: 767.98px) {
    .club-user-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; gap: 0;
        background: var(--club-surface); border-top: 1px solid var(--club-line);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .club-nav-link { flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; font-size: .75rem; }
    .club-nav-link .bi { font-size: 1.4rem; }
    .club-nav-logout { display: none; }   /* "Salir" queda al final de la página */
}
@media (min-width: 768px) {
    .club-user-nav { flex-wrap: wrap; padding-bottom: 12px; }
    .club-nav-link {
        gap: .4rem; padding: .45rem .9rem; font-size: .9rem;
        background: var(--club-surface); border: 1px solid var(--club-line); border-radius: 999px;
    }
    .club-nav-link:hover { background: var(--club-primary-ink); border-color: var(--club-primary); color: var(--club-primary); }
    .club-nav-logout { margin-left: auto; }
    .club-actions { display: none; }      /* duplica la navegación */
}

/* ------------------------------------------------------------- Contenido */
.club-main { padding: 10px 0 40px; }

.club-hero { margin: 0 0 22px; text-align: center; }
.club-hero-img { width: 100%; border-radius: var(--club-radius); }

.club-title { margin: 8px 0 16px; text-align: center; }
.club-title h1 { font-size: 1.65rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--club-text); }
.club-subtitle { margin-top: 2px; font-size: .95rem; font-weight: 400; color: var(--club-muted); }

.club-info { max-width: 760px; margin: 0 auto 22px; }
.club-info p { margin-bottom: 10px; }

/* ----------------------------------------------------- Puntos y nivel
   Único bloque de color fuerte. Los textos del HTML vienen en mayúsculas:
   se pasan a "Frase" con lowercase + ::first-letter (ver más abajo). */
.club-points {
    --club-tier: var(--club-gold);
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "l m" "v m" "u m";
    align-items: center; column-gap: 16px;
    width: 100%; height: auto; margin: 0 0 16px; padding: 20px 22px;
    text-align: left; border: 0; border-radius: 20px; box-shadow: none;
    background-color: var(--club-primary); color: var(--club-primary-ink);
}
.club-points[data-level="gold"]   { --club-tier: var(--club-gold); }
.club-points[data-level="silver"] { --club-tier: var(--club-silver); }
.club-points[data-level="bronze"] { --club-tier: var(--club-bronze); }

/* Puntos apagados (centers.php: paint_points = false): el bloque queda sólo con la
   pastilla del nivel, centrada. */
.club-points-level-only {
    grid-template-columns: 1fr; grid-template-areas: "m"; justify-items: center;
}

.club-points-label { grid-area: l; }
.club-points-value { grid-area: v; font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.club-points-unit  { grid-area: u; }
.club-points-label,
.club-points-unit  { font-size: .95rem; font-weight: 400; opacity: .92; }
.club-points-min {
    grid-area: m; white-space: nowrap;
    padding: 8px 14px; border-radius: 999px;
    font-size: .85rem; font-weight: 700;
    background: var(--club-tier); color: var(--club-tier-ink);
}

/* MAYÚSCULAS -> Frase (puntos, etiquetas de formulario y botón Guardar) */
.club-points-label, .club-points-unit, .club-points-min,
.club-body .form-label,
#clubAccountSubmit .club-btn-label { text-transform: lowercase; }
.club-points-label::first-letter, .club-points-unit::first-letter, .club-points-min::first-letter,
.club-body .form-label::first-letter,
#clubAccountSubmit .club-btn-label::first-letter { text-transform: uppercase; }
#clubAccountSubmit .club-btn-label { display: inline-block; }

/* ----------------------------------------------------------------- Cajas */
.club-box {
    background-color: var(--club-surface);
    border: 1px solid var(--club-line);
    border-radius: var(--club-radius);
    padding: 20px;
    margin-bottom: 16px;
}
.club-box-title {
    font-size: 20px; font-weight: 700; text-align: center;
    color: var(--club-primary-dark); margin-bottom: 16px;
}
.club-box-text { margin-bottom: 14px; }

.club-form-title { margin-bottom: 12px; font-size: 1.05rem; font-weight: 700; color: var(--club-text); }
.club-form-help,
.club-box-text,
.club-required-notice { font-size: .875rem; color: var(--club-muted); text-align: left; }
.club-form-help { margin-bottom: 14px; }
.club-required-notice { display: block; margin: 0 0 12px; }
.club-field-error { display: block; font-size: 12px; color: var(--club-error); margin-top: 4px; }

.club-divider { border: 0; border-top: 1px solid var(--club-line); margin: 20px 0; opacity: 1; }

/* ------------------------------------------------------------ Formulario
   Se apoya en las clases de Bootstrap (.form-label, .form-control...). */
.club-body .form-label { margin-bottom: 6px; font-size: .875rem; font-weight: 600; color: var(--club-text); }

.club-body .form-control,
.club-body .form-select {
    min-height: 48px; padding: 10px 14px;
    font-size: 16px;                         /* 16px evita el zoom automático de iOS */
    color: var(--club-text); background-color: var(--club-field);
    border: 1.5px solid var(--club-line); border-radius: var(--club-radius-sm);
}
.club-body .form-select { padding-right: 2.5rem; }
.club-body .form-control:focus,
.club-body .form-select:focus {
    border-color: var(--club-primary); background-color: var(--club-field);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-primary) 25%, transparent);
}
.club-body .form-control.is-invalid,
.club-body .form-select.is-invalid { border-color: var(--club-error); background-color: #fee1e1; }

/* Checkbox grande y con el color del centro */
.club-body .form-check { display: flex; gap: 12px; align-items: flex-start; padding-left: 0; min-height: 0; }
.club-body .form-check-input {
    width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; flex: none; float: none;
    border: 1.5px solid var(--club-line); border-radius: 6px; background-color: var(--club-field);
}
.club-body .form-check-input:checked { background-color: var(--club-primary); border-color: var(--club-primary); }
.club-body .form-check-input:focus {
    border-color: var(--club-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-primary) 25%, transparent);
}
.club-body .form-check-label { font-size: .9rem; }

/* --------------------------------------------------------------- Botones
   Las variantes usan las variables --bs-btn-* de Bootstrap: así hover,
   active y disabled respetan el color del centro sin !important. */
.club-btn-primary,
.club-btn-secondary,
.club-btn-danger {
    --bs-btn-border-width: 1.5px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 10px 28px; border-radius: 999px;
    font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}
.club-btn-primary {
    --bs-btn-color: var(--club-primary-ink); --bs-btn-bg: var(--club-primary); --bs-btn-border-color: var(--club-primary);
    --bs-btn-hover-color: var(--club-primary-ink); --bs-btn-hover-bg: var(--club-primary-dark); --bs-btn-hover-border-color: var(--club-primary-dark);
    --bs-btn-active-color: var(--club-primary-ink); --bs-btn-active-bg: var(--club-primary-dark); --bs-btn-active-border-color: var(--club-primary-dark);
    --bs-btn-disabled-color: var(--club-primary-ink); --bs-btn-disabled-bg: var(--club-primary); --bs-btn-disabled-border-color: var(--club-primary);
}
.club-btn-secondary {
    --bs-btn-color: var(--club-primary); --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--club-primary) 40%, var(--club-line));
    --bs-btn-hover-color: var(--club-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--club-primary) 8%, transparent); --bs-btn-hover-border-color: var(--club-primary);
    --bs-btn-active-color: var(--club-primary); --bs-btn-active-bg: color-mix(in srgb, var(--club-primary) 14%, transparent); --bs-btn-active-border-color: var(--club-primary);
}
.club-btn-danger {
    --bs-btn-color: var(--club-error); --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--club-error) 45%, transparent);
    --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--club-error); --bs-btn-hover-border-color: var(--club-error);
    --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--club-error); --bs-btn-active-border-color: var(--club-error);
}
.club-btn-primary:disabled,
.club-btn-secondary:disabled,
.club-btn-danger:disabled { cursor: not-allowed; }

/* Botones de formulario y de acciones: ancho completo (cómodo con el pulgar) */
.club-form .btn,
.club-actions .btn { width: 100%; }

/* Versión pequeña (bloques de la lista de hijos) */
.club-btn-sm { min-height: 40px; padding: 7px 16px; font-size: 13px; }
.club-form .club-btn-sm,
.club-actions .club-btn-sm { width: auto; }

.club-btn-link {
    background: none; border: 0; padding: 0;
    color: var(--club-primary-dark); text-decoration: underline;
    cursor: pointer; font-size: 14px;
}

.club-body .btn:focus-visible,
.club-nav-link:focus-visible,
.club-lang:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--club-primary) 50%, transparent);
    outline-offset: 2px; box-shadow: none;
}

/* Indicador de carga dentro del botón (toma el color del texto del botón) */
.club-spinner {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    border-top-color: currentColor;
    animation: club-spin .7s linear infinite;
}
@keyframes club-spin { to { transform: rotate(360deg); } }

/* Acciones inferiores: en móvil sólo "Salir", discreto */
.club-actions {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
    margin-top: 8px;
}
@media (max-width: 767.98px) {
    .club-actions .btn:not([data-club-logout]) { display: none; }
    .club-actions [data-club-logout] {
        --bs-btn-color: var(--club-muted); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
        --bs-btn-hover-color: var(--club-text); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent;
        --bs-btn-active-color: var(--club-text); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent;
        min-height: 44px; font-weight: 600;
    }
}

/* ---------------------------------------------------------------- Avisos */
.club-alert { border-radius: var(--club-radius-sm); padding: 12px 14px; margin-bottom: 16px; font-size: .9rem; }
.club-alert-error { background-color: var(--club-error); color: #ffffff; }
.club-alert-success { background-color: var(--club-ok); color: #23591f; }
.club-alert-info { background-color: var(--club-box-bg); color: var(--club-text); }

/* ------------------------------------------------- Aviso flotante (toast)
   El aviso en línea vive arriba del formulario: en un formulario largo puede
   quedar fuera de pantalla justo cuando el usuario pulsa Enviar. Este toast
   (Bootstrap) va fijo arriba, se ve desde cualquier punto de la página y no
   tapa el botón que se acaba de pulsar.
   El envoltorio no captura clics (pointer-events: none); sólo el toast. */
.club-toast-holder {
    position: fixed; left: 0; right: 0; z-index: 1090;
    top: calc(12px + env(safe-area-inset-top, 0px));
    display: flex; justify-content: center;
    padding: 0 12px; pointer-events: none;
}
.club-toast {
    width: 100%; max-width: 480px; pointer-events: auto;
    padding: 0; background-color: #ffffff; color: var(--club-text);
    border: 1px solid var(--club-line); border-left: 6px solid var(--club-error);
    border-radius: var(--club-radius-sm);
    box-shadow: 0 12px 32px rgba(16, 16, 16, .18);
}
/* El control lo lleva ClubToast (assets/js/core/toast.js): sin la clase `show`
   el aviso no ocupa sitio. No se depende del CSS de Bootstrap para esto. */
.club-toast:not(.show) { display: none; }
.club-toast-success { border-left-color: var(--club-ok); }
.club-toast-success .club-toast-icon { color: #23591f; }
.club-toast-body { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.club-toast-icon { flex: none; margin-top: 1px; font-size: 1.2rem; line-height: 1.2; color: var(--club-error); }
.club-toast-text { flex: 1 1 auto; font-size: .9rem; }
.club-toast-close { flex: none; margin-top: 2px; }

/* ------------------------------------------------------------------ Pie */
.club-footer { margin-top: 0px; padding: 0px 0 0px; font-size: .85rem; text-align: center; color: var(--club-muted); }
.club-footer .club-link,
.club-footer .club-link-btn { color: var(--club-muted); }
.club-footer-line { margin-bottom: 4px; }
.club-footer-small { font-size: 12px; }
.club-footer-sep { padding: 0 4px; }
.club-legal p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- Bloques de contenido */
.club-ok-icon { font-size: 48px; line-height: 1; color: var(--club-accent); margin-bottom: 12px; }

.club-member { margin: 16px 0; }
.club-member-label { display: block; font-size: 12px; letter-spacing: .4px; color: var(--club-muted); }
.club-member-value { display: block; font-size: 24px; letter-spacing: 1.6px; }

/* Resumen legal del alta: recuadro con desplazamiento */
.club-legal-box {
    max-height: 120px; overflow: auto; padding: 10px 12px; margin-bottom: 14px;
    border: 1px solid var(--club-line); border-radius: var(--club-radius-sm);
    background-color: var(--club-field); font-size: 12px; line-height: 1.4;
}
.club-legal-box p { margin-bottom: 6px; }

/* --------------------------------------------------------- Club de hijos */
.club-kids-list { display: grid; gap: 12px; }

.club-kid-card {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: space-between;
    padding: 14px 16px; border-radius: var(--club-radius-sm);
    border: 1px solid var(--club-line); background-color: var(--club-field);
}
.club-kid-info { min-width: 180px; }
.club-kid-name { display: block; font-size: 17px; font-weight: 700; color: var(--club-primary-dark); }
.club-kid-meta { display: block; font-size: 13px; color: var(--club-muted); }
.club-kid-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.club-kid-empty { text-align: center; font-size: 14px; color: var(--club-muted); }
.club-kid-modal-foot { justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.club-kid-modal-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ------------------------------------------------------- Tarjeta virtual */
/* Formato VERTICAL (carné), idéntico en pantalla y en el PNG descargado: es
   el que mejor encaja en el móvil, que se lleva en vertical.
   El alto es un MÍNIMO: si el nombre ocupa dos líneas la tarjeta crece en
   lugar de recortar texto (lleva overflow: hidden para el degradado). */
.club-card {
    --club-card-qr: 220px;                 /* lado del QR en pantalla */
    position: relative; width: 100%; max-width: 320px; min-height: 460px;
    margin: 0 auto 14px; padding: 18px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    border-radius: var(--club-radius-sm); overflow: hidden;
    background-color: var(--club-primary);
    background-image: linear-gradient(160deg, var(--club-primary) 0%, var(--club-primary-dark) 55%, var(--club-accent) 100%);
    color: #ffffff; text-align: center;
    box-shadow: 0 8px 24px rgba(16, 16, 16, .18);
    background-position: center;
    background-size: cover;
}
.club-card-brand { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.club-card-body { text-align: center; }
.club-card-qr {
    display: inline-block; padding: 6px; border-radius: 8px; line-height: 0;
}
/* OJO: el QR va inline-block (nunca block) y alineado abajo.
   html2canvas (descarga de la tarjeta) pinta el fondo del recuadro encima de
   las imágenes de nivel bloque que hay dentro de un contenedor inline-block,
   así que el QR desaparecería del PNG. Con line-height: 0 el recuadro sigue
   quedando pegado a la imagen. */
.club-card-qr canvas, .club-card-qr img {
    display: inline-block; vertical-align: bottom;
    width: var(--club-card-qr) !important; height: var(--club-card-qr) !important;
}
.club-card-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.club-card-name { font-size: 16px; font-weight: 600; }
.club-card-number { font-size: 19px; font-weight: 700; letter-spacing: 1.4px; white-space: nowrap; }
.club-card-hint { font-size: 13px; color: var(--club-muted); }
.club-card-level { font-size: 13px; color: var(--club-muted); }

/* ----------------------------------------------------------- Responsive */
@media (max-width: 575px) {
    .club-logo img { max-height: 54px; }
    .club-toast-holder { top: calc(8px + env(safe-area-inset-top, 0px)); padding: 0 8px; }
    .club-toast-text { font-size: .875rem; }
    .club-kid-actions { width: 100%; }
    .club-card { --club-card-qr: 150px; max-width: 280px; min-height: 380px; padding: 14px 16px; }
    .club-card-number { font-size: 16px; letter-spacing: 1px; }
    .club-card-name { font-size: 14px; }
}

/* Accesibilidad: sin transiciones si el usuario lo pide (el spinner sigue girando) */
@media (prefers-reduced-motion: reduce) { .club-body * { transition: none !important; } }