/* =================================================================
   TEMA AURORA (theme-glow.css)
   Capa visual inspirada en apps de recompensas (tarjetas con relieve,
   fichas 3D, medallas), con una paleta neutra y profesional:
   superficies grafito y un solo acento azul. Se carga al final para
   pisar a las hojas anteriores sin tocar su estructura.
   Para cambiar la paleta, edita sólo los tokens --au-* de abajo.
   ================================================================= */

:root {
    /* Acentos: color con vida pero moderado (ni neón ni gris) */
    --au-violet: #8b7cf6;
    --au-violet-hi: #b3a8ff;
    --au-sky: #5aa9f0;
    --au-amber: #f2b14c;
    --au-rose: #f07a9a;
    --au-accent: #8b7cf6;
    --au-accent-hi: #b3a8ff;
    --au-accent-lo: #6d5ce6;
    --au-mint: #34d3a6;
    --au-lime: #d4ff3a;
    /* Azul de acento: sólo para llamadas a la acción, la barra activa y rachas */
    --au-blue: #4f8ff7;
    --au-blue-hi: #8cc4ff;
    --au-orange: #f59a3c;
    --au-btn: linear-gradient(135deg, #6f64c4 0%, #5a6cbf 55%, #4c79bd 100%);
    --au-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px -6px rgba(0, 0, 0, 0.6);
    /* Superficie "destacada" (portadas): violeta profundo con luz violeta y un toque magenta */
    --au-spot:
        radial-gradient(28rem 20rem at 95% 0%, rgba(150, 120, 250, 0.36), transparent 65%),
        radial-gradient(26rem 18rem at 0% 120%, rgba(79, 143, 247, 0.17), transparent 65%),
        linear-gradient(135deg, #17151f 0%, #1f1c2c 55%, #262236 100%);
    --au-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --au-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Relieve de tarjetas: luz arriba + sombra suave abajo */
    --au-relief: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 32px -24px rgba(0, 0, 0, 0.9);
    --au-chip-relief: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.22), 0 8px 16px -8px rgba(0, 0, 0, 0.55);
}

/* =================================================================
   1. MODO OSCURO: grafito profundo
   ================================================================= */
body.dark-mode {
    --primary-color: #8b7cf6;
    --primary-hover: #6d5ce6;
    --text-primary: #e6e8ec;
    --text-secondary: #aca8bd;
    --card-bg: #1b1928;
    --card-border: rgba(215, 205, 255, 0.09);
    --card-hover-border: rgba(255, 255, 255, 0.16);
    --card-hover-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    --input-bg: #211f30;
    --input-border: rgba(215, 205, 255, 0.11);
    --input-focus-border: #8b7cf6;
    --input-focus-shadow: 0 0 0 4px rgba(139, 124, 246, 0.2);
    --view-bg-color: #15131f;
    --hover-bg: rgba(255, 255, 255, 0.06);
    --header-bg: #110f1a;
    --header-border: transparent;
    /* style.css pinta el body con un degradado negro puro encima del color: con el encabezado grafito se veía una
       línea donde terminaba el encabezado. Se usa el mismo tono para que ambos se fundan. */
    --bg-gradient: #110f1a;
    background-image: none !important;
    background-color: #110f1a !important;
}
html:has(body.dark-mode) { background: #110f1a; }

/* Luz ambiental muy tenue detrás del contenido */
body.dark-mode .page-content,
body.dark-mode .page-view {
    background-image:
        radial-gradient(60rem 28rem at 90% -10%, rgba(150, 120, 250, 0.14), transparent 60%),
        radial-gradient(40rem 22rem at -10% 45%, rgba(90, 169, 240, 0.06), transparent 60%),
        radial-gradient(50rem 26rem at 10% 115%, rgba(79, 143, 247, 0.08), transparent 60%) !important;
    background-attachment: fixed !important;
}
@media (min-width: 769px) {
    body.dark-mode .page-view { background-image: none !important; }
}

/* Encabezado: mismo tono que el fondo y SIN línea inferior */
body.dark-mode .header {
    background-color: #110f1a !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
body.dark-mode .header .logo-text-prospera { color: #f3f4f6 !important; letter-spacing: 0.04em; }
body.dark-mode .business-selector-container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.biz-avatar { box-shadow: var(--au-chip-relief); }

/* Contenedor principal: sin borde (era la línea que se veía arriba) */
body.dark-mode .mi-nuevo-contenedor {
    background-color: #15131f !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9) !important;
}
@media (max-width: 768px) {
    .page-view { border-top: 0 !important; }
}

/* Menú lateral */
body.dark-mode .sidebar,
body.dark-mode .sidebar-header,
body.dark-mode .sidebar-footer {
    background-color: #16141f !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode .sidebar { --sidebar-solid: #16141f; }
body.dark-mode .sidebar-nav li a { border-radius: 14px; }
body.dark-mode .sidebar-nav li a:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: #fff !important; }
body.dark-mode .sidebar-nav li a.active {
    background: linear-gradient(135deg, rgba(150, 120, 250, 0.26), rgba(79, 143, 247, 0.12)) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(139, 124, 246, 0.22);
}
body.dark-mode .sidebar-nav li a.active .lucide { color: var(--au-accent-hi); filter: none; }
body.dark-mode .sidebar-nav .nav-indicator {
    background: linear-gradient(180deg, var(--au-blue-hi), var(--au-blue));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}
body.dark-mode .sidebar-nav .nav-section { color: #87839a; }
body.dark-mode .user-avatar { box-shadow: 0 0 0 2px #16141f, 0 0 0 4px rgba(255, 255, 255, 0.14); }
body.dark-mode .sidebar-tooltip { background: #22202e; border-color: rgba(255, 255, 255, 0.08); }

/* Modo claro: el morado de fondo/encabezado pasa a grafito */
body.light-mode { background-color: #15171c !important; }
body.light-mode .header { background-color: #15171c !important; border-color: #15171c !important; }

/* Controles de formulario */
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus { border-color: var(--au-accent) !important; box-shadow: 0 0 0 4px rgba(139, 124, 246, 0.2) !important; }

/* Botones principales: azul con brillo superior */
body.dark-mode .btn-main-action,
body.dark-mode .btn-primary,
.sv-btn-primary {
    background: var(--au-btn) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: var(--au-btn-shadow) !important;
    transition: transform 0.18s var(--au-ease), box-shadow 0.18s ease, filter 0.18s ease !important;
}
body.dark-mode .btn-main-action:hover,
body.dark-mode .btn-primary:hover,
.sv-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Barras de desplazamiento */
body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
body.dark-mode ::-webkit-scrollbar-track { background: transparent; }
body.dark-mode ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.22); }

/* =================================================================
   2. TODAS LAS VISTAS: tarjetas con relieve, fichas 3D, portadas
   ================================================================= */

/* Tarjetas e indicadores de cada módulo (sólo relieve y forma: cada
   módulo conserva sus colores de estado) */
body.dark-mode :is(
    .sv-card, .sv-kpi, .sv-goal, .hm-card,
    .fin-stat-card, .agenda-card, .fin-chart-card, .fin-health-card,
    .summary-card, .cal-insights-card, .quick-template-card,
    .bal-kpi, .modern-breakdown-card, .summary-card-balance, .week-card,
    .cfx-card, .cfx-tile, .cfx-kpi, .cfx-pulse-tile,
    .inv-kpi-card, .inv-panel-card,
    .crm-kpi, .crm-card, .crm-chart-card,
    .nm-kpi, .nm-card,
    .tax-kpi, .tax-card,
    .settings-card, .kpi-card
) {
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: var(--au-relief) !important;
    transition: transform 0.25s var(--au-ease), box-shadow 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) {
    body.dark-mode :is(.sv-kpi, .fin-stat-card, .bal-kpi, .cfx-tile, .cfx-kpi, .inv-kpi-card, .crm-kpi, .nm-kpi, .tax-kpi, .summary-card, .crm-card):hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.14) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 36px -22px rgba(0, 0, 0, 0.95) !important;
    }
}
body.dark-mode :is(.sv-card, .sv-kpi, .sv-goal, .hm-card) {
    background: linear-gradient(180deg, #221f30, #1b1927) !important;
}

/* Fichas de ícono: brillo arriba y sombra interna, como botones 3D */
:is(.nm-kpi-ico, .inv-kpi-card .stat-icon, .cfx-card-icon, .tax-kpi-icon, .header-icon-chip, .crm-kpi-icon) {
    background-image: radial-gradient(120% 90% at 28% 0%, rgba(255, 255, 255, 0.22), transparent 55%) !important;
    box-shadow: var(--au-chip-relief) !important;
}

/* Icono del encabezado de cada vista: ficha azul 3D */
:is(.pg-ico, .nm-title-icon, .bal-head-icon, #balance-view .bal-head-icon, .cfx-title-icon, .settings-page-icon, .inv-header-icon, .tax-hero-icon) {
    background:
        radial-gradient(120% 90% at 28% 0%, rgba(255, 255, 255, 0.30), transparent 55%),
        linear-gradient(160deg, var(--au-ico-a, #9a8bf8) 0%, var(--au-ico-b, #6d5ce6) 65%, color-mix(in srgb, var(--au-ico-b, #6d5ce6) 80%, #000) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(40, 25, 110, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
#calendar-view  { --au-ico-a: #5fe0bb; --au-ico-b: #18a57f; }
#cashflow-view  { --au-ico-a: #7cc0f5; --au-ico-b: #2f86d6; }
#balance-view   { --au-ico-a: #7cc0f5; --au-ico-b: #2f86d6; }
#agenda-view    { --au-ico-a: #a99cf9; --au-ico-b: #6d5ce6; }
#tax-view       { --au-ico-a: #f6c879; --au-ico-b: #cf8a1f; }
#inventory-view { --au-ico-a: #f59bb4; --au-ico-b: #cf4f78; }
#crm-view       { --au-ico-a: #5fe0bb; --au-ico-b: #18a57f; }
#nomina-view    { --au-ico-a: #a99cf9; --au-ico-b: #6d5ce6; }
#settings-view  { --au-ico-a: #a3a9b8; --au-ico-b: #5b6272; }

/* Portadas de módulo con más presencia */
body.dark-mode #balance-view .bal-hero,
body.dark-mode .cfx-hero {
    border-radius: 26px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 30px 60px -40px color-mix(in srgb, var(--tone, #8b7cf6) 70%, transparent) !important;
}
body.dark-mode .cfx-hero {
    background:
        radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--tone) 22%, #1b1928) 0%, #1b1928 62%),
        #1b1928 !important;
}
.tax-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--au-spot) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 50px -30px rgba(0, 0, 0, 0.9) !important;
}

/* Pestañas activas: pastilla azul con relieve */
body.dark-mode :is(.cfx-tab.active, .tax-tab.active, .nm-tabs .active, .inv-tabs .active, .inv-status-btn.active, .balance-view-toggle button.active) {
    background: var(--au-btn) !important;
    color: #fff !important;
    box-shadow: var(--au-btn-shadow) !important;
}

/* Tablas (sólo escritorio: en el teléfono siguen siendo tarjetas) */
@media (min-width: 769px) {
    body.dark-mode :is(.agenda-table, .inv-table, .crm-table, .nm-table, .presupuesto-table) thead th {
        background: #191724 !important;
        color: #8b93a1 !important;
        letter-spacing: 0.06em;
    }
    body.dark-mode :is(.agenda-table, .inv-table, .crm-table, .nm-table, .presupuesto-table) tbody tr { transition: background-color 0.15s ease; }
    body.dark-mode :is(.agenda-table, .inv-table, .crm-table, .nm-table, .presupuesto-table) tbody tr:hover { background-color: rgba(255, 255, 255, 0.03) !important; }
}

/* Ventanas (modales): superficie grafito con borde de luz y fondo difuminado */
body.dark-mode .modal > .modal-content {
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -30px rgba(0, 0, 0, 0.95) !important;
}
@media (min-width: 769px) {
    .modal { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    body .modal > .modal-content { border-radius: 24px !important; }
}

/* =================================================================
   3. BOTÓN FLOTANTE (+): orbe 3D azul
   ================================================================= */
.qa-fab {
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(150deg, #7568c8 0%, #5a6cbf 50%, #4c79bd 100%) !important;
    box-shadow:
        inset 0 -6px 12px rgba(20, 40, 120, 0.35),
        inset 0 2px 2px rgba(255, 255, 255, 0.22),
        0 8px 18px -8px rgba(0, 0, 0, 0.6) !important;
    border: none !important;
}
.qa-fab:hover { filter: brightness(1.06); }

/* =================================================================
   4. FONDOS Y RESERVAS — portada
   ================================================================= */
.sv-hero {
    background: var(--au-spot);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -36px rgba(0, 0, 0, 0.95);
    border-radius: 28px;
}
.sv-hero[data-tone="celebrate"] {
    background:
        radial-gradient(26rem 18rem at 95% 0%, rgba(251, 191, 36, 0.38), transparent 65%),
        radial-gradient(24rem 18rem at 0% 120%, rgba(245, 158, 11, 0.18), transparent 65%),
        linear-gradient(135deg, #15130f 0%, #221d14 55%, #2b2316 100%);
}
.sv-hero[data-tone="close"] {
    background:
        radial-gradient(26rem 18rem at 95% 0%, rgba(52, 211, 166, 0.32), transparent 65%),
        radial-gradient(24rem 18rem at 0% 120%, rgba(139, 124, 246, 0.25), transparent 65%),
        linear-gradient(135deg, #10161a 0%, #15212a 55%, #172a33 100%);
}
.sv-hero[data-tone="streak"] {
    background:
        radial-gradient(26rem 18rem at 95% 0%, rgba(249, 115, 22, 0.35), transparent 65%),
        radial-gradient(24rem 18rem at 0% 120%, rgba(251, 191, 36, 0.15), transparent 65%),
        linear-gradient(135deg, #16120f 0%, #231a14 55%, #2c1e15 100%);
}
/* Grano fino: textura satinada */
.sv-hero::before,
.tax-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--au-noise);
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
}
/* Moneda 3D flotando */
.sv-hero::after {
    content: '';
    position: absolute;
    right: 210px;
    top: 26px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(circle at 34% 30%, #fff6c8 0 12%, #ffd84d 30%, #e59a00 70%, #a96200 100%);
    box-shadow: inset 0 -4px 6px rgba(120, 60, 0, 0.5), inset 0 3px 3px rgba(255, 255, 255, 0.7), 0 12px 20px -6px rgba(0, 0, 0, 0.55);
    animation: auCoin 6s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes auCoin {
    from { transform: translateY(0) rotate(-12deg) scaleX(0.9); }
    to   { transform: translateY(14px) rotate(10deg) scaleX(1); }
}
/* closest-side: el brillo se apaga antes del borde del elemento (antes dejaba una costura vertical) */
.sv-hero-glow { background: radial-gradient(closest-side at 50% 45%, rgba(255, 255, 255, 0.08), transparent); }

.sv-eyebrow {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.sv-hero-amount {
    text-shadow: none;
    letter-spacing: -0.035em;
}

/* Nivel: pastilla lima con relieve, como una ficha */
.sv-level-badge {
    background: linear-gradient(180deg, #ecff8a 0%, #d4ff3a 55%, #a8d916 100%);
    color: #1b2400;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(80, 110, 0, 0.35);
}
.sv-level-track { height: 10px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45); }
.sv-level-fill {
    background: linear-gradient(90deg, #a8ff3a, #d4ff3a 60%, #fbffd0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 2px rgba(60, 90, 0, 0.35);
    position: relative;
    overflow: hidden;
}
.sv-level-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: auSweep 2.8s ease-in-out infinite;
}
@keyframes auSweep { 60%, 100% { transform: translateX(100%); } }

.sv-hero-ring { filter: none; }

/* Acentos del módulo: del verde azulado original al azul del tema */
.sv-chip.active,
.sv-seg-btn.active,
.sv-segmented input:checked + label,
.sv-cat.active {
    background: var(--au-btn) !important;
    color: #fff;
    border-color: transparent;
    box-shadow: var(--au-btn-shadow);
}
.sv-card-head h3 i, .sv-card-head h3 svg { color: var(--au-accent-hi); }
.sv-chart-dot { stroke: var(--au-accent); }
.sv-chart-dot.is-last { fill: var(--au-mint); filter: none; }
.sv-quote { border-left-color: var(--au-accent); background: rgba(139, 124, 246, 0.07); }
.sv-chip:hover, .sv-btn-ghost:hover { border-color: var(--au-accent); }
.sv-chip-accent { color: var(--au-accent-hi); border-color: rgba(139, 124, 246, 0.4); background: rgba(139, 124, 246, 0.08); }
.sv-link-btn, .sv-transfer-arrow { color: var(--au-accent-hi); }
.sv-switch:checked { background: var(--au-accent); }
.sv-search input:focus, .sv-select:focus, .sv-field input:focus { border-color: var(--au-accent); }

/* Indicadores: íconos como fichas 3D */
.sv-kpi { border-radius: 22px; }
.sv-kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.5), transparent 45%),
        linear-gradient(160deg, color-mix(in srgb, var(--kpi) 70%, #fff) 0%, var(--kpi) 55%, color-mix(in srgb, var(--kpi) 70%, #000) 100%);
    box-shadow:
        inset 0 -4px 8px color-mix(in srgb, var(--kpi) 50%, #000),
        inset 0 2px 2px rgba(255, 255, 255, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.04);
}
.sv-kpi-icon svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.sv-kpi-value { letter-spacing: -0.02em; }

/* =================================================================
   5. LOGROS: medallas 3D
   ================================================================= */
.sv-ach-strip { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 14px; perspective: 900px; }
.sv-ach {
    --ach-a: #93c5fd;
    --ach-b: #6d5ce6;
    position: relative;
    gap: 4px;
    padding: 18px 12px 16px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: transform 0.35s var(--au-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}
.sv-ach.is-unlocked {
    border-color: color-mix(in srgb, var(--ach-a) 35%, transparent);
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ach-a) 18%, transparent), transparent 70%),
        var(--input-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -3px 8px rgba(0, 0, 0, 0.22);
}
.sv-ach.is-unlocked:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 8px rgba(0, 0, 0, 0.22); }
.sv-ach.is-locked { opacity: 1; }
.sv-ach.is-locked strong, .sv-ach.is-locked > span { opacity: 0.7; }

.sv-medal {
    position: relative;
    width: 82px;
    height: 82px;
    margin-bottom: 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: translateZ(30px);
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.75) 0 6%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 55%, var(--ach-a) 0%, var(--ach-b) 78%);
    box-shadow:
        inset 0 -7px 12px rgba(0, 0, 0, 0.35),
        inset 0 4px 6px rgba(255, 255, 255, 0.55),
        0 0 0 4px color-mix(in srgb, var(--ach-b) 55%, #fff),
        0 0 0 6px color-mix(in srgb, var(--ach-b) 75%, #000),
        0 10px 14px -8px rgba(0, 0, 0, 0.5);
}
/* Bisel interno y destello que cruza la medalla */
.sv-medal::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}
.sv-medal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.65) 48%, transparent 60%);
    background-size: 250% 100%;
    background-position: 150% 0;
    animation: auShine 4.5s ease-in-out infinite;
    mix-blend-mode: overlay;
}
@keyframes auShine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -100% 0; } }

.sv-medal .sv-ach-emoji {
    position: relative;
    z-index: 1;
    font-size: 2.35rem;
    line-height: 1;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.4));
    transform: translateZ(20px);
}
.sv-ach.is-unlocked .sv-medal { animation: auFloat 3.6s ease-in-out infinite; }
.sv-ach.is-unlocked:nth-child(2n) .sv-medal { animation-delay: -1.2s; }
.sv-ach.is-unlocked:nth-child(3n) .sv-medal { animation-delay: -2.4s; }
@keyframes auFloat {
    0%, 100% { transform: translateZ(30px) translateY(0) rotateY(-8deg); }
    50%      { transform: translateZ(30px) translateY(-5px) rotateY(8deg); }
}

/* Chispas alrededor de las medallas ganadas */
.sv-medal-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 30%, transparent 70%);
    display: none;
    opacity: 0;
    animation: auTwinkle 2.6s ease-in-out infinite;
    pointer-events: none;
}
.sv-medal-spark:nth-of-type(1) { top: 2px; right: 4px; }
.sv-medal-spark:nth-of-type(2) { bottom: 10px; left: -4px; width: 6px; height: 6px; animation-delay: 1.1s; }
@keyframes auTwinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1); } }

