/* ============================================================
   zander-theme.css — Zander Tools
   Override de tokens sobre recursos.css (carga después)
   NO modificar recursos.css directamente.
   ============================================================ */

body, input, button, select, textarea {
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif !important;
}

/* ── Tokens Zander (modo claro) ─────────────────────────────── */
:root {
  --c-primary:     #fcc61c;
  --c-primary-600: #d4a000;
  --c-primary-50:  #fffbe8;
  --c-secondary:   #d4a000;              /* Redefinido de rosa a amarillo/oro corporativo */
  --c-secondary-50:#fffbe8;              /* Redefinido de rosa a amarillo suave corporativo */
  --c-ink:         #1b1b1d;
  --c-ink-2:       #3c3c3e;
  --c-ink-3:       #6c6c6f;
  --c-ink-4:       #9c9c9f;
  --c-line:        #e8e8ea;
  --c-line-2:      #f0f0f2;
  --c-bg:          #fbfbfb;
  --c-surface:     #ffffff;
  --c-surface-2:   #f5f5f7;
  --c-success:     #22a05a;
  --c-success-50:  #e8f7ef;
}

/* ── Tokens Zander (modo oscuro) ────────────────────────────── */
[data-theme="dark"] {
  --c-primary:     #fcc61c;
  --c-primary-600: #e6b000;
  --c-primary-50:  rgba(252,198,28,.12);
  --c-secondary:   #e6b000;              /* Redefinido de rosa a amarillo/oro corporativo */
  --c-secondary-50:rgba(252,198,28,.12); /* Redefinido de rosa a amarillo suave corporativo */
  --c-ink:         #fbfbfb;
  --c-ink-2:       #e1e1e3;
  --c-ink-3:       #a5a5a8;
  --c-ink-4:       #6c6c6f;
  --c-line:        #2b2b2d;
  --c-line-2:      #222224;
  --c-bg:          #1b1b1d;
  --c-surface:     #222224;
  --c-surface-2:   #2a2a2d;
  --c-danger:      #f87171;
  --c-danger-50:   rgba(248,113,113,.12);
  --c-warning:     #fb923c;
  --c-warning-50:  rgba(251,146,60,.12);
  --c-success:     #4ade80;
  --c-success-50:  rgba(74,222,128,.12);
}

/* ── Ajustes específicos modo oscuro ────────────────────────── */
[data-theme="dark"] body {
  color-scheme: dark;
}

[data-theme="dark"] .sidebar {
  background: var(--c-surface);
  border-right-color: var(--c-line);
}

[data-theme="dark"] .header {
  background: var(--c-surface);
  border-bottom-color: var(--c-line);
}

[data-theme="dark"] .card {
  background: var(--c-surface);
  border-color: var(--c-line);
}

[data-theme="dark"] .login-card {
  background: var(--c-surface);
  border-color: var(--c-line);
}

[data-theme="dark"] .avatar {
  background: var(--c-surface-2);
  border-color: var(--c-line);
}

[data-theme="dark"] .avatar-menu {
  background: var(--c-surface);
  border-color: var(--c-line);
}

[data-theme="dark"] .field input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-ink);
}

[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus {
  background: var(--c-surface);
  box-shadow: 0 0 0 4px rgba(252,198,28,.15);
}

[data-theme="dark"] .btn-secondary {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-ink-2);
}

[data-theme="dark"] .btn-secondary:hover {
  background: var(--c-line-2);
  color: var(--c-ink);
}

.main {
  background:
    radial-gradient(1100px 480px at 12% -8%, rgba(252,198,28,.05), transparent 60%),
    radial-gradient(900px 380px at 100% 110%, rgba(252,198,28,.04), transparent 60%),
    var(--c-bg) !important;
}
.login {
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(252,198,28,.06), transparent 60%),
    radial-gradient(700px 400px at 90% 100%, rgba(252,198,28,.05), transparent 65%),
    var(--c-bg) !important;
}

[data-theme="dark"] #modal-root .modal-body {
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-ink);
}

[data-theme="dark"] #modal-root .modal header,
[data-theme="dark"] #modal-root .modal footer {
  border-color: var(--c-line);
}

