/* ===========================================================
   METOCA — TEMAS PREDEFINIDOS (theme-presets.css)
   -----------------------------------------------------------
   Se activa con:  <html data-theme="noir-rose">
   data-theme="light"  →  este archivo NO hace nada.

   Para agregar un tema nuevo: copia un bloque de la SECCIÓN 1
   y cambia los valores. No hay que tocar PHP ni JS.

   Opcional: <html data-accent="custom"> hace que el acento
   use el color de marca del negocio en vez del del tema.
   =========================================================== */

/* ============ 1. DEFINICIÓN DE TEMAS ============ */

/* ── Rosa Noir — salones, uñas, estética ── */
html[data-theme="noir-rose"] {
    --cfg-bg:        #1a0b1a;
    --cfg-bg-deep:   #0d050d;
    --cfg-accent:    #fb2d78;
    --cfg-accent-2:  #fddcb1;
    --cfg-text-head: #f6ecf4;
    --cfg-text-body: #f6ecf4;
    --cfg-text-btn:  #ffffff;
    --cfg-font:      'Playfair Display', Georgia, serif;
    --cfg-glow:      22%;
}

/* ── Oro Noir — spa, hoteles, lujo ── */
html[data-theme="noir-gold"] {
    --cfg-bg:        #1c160c;
    --cfg-bg-deep:   #0b0805;
    --cfg-accent:    #d4af37;
    --cfg-accent-2:  #f0e0b0;
    --cfg-text-head: #f7f0e0;
    --cfg-text-body: #ede4d3;
    --cfg-text-btn:  #1c160c;
    --cfg-font:      'Playfair Display', Georgia, serif;
    --cfg-glow:      18%;
}

/* ── Océano Noir — barberías, gimnasios ── */
html[data-theme="noir-ocean"] {
    --cfg-bg:        #0b1a24;
    --cfg-bg-deep:   #050d12;
    --cfg-accent:    #22d3ee;
    --cfg-accent-2:  #a5f3fc;
    --cfg-text-head: #eaf6fa;
    --cfg-text-body: #dceaf0;
    --cfg-text-btn:  #052029;
    --cfg-font:      'Outfit', sans-serif;
    --cfg-glow:      20%;
}

/* ── Violeta Noir — tatuajes, estudios creativos ── */
html[data-theme="noir-violet"] {
    --cfg-bg:        #170f2b;
    --cfg-bg-deep:   #090615;
    --cfg-accent:    #a78bfa;
    --cfg-accent-2:  #ddd6fe;
    --cfg-text-head: #f2eefc;
    --cfg-text-body: #e5dff5;
    --cfg-text-btn:  #1a1030;
    --cfg-font:      'Outfit', sans-serif;
    --cfg-glow:      22%;
}

/* ── Clínica — dentistas, veterinarios, médicos ── */
html[data-theme="clinic"] {
    --cfg-bg:        #f0f7fa;
    --cfg-bg-deep:   #ffffff;
    --cfg-accent:    #0ea5e9;
    --cfg-accent-2:  #0369a1;
    --cfg-text-head: #0f2b3a;
    --cfg-text-body: #33505e;
    --cfg-text-btn:  #ffffff;
    --cfg-font:      'Manrope', sans-serif;
    --cfg-glow:      8%;
}

/* ── Arena — barberías clásicas, cafés ── */
html[data-theme="sand"] {
    --cfg-bg:        #faf4ec;
    --cfg-bg-deep:   #fffdfa;
    --cfg-accent:    #b45309;
    --cfg-accent-2:  #92400e;
    --cfg-text-head: #2b1d12;
    --cfg-text-body: #55432f;
    --cfg-text-btn:  #ffffff;
    --cfg-font:      'Playfair Display', Georgia, serif;
    --cfg-glow:      9%;
}

/* ============ 2. MOTOR (igual para todos los temas) ============ */
/* Aplica a cualquier data-theme que no sea "light". */