/* Bloqueadas: metal sin pulir + candado */
.sv-ach.is-locked .sv-medal {
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.35) 0 6%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 55%, #6b6e78 0%, #2b2d33 80%);
    box-shadow:
        inset 0 -7px 12px rgba(0, 0, 0, 0.45),
        inset 0 3px 5px rgba(255, 255, 255, 0.2),
        0 0 0 4px #4a4d55,
        0 0 0 6px #212328,
        0 12px 18px -8px rgba(0, 0, 0, 0.6);
}
.sv-ach.is-locked .sv-medal::after { display: none; }
.sv-ach.is-locked .sv-ach-emoji { filter: grayscale(1) brightness(0.75) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5)); opacity: 0.55; }
.sv-medal-lock {
    position: absolute;
    right: -4px;
    bottom: -2px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #3a3d45, #1d1f24);
    border: 2px solid var(--input-bg);
    color: #c9ccd4;
}
.sv-medal-lock svg { width: 13px; height: 13px; }

.sv-ach strong { font-size: 0.9rem; font-weight: 800; }
.sv-ach-bar {
    height: 7px;
    background: rgba(128, 128, 128, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.sv-ach-bar > span { background: linear-gradient(90deg, var(--ach-b), var(--ach-a)); }
.sv-ach-done {
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--ach-a), var(--ach-b));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
}

