/* =====================================================================
   Motor de personalización (se carga el ÚLTIMO).
   JS (js/preferencias.js) solo cambia: data-tema en <html>, --primary-color, --text-size y la clase sin-animaciones.
   Todo lo demás se deriva de estas variables.
   ===================================================================== */
:root {
  --primary-color: #12294a;              /* color de acento elegido por el usuario */
  --text-size: 16px;                     /* tamaño base de la fuente */
  --t-fast: .15s; --t-med: .22s;         /* tiempos de transición */
  --w: 255, 255, 255;                    /* 'blanco' de las superficies translúcidas */
  --bg-color: #f3f5f9;                   /* fondo de la página */
  --card: #fff; --texto: #1e293b; --suave: #64748b; --borde: #e3e8f0; --cristal: rgba(255, 255, 255, .9);
  --glass: rgba(255, 255, 255, .78);
  --text-strong: #0f172a;

  /* Derivados del color de acento */
  --navy: var(--primary-color);
  --navy-2: color-mix(in srgb, var(--primary-color) 84%, white);
  --navy-3: color-mix(in srgb, var(--primary-color) 62%, white);
  --navy-dark: color-mix(in srgb, var(--primary-color) 72%, black);
  --navy-claro: color-mix(in srgb, var(--primary-color) 8%, white);
  --navy-soft: color-mix(in srgb, var(--primary-color) 16%, white);
  --navy-tx: var(--navy); --navy-2-tx: var(--navy-2); --navy-3-tx: var(--navy-3);
  --grad: linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
  --azul: var(--navy); --azul-2: var(--navy-2); --acento: var(--navy-2);
  --fondo: var(--bg-color);

  /* Superficies, bordes y textos con su equivalente para el modo oscuro */
  --sf-cbd5e1: #cbd5e1;
  --sf-e1e7f0: #e1e7f0;
  --sf-e3f0ea: #e3f0ea;
  --sf-e6ebf3: #e6ebf3;
  --sf-e6eef7: #e6eef7;
  --sf-e8edf4: #e8edf4;
  --sf-e8edf8: #e8edf8;
  --sf-e8eef6: #e8eef6;
  --sf-e8f3ed: #e8f3ed;
  --sf-e9edf4: #e9edf4;
  --sf-e9eff7: #e9eff7;
  --sf-eceff4: #eceff4;
  --sf-edf1f7: #edf1f7;
  --sf-eef1f6: #eef1f6;
  --sf-eef2fa: #eef2fa;
  --sf-f1f4f9: #f1f4f9;
  --sf-f1f4fa: #f1f4fa;
  --sf-f1f5f9: #f1f5f9;
  --sf-f3e4c8: #f3e4c8;
  --sf-f3f5f9: #f3f5f9;
  --sf-f3f5fa: #f3f5fa;
  --sf-f4f6fa: #f4f6fa;
  --sf-f6edd8: #f6edd8;
  --sf-f6f8fb: #f6f8fb;
  --sf-f7e0d6: #f7e0d6;
  --sf-f7e4e2: #f7e4e2;
  --sf-f7f9fc: #f7f9fc;
  --sf-f7f9fd: #f7f9fd;
  --sf-f8fafc: #f8fafc;
  --sf-f8fafd: #f8fafd;
  --sf-f9eae3: #f9eae3;
  --sf-faf3e0: #faf3e0;
  --sf-fafbfd: #fafbfd;
  --sf-fbeeed: #fbeeed;
  --sf-fcf3f2: #fcf3f2;
  --sf-fdf6f1: #fdf6f1;
  --sf-ffffff: #ffffff;
  --bd-c5d2e4: #c5d2e4;
  --bd-cfdcea: #cfdcea;
  --bd-d3dbe8: #d3dbe8;
  --bd-d3deec: #d3deec;
  --bd-e2e8f0: #e2e8f0;
  --bd-ecc7b8: #ecc7b8;
  --bd-ecdcb6: #ecdcb6;
  --bd-edf0f8: #edf0f8;
  --bd-ffffff: #ffffff;
  --tx-0f172a: #0f172a;
  --tx-1e293b: #1e293b;
  --tx-222c40: #222c40;
  --tx-2b6e50: #2b6e50;
  --tx-2f7d5b: #2f7d5b;
  --tx-334155: #334155;
  --tx-3c465a: #3c465a;
  --tx-475569: #475569;
  --tx-4a556b: #4a556b;
  --tx-5b6577: #5b6577;
  --tx-64748b: #64748b;
  --tx-7f2d28: #7f2d28;
  --tx-8a5a1b: #8a5a1b;
  --tx-8c98ad: #8c98ad;
  --tx-94a3b8: #94a3b8;
  --tx-9aa4b6: #9aa4b6;
  --tx-9c3a34: #9c3a34;
  --tx-b4bccb: #b4bccb;
  --tx-b6c0d2: #b6c0d2;
  --tx-c3cbd9: #c3cbd9;
}
html { font-size: var(--text-size); }