html[data-theme]:not([data-theme="light"]) {
    --t-bg:         var(--cfg-bg);
    --t-bg-deep:    var(--cfg-bg-deep);
    --t-accent:     var(--cfg-accent);
    --t-accent-2:   var(--cfg-accent-2);
    --t-text-head:  var(--cfg-text-head);
    --t-text:       var(--cfg-text-body);
    --t-text-btn:   var(--cfg-text-btn);
    --t-font:       var(--cfg-font);

    /* Todo lo demás se deriva: funciona igual en claro y oscuro */
    --t-text-soft:  color-mix(in srgb, var(--t-text) 62%, transparent);
    --t-text-faint: color-mix(in srgb, var(--t-text) 34%, transparent);
    --t-card:       color-mix(in srgb, var(--t-text) 6%, transparent);
    --t-card-hi:    color-mix(in srgb, var(--t-text) 10%, transparent);
    --t-border:     color-mix(in srgb, var(--t-text) 14%, transparent);
    --t-shadow:     0 18px 45px color-mix(in srgb, var(--t-bg-deep) 55%, transparent);

    /* Sobrescribe los settings legacy color_header / color_tabbar:
       en modo tema, header y tabbar se funden con el fondo. */
    --header-bg:    color-mix(in srgb, var(--t-bg) 92%, transparent);
    --tabbar-bg:    color-mix(in srgb, var(--t-bg-deep) 88%, transparent);
}

/* Override opcional: usar el color de marca del negocio como acento */
html[data-accent="custom"][data-theme]:not([data-theme="light"]) {
    --t-accent: var(--brand-accent, var(--cfg-accent));
}

html[data-theme]:not([data-theme="light"]),
html[data-theme]:not([data-theme="light"]) body {
    background: var(--t-bg-deep) !important;
    color: var(--t-text);
}

/* Degradado ambiental de fondo */
html[data-theme]:not([data-theme="light"]) body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 55% at 50% 0%,
            color-mix(in srgb, var(--t-accent) var(--cfg-glow, 20%), transparent) 0%, transparent 62%),
        linear-gradient(180deg, var(--t-bg) 0%, var(--t-bg-deep) 70%);
}