[data-theme="dark"] #modal-root .modal .btn:not(.primary):not(.danger) {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-ink);
}

/* ── Dark mode toggle (botón en side-foot) ──────────────────── */
.dark-toggle {
  appearance: none;
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--c-ink-2);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--dur), border-color var(--dur), color var(--dur), transform .15s;
}
.dark-toggle:hover {
  background: var(--c-primary-50);
  border-color: var(--c-primary);
  color: var(--c-primary-600);
  transform: rotate(12deg);
}
.dark-toggle svg {
  transition: opacity .2s, transform .3s;
}
/* Ocultar/mostrar iconos según el modo activo */
.dark-toggle .ico-moon { display: block; }
.dark-toggle .ico-sun  { display: none; }
[data-theme="dark"] .dark-toggle .ico-moon { display: none; }
[data-theme="dark"] .dark-toggle .ico-sun  { display: block; }

/* Texto de versión en collapsed */
.collapsed .dark-toggle-label { display: none; }

/* ── Logo Zander: ocultar fondo blanco ──────────────────────── */
.sidebar-brand img {
  height: 30px;
  width: auto;
  border-radius: 50%;
}

/* ── Ajuste color nav-item activo (amarillo no verde) ────────── */
.nav-item.active {
  background: var(--c-primary-50) !important;
  color: var(--c-ink) !important;
}
.nav-item.active .ico {
  color: var(--c-primary-600) !important;
}
.nav-item.active::before {
  background: var(--c-primary) !important;
}

/* Overrides para sidebar.dark (evitar que muestre el verde heredado de recursos.css) */
.sidebar.dark .nav-item:hover {
  background: var(--c-line-2) !important;
  color: var(--c-ink) !important;
}
.sidebar.dark .nav-item.active {
  background: var(--c-primary-50) !important;
  color: var(--c-ink) !important;
}
.sidebar.dark .nav-item.active .ico {
  color: var(--c-primary-600) !important;
}
.sidebar.dark .nav-item.active::before {
  background: var(--c-primary) !important;
}

/* Overrides para sidebar.green (ahora sidebar corporativo Zander) */
.sidebar.green {
  background: linear-gradient(180deg, #1D1D1B 0%, #2b2b29 100%) !important;
  border-right-color: var(--c-line) !important;
  color: var(--c-ink) !important;
}
.sidebar.green .sidebar-brand {
  border-color: var(--c-line) !important;
}
.sidebar.green .sidebar-brand .wm {
  color: var(--c-ink) !important;
}
.sidebar.green .sidebar-brand .wm small {
  color: var(--c-ink-3) !important;
}
.sidebar.green .nav-section {
  color: var(--c-ink-4) !important;
}
.sidebar.green .nav-item {
  color: var(--c-ink-2) !important;
}
.sidebar.green .nav-item:hover {
  background: var(--c-surface-2) !important;
  color: var(--c-ink) !important;
}
.sidebar.green .nav-item.active {
  background: var(--c-primary-50) !important;
  color: var(--c-ink) !important;
}
.sidebar.green .nav-item.active .ico {
  color: var(--c-primary-600) !important;
}
.sidebar.green .nav-item.active::before {
  background: var(--c-primary) !important;
}
.sidebar.green .side-foot {
  border-color: var(--c-line) !important;
  color: var(--c-ink-4) !important;
}
.sidebar.green .collapse-btn {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
  color: var(--c-ink-2) !important;
}
.sidebar.green .collapse-btn:hover {
  background: var(--c-line-2) !important;
  color: var(--c-ink) !important;
}

/* ── Pill worker → amarillo Zander ──────────────────────────── */
.pill-worker {
  background: var(--c-primary-50);
  color: #7a5a00;
}

/* ── Btn primary sombra amarilla ────────────────────────────── */
.btn-primary,
.btn.primary,
#modal-root .modal .btn.primary {
  box-shadow: 0 6px 18px -6px rgba(252,198,28,.5) !important;
  color: #1D1D1B !important;
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
.btn-primary:hover,
.btn.primary:hover,
#modal-root .modal .btn.primary:hover {
  box-shadow: 0 8px 24px -4px rgba(252,198,28,.4) !important;
  color: #1D1D1B !important;
  background: var(--c-primary-600) !important;
  border-color: var(--c-primary-600) !important;
}

