/* ==========================================================================
   GnoSoft Timetable AI — estilos complementarios a Tailwind (tokens, modo claro
   predeterminado + modo oscuro opcional, glass, grilla del horario, chat,
   sliders, animaciones e impresión).
   ========================================================================== */
:root {
  color-scheme: light;
  --bg: #f1f5f9;
  --accent: #0891b2;
  --accent-2: #6366f1;
}

html.dark {
  color-scheme: dark;
  --bg: #05070f;
  --accent: #22d3ee;
  --accent-2: #a78bfa;
}

html, body { background: var(--bg); transition: background-color .2s ease, color .2s ease; }
body { min-height: 100vh; }

/* ---------- Fondo ---------- */
.bg-aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.orb { position: absolute; width: 460px; height: 460px; border-radius: 50%; filter: blur(110px); opacity: .10; animation: drift 24s ease-in-out infinite alternate; }
html.dark .orb { opacity: .22; }
@keyframes drift { to { transform: translate(90px, 70px) scale(1.18); } }
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
}
html.dark .bg-grid {
  background-image: linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.045) 1px, transparent 1px);
}

/* ---------- Superficies ---------- */
.glass {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.07);
}
html.dark .glass {
  background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(9,12,22,.94));
  border: 1px solid rgba(148,163,184,.12);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.65);
}
.text-gradient { background: linear-gradient(90deg, #0891b2, #6366f1 60%, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.dark .text-gradient { background: linear-gradient(90deg, #22d3ee, #a78bfa 60%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: conic-gradient(from 200deg, #22d3ee, #6366f1, #a78bfa, #22d3ee); box-shadow: 0 0 22px rgba(99,102,241,.35); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .75rem; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: #1e293b; background: #ffffff; border: 1px solid rgba(15,23,42,.14); box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: all .18s ease; white-space: nowrap; }
.btn:hover { background: #f8fafc; color: #0f172a; border-color: rgba(15,23,42,.24); transform: translateY(-1px); }
html.dark .btn { color: #cbd5e1; background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.14); box-shadow: none; }
html.dark .btn:hover { background: rgba(148,163,184,.15); color: #fff; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-primary { color: #04121a !important; font-weight: 700; background: linear-gradient(135deg, #22d3ee, #818cf8) !important; border-color: transparent !important; box-shadow: 0 6px 20px -6px rgba(34,211,238,.55) !important; }
.btn-primary:hover { color: #04121a !important; filter: brightness(1.06); }
.btn-danger { color: #be123c; background: rgba(244,63,94,.10); border-color: rgba(244,63,94,.3); }
html.dark .btn-danger { color: #fecdd3; background: rgba(244,63,94,.12); }

/* ---------- KPIs Compactos y Balanceados ---------- */
.kpi-card { border-radius: 16px; padding: 13px 15px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; transition: transform .25s ease, border-color .25s ease; }
.kpi-card:hover { transform: translateY(-2px); border-color: rgba(15,23,42,.20); }
html.dark .kpi-card:hover { border-color: rgba(148,163,184,.24); }
.kpi-card::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; background: var(--glow, rgba(34,211,238,.12)); filter: blur(42px); pointer-events: none; }
.kpi-label { font-size: 11.5px; color: #475569; font-weight: 600; }
html.dark .kpi-label { color: #94a3b8; font-weight: 500; }
.kpi-value { font-size: clamp(1.35rem, 1.9vw, 1.65rem); font-weight: 800; color: #0f172a; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
html.dark .kpi-value { color: #fff; }
.kpi-sub { font-size: 11px; color: #64748b; margin-top: 2px; line-height: 1.3; }
html.dark .kpi-sub { color: #94a3b8; }
.kpi-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.kpi-icon svg { width: 16px; height: 16px; }
.kpi-card.is-bad { border-color: rgba(244,63,94,.45); --glow: rgba(244,63,94,.25) !important; }
.kpi-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(15,23,42,.07); }
html.dark .kpi-footer { border-top-color: rgba(148,163,184,.10); }
.kpi-mini-pill { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 3px 7px; border-radius: 7px; font-size: 10.5px; background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.07); color: #475569; }
html.dark .kpi-mini-pill { background: rgba(148,163,184,.06); border-color: rgba(148,163,184,.10); color: #cbd5e1; }
.kpi-mini-pill b { color: #0f172a; font-weight: 700; }
html.dark .kpi-mini-pill b { color: #f8fafc; }
.kpi-mini-pill.is-ok b { color: #047857; }
html.dark .kpi-mini-pill.is-ok b { color: #34d399; }
.kpi-mini-pill.is-err { border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.08); }
.kpi-mini-pill.is-err b { color: #be123c; }
html.dark .kpi-mini-pill.is-err b { color: #fda4af; }
.kpi-chip { display: inline-flex; align-items: center; font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 600; padding: 1.5px 6px; border-radius: 6px; background: rgba(15,23,42,.05); color: #334155; border: 1px solid rgba(15,23,42,.08); }
html.dark .kpi-chip { background: rgba(148,163,184,.08); color: #cbd5e1; border-color: rgba(148,163,184,.12); }
.kpi-chip.is-ok { color: #047857; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25); }
html.dark .kpi-chip.is-ok { color: #6ee7b7; background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.25); }
.kpi-chip.is-warn { color: #b45309; background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.35); }
html.dark .kpi-chip.is-warn { color: #fcd34d; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.30); }
.delta { font-size: 10.5px; font-weight: 700; padding: 1.5px 5.5px; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-up { color: #047857; background: rgba(16,185,129,.15); }
html.dark .delta-up { color: #34d399; background: rgba(52,211,153,.12); }
.delta-down { color: #be123c; background: rgba(244,63,94,.15); }
html.dark .delta-down { color: #fb7185; background: rgba(251,113,133,.12); }
.delta-flat { color: #475569; background: rgba(148,163,184,.18); }
html.dark .delta-flat { color: #94a3b8; background: rgba(148,163,184,.10); }
.ring-track { stroke: rgba(15,23,42,.10); }
html.dark .ring-track { stroke: rgba(148,163,184,.15); }
.ring-bar { stroke: url(#ringGrad); transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(99,102,241,.4)); }
.minibar { height: 5px; border-radius: 999px; background: rgba(15,23,42,.10); overflow: hidden; }
html.dark .minibar { background: rgba(148,163,184,.14); }
.minibar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #06b6d4, #6366f1); transition: width .8s cubic-bezier(.2,.8,.2,1); }

/* ---------- Segmented / chips ---------- */
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(15,23,42,.06); border: 1px solid rgba(15,23,42,.09); }
html.dark .seg { background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.10); }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #475569; transition: all .2s ease; }
html.dark .seg-btn { color: #94a3b8; }
.seg-btn svg { width: 15px; height: 15px; }
.seg-btn:hover { color: #0f172a; }
html.dark .seg-btn:hover { color: #e2e8f0; }
.seg-btn.is-active { color: #0f172a; background: #ffffff; box-shadow: 0 2px 6px rgba(15,23,42,.08), inset 0 0 0 1px rgba(14,165,233,.35); }
html.dark .seg-btn.is-active { color: #fff; background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(129,140,248,.22)); box-shadow: inset 0 0 0 1px rgba(129,140,248,.35); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 12px; background: #ffffff; border: 1px solid rgba(15,23,42,.11); color: #334155; transition: all .18s ease; white-space: nowrap; position: relative; flex-shrink: 0; }
.chip:hover { background: #f8fafc; transform: translateY(-1px); }
.chip.is-active { background: linear-gradient(135deg, rgba(6,182,212,.14), rgba(99,102,241,.14)); border-color: rgba(8,145,178,.55); color: #0f172a; box-shadow: 0 0 0 3px rgba(6,182,212,.12); }
html.dark .chip { background: rgba(148,163,184,.06); border: 1px solid rgba(148,163,184,.10); color: #cbd5e1; }
html.dark .chip:hover { background: rgba(148,163,184,.12); }
html.dark .chip.is-active { background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(129,140,248,.16)); border-color: rgba(34,211,238,.45); color: #fff; box-shadow: 0 0 0 3px rgba(34,211,238,.08); }
.chip-avatar { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, #6366f1, #06b6d4); color: #fff; }
.chip-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 8px #f43f5e; }
.opt { display: block; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(15,23,42,.15); color: #334155; font-size: 13px; transition: all .15s; background: #fff; }
html.dark .opt { border-color: rgba(148,163,184,.15); color: #cbd5e1; background: transparent; }
.peer:checked + .opt { border-color: #0891b2; background: rgba(6,182,212,.12); color: #0f172a; box-shadow: 0 0 0 3px rgba(6,182,212,.12); }
html.dark .peer:checked + .opt { border-color: #22d3ee; background: rgba(34,211,238,.10); color: #fff; }
.peer:disabled + .opt { opacity: .45; cursor: not-allowed; }

/* ---------- Grilla del horario ---------- */
.tt-table { border-collapse: separate; border-spacing: 6px; }
.tt-th { font-size: 12px; font-weight: 700; color: #334155; text-align: left; padding: 2px 8px; }
html.dark .tt-th { color: #cbd5e1; font-weight: 600; }
.tt-time { vertical-align: middle; padding-right: 4px; white-space: nowrap; }
.tt-td { vertical-align: top; }
.tt-cell, .tt-empty, .tt-free, .tt-gap, .tt-unavailable, .tt-parent { width: 100%; min-height: 80px; border-radius: 12px; padding: 8px 10px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.tt-cell {
  --sc: #64748b;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 20%, #ffffff), color-mix(in srgb, var(--sc) 8%, #ffffff));
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html.dark .tt-cell {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 24%, transparent), color-mix(in srgb, var(--sc) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--sc) 38%, transparent);
}
button.tt-cell, button.tt-empty { cursor: pointer; }
.tt-cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; background: var(--sc); box-shadow: 0 0 10px var(--sc); }
.tt-cell:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--sc) 55%, transparent); border-color: color-mix(in srgb, var(--sc) 75%, transparent); }
.tt-subject { font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
html.dark .tt-subject { color: #f8fafc; font-weight: 650; }
.tt-meta { font-size: 11px; color: #334155; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .tt-meta { color: #cbd5e1; opacity: .85; }
.tt-room { font-size: 10.5px; color: #475569; display: flex; align-items: center; gap: 3px; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .tt-room { color: #94a3b8; }
.tt-ico { width: 12px; height: 12px; flex-shrink: 0; }
.tt-empty, .tt-free { border: 1px dashed rgba(15,23,42,.18); color: #64748b; font-size: 11px; align-items: center; justify-content: center; background: rgba(15,23,42,.025); }
html.dark .tt-empty, html.dark .tt-free { border-color: rgba(148,163,184,.16); background: rgba(148,163,184,.03); }
.tt-gap { border: 1px dashed rgba(217,119,6,.55); background: rgba(251,191,36,.12); color: #b45309; font-weight: 600; font-size: 11px; align-items: center; justify-content: center; }
html.dark .tt-gap { border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.07); color: #fbbf24; }
.tt-unavailable { border: 1px dashed rgba(225,29,72,.45); color: #be123c; font-weight: 600; font-size: 11px; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(-45deg, rgba(244,63,94,.12) 0 6px, rgba(244,63,94,.03) 6px 12px); }
html.dark .tt-unavailable { border-color: rgba(244,63,94,.40); color: #fda4af; }
.tt-parent { border: 1px solid rgba(16,185,129,.55); background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(16,185,129,.06)); color: #065f46; justify-content: center; box-shadow: inset 0 0 0 1px rgba(16,185,129,.15); }
html.dark .tt-parent { color: #a7f3d0; }
.tt-unavailable svg, .tt-gap svg, .tt-free svg { width: 14px; height: 14px; }
.tt-break-inner { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 600; color: #475569; padding: 5px; border-radius: 10px; background: linear-gradient(90deg, transparent, rgba(15,23,42,.07), transparent); letter-spacing: .04em; }
html.dark .tt-break-inner { color: #94a3b8; background: linear-gradient(90deg, transparent, rgba(148,163,184,.08), transparent); }
.tt-break-inner svg { width: 13px; height: 13px; }
.is-selected { outline: 2px solid #0891b2; outline-offset: 1px; animation: sel 1.2s ease-in-out infinite; }
html.dark .is-selected { outline-color: #22d3ee; }
@keyframes sel { 0%,100% { box-shadow: 0 0 0 0 rgba(34,211,238,.5); } 50% { box-shadow: 0 0 0 7px rgba(34,211,238,0); } }
.is-conflict { outline: 2px solid #f43f5e; outline-offset: 1px; }
.is-changed { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(167,139,250,.9); transform: scale(.95); } 40% { transform: scale(1.02); } 100% { box-shadow: 0 0 0 14px rgba(167,139,250,0); transform: scale(1); } }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- Sliders ---------- */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; cursor: pointer; background: linear-gradient(90deg, #06b6d4 0%, #6366f1 var(--val, 50%), rgba(15,23,42,.15) var(--val, 50%)); }
html.dark .range { background: linear-gradient(90deg, #22d3ee 0%, #a78bfa var(--val, 50%), rgba(148,163,184,.18) var(--val, 50%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.2), 0 2px 8px rgba(0,0,0,.3); transition: transform .15s; }
.range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #6366f1; }

/* ---------- Chat ---------- */
.msg { display: flex; gap: 10px; animation: msgIn .35s cubic-bezier(.2,.8,.2,1); }
.msg-user { justify-content: flex-end; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bubble-user { max-width: 85%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, #0891b2, #6366f1); color: #fff !important; font-size: 13px; box-shadow: 0 8px 20px -10px rgba(99,102,241,.6); }
.bubble-bot { max-width: calc(100% - 38px); min-width: 0; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: #f8fafc; border: 1px solid rgba(15,23,42,.10); font-size: 13px; color: #1e293b; line-height: 1.5; }
html.dark .bubble-bot { background: rgba(148,163,184,.07); border: 1px solid rgba(148,163,184,.10); color: #e2e8f0; }
.bot-avatar { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #22d3ee, #a78bfa); color: #04121a; }
.bot-avatar svg { width: 15px; height: 15px; }
.formal { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #0e7490; background: #ecfeff; border: 1px solid rgba(6,182,212,.3); border-radius: 10px; padding: 8px 10px; margin-top: 6px; overflow-x: auto; white-space: pre; }
html.dark .formal { color: #a5f3fc; background: rgba(2,6,23,.7); border-color: rgba(34,211,238,.2); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; }
.tag-hard { color: #be123c; background: rgba(244,63,94,.15); }
html.dark .tag-hard { color: #fda4af; background: rgba(244,63,94,.14); }
.tag-soft { color: #5b21b6; background: rgba(139,92,246,.15); }
html.dark .tag-soft { color: #c4b5fd; background: rgba(167,139,250,.14); }
.tag-obj { color: #0e7490; background: rgba(6,182,212,.15); }
html.dark .tag-obj { color: #67e8f9; background: rgba(34,211,238,.12); }
.tag-ok { color: #047857; background: rgba(16,185,129,.15); }
html.dark .tag-ok { color: #6ee7b7; background: rgba(52,211,153,.12); }
.ent { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: rgba(15,23,42,.06); color: #334155; }
html.dark .ent { background: rgba(148,163,184,.10); color: #e2e8f0; }
.ent svg { width: 11px; height: 11px; }
.stat { border-radius: 10px; padding: 6px 8px; background: #f8fafc; border: 1px solid rgba(15,23,42,.09); }
html.dark .stat { background: rgba(2,6,23,.45); border: 1px solid rgba(148,163,184,.10); }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: #64748b; display: inline-block; animation: blink 1.2s infinite; margin-right: 3px; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sugg { flex-shrink: 0; font-size: 11.5px; font-weight: 500; padding: 6px 10px; border-radius: 10px; background: rgba(6,182,212,.10); border: 1px solid rgba(6,182,212,.25); color: #0e7490; transition: all .18s; text-align: left; max-width: 250px; white-space: normal; line-height: 1.35; }
.sugg:hover { background: rgba(6,182,212,.18); transform: translateY(-1px); }
html.dark .sugg { background: rgba(34,211,238,.07); border-color: rgba(34,211,238,.18); color: #a5f3fc; }
html.dark .sugg:hover { background: rgba(34,211,238,.15); }

/* ---------- Varios ---------- */
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(6,182,212,.25); border-top-color: #0891b2; animation: spin .8s linear infinite; display: inline-block; }
html.dark .spinner { border-top-color: #22d3ee; }
@keyframes spin { to { transform: rotate(360deg); } }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #10b981; animation: live 2s infinite; }
.dot-bad { background: #f43f5e; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.loadbar { height: 8px; border-radius: 999px; background: rgba(15,23,42,.10); overflow: hidden; }
html.dark .loadbar { background: rgba(148,163,184,.12); }
.loadbar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #06b6d4, #6366f1); transition: width .6s ease; }
.loadbar.is-high > span { background: linear-gradient(90deg, #fbbf24, #f43f5e); }
.field { width: 100%; height: 38px; border-radius: 10px; padding: 0 12px; background: #ffffff; border: 1px solid rgba(15,23,42,.16); color: #0f172a; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.field:focus { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(6,182,212,.15); }
select.field option { background: #ffffff; color: #0f172a; }
html.dark .field { background: rgba(2,6,23,.6); border: 1px solid rgba(148,163,184,.18); color: #e2e8f0; }
html.dark .field:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.15); }
html.dark select.field option { background: #0a0e1a; color: #e2e8f0; }
.toast { animation: toastIn .3s cubic-bezier(.2,.8,.2,1); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
dialog { background: transparent; border: none; padding: 0; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(15,23,42,.58); }
html.dark dialog::backdrop { background: rgba(2,6,23,.78); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.58); display: grid; place-items: center; z-index: 60; padding: 14px; overflow-y: auto; overscroll-behavior: contain; }
html.dark .modal-backdrop { background: rgba(2,6,23,.78); }
.modal-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0);
  box-shadow: 0 24px 60px -15px rgba(15, 23, 42, 0.35) !important;
}
html.dark .modal-card {
  background: #0f172a !important;
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.8) !important;
}
.modal-card > div,
.custom-scroll {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  will-change: scroll-position;
}
html.modal-open,
html.modal-open body {
  overflow: hidden !important;
}
html.modal-open .bg-aurora,
html.modal-open .orb {
  display: none !important;
  animation: none !important;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.28); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Modo Claro (Default) — Adaptación cromática automática de utilidades
   para garantizar legibilidad perfecta en tarjetas, modales y tablas.
   ========================================================================== */
html:not(.dark) body { color: #0f172a; background-color: #f1f5f9; }
html:not(.dark) header { background-color: rgba(255, 255, 255, 0.88) !important; border-bottom-color: rgba(15, 23, 42, 0.08) !important; }
html:not(.dark) .text-white { color: #0f172a !important; }
html:not(.dark) .text-slate-200 { color: #1e293b !important; }
html:not(.dark) .text-slate-300 { color: #334155 !important; }
html:not(.dark) .text-slate-400 { color: #475569 !important; }
html:not(.dark) .text-slate-500 { color: #64748b !important; }
html:not(.dark) .text-cyan-200,
html:not(.dark) .text-cyan-300 { color: #0e7490 !important; }
html:not(.dark) .text-emerald-200,
html:not(.dark) .text-emerald-300,
html:not(.dark) .\!text-emerald-200 { color: #047857 !important; }
html:not(.dark) .text-amber-200,
html:not(.dark) .text-amber-300 { color: #b45309 !important; }
html:not(.dark) .text-rose-200,
html:not(.dark) .text-rose-300,
html:not(.dark) .\!text-rose-200 { color: #be123c !important; }
html:not(.dark) .text-violet-200,
html:not(.dark) .text-violet-300 { color: #6d28d9 !important; }
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/15,
html:not(.dark) .border-white\/20 { border-color: rgba(15, 23, 42, 0.10) !important; }
html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/\[0\.02\],
html:not(.dark) .bg-white\/\[0\.03\],
html:not(.dark) .bg-white\/\[0\.04\] { background-color: rgba(15, 23, 42, 0.035) !important; }
html:not(.dark) .bg-black\/40 { background-color: #ffffff !important; }
html:not(.dark) .chip-avatar { color: #ffffff !important; }

/* ---------- Impresión / PDF ---------- */
#print-area { display: none; }
@media print {
  @page { size: A4 landscape; margin: 9mm; }
  html, body { background: #fff !important; color: #000 !important; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; font-family: Inter, Arial, sans-serif; color: #111; }
  .print-page { page-break-after: always; }
  .print-page:last-child { page-break-after: auto; }
  .print-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #4f46e5; padding-bottom: 4px; margin-bottom: 8px; }
  .print-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
  .print-table th, .print-table td { border: 1px solid #bbb; padding: 4px 5px; vertical-align: top; }
  .print-table th { background: #eef2ff; }
  .print-table td.pc { border-left: 4px solid var(--sc, #999); }
  .print-break td { background: #f4f4f5; text-align: center; font-style: italic; color: #555; }
}

/* ---------- Construcción Secuencial IA (Milestone 2) ---------- */
.is-placed {
  animation: cellPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.45), inset 0 0 0 1px rgba(6, 182, 212, 0.6) !important;
}
@keyframes cellPop {
  0% { transform: scale(0.82); opacity: 0.3; }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

.seq-log-card {
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--sc, #0891b2) !important;
}
.seq-log-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.15), 0 0 12px color-mix(in srgb, var(--sc, #0891b2) 25%, transparent);
}

/* ---------- Optimización Responsive para Mobile y Tablet ---------- */
@media (max-width: 1024px) {
  .tt-table { border-spacing: 4px; min-width: 680px; }
  .tt-cell, .tt-empty, .tt-free, .tt-gap, .tt-unavailable, .tt-parent { min-height: 72px; padding: 6px 8px; }
}

@media (max-width: 640px) {
  header .btn { height: 30px; padding: 0 0.55rem; font-size: 11.5px; gap: 0.3rem; }
  header .btn svg { width: 13.5px; height: 13.5px; }
  .seg { width: 100%; justify-content: space-between; }
  .seg-btn { flex: 1; justify-content: center; padding: 5px 8px; font-size: 11.5px; }
  .kpi-card { padding: 12px 13px; border-radius: 14px; }
  .tt-table { min-width: 620px; border-spacing: 3.5px; }
  .tt-time {
    position: sticky;
    left: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.96);
    padding: 4px 6px;
    border-radius: 8px;
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.06);
  }
  html.dark .tt-time {
    background: rgba(10, 14, 26, 0.96);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.45);
  }
  .modal-backdrop { padding: 8px; }
}