/* ---------- Remapeo de utilidades Tailwind ---------- */
html[data-theme]:not([data-theme="light"]) .bg-white,
html[data-theme]:not([data-theme="light"]) .bg-slate-50,
html[data-theme]:not([data-theme="light"]) .bg-slate-50\/50,
html[data-theme]:not([data-theme="light"]) .bg-slate-100 {
    background-color: var(--t-card) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html[data-theme]:not([data-theme="light"]) .border-slate-100,
html[data-theme]:not([data-theme="light"]) .border-slate-200,
html[data-theme]:not([data-theme="light"]) .border-slate-300,
html[data-theme]:not([data-theme="light"]) .divide-slate-100 > * + * {
    border-color: var(--t-border) !important;
}

html[data-theme]:not([data-theme="light"]) .text-slate-900,
html[data-theme]:not([data-theme="light"]) .text-slate-800,
html[data-theme]:not([data-theme="light"]) .text-on-surface,
html[data-theme]:not([data-theme="light"]) h1,
html[data-theme]:not([data-theme="light"]) h2,
html[data-theme]:not([data-theme="light"]) h3 {
    color: var(--t-text-head) !important;
}

html[data-theme]:not([data-theme="light"]) .text-slate-700,
html[data-theme]:not([data-theme="light"]) .text-slate-600,
html[data-theme]:not([data-theme="light"]) .text-slate-500,
html[data-theme]:not([data-theme="light"]) .text-on-surface-variant {
    color: var(--t-text-soft) !important;
}

html[data-theme]:not([data-theme="light"]) .text-slate-400,
html[data-theme]:not([data-theme="light"]) .text-slate-300,
html[data-theme]:not([data-theme="light"]) .text-slate-200 {
    color: var(--t-text-faint) !important;
}

html[data-theme]:not([data-theme="light"]) .shadow-sm,
html[data-theme]:not([data-theme="light"]) .shadow-lg,
html[data-theme]:not([data-theme="light"]) .shadow-2xl {
    box-shadow: var(--t-shadow) !important;
}

html[data-theme]:not([data-theme="light"]) input,
html[data-theme]:not([data-theme="light"]) textarea,
html[data-theme]:not([data-theme="light"]) select {
    background-color: var(--t-card) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
}
html[data-theme]:not([data-theme="light"]) input::placeholder,
html[data-theme]:not([data-theme="light"]) textarea::placeholder {
    color: var(--t-text-faint) !important;
}

/* Botones de acento */
html[data-theme]:not([data-theme="light"]) .bg-primary,
html[data-theme]:not([data-theme="light"]) .tab-fab,
html[data-theme]:not([data-theme="light"]) .cart-fab,
html[data-theme]:not([data-theme="light"]) .review-avatar {
    color: var(--t-text-btn) !important;
}
html[data-theme]:not([data-theme="light"]) .bg-primary {
    background-color: var(--t-accent) !important;
}

/* ---------- Tipografía ---------- */
html[data-theme]:not([data-theme="light"]) h1,
html[data-theme]:not([data-theme="light"]) h2,
html[data-theme]:not([data-theme="light"]) .hero-title-accent,
html[data-theme]:not([data-theme="light"]) .det-title,
html[data-theme]:not([data-theme="light"]) .reviews-title {
    font-family: var(--t-font);
    letter-spacing: -0.01em;
}

html[data-theme]:not([data-theme="light"]) .hero-title-accent {
    font-style: italic;
    color: var(--t-accent-2);
}

/* ---------- Hero ---------- */
html[data-theme]:not([data-theme="light"]) .hero-carousel {
    background: transparent !important;
    border: none !important;
    position: relative;
}
html[data-theme]:not([data-theme="light"]) .hero-carousel::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    pointer-events: none;
    background: linear-gradient(to top, var(--t-bg-deep) 0%, transparent 100%);
}

/* ---------- Stat cards ---------- */
html[data-theme]:not([data-theme="light"]) .stat-card {
    background: var(--t-card) !important;
    border: 1px solid var(--t-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t-text) 8%, transparent);
}
html[data-theme]:not([data-theme="light"]) .stat-card--served {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--t-accent) 26%, transparent),
        color-mix(in srgb, var(--t-accent) 8%, transparent)) !important;
    border-color: color-mix(in srgb, var(--t-accent) 35%, transparent);
}
html[data-theme]:not([data-theme="light"]) .stat-value { color: var(--t-text-head); }
html[data-theme]:not([data-theme="light"]) .stat-label { color: var(--t-text-faint); }
html[data-theme]:not([data-theme="light"]) .stat-icon  { color: var(--t-accent-2); }

/* ---------- Galería ---------- */
html[data-theme]:not([data-theme="light"]) .gallery-page-container {
    background: transparent !important;
}
html[data-theme]:not([data-theme="light"]) .gallery-grid-item {
    border-radius: 14px;
    overflow: hidden;
    background: var(--t-card);
}

/* ---------- Header ---------- */
html[data-theme]:not([data-theme="light"]) .app-header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--t-border) !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--t-bg-deep) 45%, transparent) !important;
    color: var(--t-text-head) !important;
}
html[data-theme]:not([data-theme="light"]) .app-header * {
    color: inherit;
}
/* Los iconos circulares del header (menú, campana, candado) */
html[data-theme]:not([data-theme="light"]) .app-header .bg-white\/10,
html[data-theme]:not([data-theme="light"]) .app-header button {
    background-color: var(--t-card-hi) !important;
    color: var(--t-text-head) !important;
}

