/* ========================================================================
   CTSAG Gestión — sistema de diseño (paleta + tipografía + utilidades base)
   Se carga desde _navbar.html (incluido en casi toda la app) y desde
   _base_sitio.html, así que estas variables están disponibles en toda
   la app, tanto en los paneles internos como en el sitio público.

   Paleta extraída del sitio real del club (ctsag.club, tema "Tennis Club"):
   azul marino de cabeceras/títulos, verde lima como acento de marca
   (clase .accent1 del tema, enlaces y botones), y el amarillo de la
   pelota del logo real como acento puntual (ese amarillo NO se usa en
   la web real del club, se añade aquí como toque de marca adicional).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

:root {
    /* Marca */
    --color-navy: #1A3150;
    --color-navy-deep: #0F2038;
    --color-primary: #96BD42;
    --color-primary-hover: #455D0A;
    --color-yellow: #FFE200;
    --color-whatsapp: #25D366;

    /* Fondo y superficies */
    --color-bg: #F6F7F3;
    --color-surface: #ffffff;

    /* Texto */
    --color-text: #232A34;
    --color-text-muted: #707276;

    /* Tipografía */
    --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Estados semánticos — referencia para ir unificando; hoy cada
       pantalla usa su propio matiz (p.ej. pendiente sale en #997404 en
       reservas y en #ffc107 en recibos). Al tocar una pantalla, usar
       estas variables en vez de un hex nuevo. */
    --color-pendiente: #997404;
    --color-confirmado: #2dc653;
    --color-rechazado: #6c757d;
    --color-info: #0d6efd;
    --color-alerta: #dc3545;

    /* Sombra y radio, para las "card" blancas repetidas en casi toda la app */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* ── Base compartida ── */
body { background: var(--color-bg); font-family: var(--font-body); color: var(--color-text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-navy); }
.navbar { background: var(--color-navy); }
.navbar-brand { color: var(--color-primary) !important; font-weight: 700; }

/* Icono + texto junto a la marca: el verde lo lleva el emblema, el texto va
   en blanco para no competir por el mismo color (ver _navbar.html y afines). */
.navbar-brand.brand-emblema { color: #fff !important; }
.btn-primary { background: var(--color-primary); border: none; font-family: var(--font-heading); font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-hover); }

/* ── Tablas: cabecera con tinte de marca (paneles internos) ── */
.table thead th, table thead th {
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-primary-hover);
    background: #EEF2E4;
    border-bottom: none;
    font-weight: 700;
}

/* ── Cards: acento superior sutil, consistente con el resto de la marca ── */
.card { border-color: #E4E7E8; }
.card.border-0 { border: none; }

/* ── Badges de estado (alumnos, recibos, mandatos SEPA...) ── */
.badge-ctsag-activo { background: #EAF1D9; color: var(--color-primary-hover); }
.badge-ctsag-pendiente { background: #FFF6C8; color: #7A6900; }
.badge-ctsag-info { background: #E7EEF7; color: var(--color-navy); }

/* ── Utilidades nuevas, de uso opcional ──
   No sustituyen clases existentes; están para usarlas en pantallas nuevas
   o al reescribir una, en vez de copiar otra vez box-shadow/border-radius. */
.app-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.btn-whatsapp {
    background: var(--color-whatsapp);
    color: #fff;
    border: none;
}
.btn-whatsapp:hover { color: #fff; opacity: 0.9; }