/* Preferencia compartida entre portal y PWA. Los colores de marca no se invierten. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212;
  --panel: #1e1e1e;
  --panel-subtle: #282828;
  --ink: #f5f5f5;
  --kaiju-ink: #f5f5f5;
  --muted: #c2c2c2;
  --line: #3d3d3d;
  --line-strong: #666666;
  --accent-soft: #2a2a2a;
  --theme-accent-text: #ededed;
  --theme-success-text: #81c995;
  --theme-warning-text: #fdd663;
  --theme-danger-text: #f28b82;
  --theme-success-bg: #203329;
  --theme-warning-bg: #383020;
  --theme-danger-bg: #382624;
  --theme-accent-bg: #2a2a2a;
  --theme-info-bg: #2a2a2a;
  --theme-info-text: #d1d1d1;
  --shadow: 0 24px 64px #00000050;
  --shadow-soft: 0 4px 16px #00000018, 0 1px 3px #00000018;
  --shadow-raised: 0 10px 28px #00000030;
  --focus-ring: #e6b24a;
}

.nexus-theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.nexus-theme-toggle:hover { background: var(--panel-subtle, var(--bg)); }
.nexus-theme-toggle svg { width: 20px; height: 20px; }
.nexus-theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .nexus-theme-toggle .theme-sun { display: block; }
:root[data-theme="dark"] .nexus-theme-toggle .theme-moon { display: none; }
.nexus-theme-toggle:focus-visible { outline: 2px solid var(--kaiju-gold, var(--gold, #e6b24a)); outline-offset: 3px; }
.dashboard-welcome-account .nexus-theme-toggle,
.mobile-topline .nexus-theme-toggle { border-color: #ffffff33; background: #ffffff17; color: #fff; }
.dashboard-welcome-account .nexus-theme-toggle:hover,
.mobile-topline .nexus-theme-toggle:hover { background: #ffffff29; }
/* Cuatro acciones táctiles caben junto al logo sin reducir sus áreas de pulsación. */
@media (max-width: 380px) {
  .mobile-topline { flex-wrap: wrap; row-gap: 12px; }
  .mobile-topline-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .nexus-theme-toggle svg { animation: nexus-theme-enter 180ms ease-out; }
  @keyframes nexus-theme-enter { from { transform: rotate(-25deg) scale(.75); opacity: .35; } to { transform: rotate(0) scale(1); opacity: 1; } }
}