/* ── Avatar corporativo (Amarillo con letra negra) ───────────── */
.avatar .ini,
.client-card .avatar,
.detail-hero .avatar-big,
.share-user .av {
  background: var(--c-primary) !important;
  color: #1D1D1B !important;
}

/* ── Toggles en modo oscuro (knob blanco visible) ───────────── */
[data-theme="dark"] .toggle-slider::before {
  background: #fbfbfb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}

/* ── Focus ring amarillo ─────────────────────────────────────── */
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(252,198,28,.18);
}

/* ── Welcome page: tono Zander ──────────────────────────────── */
.welcome-mark .ring {
  background:
    radial-gradient(closest-side, rgba(252,198,28,.20), transparent 70%),
    radial-gradient(closest-side, rgba(252,198,28,.08), transparent 75%);
}
.welcome h1 em { color: var(--c-primary-600); }

/* ── Transition suave al cambiar de tema ─────────────────────── */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: .2s;
  transition-timing-function: ease;
}
/* Excepciones: no animar transforms propios de componentes */
.collapse-btn svg,
.nav-item,
.btn-primary,
.btn-secondary,
.dark-toggle {
  transition: background var(--dur), border-color var(--dur), color var(--dur),
              transform var(--dur), box-shadow var(--dur), opacity var(--dur);
}

/* ── Notificaciones Dropdown & Header Overrides ──────────────── */
.notif-bell:focus-visible {
  outline-color: var(--c-primary) !important;
}
.notif-panel {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
}
.notif-panel > header {
  background: var(--c-surface-2) !important;
  border-bottom-color: var(--c-line) !important;
}
.notif-panel > header h3 {
  color: var(--c-ink) !important;
}
.notif-panel > header a {
  color: var(--c-primary-600) !important;
}
.notif-item {
  border-bottom-color: var(--c-line) !important;
}
.notif-item.unread {
  border-left-color: var(--c-primary) !important;
  background: var(--c-primary-50) !important;
}
.notif-item a:hover {
  background: var(--c-surface-2) !important;
}
.notif-item .ref {
  color: var(--c-ink) !important;
}
.notif-item .meta {
  color: var(--c-ink-3) !important;
}
[data-theme="dark"] .notif-bell {
  border-color: var(--c-line) !important;
  color: var(--c-ink) !important;
}
[data-theme="dark"] .notif-bell:hover {
  background: var(--c-surface-2) !important;
  border-color: var(--c-ink-4) !important;
}

/* ── Escalado de tamaño de texto general ────────────────────────── */
body { font-size: calc(14px + var(--font-size-adjust, 0px)) !important; }
.nav-item { font-size: calc(14px + var(--font-size-adjust, 0px)) !important; }
.nav-section { font-size: calc(10.5px + var(--font-size-adjust, 0px)) !important; }
.crumbs { font-size: calc(13px + var(--font-size-adjust, 0px)) !important; }
.crumbs .now { font-size: calc(15px + var(--font-size-adjust, 0px)) !important; }
.page-header h2, .login-mark h2, .error-page h2 { font-size: calc(22px + var(--font-size-adjust, 0px)) !important; }
.welcome h1 { font-size: calc(36px + var(--font-size-adjust, 0px)) !important; }
.welcome p { font-size: calc(16px + var(--font-size-adjust, 0px)) !important; }
.field label { font-size: calc(12.5px + var(--font-size-adjust, 0px)) !important; }
.field input, .field select, .field textarea, .f-input, #modal-root .modal #admin-confirm-input { font-size: calc(14px + var(--font-size-adjust, 0px)) !important; }
.btn-primary, .btn-secondary, .btn { font-size: calc(14.5px + var(--font-size-adjust, 0px)) !important; }
table, #modal-root .modal section { font-size: calc(13.5px + var(--font-size-adjust, 0px)) !important; }
thead th { font-size: calc(11px + var(--font-size-adjust, 0px)) !important; }
.card-title { font-size: calc(15px + var(--font-size-adjust, 0px)) !important; }
.login-mark small, .check, .login-foot, .stat-card .stat-sub, .toggle-row-label small, .text-small { font-size: calc(12px + var(--font-size-adjust, 0px)) !important; }
.field-hint, .field-error, .stat-card .stat-label { font-size: calc(11.5px + var(--font-size-adjust, 0px)) !important; }
.stat-card .stat-value { font-size: calc(32px + var(--font-size-adjust, 0px)) !important; }
.toggle-row-label { font-size: calc(14px + var(--font-size-adjust, 0px)) !important; }
.error-page h1 { font-size: calc(64px + var(--font-size-adjust, 0px)) !important; }
#modal-root .modal header h2 { font-size: calc(16px + var(--font-size-adjust, 0px)) !important; }

