/* ========================================================================
   M-Team Gestión — sistema de diseño compartido (paleta + utilidades base)
   Se carga desde _navbar.html, que está incluido en todas las pantallas,
   así que estas variables y clases están disponibles en toda la app.

   Los valores de :root son la fuente de verdad de la marca: en pantallas
   nuevas (o al retocar una existente) usa estas variables en vez de
   escribir el hex suelto otra vez.

   Las reglas de "base compartida" de abajo coinciden a propósito con lo
   que cada plantilla ya define en su propio <style>, así que no cambian
   nada visualmente todavía — solo evitan repetirlo. Las plantillas no se
   han tocado; esto es la base para ir migrándolas poco a poco.
   ========================================================================= */

:root {
    /* Marca */
    --color-navy: #1a1a2e;
    --color-primary: #e63946;
    --color-primary-hover: #c1121f;
    --color-whatsapp: #25D366;

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

    /* Texto */
    --color-text: #212529;
    --color-text-muted: #6c757d;

    /* 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 (sin cambios visuales: mismos valores de siempre) ── */
body { background: var(--color-bg); }
.navbar { background: var(--color-navy); }
.navbar-brand { color: var(--color-primary) !important; font-weight: 700; }

/* Icono + texto junto a la marca: el rojo 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; }
.btn-primary:hover { background: var(--color-primary-hover); }

/* ── 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; }