/* ─────────────────────────────────────────────
   DARK MODE — iOS Human Interface Guidelines
   Aplicado via: [data-theme="dark"] (toggle manual)
                 @media (prefers-color-scheme: dark) (sistema)
   ───────────────────────────────────────────── */

/* ── Tokens dark ─────────────────────────────── */
:root[data-theme="dark"],
[data-theme="dark"] {
    /* Surfaces — capas iOS dark */
    --bg:            #000000;
    --surface:       #1C1C1E;
    --surface-alt:   #2C2C2E;
    --surface-glass: rgba(28,28,30,0.92);
    --surface-deep:  #3A3A3C;

    /* Text / Labels */
    --text:          #FFFFFF;
    --text-2:        rgba(235,235,245,0.85);
    --muted:         rgba(235,235,245,0.55);

    /* Brand — iOS blue dark variant */
    --primary:       #0A84FF;
    --primary-hover: #409CFF;
    --primary-soft:  rgba(10,132,255,0.18);
    --accent:        #FF9F0A;

    /* Status */
    --ok:            #30D158;
    --error:         #FF453A;

    /* Structure */
    --border:        #38383A;
    --border-light:  rgba(84,84,88,0.45);

    /* Shadows — más sutiles en dark (iOS no usa sombras fuertes) */
    --shadow:        0 1px 3px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.3);
    --shadow-lg:     0 2px 8px rgba(0,0,0,0.5), 0 10px 28px rgba(0,0,0,0.4);
    --shadow-card:   0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
}

/* ── Media query sistema (sin toggle) ─────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #000000;
        --surface:       #1C1C1E;
        --surface-alt:   #2C2C2E;
        --surface-glass: rgba(28,28,30,0.92);
        --surface-deep:  #3A3A3C;

        --text:          #FFFFFF;
        --text-2:        rgba(235,235,245,0.85);
        --muted:         rgba(235,235,245,0.55);

        --primary:       #0A84FF;
        --primary-hover: #409CFF;
        --primary-soft:  rgba(10,132,255,0.18);
        --accent:        #FF9F0A;

        --ok:            #30D158;
        --error:         #FF453A;

        --border:        #38383A;
        --border-light:  rgba(84,84,88,0.45);

        --shadow:        0 1px 3px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.3);
        --shadow-lg:     0 2px 8px rgba(0,0,0,0.5), 0 10px 28px rgba(0,0,0,0.4);
        --shadow-card:   0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
    }
}

/* ── Overrides específicos dark ──────────────────
   Solo para elementos que no usan variables o
   necesitan ajuste visual adicional en dark mode.
   ─────────────────────────────────────────────── */

/* Navbar — quitar la sombra interna blanca */
:root[data-theme="dark"] .topnav {
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
                0 2px 10px rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .topnav {
        box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
                    0 2px 10px rgba(0,0,0,0.4);
    }
}

/* Inputs y selects */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--muted);
}

/* Focus — evitar fondo blanco con texto oscuro en dark */
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    background: var(--surface-deep);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.2);
    color: var(--text);
}

/* User menu dropdown — fondo hardcodeado blanco */
:root[data-theme="dark"] .user-menu-drop {
    background: rgba(44,44,46,0.97);
}

/* Dropdown submenús del navbar */
:root[data-theme="dark"] .menu-submenu {
    background: rgba(28,28,30,0.97);
    border-color: var(--border);
}

/* ── Botones de acción — versiones dark ──────────
   Los colores hardcodeados (fondos claros) no
   son válidos en dark mode. Se reemplazan con
   las variantes iOS saturadas sobre surface oscura.
   ─────────────────────────────────────────────── */

/* btn.warn — ámbar iOS */
:root[data-theme="dark"] .btn.warn {
    background: rgba(255,159,10,0.15);
    color: #FF9F0A;
    border-color: rgba(255,159,10,0.35);
}
:root[data-theme="dark"] .btn.warn:hover:not(:disabled):not(.is-loading) {
    background: rgba(255,159,10,0.25);
    box-shadow: 0 4px 12px rgba(255,159,10,0.2);
}