/* Adicionales para fichas y contraseñas */
.clientes-head h1 { font-size: calc(28px + var(--font-size-adjust, 0px)) !important; }
.pw-head h1 { font-size: calc(28px + var(--font-size-adjust, 0px)) !important; }
.pw-card .title { font-size: calc(15.5px + var(--font-size-adjust, 0px)) !important; }
.cred .head .name { font-size: calc(13.5px + var(--font-size-adjust, 0px)) !important; }
.cred-row .lbl { font-size: calc(11.5px + var(--font-size-adjust, 0px)) !important; }
.cred-row .val { font-size: calc(13.5px + var(--font-size-adjust, 0px)) !important; }
.doc-item { font-size: calc(12.5px + var(--font-size-adjust, 0px)) !important; }
.section-card > .head .title { font-size: calc(16px + var(--font-size-adjust, 0px)) !important; }
.field-static .lbl { font-size: calc(11.5px + var(--font-size-adjust, 0px)) !important; }
.field-static .val { font-size: calc(14px + var(--font-size-adjust, 0px)) !important; }

/* ── Selección de texto corporativa ────────────────────────── */
::selection {
  background-color: #fcc61c !important;
  color: #1b1b1d !important;
}
::-moz-selection {
  background-color: #fcc61c !important;
  color: #1b1b1d !important;
}

/* ── Redefinición de tags en general ────────────────────────── */
.tag {
  background: var(--c-surface-2) !important;
  color: var(--c-ink-2) !important;
  border: 1px solid var(--c-line) !important;
}
/* Tag verde -> ahora corporativo primario (amarillo) */
.tag.green {
  background: var(--c-primary-50) !important;
  color: var(--c-primary-600) !important;
  border-color: transparent !important;
}
[data-theme="dark"] .tag.green {
  color: var(--c-primary) !important;
}
/* Tag lime -> ahora secundario (rosa) */
.tag.lime {
  background: var(--c-secondary-50) !important;
  color: var(--c-secondary) !important;
  border-color: transparent !important;
}
/* Tag gray -> ahora neutral */
.tag.gray {
  background: var(--c-surface-2) !important;
  color: var(--c-ink-2) !important;
  border-color: var(--c-line) !important;
}
/* Tag warn -> alerta naranja */
.tag.warn {
  background: var(--c-warning-50) !important;
  color: var(--c-warning) !important;
  border-color: transparent !important;
}
/* Tag danger -> alerta roja */
.tag.danger {
  background: var(--c-danger-50) !important;
  color: var(--c-danger) !important;
  border-color: transparent !important;
}

/* ── Correcciones del modo oscuro para inputs y componentes ───── */
[data-theme="dark"] .f-input,
[data-theme="dark"] .field input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
  color: var(--c-ink) !important;
}
[data-theme="dark"] .toolbar-search:focus-within {
  background: var(--c-surface-2) !important;
  border-color: var(--c-primary) !important;
}
[data-theme="dark"] .toolbar-segment button.on {
  background: var(--c-surface-2) !important;
  color: var(--c-primary) !important;
}
[data-theme="dark"] .chip:hover {
  background: var(--c-surface-2) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}
[data-theme="dark"] .chip.on {
  background: var(--c-primary-50) !important;
  border-color: transparent !important;
  color: var(--c-primary) !important;
}