/* ---------- Tab bar + FAB ---------- */
html[data-theme]:not([data-theme="light"]) .tab-bar {
    background: color-mix(in srgb, var(--t-bg-deep) 88%, transparent) !important;
    border-top: 1px solid var(--t-border);
    box-shadow: 0 -20px 45px color-mix(in srgb, var(--t-bg-deep) 60%, transparent);
    color: var(--t-text);
}
html[data-theme]:not([data-theme="light"]) .tab-item        { color: var(--t-text-faint); }
html[data-theme]:not([data-theme="light"]) .tab-item.active { color: var(--t-accent); }
html[data-theme]:not([data-theme="light"]) .tab-fab {
    background: var(--t-accent) !important;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--t-accent) 55%, transparent);
}
html[data-theme]:not([data-theme="light"]) .tab-fab-label { color: var(--t-text-soft); }

/* ---------- Página de detalles (bloque iOS) ---------- */
html[data-theme]:not([data-theme="light"]) {
    --ios-bg:    var(--t-bg-deep);
    --ios-card:  var(--t-card);
    --ios-sep:   var(--t-border);
    --ios-text:  var(--t-text-head);
    --ios-label: var(--t-text-faint);
    --ios-blue:  var(--t-accent);
}
html[data-theme]:not([data-theme="light"]) .det-root {
    background: transparent !important;
}

/* ---------- Reseñas ---------- */
html[data-theme]:not([data-theme="light"]) .review-card,
html[data-theme]:not([data-theme="light"]) .reviews-summary {
    background: var(--t-card) !important;
    border: 1px solid var(--t-border);
}
html[data-theme]:not([data-theme="light"]) .review-avatar {
    background: var(--t-accent) !important;
}

/* ---------- Carrito ---------- */
html[data-theme]:not([data-theme="light"]) .cart-fab {
    background: var(--t-accent) !important;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--t-accent) 50%, transparent);
}

/* ---------- Fallback sin color-mix (Safari < 16.2) ---------- */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    html[data-theme]:not([data-theme="light"]) {
        --t-text-soft:  var(--t-text);
        --t-text-faint: var(--t-text);
        --t-card:       rgba(128, 128, 128, 0.12);
        --t-card-hi:    rgba(128, 128, 128, 0.18);
        --t-border:     rgba(128, 128, 128, 0.28);
        --t-shadow:     0 18px 45px rgba(0, 0, 0, 0.35);
        --header-bg:    var(--t-bg);
        --tabbar-bg:    var(--t-bg-deep);
    }
    html[data-theme]:not([data-theme="light"]) .tab-item { opacity: .55; }
    html[data-theme]:not([data-theme="light"]) .tab-item.active { opacity: 1; }
    html[data-theme]:not([data-theme="light"]) body::before {
        background: linear-gradient(180deg, var(--t-bg) 0%, var(--t-bg-deep) 70%);
    }
}


/* ============ 3. ESCRITORIO (≥1024px) ============ */
/* booking.php fuerza fondos claros y barras blancas en desktop.
   Aquí se reasignan a los tokens del tema. */