/* btn.action-amber */
:root[data-theme="dark"] .btn.action-amber {
    background: rgba(255,159,10,0.12);
    color: #FF9F0A;
    border-color: rgba(255,159,10,0.3);
}
:root[data-theme="dark"] .btn.action-amber:hover:not(:disabled):not(.is-loading) {
    background: rgba(255,159,10,0.22);
    box-shadow: 0 4px 12px rgba(255,159,10,0.2);
}

/* btn.action-green */
:root[data-theme="dark"] .btn.action-green {
    background: rgba(48,209,88,0.12);
    color: #30D158;
    border-color: rgba(48,209,88,0.3);
}
:root[data-theme="dark"] .btn.action-green:hover:not(:disabled):not(.is-loading) {
    background: rgba(48,209,88,0.22);
    box-shadow: 0 4px 12px rgba(48,209,88,0.2);
}

/* btn.action-violet */
:root[data-theme="dark"] .btn.action-violet {
    background: rgba(191,90,242,0.12);
    color: #BF5AF2;
    border-color: rgba(191,90,242,0.3);
}
:root[data-theme="dark"] .btn.action-violet:hover:not(:disabled):not(.is-loading) {
    background: rgba(191,90,242,0.22);
    box-shadow: 0 4px 12px rgba(191,90,242,0.2);
}

/* btn.action-blue */
:root[data-theme="dark"] .btn.action-blue {
    background: rgba(10,132,255,0.15);
    color: #0A84FF;
    border-color: rgba(10,132,255,0.35);
}
:root[data-theme="dark"] .btn.action-blue:hover:not(:disabled):not(.is-loading) {
    background: rgba(10,132,255,0.25);
    box-shadow: 0 4px 12px rgba(10,132,255,0.2);
}

/* btn.danger */
:root[data-theme="dark"] .btn.danger {
    background: rgba(255,69,58,0.12);
    color: #FF453A;
    border-color: rgba(255,69,58,0.3);
}
:root[data-theme="dark"] .btn.danger:hover:not(:disabled):not(.is-loading) {
    background: rgba(255,69,58,0.22);
    box-shadow: 0 4px 12px rgba(255,69,58,0.2);
}

