/* ==========================================================================
   MI SPA · Design System (Brand Theme Layer)
   --------------------------------------------------------------------------
   Capa de marca que EVOLUCIONA el template VRISTO hacia la identidad de
   "MI SPA" (loto + vino/magenta) sin reescribir el template ni tocar lógica.

   Cómo funciona:
   - Se carga DESPUÉS de `style.css`, por lo que sus reglas ganan por orden.
   - Re-colorea el color "primary" del template (antes azul #4361ee) al
     magenta de marca #E11D6E usando tokens reutilizables (CSS variables).
   - Refina componentes ya existentes (panel, btn, badge, inputs, tablas,
     sidebar, header) en lugar de crear componentes nuevos.

   Para revertir: basta con quitar el <link> de este archivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS  (paleta, neutros, estados, radios, sombras, espacios)
   Los colores de marca se exponen como tripletes RGB ("R G B") para poder
   usarlos con opacidad: rgb(var(--mispa-primary) / .15)
   -------------------------------------------------------------------------- */
:root {
    /* Marca · Magenta / Rosa-vino */
    --mispa-primary:        225 29 110;   /* #E11D6E  primario */
    --mispa-primary-700:    168 22 79;    /* #A8164F */
    --mispa-primary-600:    199 24 96;    /* #C71860  hover */
    --mispa-primary-400:    240 58 134;   /* #F03A86  activo brillante */
    --mispa-primary-200:    247 169 200;  /* #F7A9C8 */
    --mispa-primary-50:     252 231 240;  /* #FCE7F0  fondos suaves */

    /* Marca · Vino / Burdeos (sidebar, encabezados de marca) */
    --mispa-wine-900:       63 10 29;     /* #3F0A1D */
    --mispa-wine-800:       86 16 48;     /* #561030 */
    --mispa-wine-700:       109 21 57;    /* #6D1539 */

    /* Gradientes de marca reutilizables */
    --mispa-sidebar-bg:     linear-gradient(180deg, #A10E5A 0%, #7B0F59 35%, #4A0B4E 70%, #2E063D 100%);
    --mispa-active-pill:    linear-gradient(135deg, #F04D93 0%, #E5387F 50%, #D92D76 100%);
    --mispa-brand-grad:     linear-gradient(135deg, #E11D6E 0%, #A8164F 100%);
    --mispa-promo-card:     linear-gradient(135deg, #D82E74 0%, #C3226A 50%, #A91D5C 100%);

    /* Neutros (texto / superficies) — tono cálido para acompañar el magenta */
    --mispa-bg:             247 244 246;  /* #F7F4F6  fondo app */
    --mispa-surface:        255 255 255;  /* #FFFFFF  paneles */
    --mispa-border:         234 226 231;  /* #EAE2E7  bordes suaves */
    --mispa-ink:            33 28 36;      /* #211C24  texto principal */
    --mispa-muted:          124 116 130;  /* #7C7482  texto secundario */

    /* Radios / sombras (look premium, esquinas más suaves y sombras finas) */
    --mispa-radius:         0.875rem;     /* 14px  paneles/cards */
    --mispa-radius-sm:      0.625rem;     /* 10px  botones/inputs */
    --mispa-shadow-sm:      0 1px 2px rgba(33, 28, 36, .04), 0 1px 3px rgba(33, 28, 36, .06);
    --mispa-shadow-md:      0 4px 16px -4px rgba(33, 28, 36, .10), 0 2px 6px -2px rgba(33, 28, 36, .06);
    --mispa-shadow-brand:   0 10px 24px -8px rgba(225, 29, 110, .45);
}

/* ==========================================================================
   2. RE-COLOR DEL "PRIMARY"  (azul del template -> magenta de marca)
   Se reescribe cada utilidad compilada que apuntaba al azul #4361ee.
   ========================================================================== */

/* Tintes "primary-light" (eran azul claro #EAF1FF -> rosa de marca) */
.bg-primary-light     { background-color: rgb(var(--mispa-primary-50) / var(--tw-bg-opacity, 1)) !important; }
.text-primary-light   { color: rgb(var(--mispa-primary-50)) !important; }
.border-primary-light { border-color: rgb(var(--mispa-primary-50)) !important; }

/* Texto / fill */
.text-primary,
.color-primary,
.primary { color: rgb(var(--mispa-primary) / var(--tw-text-opacity, 1)) !important; }
.fill-primary { fill: rgb(var(--mispa-primary)) !important; }

/* Fondos (incluye variantes de opacidad ya compiladas) */
.bg-primary      { background-color: rgb(var(--mispa-primary) / var(--tw-bg-opacity, 1)) !important; }
.bg-primary\/5   { background-color: rgb(var(--mispa-primary) / .05) !important; }
.bg-primary\/10  { background-color: rgb(var(--mispa-primary) / .10) !important; }
.bg-primary\/20  { background-color: rgb(var(--mispa-primary) / .20) !important; }
.bg-primary\/80  { background-color: rgb(var(--mispa-primary) / .80) !important; }

/* Bordes */
.border-primary       { border-color: rgb(var(--mispa-primary) / var(--tw-border-opacity, 1)) !important; }
.border-primary\/20   { border-color: rgb(var(--mispa-primary) / .20) !important; }
.border-primary\/50   { border-color: rgb(var(--mispa-primary) / .50) !important; }
.border-l-primary     { border-left-color:  rgb(var(--mispa-primary)) !important; }
.border-r-primary     { border-right-color: rgb(var(--mispa-primary)) !important; }

/* Estados hover / group / peer / enabled */
.hover\:text-primary:hover,
.hover\:text-primary\/70:hover,
.enabled\:hover\:text-primary:hover:enabled,
.peer-focus\:text-primary,
.group:hover .group-hover\:text-primary,
.group:hover .group-hover\:\!text-primary { color: rgb(var(--mispa-primary)) !important; }
/* Hover a blanco debe ganarle a .text-primary (que usa !important); si no, el
   texto queda del mismo color que el fondo al pasar el puntero (ej. botón
   "Elegir plan"). */
.hover\:text-white:hover,
.group:hover .group-hover\:text-white { color: #fff !important; }
.hover\:bg-primary:hover,
.file\:hover\:bg-primary:hover::file-selector-button,
.group:hover .group-hover\:bg-primary\/10 { background-color: rgb(var(--mispa-primary) / var(--tw-bg-opacity, 1)) !important; }
.group:hover .group-hover\:bg-primary\/10 { background-color: rgb(var(--mispa-primary) / .10) !important; }
.hover\:border-primary:hover,
.group:hover .group-hover\:border-primary { border-color: rgb(var(--mispa-primary)) !important; }
.file\:bg-primary\/90::file-selector-button { background-color: rgb(var(--mispa-primary) / .90) !important; }

/* Pseudo-elementos (toggles, separadores, flechas) */
.before\:bg-primary:before,
.peer-checked\:before\:bg-primary:before { background-color: rgb(var(--mispa-primary)) !important; }
.before\:border-primary:before,
.after\:border-primary:after { border-color: rgb(var(--mispa-primary)) !important; }
.before\:border-l-primary:before { border-left-color: rgb(var(--mispa-primary)) !important; }

/* Peer (switches / pills seleccionables) */
.peer-checked\:bg-primary     { background-color: rgb(var(--mispa-primary)) !important; }
.peer-checked\:bg-primary\/10 { background-color: rgb(var(--mispa-primary) / .10) !important; }
.peer-checked\:border-primary { border-color: rgb(var(--mispa-primary)) !important; }
.peer-checked\:text-primary   { color: rgb(var(--mispa-primary)) !important; }

/* Gradientes / ring / shadow / outline que usaban el azul */
.from-primary\/10 {
    --tw-gradient-from: rgb(var(--mispa-primary) / .10) var(--tw-gradient-from-position) !important;
    --tw-gradient-to:   rgb(var(--mispa-primary) / 0) var(--tw-gradient-to-position) !important;
}
.ring-primary\/30 { --tw-ring-color: rgb(var(--mispa-primary) / .30) !important; }
.shadow-primary   { --tw-shadow-color: rgb(var(--mispa-primary) / .55) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.outline-primary  { outline-color: rgb(var(--mispa-primary)) !important; }
.outline-primary:checked { outline-color: rgb(var(--mispa-primary)) !important; }

/* Vendors integrados que tenían el azul fijo */
.swal2-styled.swal2-confirm { background-color: rgb(var(--mispa-primary)) !important; }
.swiper-button-next,
.swiper-button-prev { color: rgb(var(--mispa-primary)) !important; }
.swiper-pagination-bullet.swiper-pagination-bullet-active { background: rgb(var(--mispa-primary)) !important; }
.btn-gradient { background-image: var(--mispa-brand-grad) !important; }

/* ==========================================================================
   3. BOTONES  (refinados: radio suave + elevación sutil al hover)
   ========================================================================== */
.btn {
    border-radius: var(--mispa-radius-sm);
    letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: rgb(var(--mispa-primary)) !important;
    border-color: rgb(var(--mispa-primary)) !important;
    color: #fff !important;
    --tw-shadow-color: rgb(var(--mispa-primary) / .45) !important;
}
.btn-primary:hover {
    background-color: rgb(var(--mispa-primary-600)) !important;
    border-color: rgb(var(--mispa-primary-600)) !important;
    box-shadow: var(--mispa-shadow-brand) !important;
    transform: translateY(-1px);
}
.btn-outline-primary {
    color: rgb(var(--mispa-primary)) !important;
    border-color: rgb(var(--mispa-primary) / .55) !important;
}
.btn-outline-primary:hover {
    background-color: rgb(var(--mispa-primary)) !important;
    border-color: rgb(var(--mispa-primary)) !important;
    color: #fff !important;
}
.badge-outline-primary {
    color: rgb(var(--mispa-primary)) !important;
    border-color: rgb(var(--mispa-primary) / .6) !important;
}

/* ==========================================================================
   4. FORMULARIOS  (focus magenta + checkbox/radio de marca)
   ========================================================================== */
.form-input,
.form-textarea,
.form-select,
.form-multiselect { border-radius: var(--mispa-radius-sm); transition: border-color .2s ease, box-shadow .2s ease; }

.form-input:focus,
.form-multiselect:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: rgb(var(--mispa-primary)) !important;
    --tw-ring-color: rgb(var(--mispa-primary) / .25) !important;
    box-shadow: 0 0 0 3px rgb(var(--mispa-primary) / .15) !important;
}
.form-checkbox,
.form-radio { color: rgb(var(--mispa-primary)) !important; }
.form-checkbox:focus,
.form-radio:focus { --tw-ring-color: rgb(var(--mispa-primary) / .35) !important; }

/* ==========================================================================
   5. PANELES / CARDS  (esquinas más suaves, borde fino, sombra premium)
   ========================================================================== */
.panel {
    border-radius: var(--mispa-radius);
    border: 1px solid rgb(var(--mispa-border));
    box-shadow: var(--mispa-shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease;
}
.panel:hover { box-shadow: var(--mispa-shadow-md); }
:is(.dark .panel) { border-color: rgb(255 255 255 / .06); }

/* ==========================================================================
   6. TABLAS  (encabezado discreto en mayúsculas + hover de fila)
   Limitado a tablas dentro de .panel para no afectar otros usos.
   ========================================================================== */
.panel table thead th {
    text-transform: uppercase;
    font-size: .6875rem;
    letter-spacing: .045em;
    color: rgb(var(--mispa-muted));
    font-weight: 700;
}
.panel table tbody tr { transition: background-color .15s ease; }
.panel table tbody tr:hover { background-color: rgb(var(--mispa-primary) / .04); }
:is(.dark .panel table tbody tr:hover) { background-color: rgb(255 255 255 / .03); }

/* ==========================================================================
   7. BADGES  (forma de píldora más estilizada)
   ========================================================================== */
.badge { border-radius: 9999px; letter-spacing: .01em; }

/* ==========================================================================
    8. SIDEBAR  (degradado premium + píldora activa + tarjeta promocional)
    ========================================================================== */

/* --- Contenedor externo --- */
.sidebar {
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'Inter', 'Nunito', sans-serif !important;
}

/* --- Tarjeta flotante del sidebar --- */
.sidebar > div {
    background: var(--mispa-sidebar-bg) !important;
    border: 1px solid rgb(255 255 255 / .08) !important;
    border-radius: 28px !important;
    margin: 16px 0 16px 16px !important;
    height: calc(100vh - 32px) !important;
    box-shadow:
        0 25px 60px -12px rgba(46, 6, 61, 0.4),
        0 8px 24px -6px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- Logo / cabecera del sidebar --- */
.sidebar .main-logo span {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    letter-spacing: .01em !important;
}
.sidebar .collapse-icon {
    color: rgb(255 255 255 / .50) !important;
    background: rgb(255 255 255 / .08) !important;
    border-radius: 12px !important;
    width: 32px !important;
    height: 32px !important;
    transition: all .2s ease !important;
}
.sidebar .collapse-icon:hover {
    background: rgb(255 255 255 / .18) !important;
    color: #fff !important;
}

/* --- Ítems de navegación (nivel 1) - píldora completa --- */
.sidebar .nav-item > a,
.sidebar .nav-item > button,
.sidebar .nav-link {
    color: rgb(255 255 255 / .85) !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    margin-bottom: 2px !important;
    transition: all .2s ease !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
}
.sidebar .nav-link span,
.sidebar .nav-item > a span,
.sidebar .nav-item > button span {
    color: rgb(255 255 255 / .88) !important;
    font-weight: 500 !important;
}

.sidebar .nav-item > a:hover,
.sidebar .nav-item > button:hover,
.sidebar .nav-link:hover {
    background: rgb(255 255 255 / .10) !important;
    color: #fff !important;
    transform: translateX(2px);
}
.sidebar .nav-link:hover span,
.sidebar .nav-item > a:hover span { color: #fff !important; }
.sidebar .nav-link:hover svg,
.sidebar .nav-item > a:hover svg,
.sidebar .nav-item > button:hover svg { color: #fff !important; }

/* --- Estado activo: píldora completa magenta con sombra --- */
.sidebar .nav-link.active,
.sidebar .nav-item > a.active {
    background: var(--mispa-active-pill) !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 20px -6px rgba(240, 77, 147, 0.5),
        inset 0 1px 0 rgb(255 255 255 / .2) !important;
    padding: 10px 16px !important;
    transform: none !important;
}
.sidebar .nav-link.active span,
.sidebar .nav-item > a.active span { color: #fff !important; font-weight: 600 !important; }
.sidebar .nav-link.active svg,
.sidebar .nav-item > a.active svg { color: #fff !important; }

/* Flecha de despliegue en estado activo */
.sidebar .nav-link.active ~ div svg,
.sidebar .nav-item > a.active + div svg { color: #fff !important; }

/* --- Submenú (nivel 2) --- */
.sidebar .sub-menu {
    margin-left: 0 !important;
    padding-left: 8px !important;
}
.sidebar .sub-menu li a {
    color: rgb(255 255 255 / .55) !important;
    border-radius: 10px !important;
    padding: 8px 16px 8px 40px !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    transition: all .2s ease !important;
    position: relative !important;
}
.sidebar .sub-menu li a:hover {
    background: rgb(255 255 255 / .08) !important;
    color: #fff !important;
}
.sidebar .sub-menu li a.active {
    background: rgb(255 255 255 / .14) !important;
    color: #fff !important;
    font-weight: 500 !important;
}
.sidebar .sub-menu li a:before {
    display: none !important;
}

/* --- Scrollbar interno del sidebar --- */
.sidebar .ps__thumb-y { background-color: rgb(255 255 255 / .20) !important; width: 4px !important; border-radius: 4px !important; }
.sidebar .ps__rail-y:hover .ps__thumb-y { background-color: rgb(255 255 255 / .35) !important; }
.sidebar .ps__rail-y { background: transparent !important; }

/* ==========================================================================
    9. TARJETA PROMOCIONAL DEL SIDEBAR
    ========================================================================== */
.sidebar .promo-card {
    background: var(--mispa-promo-card) !important;
    border-radius: 18px !important;
    padding: 20px 16px !important;
    text-align: center !important;
    border: 1px solid rgb(255 255 255 / .10) !important;
    box-shadow: 0 8px 24px -8px rgba(168, 29, 92, 0.4) !important;
}

.sidebar .promo-card .crown-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 12px !important;
    color: #fff !important;
    opacity: 0.9 !important;
}

.sidebar .promo-card h4 {
    color: #fff !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    letter-spacing: .01em !important;
}

.sidebar .promo-card p {
    color: rgb(255 255 255 / .70) !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
}

.sidebar .promo-card .promo-btn {
    display: block !important;
    width: 100% !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    background: rgb(255 255 255 / .18) !important;
    border: 1px solid rgb(255 255 255 / .20) !important;
    color: #fff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .25s ease !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    letter-spacing: .01em !important;
}
.sidebar .promo-card .promo-btn:hover {
    background: rgb(255 255 255 / .28) !important;
    border-color: rgb(255 255 255 / .35) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .25) !important;
}
.sidebar .promo-card .promo-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
    10. HEADER  (jerarquía: borde inferior fino + sombra suave)
    ========================================================================== */
header.z-40 .shadow-sm {
    box-shadow: 0 1px 0 rgb(var(--mispa-border)), 0 4px 16px -10px rgba(33, 28, 36, .15);
}
:is(.dark header.z-40 .shadow-sm) { box-shadow: 0 1px 0 rgb(255 255 255 / .06); }
/* Iconos circulares del header con realce de marca al hover */
header.z-40 a:hover > svg { color: rgb(var(--mispa-primary)); }

/* ==========================================================================
    11. UTILIDADES DE MARCA  (tarjetas de estadística del dashboard)
    Gradientes explícitos (no dependen de utilidades Tailwind no compiladas).
    ========================================================================== */
/* Gradiente de marca reutilizable (banners, encabezados destacados) */
.mispa-gradient { background-image: linear-gradient(135deg, #F03A86 0%, #C71860 50%, #8E1A47 100%) !important; color: #fff; }
.mispa-gradient-text {
    background-image: linear-gradient(135deg, #F03A86 0%, #C71860 50%, #8E1A47 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.stat-card { color: #fff; border: none; }
.stat-magenta { background-image: linear-gradient(135deg, #E11D6E 0%, #C71860 100%) !important; box-shadow: 0 10px 24px -10px rgba(225,29,110,.5) !important; }
.stat-plum    { background-image: linear-gradient(135deg, #7A1E55 0%, #4E1240 100%) !important; box-shadow: 0 10px 24px -10px rgba(78,18,64,.5) !important; }
.stat-rose    { background-image: linear-gradient(135deg, #F0568B 0%, #D6336C 100%) !important; box-shadow: 0 10px 24px -10px rgba(214,51,108,.45) !important; }
.stat-gold    { background-image: linear-gradient(135deg, #C99A3C 0%, #A87726 100%) !important; box-shadow: 0 10px 24px -10px rgba(168,119,38,.45) !important; }

/* ==========================================================================
    12. SCROLLBAR GLOBAL + SELECCIÓN DE TEXTO  (toque de marca)
    ========================================================================== */
::selection { background: rgb(var(--mispa-primary) / .22); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--mispa-muted) / .35); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--mispa-primary) / .5); background-clip: content-box; }

/* Loader de marca (el SVG del template usa fill azul fijo) */
.screen_loader svg { fill: #E11D6E !important; }

/* ==========================================================================
    13. UTILIDADES DE OPACIDAD SOBRE BLANCO (gap-fill del CSS precompilado)
    El build de VRISTO no incluye estas variantes (text-white/55, etc.), por lo
    que el texto caía al color del body (#2A1822) y resultaba ilegible sobre
    fondos oscuros (footer, sección de testimonios). Aquí se rellenan.
    ========================================================================== */
.text-white\/50 { color: rgba(255,255,255,.50) !important; }
.text-white\/55 { color: rgba(255,255,255,.55) !important; }
.text-white\/60 { color: rgba(255,255,255,.60) !important; }
.text-white\/70 { color: rgba(255,255,255,.70) !important; }
.text-white\/80 { color: rgba(255,255,255,.80) !important; }
.text-white\/85 { color: rgba(255,255,255,.85) !important; }
.text-white\/90 { color: rgba(255,255,255,.90) !important; }

.bg-white\/5  { background-color: rgba(255,255,255,.05) !important; }
.bg-white\/10 { background-color: rgba(255,255,255,.10) !important; }
.bg-white\/20 { background-color: rgba(255,255,255,.20) !important; }
.bg-white\/30 { background-color: rgba(255,255,255,.30) !important; }
.bg-white\/70 { background-color: rgba(255,255,255,.70) !important; }

.border-white\/10 { border-color: rgba(255,255,255,.10) !important; }
.border-white\/40 { border-color: rgba(255,255,255,.40) !important; }
.border-white\/60 { border-color: rgba(255,255,255,.60) !important; }