/* =========================================================
   Relatio Actorum — estilo "glass"
   ========================================================= */
:root {
  --ink: #0d1f3c;
  --ink-2: #33476a;
  --muted: #6a7b97;
  --line: rgba(13, 31, 60, 0.09);
  --blue: #1a63d8;
  --blue-2: #3b8bff;
  --blue-soft: rgba(26, 99, 216, 0.1);
  --green: #18a862;
  --amber: #e2930c;
  --red: #e0383e;
  --violet: #6d5ce8;

  --glass: rgba(255, 255, 255, 0.46);
  --glass-2: rgba(255, 255, 255, 0.62);
  --glass-3: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.75);
  --blur: blur(24px) saturate(165%);
  --shadow: 0 10px 40px rgba(6, 30, 80, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-sm: 0 4px 18px rgba(6, 30, 80, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --r-lg: 26px;
  --r: 18px;
  --r-sm: 12px;
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --inhabil: rgba(13, 31, 60, 0.15);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  background: #0b3f9a url('../assets/bg.svg') center / cover fixed no-repeat;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.01em; }
::selection { background: rgba(59, 139, 255, 0.25); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(13, 31, 60, 0.18); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.glass {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r);
}
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 22px; height: 22px; }

/* ---------- Logo ---------- */
.logo { line-height: 1; user-select: none; }
.logo .l1 { font-size: 26px; font-weight: 300; letter-spacing: 0.06em; color: var(--ink); }
.logo .l2 { font-size: 26px; font-weight: 800; letter-spacing: 0.03em; color: var(--ink); }
.logo .l2 i { color: var(--blue-2); font-style: normal; }
.logo .tag { margin-top: 8px; font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-2); font-weight: 600; line-height: 1.35; }

/* ---------- Shell ---------- */
.app {
  position: fixed;
  inset: 22px;
  display: grid;
  grid-template-columns: 250px 1fr;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 80px rgba(3, 20, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 28px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.3));
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  min-height: 0;
}
.sidebar .logo { padding: 0 10px 26px; }
.nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.nav a, .side-bottom a, .side-bottom button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  position: relative;
  border: 0;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.nav a .icon { color: var(--blue); }
.nav a:hover, .side-bottom a:hover, .side-bottom button:hover { background: rgba(255, 255, 255, 0.5); }
.nav a.active {
  background: linear-gradient(90deg, rgba(59, 139, 255, 0.22), rgba(255, 255, 255, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 14px rgba(26, 99, 216, 0.12);
}
.nav a.active::before { content: ''; position: absolute; left: -18px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--blue); }
.nav .count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--red); color: #fff; }
.nav .count.blue { background: var(--blue); }
.nav-sep { height: 1px; background: var(--line); margin: 10px 8px; }
.side-bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-2), var(--blue)); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.side-bottom .who { overflow: hidden; }
.side-bottom .who small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 18px 26px 10px; }
.search { position: relative; flex: 0 1 420px; }
.search input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-2);
  backdrop-filter: var(--blur);
  outline: none;
  box-shadow: var(--shadow-sm);
}
.search input:focus { border-color: rgba(59, 139, 255, 0.6); box-shadow: 0 0 0 4px rgba(59, 139, 255, 0.15); }
.search > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; padding: 6px; background: var(--glass-3); }
.search-results a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--ink); }
.search-results a:hover, .search-results a.sel { background: var(--blue-soft); text-decoration: none; }
.search-results small { display: block; color: var(--muted); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 13px; white-space: nowrap; }
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(24, 168, 98, 0.18); }
.status-pill.demo .dot { background: var(--violet); box-shadow: 0 0 0 4px rgba(109, 92, 232, 0.18); }
.status-pill.down .dot { background: var(--red); box-shadow: 0 0 0 4px rgba(224, 56, 62, 0.18); animation: pulse 1.2s infinite; }
.status-pill.sync .dot { background: var(--amber); animation: pulse 1s infinite; }
.status-pill b { font-weight: 600; color: var(--green); }
.status-pill.demo b { color: var(--violet); }
.status-pill.down b { color: var(--red); }
@keyframes pulse { 50% { opacity: 0.35; } }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-2); color: var(--ink); }
.icon-btn:hover { background: var(--glass-3); }
.icon-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }

.content { flex: 1; overflow-y: auto; padding: 8px 26px 26px; min-height: 0; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin: 6px 0 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; font-weight: 700; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); }
.page-head.card { align-items: center; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Bell panel ---------- */
.bell-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 420px; max-height: 70vh; display: flex; flex-direction: column; z-index: 60; background: var(--glass-3); padding: 0; overflow: hidden; }
.bell-panel header { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.bell-panel header h3 { font-size: 15px; }
.bell-panel header button { margin-left: auto; }
.bell-panel .list { overflow-y: auto; padding: 6px; }
.bell-panel footer { padding: 10px; border-top: 1px solid var(--line); text-align: center; }

/* ---------- Grid & cards ---------- */
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding: 16px 18px 14px; text-align: center; position: relative; overflow: hidden; }
.kpi .label { font-weight: 500; color: var(--ink); font-size: 14px; }
.kpi .value { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0; }
.kpi .sub { color: var(--ink-2); font-size: 12.5px; }
.kpi .sub.up { color: var(--green); font-weight: 600; }
.kpi.danger .value { color: var(--red); }
.kpi::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent); pointer-events: none; }