/* btn.secondary — en dark necesita más contraste */
:root[data-theme="dark"] .btn.secondary {
    background: var(--surface-alt);
    color: var(--text-2);
    border-color: var(--border);
}
:root[data-theme="dark"] .btn.secondary:hover:not(:disabled):not(.is-loading) {
    background: var(--surface-deep);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* btn.ghost */
:root[data-theme="dark"] .btn.ghost {
    background: transparent;
    color: var(--text-2);
    border-color: var(--border);
}
:root[data-theme="dark"] .btn.ghost:hover:not(:disabled):not(.is-loading) {
    background: var(--surface-alt);
}

/* Cards — sin fondo blanco duro */
:root[data-theme="dark"] .card {
    background: var(--surface);
    border-color: var(--border);
}

/* Badges de estado */
:root[data-theme="dark"] .badge-ok    { background: rgba(48,209,88,0.15);  color: #30D158; }
:root[data-theme="dark"] .badge-warn  { background: rgba(255,159,10,0.15); color: #FF9F0A; }
:root[data-theme="dark"] .badge-error { background: rgba(255,69,58,0.15);  color: #FF453A; }
:root[data-theme="dark"] .badge-info  { background: rgba(10,132,255,0.15); color: #0A84FF; }

/* Segment control activo */
:root[data-theme="dark"] .segment-tab.active {
    background: var(--surface-deep);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Nuevo bufete guide card */
:root[data-theme="dark"] .nuevo-bufete-guide {
    background: linear-gradient(145deg, #1a2435 0%, #1C1C1E 100%);
    border-color: rgba(10,132,255,0.2);
}

/* Ayuda sidebar */
:root[data-theme="dark"] .ayuda-sidebar {
    background: var(--surface);
    border-color: var(--border);
}

:root[data-theme="dark"] .ayuda-nav-link.active {
    background: var(--primary-soft);
    color: var(--primary);
}

/* Bottom tab bar */
:root[data-theme="dark"] .bottom-tabbar {
    background: rgba(28,28,30,0.95);
    border-color: rgba(84,84,88,0.45);
}

/* Toast */
:root[data-theme="dark"] .toast {
    background: var(--surface-deep);
    border-color: var(--border);
    color: var(--text);
}

/* Hero logo — ajustar sombra */
:root[data-theme="dark"] .hero-logo {
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6)) brightness(1.05);
}

/* Scrollbar — dark (webkit) */
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #48484A; border-radius: 4px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #636366; }

/* ── Chips / badges de estado y rol ──────────────── */
:root[data-theme="dark"] .chip.done    { background: rgba(48,209,88,0.15);  color: #30D158; }
:root[data-theme="dark"] .chip.pending { background: rgba(255,159,10,0.15); color: #FF9F0A; }
:root[data-theme="dark"] .chip.error   { background: rgba(255,69,58,0.15);  color: #FF453A; }
:root[data-theme="dark"] .chip.info    { background: rgba(10,132,255,0.15); color: #64D2FF; }
:root[data-theme="dark"] .chip.warn    { background: rgba(255,159,10,0.12); color: #FF9F0A; }
:root[data-theme="dark"] .chip.neutral { background: var(--surface-deep);   color: var(--muted); border-color: var(--border); }

/* ── Alertas inline ───────────────────────────────── */
:root[data-theme="dark"] .alert.success { background: rgba(48,209,88,0.12);  color: #30D158; border-color: rgba(48,209,88,0.25); }
:root[data-theme="dark"] .alert.error   { background: rgba(255,69,58,0.12);  color: #FF453A; border-color: rgba(255,69,58,0.25); }
:root[data-theme="dark"] .alert.info    { background: rgba(10,132,255,0.12); color: #64D2FF; border-color: rgba(10,132,255,0.25); }

/* ── Tabla — colores hardcodeados ─────────────────── */
:root[data-theme="dark"] th {
    background: #1e2533;
    color: rgba(235,235,245,0.6);
    border-bottom-color: var(--border);
}

:root[data-theme="dark"] th,
:root[data-theme="dark"] td {
    border-bottom-color: var(--border);
    color: var(--text);
}

:root[data-theme="dark"] tbody tr:hover {
    background: rgba(10,132,255,0.06);
}

:root[data-theme="dark"] .th-group-divider,
:root[data-theme="dark"] .td-group-divider {
    border-left-color: #48484A;
}

:root[data-theme="dark"] .table-wrap {
    border-color: var(--border);
}

/* ── Permisos por rol ────────────────────────────── */
:root[data-theme="dark"] .perm-module-card {
    background: var(--surface);
    border-color: var(--border);
}
:root[data-theme="dark"] .perm-module-name {
    color: var(--text-2);
}
:root[data-theme="dark"] .perm-module-badge {
    background: rgba(10,132,255,0.15);
    color: #64D2FF;
}
:root[data-theme="dark"] .perm-chip:hover {
    background: rgba(10,132,255,0.1);
}
:root[data-theme="dark"] .perm-chip-dot {
    border-color: #48484A;
    background: var(--surface-alt);
}
:root[data-theme="dark"] .perm-chip-label {
    color: var(--text-2);
}
:root[data-theme="dark"] .perm-chip:has(input:checked) {
    background: rgba(10,132,255,0.12);
}
:root[data-theme="dark"] .perm-chip:has(input:checked) .perm-chip-dot {
    background: #0A84FF;
    border-color: #0A84FF;
    box-shadow: inset 0 0 0 2px var(--surface);
}
:root[data-theme="dark"] .perm-chip:has(input:checked) .perm-chip-label {
    color: #64D2FF;
    font-weight: 600;
}
:root[data-theme="dark"] .perm-chip:has(input:checked):hover {
    background: rgba(10,132,255,0.2);
}

/* ── Details / action-details (Reset pass) ─────────── */
:root[data-theme="dark"] details.action-details {
    background: rgba(191,90,242,0.12);
    border-color: rgba(191,90,242,0.3);
}
:root[data-theme="dark"] details.action-details summary {
    color: #BF5AF2;
}
:root[data-theme="dark"] details.action-details summary::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF5AF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M12 15h4M14 13v4M17.5 11L12 5.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] details.action-details[open] summary {
    border-bottom-color: rgba(191,90,242,0.3);
}
:root[data-theme="dark"] details.action-details .details-body {
    background: rgba(191,90,242,0.08);
}
:root[data-theme="dark"] details[open] {
    background: var(--surface-alt);
}

/* ── Mirror de overrides para prefers-color-scheme ─ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input:focus,
    :root:not([data-theme="light"]) textarea:focus,
    :root:not([data-theme="light"]) select:focus {
        background: var(--surface-deep);
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(10,132,255,0.2);
        color: var(--text);
    }
    :root:not([data-theme="light"]) .user-menu-drop  { background: rgba(44,44,46,0.97); }
    :root:not([data-theme="light"]) .menu-submenu    { background: rgba(28,28,30,0.97); border-color: var(--border); }
    :root:not([data-theme="light"]) .card            { background: var(--surface); border-color: var(--border); }

    :root:not([data-theme="light"]) .badge-ok    { background: rgba(48,209,88,0.15);  color: #30D158; }
    :root:not([data-theme="light"]) .badge-warn  { background: rgba(255,159,10,0.15); color: #FF9F0A; }
    :root:not([data-theme="light"]) .badge-error { background: rgba(255,69,58,0.15);  color: #FF453A; }
    :root:not([data-theme="light"]) .badge-info  { background: rgba(10,132,255,0.15); color: #0A84FF; }

    :root:not([data-theme="light"]) .btn.warn           { background: rgba(255,159,10,0.15); color: #FF9F0A; border-color: rgba(255,159,10,0.35); }
    :root:not([data-theme="light"]) .btn.action-amber   { background: rgba(255,159,10,0.12); color: #FF9F0A; border-color: rgba(255,159,10,0.3); }
    :root:not([data-theme="light"]) .btn.action-green   { background: rgba(48,209,88,0.12);  color: #30D158; border-color: rgba(48,209,88,0.3); }
    :root:not([data-theme="light"]) .btn.action-violet  { background: rgba(191,90,242,0.12); color: #BF5AF2; border-color: rgba(191,90,242,0.3); }
    :root:not([data-theme="light"]) .btn.action-blue    { background: rgba(10,132,255,0.15); color: #0A84FF; border-color: rgba(10,132,255,0.35); }
    :root:not([data-theme="light"]) .btn.danger         { background: rgba(255,69,58,0.12);  color: #FF453A; border-color: rgba(255,69,58,0.3); }
    :root:not([data-theme="light"]) .btn.secondary      { background: var(--surface-alt); color: var(--text-2); border-color: var(--border); }
    :root:not([data-theme="light"]) .btn.ghost          { background: transparent; color: var(--text-2); border-color: var(--border); }

    :root:not([data-theme="light"]) .segment-tab.active     { background: var(--surface-deep); box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
    :root:not([data-theme="light"]) .nuevo-bufete-guide      { background: linear-gradient(145deg,#1a2435 0%,#1C1C1E 100%); border-color: rgba(10,132,255,0.2); }
    :root:not([data-theme="light"]) .ayuda-sidebar           { background: var(--surface); border-color: var(--border); }
    :root:not([data-theme="light"]) .ayuda-nav-link.active   { background: var(--primary-soft); color: var(--primary); }
    :root:not([data-theme="light"]) .bottom-tabbar           { background: rgba(28,28,30,0.95); border-color: rgba(84,84,88,0.45); }
    :root:not([data-theme="light"]) .toast                   { background: var(--surface-deep); border-color: var(--border); color: var(--text); }
    :root:not([data-theme="light"]) .hero-logo               { filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6)) brightness(1.05); }

    :root:not([data-theme="light"]) ::-webkit-scrollbar-track { background: var(--surface); }
    :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: #48484A; border-radius: 4px; }

    :root:not([data-theme="light"]) .perm-module-card                            { background: var(--surface); border-color: var(--border); }
    :root:not([data-theme="light"]) .perm-module-name                            { color: var(--text-2); }
    :root:not([data-theme="light"]) .perm-module-badge                           { background: rgba(10,132,255,0.15); color: #64D2FF; }
    :root:not([data-theme="light"]) .perm-chip:hover                             { background: rgba(10,132,255,0.1); }
    :root:not([data-theme="light"]) .perm-chip-dot                               { border-color: #48484A; background: var(--surface-alt); }
    :root:not([data-theme="light"]) .perm-chip-label                             { color: var(--text-2); }
    :root:not([data-theme="light"]) .perm-chip:has(input:checked)                { background: rgba(10,132,255,0.12); }
    :root:not([data-theme="light"]) .perm-chip:has(input:checked) .perm-chip-dot { background: #0A84FF; border-color: #0A84FF; box-shadow: inset 0 0 0 2px var(--surface); }
    :root:not([data-theme="light"]) .perm-chip:has(input:checked) .perm-chip-label { color: #64D2FF; font-weight: 600; }
    :root:not([data-theme="light"]) .perm-chip:has(input:checked):hover          { background: rgba(10,132,255,0.2); }

    :root:not([data-theme="light"]) details.action-details            { background: rgba(191,90,242,0.12); border-color: rgba(191,90,242,0.3); }
    :root:not([data-theme="light"]) details.action-details summary    { color: #BF5AF2; }
    :root:not([data-theme="light"]) details.action-details[open] summary { border-bottom-color: rgba(191,90,242,0.3); }
    :root:not([data-theme="light"]) details.action-details .details-body { background: rgba(191,90,242,0.08); }
    :root:not([data-theme="light"]) details[open]                     { background: var(--surface-alt); }

    :root:not([data-theme="light"]) .chip.done    { background: rgba(48,209,88,0.15);  color: #30D158; }
    :root:not([data-theme="light"]) .chip.pending { background: rgba(255,159,10,0.15); color: #FF9F0A; }
    :root:not([data-theme="light"]) .chip.error   { background: rgba(255,69,58,0.15);  color: #FF453A; }
    :root:not([data-theme="light"]) .chip.info    { background: rgba(10,132,255,0.15); color: #64D2FF; }
    :root:not([data-theme="light"]) .chip.warn    { background: rgba(255,159,10,0.12); color: #FF9F0A; }
    :root:not([data-theme="light"]) .chip.neutral { background: var(--surface-deep);   color: var(--muted); border-color: var(--border); }

    :root:not([data-theme="light"]) .alert.success { background: rgba(48,209,88,0.12);  color: #30D158; border-color: rgba(48,209,88,0.25); }
    :root:not([data-theme="light"]) .alert.error   { background: rgba(255,69,58,0.12);  color: #FF453A; border-color: rgba(255,69,58,0.25); }
    :root:not([data-theme="light"]) .alert.info    { background: rgba(10,132,255,0.12); color: #64D2FF; border-color: rgba(10,132,255,0.25); }

    :root:not([data-theme="light"]) th {
        background: #1e2533;
        color: rgba(235,235,245,0.6);
        border-bottom-color: var(--border);
    }
    :root:not([data-theme="light"]) th,
    :root:not([data-theme="light"]) td {
        border-bottom-color: var(--border);
        color: var(--text);
    }
    :root:not([data-theme="light"]) tbody tr:hover { background: rgba(10,132,255,0.06); }
    :root:not([data-theme="light"]) .th-group-divider,
    :root:not([data-theme="light"]) .td-group-divider { border-left-color: #48484A; }
    :root:not([data-theme="light"]) .table-wrap { border-color: var(--border); }
}

/* ── Botón toggle dark mode ───────────────────── */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: var(--surface-deep);
    color: var(--text);
}

.theme-toggle-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity var(--dur-fast);
}

/* Mostrar sol en dark, luna en light */
.theme-toggle-btn .icon-sun  { display: none; }
.theme-toggle-btn .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle-btn .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle-btn .icon-sun  { display: block; }
    :root:not([data-theme="light"]) .theme-toggle-btn .icon-moon { display: none; }
}

/* ── Transicion suave al cambiar tema ─────────── */
*, *::before, *::after {
    transition: background-color var(--dur-mid) var(--ease-smooth),
                border-color var(--dur-mid) var(--ease-smooth),
                color var(--dur-fast) var(--ease-smooth) !important;
}