/* Fichas de credenciales (Clientes y Contraseñas) */
.cred .head {
  background: var(--c-surface) !important;
}
[data-theme="dark"] .cred {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
}
[data-theme="dark"] .cred .head {
  background: var(--c-surface-2) !important;
  border-bottom-color: var(--c-line) !important;
}
[data-theme="dark"] .cred-row {
  border-top-color: var(--c-line) !important;
}
[data-theme="dark"] .cred-foot {
  border-top-color: var(--c-line) !important;
}

/* Documentos y Zonas de Subida */
[data-theme="dark"] .doc-item {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
}
[data-theme="dark"] .doc-item .pdf {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
}
[data-theme="dark"] .doc-drop {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
}

/* Notas y Textareas */
[data-theme="dark"] .notes-area {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
  color: var(--c-ink) !important;
}
[data-theme="dark"] .notes-area:focus {
  background: var(--c-surface) !important;
  border-color: var(--c-primary) !important;
}

/* Permisos y Overlays de Contraseñas */
[data-theme="dark"] .perm-seg button.on {
  background: var(--c-surface-2) !important;
  color: var(--c-primary) !important;
}
[data-theme="dark"] .share-user {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
}
[data-theme="dark"] .pw-overlay {
  background: rgba(27, 27, 29, 0.75) !important;
}
[data-theme="dark"] .pw-modal {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-ink) !important;
}
[data-theme="dark"] .pw-modal .m-head {
  border-bottom-color: var(--c-line) !important;
}
[data-theme="dark"] .pw-modal .m-foot {
  border-top-color: var(--c-line) !important;
  background: var(--c-surface-2) !important;
}
[data-theme="dark"] .pw-drow {
  border-bottom-color: var(--c-line-2) !important;
}
[data-theme="dark"] .pw-bigfield {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
}
[data-theme="dark"] .gen-out {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
}
[data-theme="dark"] .gen-opt-row {
  border-bottom-color: var(--c-line) !important;
}
[data-theme="dark"] .seg-cat.on {
  background: color-mix(in oklab, var(--cat) 15%, var(--c-surface)) !important;
  color: var(--c-ink) !important;
}

/* ── Segmento Toolbar y Toggles de Vista (Tarjetas/Lista) ──────── */
.toolbar-segment button.on,
.view-toggle button.on {
  background: var(--c-surface) !important;
  color: var(--c-ink) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="dark"] .toolbar-segment button.on,
[data-theme="dark"] .view-toggle button.on {
  background: rgba(252, 198, 28, 0.12) !important;
  color: var(--c-primary) !important;
  box-shadow: none !important;
}

/* ── Toggles en modo oscuro ─────────────────────────────────── */
[data-theme="dark"] .toggle-slider {
  background: rgba(255,255,255,.18) !important;
}
[data-theme="dark"] .toggle input:checked + .toggle-slider {
  background: var(--c-primary) !important;
}
[data-theme="dark"] .toggle-slider::before {
  background: #fbfbfb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}

/* ── Botones Genéricos y Hovers ─────────────────────────────── */
.btn {
  background: var(--c-surface) !important;
  border-color: var(--c-line) !important;
  color: var(--c-ink-2) !important;
}
.btn:hover:not(.primary):not(.btn-secondary):not(.ghost):not(.danger) {
  background: var(--c-surface-2) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-ink) !important;
}
[data-theme="dark"] .btn.danger:hover {
  background: var(--c-danger-50) !important;
  border-color: var(--c-danger) !important;
  color: var(--c-danger) !important;
}

/* ── Chips activos con fondo corporativo y texto legible ──────── */
.chip.on {
  background: var(--c-primary) !important;
  color: #1b1b1d !important;
  border-color: transparent !important;
}
[data-theme="dark"] .chip.on {
  background: var(--c-primary) !important;
  color: #1b1b1d !important;
  border-color: transparent !important;
}

/* ── Superbanner de Contraseñas en modo oscuro ───────────────── */
[data-theme="dark"] .pw-superbanner {
  background: rgba(252, 198, 28, 0.12) !important;
  border-color: rgba(252, 198, 28, 0.3) !important;
  color: var(--c-primary) !important;
}