body.light-mode .sv-ach.is-unlocked { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ach-a) 20%, transparent), transparent 70%), #fff; }

/* =================================================================
   6. EL ESTILO DE FONDOS EN LAS DEMÁS VISTAS
   Fichas 3D de color, brillos que cruzan y entradas suaves, con la
   misma mesura de Fondos y reservas (nada parpadea ni se mueve fuerte).
   ================================================================= */

/* Indicadores (Registros, Agenda, Presupuesto, Resumen…): el ícono pasa de
   cuadrito apagado a ficha 3D del color de su indicador */
.fin-stat-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    color: #fff !important;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.5), transparent 45%),
        linear-gradient(160deg, color-mix(in srgb, var(--fin-accent, #8b7cf6) 70%, #fff) 0%, var(--fin-accent, #8b7cf6) 55%, color-mix(in srgb, var(--fin-accent, #8b7cf6) 70%, #000) 100%) !important;
    box-shadow:
        inset 0 -3px 6px color-mix(in srgb, var(--fin-accent, #8b7cf6) 50%, #000),
        inset 0 2px 2px rgba(255, 255, 255, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.fin-stat-icon svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
body.dark-mode .fin-stat-card {
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--fin-accent, #8b7cf6) 16%, transparent), transparent 60%),
        linear-gradient(180deg, #221f30, #1b1927) !important;
}

/* El ícono del encabezado de cada vista flota apenas, como la moneda de Fondos */
:is(.pg-ico, .nm-title-icon, .bal-head-icon, .cfx-title-icon, .settings-page-icon, .inv-header-icon, .tax-hero-icon) {
    animation: auBob 5s ease-in-out infinite;
}
@keyframes auBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }

/* Al abrir una vista, sus tarjetas entran escalonadas */
.page-view.active :is(.fin-stat-card, .bal-kpi, .cfx-kpi, .cfx-tile, .inv-kpi-card, .crm-kpi, .nm-kpi, .tax-kpi) {
    animation: auRise 0.55s var(--au-ease) both;
}
.page-view.active :is(.fin-stat-card, .bal-kpi, .cfx-kpi, .cfx-tile, .inv-kpi-card, .crm-kpi, .nm-kpi, .tax-kpi):nth-child(2) { animation-delay: 0.06s; }
.page-view.active :is(.fin-stat-card, .bal-kpi, .cfx-kpi, .cfx-tile, .inv-kpi-card, .crm-kpi, .nm-kpi, .tax-kpi):nth-child(3) { animation-delay: 0.12s; }
.page-view.active :is(.fin-stat-card, .bal-kpi, .cfx-kpi, .cfx-tile, .inv-kpi-card, .crm-kpi, .nm-kpi, .tax-kpi):nth-child(n+4) { animation-delay: 0.18s; }
@keyframes auRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Inicio: tarjetas con el relieve de Fondos, títulos con ficha 3D y medallitas en la constancia */
body.dark-mode .hm-card { background: linear-gradient(180deg, #221f30, #1b1927) !important; }
.hm-card-head h3 > span:first-child {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 1.1rem;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.35), transparent 50%),
        linear-gradient(160deg, rgba(139, 124, 246, 0.45), rgba(109, 92, 230, 0.22));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(40, 25, 110, 0.35);
}
.hm-day.has .hm-day-dot {
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.6) 0 8%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 50% 55%, #ffc36b 0%, #f08a24 80%);
    box-shadow:
        inset 0 -3px 6px rgba(0, 0, 0, 0.3),
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.04);
}
.hm-progress span { position: relative; overflow: hidden; background: linear-gradient(90deg, #9a85f8, #4f8ff7 70%, #8cc4ff); }
.hm-progress span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: auSweep 2.8s ease-in-out infinite;
}
.hm-moment-emoji {
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.3), transparent 50%),
        linear-gradient(160deg, rgba(242, 177, 76, 0.38), rgba(207, 138, 31, 0.18));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* «Lo que sigue» (Inicio): íconos como fichas brillantes del color de su aviso */
.hm-next-icon {
    --tone: #8b7cf6;
    color: #fff !important;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.5), transparent 45%),
        linear-gradient(160deg, color-mix(in srgb, var(--tone) 70%, #fff) 0%, var(--tone) 55%, color-mix(in srgb, var(--tone) 70%, #000) 100%) !important;
    box-shadow:
        inset 0 -3px 6px color-mix(in srgb, var(--tone) 50%, #000),
        inset 0 2px 2px rgba(255, 255, 255, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.04);
}
.hm-next-icon svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.hm-next-item.is-alert  .hm-next-icon { --tone: #ef5a6f; }
.hm-next-item.is-notice .hm-next-icon { --tone: #f59a3c; }
.hm-next-item.is-good   .hm-next-icon { --tone: #2fc493; }

/* Registros: el verde azulado de los controles pasa a la paleta del tema
   (ingresos y gastos conservan su verde y su rojo) */
body.dark-mode .cal-chip.active:not(.cal-chip-income):not(.cal-chip-expense) {
    background: var(--au-btn) !important;
    box-shadow: var(--au-btn-shadow) !important;
}
body.dark-mode .cal-nav-today { color: var(--au-blue-hi) !important; }
body.dark-mode .calendar-day-header {
    background: linear-gradient(180deg, rgba(150, 120, 250, 0.32), rgba(150, 120, 250, 0.18)) !important;
    color: #e4dcff !important;
}

/* Botones sólidos de los módulos: tonos más profundos y sin halo de color
   (los degradados vivos con sombra luminosa se veían demasiado brillantes) */
body.dark-mode #inventory-form #save-product-btn {
    background: var(--au-btn) !important;
    box-shadow: var(--au-btn-shadow) !important;
}
body.dark-mode .nm-btn.primary { background: linear-gradient(135deg, #3f62b8, #4a72bf); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px -6px rgba(0, 0, 0, 0.6); }
body.dark-mode .nm-btn.success { background: linear-gradient(135deg, #22804f, #2b8f5c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px -6px rgba(0, 0, 0, 0.6); }
body.dark-mode .nm-btn.danger-solid { background: linear-gradient(135deg, #a63d49, #b44a55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px -6px rgba(0, 0, 0, 0.6); }
/* Botones de guardar con color propio en línea (verde azulado, azul…): un poco menos de saturación y brillo */
body.dark-mode .save-btn:not(#save-product-btn) { filter: saturate(0.8) brightness(0.9); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.6) !important; }

/* =================================================================
   7. TELÉFONOS
   ================================================================= */
@media (max-width: 768px) {
    .sv-hero::after { right: auto; left: 70%; top: 18px; width: 34px; height: 34px; }
    .sv-ach-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sv-medal { width: 70px; height: 70px; }
    .sv-medal .sv-ach-emoji { font-size: 2rem; }
    .sv-ach span { overflow-wrap: anywhere; }
    .fin-stat-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 10px; }
    .fin-stat-icon svg { width: 16px; height: 16px; }
    body.dark-mode .header { background-color: #110f1a !important; }
}

/* Movimiento reducido: todo quieto */
@media (prefers-reduced-motion: reduce) {
    .sv-hero::after, .sv-level-fill::after, .sv-medal, .sv-medal::after, .sv-medal-spark,
    .hm-progress span::after, .page-view.active :is(.fin-stat-card, .bal-kpi, .cfx-kpi, .cfx-tile, .inv-kpi-card, .crm-kpi, .nm-kpi, .tax-kpi),
    :is(.pg-ico, .nm-title-icon, .bal-head-icon, .cfx-title-icon, .settings-page-icon, .inv-header-icon, .tax-hero-icon) { animation: none !important; }
    .sv-ach, body.dark-mode :is(.sv-kpi, .fin-stat-card, .bal-kpi, .cfx-tile, .inv-kpi-card, .crm-kpi, .nm-kpi, .tax-kpi) { transition: none; }
}