@media (min-width: 1024px) {

    html[data-theme]:not([data-theme="light"]),
    html[data-theme]:not([data-theme="light"]) body {
        background: var(--t-bg-deep) !important;
    }

    /* Barra de pestañas horizontal */
    html[data-theme]:not([data-theme="light"]) .dt-tabs {
        background: color-mix(in srgb, var(--t-bg) 92%, transparent) !important;
        border-bottom: 1px solid var(--t-border) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        max-width: none;
        padding-left: max(32px, calc((100vw - 1280px) / 2 + 32px));
        padding-right: 32px;
    }
    html[data-theme]:not([data-theme="light"]) .dt-tab {
        color: var(--t-text-faint) !important;
    }
    html[data-theme]:not([data-theme="light"]) .dt-tab:hover {
        color: var(--t-text-soft) !important;
    }
    html[data-theme]:not([data-theme="light"]) .dt-tab.active {
        color: var(--t-accent) !important;
        border-bottom-color: var(--t-accent) !important;
    }

    /* Carrito lateral fijo */
    html[data-theme]:not([data-theme="light"]) .dt-cart-sticky {
        background: var(--t-card) !important;
        border: 1px solid var(--t-border) !important;
        box-shadow: var(--t-shadow) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    /* El header no debe cortarse al ancho del contenido */
    html[data-theme]:not([data-theme="light"]) .app-header {
        background: color-mix(in srgb, var(--t-bg) 92%, transparent) !important;
    }
}


/* ============ 4. PANEL DE ADMIN EMBEBIDO (booking.php) ============ */
/* Las tarjetas del dashboard se diseñaron para fondo claro:
   cristal blanco al 40% y números en degradado gris oscuro.
   Sobre los temas oscuros quedaban ilegibles. */
@media (min-width: 0px) {

    html[data-theme]:not([data-theme="light"]) .vibrant-card {
        background: var(--t-card-hi) !important;
        border: 1px solid var(--t-border) !important;
        color: var(--t-text) !important;
        box-shadow: 0 20px 40px -12px color-mix(in srgb, var(--t-bg-deep) 60%, transparent) !important;
    }

    /* El número: color sólido del tema, sin degradado que lo apague */
    html[data-theme]:not([data-theme="light"]) .vibrant-card .v-value,
    html[data-theme]:not([data-theme="light"]) .pearl-text {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: var(--t-text-head) !important;
        color: var(--t-text-head) !important;
    }

    html[data-theme]:not([data-theme="light"]) .vibrant-card .v-label {
        color: var(--t-text-soft) !important;
    }

    /* Icono decorativo: apenas visible, no compite con la cifra */
    html[data-theme]:not([data-theme="light"]) .vibrant-card .v-icon-float {
        opacity: 0.16 !important;
    }

    /* Brillo diagonal: casi imperceptible en oscuro */
    html[data-theme]:not([data-theme="light"]) .vibrant-card .shine {
        opacity: 0.05 !important;
    }

    /* ── Calendario de la agenda (cal-premium-*) ── */
    html[data-theme]:not([data-theme="light"]) .cal-premium-container {
        background: var(--t-card) !important;
        border: 1px solid var(--t-border) !important;
        color: var(--t-text) !important;
        box-shadow: var(--t-shadow) !important;
    }
    /* Botones de mes: eran bg-white con borde claro */
    html[data-theme]:not([data-theme="light"]) .cal-header .bg-white {
        background-color: var(--t-card-hi) !important;
        border-color: var(--t-border) !important;
        color: var(--t-text) !important;
    }
    /* Números de días fuera del mes actual */
    html[data-theme]:not([data-theme="light"]) .cal-grid .text-slate-300,
    html[data-theme]:not([data-theme="light"]) .cal-grid .text-slate-400 {
        color: var(--t-text-faint) !important;
    }
}


/* ============ 5. TARJETAS DE SERVICIO ============ */
/* .ios-svc-card usa background:#fff y bordes claros fijos, así que
   quedaban como bloques blancos sobre los temas oscuros. */
html[data-theme]:not([data-theme="light"]) .ios-svc-card {
    background: var(--t-card-hi) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme]:not([data-theme="light"]) .ios-svc-card.chosen {
    border-color: var(--t-accent) !important;
    background: color-mix(in srgb, var(--t-accent) 12%, transparent) !important;
}
html[data-theme]:not([data-theme="light"]) .ios-svc-name {
    color: var(--t-text-head) !important;
}
html[data-theme]:not([data-theme="light"]) .ios-svc-meta,
html[data-theme]:not([data-theme="light"]) .ios-svc-desc {
    color: var(--t-text-soft) !important;
}
html[data-theme]:not([data-theme="light"]) .ios-svc-price {
    color: var(--t-accent) !important;
}
/* Botón "Agregar": era gris claro sobre blanco */
html[data-theme]:not([data-theme="light"]) .ios-svc-add {
    background: var(--t-card) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
}
html[data-theme]:not([data-theme="light"]) .ios-svc-add.checked {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: var(--t-text-btn) !important;
}