/* ---------- Modo oscuro ---------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --navy: color-mix(in srgb, var(--primary-color) 90%, white);
  --navy-2: color-mix(in srgb, var(--primary-color) 78%, white);
  --navy-3: color-mix(in srgb, var(--primary-color) 60%, white);
  --navy-dark: color-mix(in srgb, var(--primary-color) 70%, black);
  --navy-claro: color-mix(in srgb, var(--primary-color) 30%, #172033);
  --navy-soft: color-mix(in srgb, var(--primary-color) 40%, #172033);
  --navy-tx: color-mix(in srgb, var(--primary-color) 28%, white);
  --navy-2-tx: color-mix(in srgb, var(--primary-color) 34%, white);
  --navy-3-tx: color-mix(in srgb, var(--primary-color) 46%, white);
  --sf-cbd5e1: #0f1214;
  --sf-e1e7f0: #12151a;
  --sf-e3f0ea: #131b17;
  --sf-e6ebf3: #14181d;
  --sf-e6eef7: #121921;
  --sf-e8edf4: #15191e;
  --sf-e8edf8: #131823;
  --sf-e8eef6: #141920;
  --sf-e8f3ed: #151e19;
  --sf-e9edf4: #15191f;
  --sf-e9eff7: #141a22;
  --sf-eceff4: #171a1f;
  --sf-edf1f7: #161b22;
  --sf-eef1f6: #171b21;
  --sf-eef2fa: #141a26;
  --sf-f1f4f9: #171c24;
  --sf-f1f4fa: #161b26;
  --sf-f1f5f9: #171e24;
  --sf-f3e4c8: #18140c;
  --sf-f3f5f9: #191c24;
  --sf-f3f5fa: #181c26;
  --sf-f4f6fa: #191d25;
  --sf-f6edd8: #1d180e;
  --sf-f6f8fb: #191e27;
  --sf-f7e0d6: #1d120d;
  --sf-f7e4e2: #201211;
  --sf-f7f9fc: #181f29;
  --sf-f7f9fd: #161d2b;
  --sf-f8fafc: #1a2128;
  --sf-f8fafd: #171f2b;
  --sf-f9eae3: #231610;
  --sf-faf3e0: #231d0f;
  --sf-fafbfd: #1a1f2a;
  --sf-fbeeed: #271413;
  --sf-fcf3f2: #2a1614;
  --sf-fdf6f1: #2c1d12;
  --bd-c5d2e4: #212830;
  --bd-cfdcea: #232c35;
  --bd-d3dbe8: #252b33;
  --bd-d3deec: #242c36;
  --bd-e2e8f0: #2a313a;
  --bd-ecc7b8: #35241d;
  --bd-ecdcb6: #352e1d;
  --bd-edf0f8: #2b3143;
  --tx-0f172a: #e1e6f3;
  --tx-1e293b: #d4dbe7;
  --tx-222c40: #d0d7e4;
  --tx-2b6e50: #afdcc8;
  --tx-2f7d5b: #a4d9c2;
  --tx-334155: #c1cad7;
  --tx-3c465a: #bdc3d1;
  --tx-475569: #b2bbc8;
  --tx-4a556b: #b0b7c6;
  --tx-5b6577: #a7aeba;
  --tx-64748b: #98a3b3;
  --tx-7f2d28: #dea6a3;
  --tx-8a5a1b: #e7c69c;
  --tx-8c98ad: #78859b;
  --tx-94a3b8: #6c7f99;
  --tx-9aa4b6: #6f7c93;
  --tx-9c3a34: #d4928e;
  --tx-b4bccb: #5d6a82;
  --tx-b6c0d2: #556583;
  --tx-c3cbd9: #505f79;
}
:root[data-tema="oscuro"] body { background: var(--bg-color); color: var(--texto); }
:root[data-tema="oscuro"] .bz-side { background: var(--glass); border-right-color: var(--borde); }
:root[data-tema="oscuro"] .bz-side.abierto, :root[data-tema="oscuro"] .bz-side { box-shadow: none; }
:root[data-tema="oscuro"] .bz-nav { color: var(--suave); }
:root[data-tema="oscuro"] .bz-nav:hover { color: var(--text-strong); }
:root[data-tema="oscuro"] .bz-nav.activo { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 20px -8px rgba(0, 0, 0, .6); }
:root[data-tema="oscuro"] .bz-logo img { filter: brightness(1.12); }
:root[data-tema="oscuro"] .hero, :root[data-tema="oscuro"] .vista-card, :root[data-tema="oscuro"] .modal, :root[data-tema="oscuro"] .inf-card { background: var(--card); color: var(--texto); }
:root[data-tema="oscuro"] .hero-txt h2, :root[data-tema="oscuro"] h1, :root[data-tema="oscuro"] h2, :root[data-tema="oscuro"] h3, :root[data-tema="oscuro"] h4 { color: var(--text-strong); }
:root[data-tema="oscuro"] .bz-head h1 { color: #fff; }
:root[data-tema="oscuro"] button.quien { color: var(--texto); }
:root[data-tema="oscuro"] .bz-head button.quien { color: #fff; }
:root[data-tema="oscuro"] .usuario-dropdown { background: var(--card); border-color: var(--borde); }
:root[data-tema="oscuro"] input, :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea { background: var(--bg-color); color: var(--texto); border-color: var(--borde); }
:root[data-tema="oscuro"] ::placeholder { color: var(--suave); }
:root[data-tema="oscuro"] table, :root[data-tema="oscuro"] th, :root[data-tema="oscuro"] td { color: var(--texto); border-color: var(--borde); }
:root[data-tema="oscuro"] th { background: var(--bg-color); }
:root[data-tema="oscuro"] .doc-fila:hover, :root[data-tema="oscuro"] .doc-persona:hover { background: var(--navy-claro); }
:root[data-tema="oscuro"] .ql-toolbar, :root[data-tema="oscuro"] .ql-container { border-color: var(--borde) !important; background: var(--card); color: var(--texto); }
:root[data-tema="oscuro"] .ql-editor.ql-blank::before { color: var(--suave); }
:root[data-tema="oscuro"] .ql-snow .ql-stroke { stroke: var(--texto); } :root[data-tema="oscuro"] .ql-snow .ql-fill { fill: var(--texto); } :root[data-tema="oscuro"] .ql-snow .ql-picker { color: var(--texto); }
:root[data-tema="oscuro"] .alerta.ok { background: var(--ok-bg); } :root[data-tema="oscuro"] .alerta.error { background: var(--err-bg); }
:root[data-tema="oscuro"] .switch span { background: #3a4660; }
:root[data-tema="oscuro"] .anillo-fondo { stroke: #2c3a57; }

/* ---------- Sin animaciones ---------- */
:root.sin-animaciones *, :root.sin-animaciones *::before, :root.sin-animaciones *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* ---------- Ajustes: color de acento y controles ---------- */
.aj-grupo-tit { margin: 14px 2px 8px; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.aj-colores { display: flex; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 14px; background: var(--sf-f6f8fb, #f6f8fb); border: 1px solid var(--borde); }
.aj-color { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--card); background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px var(--borde), 0 6px 12px -6px rgba(0, 0, 0, .45); display: grid; place-items: center; color: #fff; font-size: 1.1rem; transition: transform var(--t-fast); padding: 0; }
.aj-color:hover { transform: scale(1.1); }
.aj-color:focus-visible { outline: 3px solid var(--navy-3); outline-offset: 3px; }
.aj-color[aria-checked="true"] { box-shadow: 0 0 0 3px var(--c), 0 6px 12px -6px rgba(0, 0, 0, .45); }
.aj-color[aria-checked="true"]::after { content: ''; width: 1.1rem; height: 1.1rem; background: var(--ic-check-b) center / contain no-repeat; }
.aj-color-nombre { flex-basis: 100%; font-size: .8rem; color: var(--suave); margin-top: -2px; }
.aj-estado { min-height: 1.1em; font-size: .8rem; color: var(--suave); margin: 6px 2px 0; }