.dash-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); margin-top: 16px; }
.card { padding: 18px 20px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h3 { font-size: 16.5px; font-weight: 600; }
.card-head small { color: var(--ink-2); }
.card-head .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Notification items ---------- */
.notif { display: flex; gap: 12px; padding: 12px 10px; border-radius: 12px; cursor: pointer; position: relative; }
.notif + .notif { border-top: 1px solid var(--line); }
.notif:hover { background: rgba(255, 255, 255, 0.45); }
.notif .ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.notif .ico.warning { background: rgba(226, 147, 12, 0.13); color: var(--amber); }
.notif .ico.critical { background: rgba(224, 56, 62, 0.12); color: var(--red); }
.notif .body { min-width: 0; flex: 1; }
.notif .title { font-weight: 600; font-size: 13.5px; }
.notif .title .st { font-weight: 700; color: var(--blue); }
.notif.read .title .st { color: var(--muted); }
.notif .msg { color: var(--ink-2); font-size: 13px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif.expanded .msg { -webkit-line-clamp: unset; }
.notif .when { color: var(--muted); font-size: 12px; margin-top: 3px; }
.notif .tag-new { align-self: flex-start; }
.notif.read { opacity: 0.82; }

/* ---------- Badges, chips, buttons ---------- */
.badge-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--blue-soft); color: var(--blue); }
.badge-pill.solid { background: var(--blue); color: #fff; }
.badge-pill.green { background: rgba(24, 168, 98, 0.13); color: var(--green); }
.badge-pill.amber { background: rgba(226, 147, 12, 0.15); color: #b26f00; }
.badge-pill.red { background: rgba(224, 56, 62, 0.13); color: var(--red); }
.badge-pill.red.solid { background: var(--red); color: #fff; }
.badge-pill.gray { background: rgba(13, 31, 60, 0.07); color: var(--ink-2); }
.badge-pill.violet { background: rgba(109, 92, 232, 0.13); color: var(--violet); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-2); cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; transition: transform 0.1s, background 0.15s, box-shadow 0.15s; }
.btn:hover { background: var(--glass-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #3b8bff, #1a63d8); color: #fff; border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 6px 18px rgba(26, 99, 216, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--red); }
.btn.danger.solid { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.45); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 10px; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }
.btn .spin, .spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); cursor: pointer; font-weight: 500; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.chip:hover { background: var(--glass-2); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .n { font-size: 11px; background: var(--red); color: #fff; border-radius: 9px; padding: 0 6px; font-weight: 700; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 12.5px; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(13, 31, 60, 0.12);
  background: rgba(255, 255, 255, 0.72);
  outline: none;
  transition: border 0.15s, box-shadow 0.15s;
}
textarea.input { resize: vertical; min-height: 80px; }
.input:focus { border-color: var(--blue-2); box-shadow: 0 0 0 4px rgba(59, 139, 255, 0.15); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--blue); }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 24px; background: rgba(13, 31, 60, 0.2); cursor: pointer; transition: background 0.2s; }
.switch span::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.switch input:checked + span { background: var(--blue); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 4px rgba(59, 139, 255, 0.25); }
.error-box { background: rgba(224, 56, 62, 0.1); color: var(--red); border: 1px solid rgba(224, 56, 62, 0.25); padding: 10px 12px; border-radius: 10px; font-weight: 500; }
.info-box { background: rgba(26, 99, 216, 0.08); color: var(--ink-2); border: 1px solid rgba(26, 99, 216, 0.18); padding: 10px 12px; border-radius: 10px; font-size: 13px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr { transition: background 0.12s; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.45); }
.tbl tr:last-child td { border-bottom: 0; }
.mono { font-family: 'Cascadia Mono', 'Consolas', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.empty { text-align: center; padding: 34px 10px; color: var(--muted); }
.empty .icon { width: 34px; height: 34px; margin-bottom: 8px; opacity: 0.6; }

/* ---------- Chart & last sync ---------- */
.chart { width: 100%; height: 150px; display: block; }
.chart .grid-line { stroke: rgba(13, 31, 60, 0.08); stroke-width: 1; }
.chart .area { fill: url(#chartGrad); }
.chart .line { fill: none; stroke: var(--blue-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .line2 { fill: none; stroke: rgba(13, 31, 60, 0.35); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .pt { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.chart text { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--blue-2); vertical-align: middle; margin-right: 5px; }
.legend i.d { background: none; border-top: 2px dashed rgba(13, 31, 60, 0.35); height: 0; }
.rastreo { display: flex; gap: 16px; align-items: center; }
.rastreo .cloud { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.6); color: var(--ink-2); flex: none; }

/* ---------- Términos ---------- */
.term { display: flex; gap: 12px; align-items: center; padding: 10px 6px; }
.term + .term { border-top: 1px solid var(--line); }
.countdown { width: 54px; height: 54px; flex: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(24, 168, 98, 0.12); color: var(--green); }
.countdown b { font-size: 20px; line-height: 1; }
.countdown small { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.countdown.amber { background: rgba(226, 147, 12, 0.14); color: #b26f00; }
.countdown.red { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(224, 56, 62, 0.35); animation: glow 1.6s ease-in-out infinite; }
.countdown.gray { background: rgba(13, 31, 60, 0.07); color: var(--muted); }
@keyframes glow { 50% { box-shadow: 0 6px 26px rgba(224, 56, 62, 0.6); } }
tr.rojo td { background: rgba(224, 56, 62, 0.06); }

/* ---------- Agenda ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.cal .day { min-height: 92px; border-radius: 12px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); padding: 6px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; overflow: hidden; }
.cal .day:hover { background: rgba(255, 255, 255, 0.6); }
.cal .day.other { opacity: 0.45; }
.cal .day.inhabil { background: rgba(13, 31, 60, 0.05); }
.cal .day.today { border-color: var(--blue-2); box-shadow: 0 0 0 2px rgba(59, 139, 255, 0.35); }
.cal .day .n { font-weight: 700; display: flex; justify-content: space-between; }
.cal .day .n small { font-weight: 500; color: var(--muted); font-size: 10px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 75%; }
.cal .ev { background: var(--blue); color: #fff; border-radius: 6px; padding: 2px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .ev.term { background: var(--amber); }
.cal .ev.term.red { background: var(--red); }
.aud-item { display: flex; gap: 14px; padding: 12px 6px; align-items: flex-start; }
.aud-item + .aud-item { border-top: 1px solid var(--line); }
.aud-date { width: 56px; flex: none; text-align: center; border-radius: 14px; background: rgba(255, 255, 255, 0.65); padding: 6px 0; box-shadow: var(--shadow-sm); }
.aud-date b { display: block; font-size: 20px; line-height: 1.1; }
.aud-date small { font-size: 10.5px; text-transform: uppercase; font-weight: 700; color: var(--blue); }

/* ---------- Detalle proceso ---------- */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.35); border: 1px solid var(--glass-border); width: fit-content; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(6, 30, 80, 0.1); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); font-weight: 500; }
.kv dd { margin: 0; font-weight: 500; }
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: rgba(26, 99, 216, 0.18); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 16px; }
.tl-item::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.tl-item.key::before { background: var(--blue); }
.tl-item .d { font-size: 12px; color: var(--muted); font-weight: 600; }
.tl-item .a { font-weight: 600; }
.tl-item .t { color: var(--ink-2); font-size: 13px; }

/* ---------- Correo ---------- */
.mail-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.mail-grupo { display: flex; flex-direction: column; gap: 5px; }
.mail-grupo .check { align-items: flex-start; line-height: 1.3; }
.mail-grupo .check input { margin-top: 1px; flex: none; }

/* ---------- Alertas config ---------- */
.alert-group { padding: 18px 20px; }
.alert-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; }
.alert-row + .alert-row { border-top: 1px solid var(--line); }
.alert-row .txt { flex: 1; min-width: 0; }
.alert-row .txt b { display: block; font-weight: 600; }
.alert-row .txt small { color: var(--muted); }

/* ---------- Modal & toast ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(5, 20, 50, 0.35); backdrop-filter: blur(4px); z-index: 100; display: grid; place-items: center; padding: 20px; animation: fade 0.15s; }
.modal { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: rgba(255, 255, 255, 0.86); padding: 22px 24px; border-radius: 22px; animation: pop 0.18s; }
.modal.wide { width: min(860px, 100%); }
.modal-head { display: flex; align-items: center; margin-bottom: 16px; }
.modal-head h3 { font-size: 19px; }
.modal-head .icon-btn { margin-left: auto; width: 34px; height: 34px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0.97) translateY(6px); opacity: 0; } }
.toasts { position: fixed; right: 26px; bottom: 26px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { width: 360px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, 0.9); animation: slide 0.25s; cursor: pointer; }
.toast.critical { border-left: 4px solid var(--red); }
.toast.warning { border-left: 4px solid var(--amber); }
.toast.ok { border-left: 4px solid var(--green); }
.toast.err { border-left: 4px solid var(--red); }
.toast b { display: block; font-size: 13.5px; }
.toast small { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }

/* ---------- Login ---------- */
/* ---------- Login (réplica de la referencia 1280x714, escalada al tamaño de la ventana) ---------- */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url('../fonts/roboto-condensed-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
.login-scene { position: fixed; inset: 0; overflow: hidden; background: #0a6cc4; font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; color: #08162f; }
.login-scene::before { content: ''; position: absolute; inset: -60px; background: url('../assets/login-bg.jpg') center / cover no-repeat; filter: blur(30px) saturate(115%); }
.login-stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 714px; transform-origin: center center; --mx: 0; --my: 0; }
.login-card {
  position: absolute; left: 435px; top: 74px; width: 410px; min-height: 535px; padding: 33px 32px 20px; border-radius: 28px; text-align: center;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.6) 0%, rgba(245, 250, 255, 0.52) 50%, rgba(232, 240, 250, 0.46) 100%);
  backdrop-filter: blur(30px) saturate(95%) brightness(1.04); -webkit-backdrop-filter: blur(30px) saturate(95%) brightness(1.04);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 50px rgba(3, 35, 95, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 1;
}
.login-stage.wide { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.login-stage.tall .login-card { top: 50%; transform: translateY(-50%); }
.login-stage.tall .lg-copy { display: none; }
.login-card .logo { display: inline-block; text-align: left; font-family: 'Montserrat', 'Segoe UI', sans-serif; color: #08162f; margin: 0 0 0 6px; }
.login-card .logo .l1 { font-size: 39.5px; font-weight: 400; letter-spacing: -0.012em; line-height: 38px; color: #08162f; }
.login-card .logo .l2 { font-size: 39.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 38px; color: #08162f; }
.login-card .logo .l2 i { color: #1580f5; font-style: normal; }
.login-card .tag { font-family: 'Montserrat', 'Segoe UI', sans-serif; text-align: center; font-size: 13.4px; font-weight: 500; letter-spacing: 0; line-height: 16px; color: #232a35; margin: 3px 0 0 -4px; }
.login-card h1 { font-family: inherit; font-size: 31px; font-weight: 700; letter-spacing: -0.042em; line-height: 36px; margin-top: 18px; color: #08162f; }
.login-card .lead { margin: 0 0 19px; font-size: 18px; line-height: 22px; letter-spacing: -0.04em; color: #08162f; white-space: nowrap; }
.login-card form { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.lg-field { position: relative; }
.lg-field > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #1080fd; width: 24px; height: 24px; pointer-events: none; }
.lg-field input {
  width: 100%; height: 49px; padding: 0 46px 0 48px; border-radius: 12px; font-family: inherit; font-size: 20.5px; font-weight: 350; letter-spacing: -0.035em; color: #08162f;
  border: 1.6px solid rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(240, 248, 252, 0.42));
  outline: none; box-shadow: 0 4px 14px rgba(10, 50, 100, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: border 0.15s, box-shadow 0.15s, background 0.15s;
}
.lg-field input::placeholder { color: #66777f; }
.lg-field input:focus { background: rgba(255, 255, 255, 0.7); border-color: #6db5ff; box-shadow: 0 0 0 4px rgba(20, 128, 251, 0.18); }
.lg-field .eye { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; color: #606a78; padding: 5px; border-radius: 8px; display: grid; }
.lg-field .eye .icon { width: 24px; height: 24px; stroke-width: 2.2; }
.lg-field .eye:hover { background: rgba(255, 255, 255, 0.45); }
.lg-link { color: #0f4f8c; font-family: inherit; font-size: 18.5px; letter-spacing: -0.047em; font-weight: 340; background: none; border: 0; padding: 0; cursor: pointer; }
.lg-link:hover { text-decoration: underline; }
.lg-forgot { align-self: flex-end; margin-top: -1px; line-height: 22px; }
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.lg-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 20px; font-weight: 340; letter-spacing: -0.053em; color: #08162f; user-select: none; }
.lg-check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid #848689; border-radius: 4px; background: rgba(255, 255, 255, 0.55); display: grid; place-items: center; cursor: pointer; }
.lg-check input::after { content: ''; width: 9px; height: 5px; border-left: 2.2px solid #6f7377; border-bottom: 2.2px solid #6f7377; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.lg-check input:checked::after { opacity: 1; }
.lg-check input:focus-visible { box-shadow: 0 0 0 3px rgba(20, 128, 251, 0.3); }
.lg-check.small { font-size: 15px; align-items: flex-start; }
.lg-check.small input { margin-top: 2px; flex: none; }
.btn-pill { height: 47px; width: 164px; border-radius: 999px; border: 0; cursor: pointer; font-family: inherit; font-size: 21px; letter-spacing: -0.033em; font-weight: 340; color: #fff; background: #1482fb; box-shadow: 0 7px 18px rgba(20, 110, 230, 0.4); transition: filter 0.15s, transform 0.1s; }
.btn-pill:hover { filter: brightness(1.07); }
.btn-pill:active { transform: translateY(1px); }
.btn-pill[disabled] { opacity: 0.6; pointer-events: none; }
.btn-pill.full { width: 100%; }
.lg-foot { margin-top: 19px; font-size: 19px; font-weight: 340; line-height: 24px; letter-spacing: -0.053em; color: #08162f; text-align: center; }
.lg-foot .lg-link { font-size: 19px; letter-spacing: -0.053em; }
.lg-msg { font-size: 15px; text-align: left; font-family: inherit; }
.lg-ok { background: rgba(24, 168, 98, 0.14); color: #0b6e3e; border: 1px solid rgba(24, 168, 98, 0.3); padding: 10px 12px; border-radius: 10px; }
.lg-info { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.8); padding: 12px 14px; border-radius: 12px; font-size: 16px; line-height: 1.4; text-align: left; color: #0d2246; }
.lg-info code { font-size: 12.5px; word-break: break-all; }
.lg-copy { position: absolute; left: 0; right: 0; top: 638px; padding-left: 0; text-align: center; font-size: 15.2px; line-height: 19px; letter-spacing: -0.05em; color: #0b2448; z-index: 1; }
.lg-copy button { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 340; letter-spacing: -0.034em; padding: 0; margin-left: 2px; }
/* Pantallas pequeñas: tarjeta normal centrada, sin escalar */
.login-scene.compact { overflow-y: auto; }
.login-scene.compact .login-stage { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 100%; transform: none !important; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 14px; }
.login-scene.compact .login-card { position: relative; left: auto; top: auto; transform: none; width: min(410px, 100%); min-height: 0; }
.login-scene.compact .login-card { padding: 28px 20px 18px; }
.login-scene.compact .lead { white-space: normal; font-size: 16.5px; }
.login-scene.compact .lg-check { font-size: 17px; white-space: nowrap; }
.login-scene.compact .lg-check.small { font-size: 14.5px; white-space: normal; }
.login-scene.compact .btn-pill:not(.full) { width: 132px; font-size: 19px; }
.login-scene.compact .lg-copy { position: relative; top: auto; margin-top: 20px; display: block; font-size: 13px; }
.privacy h4 { margin: 14px 0 4px; font-size: 14px; }
.privacy p, .privacy li { color: var(--ink-2); font-size: 13.5px; }
.pw-wrap { position: relative; }
.pw-wrap button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; color: var(--muted); padding: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .dash-main { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-pill .txt { display: none; }
}
@media (max-width: 860px) {
  .app { inset: 0; border-radius: 0; grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 90; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform 0.2s; background: rgba(255, 255, 255, 0.9); }
  .app.menu-open .sidebar { transform: none; }
  .menu-btn { display: grid !important; }
  .form-grid { grid-template-columns: 1fr; }
  .bell-panel { width: calc(100vw - 30px); right: -60px; }
  .topbar, .content { padding-left: 14px; padding-right: 14px; }
}
.menu-btn { display: none !important; }

/* =========================================================
   MODO OSCURO — se activa con <html data-theme="dark">
   ========================================================= */
html[data-theme='dark'] {
  color-scheme: dark;
  --ink: #e7eefb;
  --ink-2: #aebfdc;
  --muted: #8193b3;
  --line: rgba(150, 185, 245, 0.12);
  --blue: #4d9bff;
  --blue-2: #72b3ff;
  --blue-soft: rgba(77, 155, 255, 0.16);
  --green: #3fd394;
  --amber: #f5b13d;
  --red: #ff5f66;
  --violet: #a294ff;
  --glass: rgba(14, 26, 52, 0.55);
  --glass-2: rgba(20, 36, 70, 0.66);
  --glass-3: rgba(22, 38, 74, 0.94);
  --glass-border: rgba(140, 178, 240, 0.18);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --inhabil: rgba(255, 255, 255, 0.12);
}
html[data-theme='dark'] body { background-color: #34507f; background-blend-mode: multiply; }
html[data-theme='dark'] ::selection { background: rgba(114, 179, 255, 0.35); }
html[data-theme='dark'] ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.16); }

/* Contenedor y menú lateral */
html[data-theme='dark'] .app { background: rgba(7, 15, 33, 0.58); border-color: rgba(140, 178, 240, 0.16); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html[data-theme='dark'] .sidebar { background: linear-gradient(180deg, rgba(14, 26, 52, 0.75), rgba(10, 20, 42, 0.5)); border-right-color: rgba(140, 178, 240, 0.12); }
html[data-theme='dark'] .nav a .icon { color: var(--blue-2); }
html[data-theme='dark'] .nav a:hover, html[data-theme='dark'] .side-bottom a:hover, html[data-theme='dark'] .side-bottom button:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme='dark'] .nav a.active { background: linear-gradient(90deg, rgba(77, 155, 255, 0.3), rgba(77, 155, 255, 0.06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.25); }
html[data-theme='dark'] .icon-btn .badge { border-color: #13213f; }
html[data-theme='dark'] .search input { color: var(--ink); }
html[data-theme='dark'] .search input::placeholder { color: var(--muted); }

/* Tarjetas, listas y tablas */
html[data-theme='dark'] .kpi::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent); }
html[data-theme='dark'] .notif:hover, html[data-theme='dark'] .tbl tbody tr:hover, html[data-theme='dark'] .btn.ghost:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme='dark'] .notif .ico.warning { background: rgba(245, 177, 61, 0.15); }
html[data-theme='dark'] .notif .ico.critical { background: rgba(255, 95, 102, 0.15); }
html[data-theme='dark'] .badge-pill.amber { background: rgba(245, 177, 61, 0.16); color: var(--amber); }
html[data-theme='dark'] .badge-pill.green { background: rgba(63, 211, 148, 0.14); }
html[data-theme='dark'] .badge-pill.red { background: rgba(255, 95, 102, 0.15); }
html[data-theme='dark'] .badge-pill.red.solid { background: var(--red); color: #fff; }
html[data-theme='dark'] .badge-pill.gray { background: rgba(255, 255, 255, 0.08); }
html[data-theme='dark'] .badge-pill.violet { background: rgba(162, 148, 255, 0.15); }
html[data-theme='dark'] .chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
html[data-theme='dark'] .btn.primary { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 6px 18px rgba(26, 99, 216, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

/* Formularios */
html[data-theme='dark'] .input, html[data-theme='dark'] select.input, html[data-theme='dark'] textarea.input { background: rgba(6, 14, 32, 0.55); border-color: rgba(140, 178, 240, 0.2); color: var(--ink); }
html[data-theme='dark'] .input::placeholder { color: var(--muted); }
html[data-theme='dark'] select.input option { background: #14244a; color: var(--ink); }
html[data-theme='dark'] .switch span { background: rgba(255, 255, 255, 0.18); }
html[data-theme='dark'] .switch input:checked + span { background: var(--blue); }
html[data-theme='dark'] .error-box { background: rgba(255, 95, 102, 0.12); border-color: rgba(255, 95, 102, 0.3); }
html[data-theme='dark'] .info-box { background: rgba(77, 155, 255, 0.1); border-color: rgba(77, 155, 255, 0.24); }

/* Gráfico, términos, agenda, detalle */
html[data-theme='dark'] .chart .grid-line { stroke: rgba(255, 255, 255, 0.08); }
html[data-theme='dark'] .chart .line2 { stroke: rgba(200, 215, 240, 0.4); }
html[data-theme='dark'] .chart .pt { fill: #13213f; stroke: var(--blue-2); }
html[data-theme='dark'] .legend i.d { border-top-color: rgba(200, 215, 240, 0.4); }
html[data-theme='dark'] .rastreo .cloud { background: rgba(255, 255, 255, 0.07); }
html[data-theme='dark'] .countdown { background: rgba(63, 211, 148, 0.14); }
html[data-theme='dark'] .countdown.amber { background: rgba(245, 177, 61, 0.16); color: var(--amber); }
html[data-theme='dark'] .countdown.gray { background: rgba(255, 255, 255, 0.07); }
html[data-theme='dark'] .countdown.red { background: var(--red); color: #fff; }
html[data-theme='dark'] tr.rojo td { background: rgba(255, 95, 102, 0.09); }
html[data-theme='dark'] .cal .day { background: rgba(255, 255, 255, 0.04); border-color: rgba(140, 178, 240, 0.12); }
html[data-theme='dark'] .cal .day:hover { background: rgba(255, 255, 255, 0.09); }
html[data-theme='dark'] .cal .day.inhabil { background: rgba(0, 0, 0, 0.28); }
html[data-theme='dark'] .aud-date { background: rgba(255, 255, 255, 0.07); }
html[data-theme='dark'] .aud-date small { color: var(--blue-2); }
html[data-theme='dark'] .tabs { background: rgba(255, 255, 255, 0.05); }
html[data-theme='dark'] .tabs button.active { background: rgba(77, 155, 255, 0.22); color: var(--ink); box-shadow: none; }
html[data-theme='dark'] .timeline::before { background: rgba(114, 179, 255, 0.22); }
html[data-theme='dark'] .tl-item::before { background: #13213f; }
html[data-theme='dark'] .tl-item.key::before { background: var(--blue); }

/* Modales y avisos */
html[data-theme='dark'] .modal-back { background: rgba(0, 5, 16, 0.6); }
html[data-theme='dark'] .modal { background: rgba(15, 27, 54, 0.96); }
html[data-theme='dark'] .toast { background: rgba(15, 27, 54, 0.96); }

@media (max-width: 860px) {
  html[data-theme='dark'] .sidebar { background: rgba(12, 22, 46, 0.97); }
}

/* Login oscuro: mismo diseño con la escena atenuada y vidrio oscuro */
html[data-theme='dark'] .login-scene { background: #061533; color: #e7eefb; }
html[data-theme='dark'] .login-scene::before { filter: blur(30px) saturate(110%) brightness(0.42); }
html[data-theme='dark'] .lg-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(2, 10, 30, 0.62), rgba(3, 14, 40, 0.5)); }
html[data-theme='dark'] .login-scene.compact { background: #2a3a5c url('../assets/login-bg.jpg') center / cover no-repeat; background-blend-mode: multiply; }
html[data-theme='dark'] .login-card {
  background: linear-gradient(165deg, rgba(24, 40, 76, 0.66) 0%, rgba(14, 26, 54, 0.6) 55%, rgba(10, 20, 44, 0.58) 100%);
  backdrop-filter: blur(30px) saturate(120%); -webkit-backdrop-filter: blur(30px) saturate(120%);
  border-color: rgba(150, 190, 255, 0.28);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html[data-theme='dark'] .login-card .logo, html[data-theme='dark'] .login-card .logo .l1, html[data-theme='dark'] .login-card .logo .l2 { color: #eef4ff; }
html[data-theme='dark'] .login-card .logo .l2 i { color: #3d95ff; }
html[data-theme='dark'] .login-card .tag { color: #b5c4dd; }
html[data-theme='dark'] .login-card h1, html[data-theme='dark'] .login-card .lead, html[data-theme='dark'] .lg-check, html[data-theme='dark'] .lg-foot { color: #e7eefb; }
html[data-theme='dark'] .lg-field > .icon { color: #3d95ff; }
html[data-theme='dark'] .lg-field input {
  color: #eef4ff; border-color: rgba(150, 190, 255, 0.26);
  background: linear-gradient(180deg, rgba(8, 18, 42, 0.5), rgba(12, 24, 52, 0.56));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-theme='dark'] .lg-field input::placeholder { color: #8a9cbb; }
html[data-theme='dark'] .lg-field input:focus { background: rgba(10, 22, 50, 0.75); border-color: #4d9bff; }
html[data-theme='dark'] .lg-field .eye { color: #9cadc8; }
html[data-theme='dark'] .lg-field .eye:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme='dark'] .lg-link { color: #7ab6ff; }
html[data-theme='dark'] .lg-check input { border-color: #8796ad; background: rgba(8, 18, 42, 0.5); }
html[data-theme='dark'] .lg-check input::after { border-color: #c9d4e4; }
html[data-theme='dark'] .lg-ok { background: rgba(63, 211, 148, 0.14); color: #7ff0bd; border-color: rgba(63, 211, 148, 0.3); }
html[data-theme='dark'] .lg-info { background: rgba(255, 255, 255, 0.06); border-color: rgba(150, 190, 255, 0.2); color: #d6e1f3; }
html[data-theme='dark'] .lg-copy { color: #c3d1e8; }

/* Botón de tema flotante en el login */
.theme-float { position: fixed; top: 18px; right: 18px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #08162f; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(3, 30, 80, 0.25); }
.theme-float:hover { background: rgba(255, 255, 255, 0.55); }
html[data-theme='dark'] .theme-float { background: rgba(14, 26, 52, 0.6); border-color: rgba(150, 190, 255, 0.3); color: #e7eefb; }
html[data-theme='dark'] .theme-float:hover { background: rgba(24, 40, 76, 0.8); }

/* Selector de apariencia en Configuración */
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-pick button { border: 1px solid var(--glass-border); background: var(--glass); border-radius: 14px; padding: 10px; cursor: pointer; color: var(--ink); font-weight: 600; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.theme-pick button.active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.theme-pick .mini { width: 100%; height: 54px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(135deg, #e9f5ff, #9fd2f5); position: relative; overflow: hidden; }
.theme-pick .mini::after { content: ''; position: absolute; left: 10%; top: 22%; width: 45%; height: 56%; border-radius: 6px; background: rgba(255, 255, 255, 0.75); }
.theme-pick .mini.dark { background: linear-gradient(135deg, #0d1a36, #1b3462); }
.theme-pick .mini.dark::after { background: rgba(40, 62, 110, 0.85); }
.theme-pick .mini.auto { background: linear-gradient(90deg, #cfe9ff 0 50%, #13254a 50% 100%); }

/* Transición suave al cambiar de tema */
html.tema-anim, html.tema-anim *, html.tema-anim *::before, html.tema-anim *::after { transition: background-color 0.3s, color 0.3s, border-color 0.3s, fill 0.3s, stroke 0.3s !important; }

/* =========================================================
   ANIMACIONES — entrada del login, microinteracciones,
   transición al ingresar y cambios de pantalla
   ========================================================= */
@property --lg-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes lgFade { from { opacity: 0; } }
@keyframes lgFadeUp { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lgRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lgFadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes lgSlideIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes lgCardIn { 0% { opacity: 0; transform: translateY(38px) scale(0.95); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes lgBgIn { from { opacity: 0; transform: scale(1.1); filter: blur(16px) saturate(150%); } }
@keyframes lgReveal { from { opacity: 0; transform: translateY(22px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(-20% -10% -20% -10%); } }
@keyframes lgTrack { from { opacity: 0; letter-spacing: 0.42em; filter: blur(4px); } to { opacity: 1; letter-spacing: 0; filter: none; } }
@keyframes lgDot { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.7); } 75% { transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lgDotGlow { 0%, 100% { text-shadow: 0 0 0 rgba(21, 128, 245, 0); } 50% { text-shadow: 0 0 12px rgba(21, 128, 245, 0.8), 0 0 2px rgba(21, 128, 245, 0.9); } }
@keyframes lgShine { 0% { background-position: 100% 0; } 14%, 100% { background-position: 0% 0; } }
@keyframes lgSpin { to { --lg-ang: 360deg; } }
@keyframes lgSheen { 0% { background-position: 130% 0; } 16%, 100% { background-position: -30% 0; } }
@keyframes lgFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(34px, -22px) scale(1.18); } 100% { transform: translate(-26px, 28px) scale(0.92); } }
@keyframes lgShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@keyframes lgCheck { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes lgCardOut { to { opacity: 0; transform: translateY(-16px) scale(1.045); filter: blur(10px); background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes lgSpinOnce { from { transform: rotate(-140deg) scale(0.5); opacity: 0; } }
@keyframes lgPulseRing { 0% { box-shadow: 0 0 0 0 rgba(25, 180, 107, 0.55); } 100% { box-shadow: 0 0 0 16px rgba(25, 180, 107, 0); } }

/* ---------- Fondo animado y luces ---------- */
.lg-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('../assets/login-bg.jpg') 0 0 / 100% 100% no-repeat;
  transform: translate(calc(var(--mx) * -5px), calc(var(--my) * -4px)) scale(1.015);
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.2s ease;
  animation: lgBgIn 2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.lg-orbs {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transform: translate(calc(var(--mx) * 18px), calc(var(--my) * 14px));
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
  animation: lgFade 2.4s 0.4s backwards;
}
.lg-orbs i { position: absolute; border-radius: 50%; filter: blur(28px); mix-blend-mode: screen; opacity: 0.55; animation: lgFloat 17s ease-in-out infinite alternate; }
.lg-orbs i:nth-child(1) { left: 300px; top: 110px; width: 170px; height: 170px; background: radial-gradient(circle, rgba(130, 225, 255, 0.95), transparent 70%); }
.lg-orbs i:nth-child(2) { left: 820px; top: 420px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(70, 150, 255, 0.85), transparent 70%); animation-duration: 21s; animation-delay: -6s; }
.lg-orbs i:nth-child(3) { left: 780px; top: 50px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 70%); animation-duration: 24s; animation-delay: -11s; }
.lg-orbs i:nth-child(4) { left: 360px; top: 470px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(170, 235, 255, 0.85), transparent 70%); animation-duration: 19s; animation-delay: -3s; }
.lg-orbs i:nth-child(5) { left: 1040px; top: 180px; width: 110px; height: 110px; background: radial-gradient(circle, rgba(120, 200, 255, 0.8), transparent 70%); animation-duration: 26s; animation-delay: -15s; }
html[data-theme='dark'] .lg-orbs i { opacity: 0.32; }
.login-scene.compact .lg-bg, .login-scene.compact .lg-orbs { display: none; }

/* ---------- Tarjeta: entrada, borde de luz y brillo ---------- */
.login-scene.intro .login-card { animation: lgCardIn 1.15s 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.login-card::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0.85;
  background: conic-gradient(from var(--lg-ang), transparent 0 60%, rgba(255, 255, 255, 0.95) 71%, rgba(110, 190, 255, 0.95) 76%, transparent 87% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lgSpin 8s linear infinite, lgFade 1.2s 1.2s backwards;
}
.login-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.34) 48%, transparent 60%) 130% 0 / 300% 100% no-repeat;
  animation: lgSheen 11s 1.5s ease-in-out infinite;
}
html[data-theme='dark'] .login-card::after { background-image: linear-gradient(115deg, transparent 36%, rgba(160, 205, 255, 0.16) 48%, transparent 60%); }
html[data-theme='dark'] .login-card::before { opacity: 0.6; }

/* Contenido escalonado */
.login-card.anim-in .tag,
.login-card.anim-in > h1, .login-card.anim-in > .lead, .login-card.anim-in > form > *, .login-card.anim-in > div:not(.logo):not(.tag) {
  animation: lgFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--base, 0s) + 0.18s + var(--i, 0) * 70ms);
}
.login-card.anim-in .tag { animation-name: lgTrack; animation-duration: 1.1s; animation-delay: calc(var(--base, 0s) + 0.35s); }
.login-card.anim-in .logo .l1 { animation: lgReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: var(--base, 0s); }
.login-card.anim-in .logo .l2 { animation: lgReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards, lgShine 13s ease-in-out infinite; animation-delay: calc(var(--base, 0s) + 0.12s), calc(var(--base, 0s) + 1.3s); }

/* Logo: brillo que recorre ACTORUM y punto con pulso de luz */
.login-card .logo { --lg-ink: #08162f; }
html[data-theme='dark'] .login-card .logo { --lg-ink: #eef4ff; }
.login-card .logo .l2 {
  background: linear-gradient(100deg, var(--lg-ink) 0 42%, #6cbcff 50%, var(--lg-ink) 58% 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.login-card .logo .l2 i { display: inline-block; -webkit-text-fill-color: #1580f5; transform-origin: 50% 80%; }
html[data-theme='dark'] .login-card .logo .l2 i { -webkit-text-fill-color: #3d95ff; }
.login-card.anim-in .logo .l2 i { animation: lgDot 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, lgDotGlow 3.2s ease-in-out infinite; animation-delay: calc(var(--base, 0s) + 0.85s), calc(var(--base, 0s) + 1.6s); }

/* ---------- Microinteracciones ---------- */
.lg-field > .icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease; }
.lg-field:focus-within > .icon { transform: translateY(-50%) scale(1.14); filter: drop-shadow(0 0 6px rgba(16, 128, 253, 0.55)); }
.lg-field input { transition: border-color 0.25s, box-shadow 0.35s, background 0.25s; }
.lg-field .eye { transition: background 0.2s, transform 0.2s; }
.lg-field .eye:active { transform: translateY(-50%) scale(0.88); }
.lg-check input { transition: border-color 0.2s, background 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lg-check input:active { transform: scale(0.85); }
.lg-check input::after { transition: opacity 0.2s; }
.lg-link { position: relative; }
.lg-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); }
.lg-link:hover { text-decoration: none; }
.lg-link:hover::after { transform: scaleX(1); transform-origin: left; }
.lg-copy button { transition: opacity 0.2s; }
.lg-copy button:hover { opacity: 0.85; }

/* Botón principal: elevación, destello, carga y éxito */
.btn-pill { position: relative; overflow: hidden; transition: filter 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s, width 0.5s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.4s; }
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 110, 230, 0.5); filter: brightness(1.05); }
.btn-pill:active { transform: translateY(0) scale(0.97); }
.btn-pill::before { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); transition: left 0.75s ease; pointer-events: none; }
.btn-pill:hover::before { left: 130%; }
.btn-pill.loading { color: transparent !important; pointer-events: none; }
.btn-pill.loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.7s linear infinite; }
.btn-pill.success { width: 47px !important; padding: 0; background: #19b46b; color: #fff; box-shadow: 0 8px 22px rgba(25, 180, 107, 0.45); pointer-events: none; display: inline-grid; place-items: center; animation: lgPulseRing 0.9s 0.35s ease-out; }
.btn-pill.success.full { width: 47px !important; justify-self: center; align-self: center; }
.lg-ok-svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: lgCheck 0.45s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.lg-row .btn-pill.success { margin-left: auto; }

/* Errores: el formulario se sacude y el mensaje aparece suave */
#f.shake { animation: lgShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.lg-pop { animation: lgFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1); }

/* Pie y botón de tema */
.login-scene.intro .lg-copy { animation: lgFadeUp 0.9s 1.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.login-scene.intro .theme-float { animation: lgFade 0.9s 1.3s backwards; }
.theme-float { transition: background 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.theme-float:hover { transform: rotate(-12deg) scale(1.06); }
.theme-float.spin svg, .icon-btn.spin svg { animation: lgSpinOnce 0.55s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Salida del login hacia la aplicación ---------- */
.login-scene.leaving .login-card { animation: lgCardOut 0.6s cubic-bezier(0.7, 0, 0.84, 0) forwards; }
.login-scene.leaving .login-card::before, .login-scene.leaving .login-card::after { opacity: 0; transition: opacity 0.3s; animation: none; }
.login-scene.leaving .lg-bg { transform: scale(1.12); filter: brightness(1.12) blur(3px); }
.login-scene.leaving .lg-orbs { opacity: 0; transform: scale(1.3); }
.login-scene.leaving .lg-copy, .login-scene.leaving .theme-float { opacity: 0; transition: opacity 0.35s; }
.login-scene.overlay { z-index: 500; }
.login-scene.gone { opacity: 0; transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }

/* ---------- Entrada de la aplicación ---------- */
@keyframes appIn { from { opacity: 0; transform: scale(0.965) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes appOut { to { opacity: 0; transform: scale(0.975); filter: blur(6px); } }
.app.entrando { animation: appIn 1s 0.1s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.app.entrando .sidebar .logo { animation: lgFadeUp 0.8s 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.app.entrando .nav > * { animation: lgSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.app.entrando .nav > :nth-child(1) { animation-delay: 0.42s; }
.app.entrando .nav > :nth-child(2) { animation-delay: 0.47s; }
.app.entrando .nav > :nth-child(3) { animation-delay: 0.52s; }
.app.entrando .nav > :nth-child(4) { animation-delay: 0.57s; }
.app.entrando .nav > :nth-child(5) { animation-delay: 0.62s; }
.app.entrando .nav > :nth-child(6) { animation-delay: 0.67s; }
.app.entrando .nav > :nth-child(7) { animation-delay: 0.72s; }
.app.entrando .nav > :nth-child(8) { animation-delay: 0.77s; }
.app.entrando .nav > :nth-child(9) { animation-delay: 0.82s; }
.app.entrando .side-bottom { animation: lgRise 0.7s 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.app.entrando .topbar > * { animation: lgFadeDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.app.entrando .topbar > :nth-child(2) { animation-delay: 0.4s; }
.app.entrando .topbar > :nth-child(3) { animation-delay: 0.5s; }
.app.entrando .content { --rb: 0.45s; }
.app.saliendo { animation: appOut 0.45s cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }

/* ---------- Cambio de pantalla dentro de la aplicación ---------- */
.content.route-in > * { animation: lgRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.content.route-in > :nth-child(1) { animation-delay: var(--rb, 0s); }
.content.route-in > :nth-child(2) { animation-delay: calc(var(--rb, 0s) + 0.07s); }
.content.route-in > :nth-child(3) { animation-delay: calc(var(--rb, 0s) + 0.14s); }
.content.route-in > :nth-child(4) { animation-delay: calc(var(--rb, 0s) + 0.21s); }
.content.route-in > :nth-child(n + 5) { animation-delay: calc(var(--rb, 0s) + 0.28s); }
.content.route-in .kpis > *, .content.route-in .dash-main > *, .content.route-in .stack > * { animation: lgRise 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.content.route-in .kpis > :nth-child(1) { animation-delay: calc(var(--rb, 0s) + 0.1s); }
.content.route-in .kpis > :nth-child(2) { animation-delay: calc(var(--rb, 0s) + 0.16s); }
.content.route-in .kpis > :nth-child(3) { animation-delay: calc(var(--rb, 0s) + 0.22s); }
.content.route-in .kpis > :nth-child(4) { animation-delay: calc(var(--rb, 0s) + 0.28s); }
.content.route-in .dash-main > :nth-child(1) { animation-delay: calc(var(--rb, 0s) + 0.3s); }
.content.route-in .dash-main > :nth-child(2) { animation-delay: calc(var(--rb, 0s) + 0.38s); }
.content.route-in .stack > :nth-child(2) { animation-delay: calc(var(--rb, 0s) + 0.46s); }
.chart .line { stroke-dasharray: var(--len, 0); }
.content.route-in .chart .line { animation: chartDraw 1.4s calc(var(--rb, 0s) + 0.5s) cubic-bezier(0.65, 0, 0.35, 1) backwards; }
.content.route-in .chart .area { animation: lgFade 1s calc(var(--rb, 0s) + 1.1s) backwards; }
.content.route-in .chart .pt { animation: lgFade 0.4s calc(var(--rb, 0s) + 1.4s) backwards; }
@keyframes chartDraw { from { stroke-dashoffset: var(--len, 0); } to { stroke-dashoffset: 0; } }
.kpi { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Accesibilidad: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}