/* Base, formularios y capas. Las ilustraciones, fotos y mapas conservan sus colores. */
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
/* La cabecera se integra con la página; su fondo opaco protege el texto al desplazar. */
:root[data-theme="dark"] .topbar:not(.is-integrated) {
  background: var(--bg);
  border-bottom-color: color-mix(in srgb, var(--line) 55%, var(--bg));
}
:root[data-theme="dark"] :is(input, select, textarea, dialog) { color-scheme: dark; }
:root[data-theme="dark"] :is(input, select, textarea)::placeholder { color: #b3b3b3; opacity: 1; }
:root[data-theme="dark"] ::selection { background: #555555; color: #fff; }

/* El menú lateral conserva sus colores corporativos en ambos temas. */
:root[data-theme="dark"] .mobile-topline button > em { color: #271011; }
:root[data-theme="dark"] .dashboard-shell .panel { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow-soft); }
:root[data-theme="dark"] .dashboard-shell .panel:hover { border-color: var(--line-strong); }
:root[data-theme="dark"] .dashboard-shell .dashboard-status-panel.status-panel-is-working { border-left-color: var(--success); }
:root[data-theme="dark"] .dashboard-shell .dashboard-status-panel.status-panel-is-break { border-left-color: #d7a015; }
/* Los controles del banner mantienen su contraste sobre el color de la rama. */
:root[data-theme="dark"] .dashboard-welcome-account :is(.notification-button, .topbar-refresh-button) { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.09); color: #fff; }
:root[data-theme="dark"] .dashboard-welcome-account :is(.notification-button, .topbar-refresh-button, .user-chip):hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.16); }
:root[data-theme="dark"] .dashboard-welcome-account :is(.app-version, .user-chip small) { color: #ead7d3; }
/* Los datos principales no heredan el gris secundario de párrafos y listas. */
:root[data-theme="dark"] :is(.panel .metric, .presence-copy strong, .dashboard-hours-progress-copy strong, .dashboard-hours-remaining strong) { color: var(--ink); }
:root[data-theme="dark"] .live-timer { color: var(--ink) !important; }
:root[data-theme="dark"] .dashboard-section-kicker { color: var(--muted) !important; }
:root[data-theme="dark"] :is(.dashboard-panel-label, .dashboard-task-path-label, .dashboard-task-path-value) { color: var(--muted); }
:root[data-theme="dark"] :is(.dashboard-task-count, .dashboard-task-age, .dashboard-task-mark, .dashboard-ticket-row.has-unread) { background: var(--panel-subtle); border-color: var(--line); }
:root[data-theme="dark"] :is(.dashboard-task-row:hover, .dashboard-ticket-row:hover) { background: var(--panel-subtle); }
:root[data-theme="dark"] :is(.dashboard-task-mark::before, .dashboard-task-mark::after) { background: var(--muted); }
:root[data-theme="dark"] :is(.dashboard-task-path-separator, .dashboard-ticket-code) { color: var(--muted); }
:root[data-theme="dark"] .dashboard-vacation-next { background: var(--panel-subtle); }
:root[data-theme="dark"] :is(.dashboard-vacation-countdown-value, .dashboard-vacation-current-copy) strong { color: var(--ink); }
:root[data-theme="dark"] .dashboard-vacation-countdown-value span { color: var(--ink); }
:root[data-theme="dark"] :is(.dashboard-vacation-countdown-copy, .dashboard-vacation-current-copy) p { color: var(--muted); }
:root[data-theme="dark"] .dashboard-vacation-date { color: var(--muted) !important; }
:root[data-theme="dark"] :is(.dashboard-vacation-kicker, .dashboard-vacation-next.is-current .dashboard-vacation-kicker) { color: var(--muted) !important; }
:root[data-theme="dark"] .mobile-clock-summary,
:root[data-theme="dark"] :is(.mobile-clock-working, .mobile-clock-break, .mobile-clock-vacation) .mobile-clock-summary { background: var(--panel-subtle); color: var(--ink); }
/* El calendario conserva estados propios, sin perderlos en la paleta neutra. */
:root[data-theme="dark"] .work-calendar .work-day {
  --work-day-bg: #242424;
  --work-day-border: #525252;
  --work-day-accent: #bdbdbd;
  background: var(--work-day-bg);
  border-color: var(--work-day-border);
  box-shadow: inset 4px 0 0 var(--work-day-border);
  color: #f5f5f5;
  opacity: 1;
}
:root[data-theme="dark"] .work-calendar .work-day-out {
  --work-day-bg: #153c2d;
  --work-day-border: #47b881;
  --work-day-accent: #9ce8bc;
}
:root[data-theme="dark"] .work-calendar :is(.work-day-working, .work-day-break) {
  --work-day-bg: #443411;
  --work-day-border: #dfad3f;
  --work-day-accent: #ffda80;
}
:root[data-theme="dark"] .work-calendar .work-day-missing:not(:disabled) {
  --work-day-bg: #3d2226;
  --work-day-border: #da777b;
  --work-day-accent: #ffb1b5;
}
:root[data-theme="dark"] .work-calendar .work-day-vacation {
  --work-day-bg: #163b40;
  --work-day-border: #51b6c1;
  --work-day-accent: #a0e3eb;
}
:root[data-theme="dark"] .work-calendar .work-day > span { color: var(--work-day-accent); }
:root[data-theme="dark"] .work-calendar .work-day > small { color: #dedede; }
:root[data-theme="dark"] .work-calendar .work-day.is-muted { border-style: dashed; }
:root[data-theme="dark"] .work-calendar .work-day.is-muted > strong { color: #bdbdbd; }
:root[data-theme="dark"] .work-calendar .work-day-missing:disabled { box-shadow: none; }
:root[data-theme="dark"] .work-calendar .work-day:not(:disabled):hover {
  outline: 1px solid var(--work-day-accent);
  outline-offset: 1px;
}
:root[data-theme="dark"] .work-calendar .work-day:focus-visible {
  outline: 2px solid #f5f5f5;
  outline-offset: 2px;
}
/* El color identifica la jornada, independientemente de la rama del banner. */
:root[data-theme="dark"] :is(.status-panel-is-working, .clock-state-is-working, .mobile-clock-working) { --clock-state-rgb: 66, 184, 119; --clock-state-light: #9be8ba; }
:root[data-theme="dark"] :is(.status-panel-is-break, .clock-state-is-break, .mobile-clock-break) { --clock-state-rgb: 232, 174, 65; --clock-state-light: #f7d78d; }
:root[data-theme="dark"] :is(.status-panel-is-out, .clock-state-is-out, .mobile-clock-out) { --clock-state-rgb: 123, 157, 187; --clock-state-light: #c0d7ea; }
:root[data-theme="dark"] :is(.status-panel-is-vacation, .clock-state-is-vacation, .mobile-clock-vacation) { --clock-state-rgb: 81, 181, 194; --clock-state-light: #a8e4ed; }
:root[data-theme="dark"] .dashboard-shell .dashboard-status-panel,
:root[data-theme="dark"] .clock-console[class*="clock-state-"] {
  --clock-state-rgb: 123, 157, 187;
  --clock-state-light: #c0d7ea;
  background: radial-gradient(ellipse at 100% 100%, rgba(var(--clock-state-rgb), .19), transparent 65%), linear-gradient(115deg, rgba(var(--clock-state-rgb), .08), transparent 65%), #1b2020;
  border-color: rgba(var(--clock-state-rgb), .34);
  border-left-color: var(--clock-state-light);
  box-shadow: inset 0 1px 0 rgba(var(--clock-state-rgb), .08), var(--shadow-soft);
}
:root[data-theme="dark"] .dashboard-shell .dashboard-status-panel.status-panel-is-working,
:root[data-theme="dark"] .clock-console.clock-state-is-working { --clock-state-rgb: 66, 184, 119; --clock-state-light: #9be8ba; }
:root[data-theme="dark"] .dashboard-shell .dashboard-status-panel.status-panel-is-break,
:root[data-theme="dark"] .clock-console.clock-state-is-break { --clock-state-rgb: 232, 174, 65; --clock-state-light: #f7d78d; }
:root[data-theme="dark"] .dashboard-shell .dashboard-status-panel.status-panel-is-vacation,
:root[data-theme="dark"] .clock-console.clock-state-is-vacation { --clock-state-rgb: 81, 181, 194; --clock-state-light: #a8e4ed; }
:root[data-theme="dark"] .dashboard-shell .dashboard-status-panel:hover { border-color: rgba(var(--clock-state-rgb), .65); border-left-color: var(--clock-state-light); }
:root[data-theme="dark"] .dashboard-status-panel .dashboard-status-signal { background: var(--clock-state-light); box-shadow: 0 0 0 5px rgba(var(--clock-state-rgb), .12), 0 0 14px rgba(var(--clock-state-rgb), .38); }
:root[data-theme="dark"] :is(.dashboard-status-panel, .clock-console) :is(.metric, .dashboard-status-time, h3) { color: #f5f5f5; }
:root[data-theme="dark"] :is(.mobile-clock-working, .mobile-clock-break, .mobile-clock-vacation, .mobile-clock-out) .mobile-clock-summary {
  background: radial-gradient(ellipse at 100% 100%, rgba(var(--clock-state-rgb, 123, 157, 187), .28), transparent 75%), linear-gradient(120deg, rgba(var(--clock-state-rgb, 123, 157, 187), .1), transparent), #1b2020;
  box-shadow: inset 0 3px 0 rgba(var(--clock-state-rgb, 123, 157, 187), .7);
  color: #f5f5f5;
}
:root[data-theme="dark"] #login-screen.mobile-login {
  --panel-subtle: #282828;
  --accent-soft: #2a2a2a;
}
/* El pulgar blanco permite distinguir el interruptor de su pista de estado. */
:root[data-theme="dark"] :is(.switch-control span, .mobile-switch span, .vpn-access-switch span, .clock-report-switch)::after {
  background: #fff;
}

/* Autosalida: pista y pulgar visibles, también cuando no hay horario válido. */
:root :is(.clock-auto-option, .mobile-auto-clock) {
  --auto-switch-off: #707070;
  --auto-switch-edge: #555555;
  --auto-switch-on: #178443;
  --auto-switch-on-edge: #106d36;
  --auto-switch-disabled: #e3e3e3;
  --auto-switch-disabled-edge: #858585;
  --auto-switch-disabled-thumb: #707070;
}
:root[data-theme="dark"] :is(.clock-auto-option, .mobile-auto-clock) {
  --auto-switch-off: #555555;
  --auto-switch-edge: #a0a0a0;
  --auto-switch-on: #248249;
  --auto-switch-on-edge: #74d89b;
  --auto-switch-disabled: #393939;
  --auto-switch-disabled-edge: #929292;
  --auto-switch-disabled-thumb: #c2c2c2;
}
:root :is(.clock-auto-option, .mobile-auto-clock).is-disabled {
  opacity: 1;
}
:root :is(.clock-auto-option, .mobile-auto-clock) :is(.switch-control, .mobile-switch) > input + span {
  background: var(--auto-switch-off);
  box-shadow: inset 0 0 0 2px var(--auto-switch-edge);
}
:root :is(.clock-auto-option, .mobile-auto-clock) :is(.switch-control, .mobile-switch) > input:checked + span {
  background: var(--auto-switch-on);
  box-shadow: inset 0 0 0 2px var(--auto-switch-on-edge);
}
:root :is(.clock-auto-option, .mobile-auto-clock) :is(.switch-control, .mobile-switch) > input:disabled + span {
  background: var(--auto-switch-disabled);
  box-shadow: inset 0 0 0 2px var(--auto-switch-disabled-edge);
}
:root :is(.clock-auto-option, .mobile-auto-clock) :is(.switch-control, .mobile-switch) > input:disabled + span::after {
  background: var(--auto-switch-disabled-thumb);
  box-shadow: none;
}
:root :is(.clock-auto-option, .mobile-auto-clock) :is(.switch-control, .mobile-switch) > input:focus-visible + span {
  outline: 3px solid var(--focus-ring, var(--accent));
  outline-offset: 3px;
}