/*
 * Sistema visual de Horarios GA.
 * Tomado del proyecto Whole Platport (v0): consola de operación densa, panel
 * lateral por etapas, tarjetas con título en versalitas, cifras en
 * monoespaciada y un único acento verde. Se aplica sobre Bootstrap 5.3
 * redefiniendo sus variables, así que todas las páginas lo heredan.
 */

/* ---------- Tokens ---------- */
:root,
[data-bs-theme="dark"] {
  --background: #0b1014;
  --foreground: #d9e2e8;
  --panel: #11191f;
  --panel-2: #162128;
  --line: #27343d;
  --muted: #7d8c96;
  --green: #37d996;
  --green-ink: #06120c;
  --amber: #e4ad54;
  --red: #ff4d5d;
  --blue: #5aa9e6;
  --violet: #b48cff;
  /* Retícula del horario, en la gama del horario oficial pero oscurecida */
  --cell-carrera: #18352a;
  --cell-le: #2b3238;
  --cell-dh: #1a2f43;
  --cell-tutoria: #22303a;
  --cell-libre: #3a3016;
  --cell-choque: #4a1b22;
  --radius: 4px;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

[data-bs-theme="light"] {
  --background: #eef2f3;
  --foreground: #172228;
  --panel: #ffffff;
  --panel-2: #f4f7f7;
  --line: #d6e0e3;
  --muted: #5d6c75;
  --green: #0f9d63;
  --green-ink: #ffffff;
  --amber: #b7791f;
  --red: #d92d3e;
  --blue: #2b6cb0;
  --violet: #6b46c1;
  /* Colores del horario institucional impreso */
  --cell-carrera: #e2efda;
  --cell-le: #d0cece;
  --cell-dh: #ddebf7;
  --cell-tutoria: #ffffff;
  --cell-libre: #ffe699;
  --cell-choque: #f8cbad;
  color-scheme: light;
}

/* ---------- Bootstrap sobre los tokens ---------- */
[data-bs-theme] {
  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-body-font-family: var(--sans);
  --bs-body-font-size: 0.875rem;
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius);
  --bs-border-radius-lg: 6px;
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--panel-2);
  --bs-secondary-bg: var(--panel-2);
  --bs-emphasis-color: var(--foreground);
  --bs-heading-color: var(--foreground);
  --bs-link-color: var(--green);
  --bs-link-hover-color: var(--green);
  --bs-link-color-rgb: 55, 217, 150;
  --bs-link-hover-color-rgb: 55, 217, 150;
  --bs-card-bg: var(--panel);
  --bs-focus-ring-color: color-mix(in srgb, var(--green) 30%, transparent);
}
[data-bs-theme="light"] {
  --bs-link-color-rgb: 15, 157, 99;
  --bs-link-hover-color-rgb: 15, 157, 99;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
}
h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.45rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.2rem; }
h5 { font-size: 0.95rem; }
.text-muted { color: var(--muted) !important; }
label, .form-label { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.25rem; }
.form-text { color: var(--muted); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--foreground);
}
.card-header { background: var(--panel-2); border-bottom-color: var(--line); }

.form-control,
.form-select {
  background-color: var(--panel-2);
  border-color: var(--line);
  color: var(--foreground);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--panel-2);
  color: var(--foreground);
  border-color: var(--green);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--green) 20%, transparent);
}
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }

.btn { border-radius: var(--radius); font-weight: 500; }
.btn-primary,
.btn-success {
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-color: var(--green-ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--green) 85%, #fff);
  --bs-btn-hover-border-color: var(--green);
  --bs-btn-hover-color: var(--green-ink);
  --bs-btn-active-bg: var(--green);
  --bs-btn-active-color: var(--green-ink);
  --bs-btn-disabled-bg: var(--green);
  --bs-btn-disabled-border-color: var(--green);
  --bs-btn-disabled-color: var(--green-ink);
  font-weight: 600;
}
.btn-secondary,
.btn-outline-light,
.btn-outline-secondary {
  --bs-btn-bg: var(--panel-2);
  --bs-btn-border-color: var(--line);
  --bs-btn-color: var(--foreground);
  --bs-btn-hover-bg: var(--panel-2);
  --bs-btn-hover-border-color: var(--muted);
  --bs-btn-hover-color: var(--foreground);
  --bs-btn-active-bg: var(--panel-2);
  --bs-btn-active-color: var(--foreground);
}
.btn-danger,
.btn-outline-danger {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--red);
  --bs-btn-color: var(--red);
  --bs-btn-hover-bg: var(--red);
  --bs-btn-hover-border-color: var(--red);
  --bs-btn-hover-color: #fff;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--foreground);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--panel-2);
  --bs-table-hover-bg: var(--panel-2);
  font-variant-numeric: tabular-nums;
}
.table thead th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom-color: var(--line);
}

.alert {
  border-radius: var(--radius);
  border: 1px solid;
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: 0.85rem;
  padding: 0.6rem 2.5rem 0.6rem 0.85rem;
}
.alert-success { color: var(--green); border-color: var(--green); }
.alert-info { color: var(--blue); border-color: var(--blue); }
.alert-warning { color: var(--amber); border-color: var(--amber); }
.alert-danger { color: var(--red); border-color: var(--red); }
.alert-secondary { color: var(--muted); border-color: var(--line); }
.alert .btn-close { padding: 0.75rem; }

.badge.bg-success { background: transparent !important; color: var(--green); border: 1px solid var(--green); }
.badge.bg-secondary { background: transparent !important; color: var(--muted); border: 1px solid var(--line); }
.badge.bg-info { background: transparent !important; color: var(--blue) !important; border: 1px solid var(--blue); }
.badge.bg-danger { background: var(--red) !important; }

.dropdown-menu {
  --bs-dropdown-bg: var(--panel);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-link-color: var(--foreground);
  --bs-dropdown-link-hover-bg: var(--panel-2);
  --bs-dropdown-link-hover-color: var(--foreground);
  --bs-dropdown-header-color: var(--muted);
  font-size: 0.85rem;
}
.nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-bg: var(--panel); --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--panel); }
.nav-tabs .nav-link { color: var(--muted); }
.nav-tabs .nav-link.active { color: var(--foreground); box-shadow: inset 0 2px 0 var(--green); }

/* ---------- Estructura ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  min-height: 48px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--foreground);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--foreground); }
.brand b { color: var(--muted); font-weight: 600; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--green-ink);
  font-size: 11px;
}
.topbar .spacer { margin-left: auto; }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--foreground);
}
.icon-button:hover { border-color: var(--muted); }
.menu-toggle { display: none; }
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--foreground);
  font-size: 12px;
}
.user-pill small { color: var(--muted); }

.layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: calc(100vh - 48px);
}
.layout.solo { grid-template-columns: minmax(0, 1fr); }
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 14px 10px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow-y: auto;
}
.side-label,
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.side-label { padding: 12px 10px 6px; }
.side-label:first-child { padding-top: 0; }
.side-label .num {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0;
}
.side-label.siguiente .num { border-color: var(--green); color: var(--green); }
.side-label.hecho .num { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.sidebar a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--foreground);
  text-decoration: none;
  font-size: 13px;
}
.sidebar a i { color: var(--muted); font-size: 14px; width: 16px; }
.sidebar a:hover { background: var(--panel-2); }
.sidebar a.selected {
  background: var(--panel-2);
  box-shadow: inset 2px 0 0 var(--green);
  font-weight: 600;
}
.sidebar a.selected i { color: var(--green); }
.sidebar .dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
}
.dot.ok { background: var(--green); }
.dot.pendiente { background: var(--amber); }
.dot.error { background: var(--red); }
.side-foot {
  margin-top: auto;
  padding: 12px 10px 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.main { min-width: 0; padding: 22px 26px 40px; }
.main > .content { max-width: 1280px; }

/* ---------- Pantallas ---------- */
.screen-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.screen-head h1 { margin: 2px 0 0; }
.screen-head p { margin: 6px 0 0; color: var(--muted); max-width: 70ch; }
.card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.kpi { padding: 12px 14px; }
.kpi strong {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 600;
}
.kpi small { color: var(--muted); }
.mono, td.num, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Etapas del flujo */
.etapas { display: grid; gap: 8px; }
.etapa {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--foreground);
  text-decoration: none;
}
.etapa:hover { border-color: var(--muted); color: var(--foreground); }
.etapa.siguiente { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.etapa .n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.etapa.hecho .n { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.etapa.siguiente .n { border-color: var(--green); color: var(--green); }
.etapa h3 { font-size: 0.95rem; margin: 0; }
.etapa p { margin: 2px 0 0; color: var(--muted); font-size: 0.8rem; }
.status {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.status.ok { color: var(--green); border-color: var(--green); }
.status.pendiente { color: var(--amber); border-color: var(--amber); }
.status.error { background: var(--red); border-color: var(--red); color: #fff; }

details.avanzado summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  list-style: none;
}
details.avanzado summary::before { content: "▸ "; }
details.avanzado[open] summary::before { content: "▾ "; }

/* ---------- Retícula oficial del horario ---------- */
.reticula {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8rem;
}
.reticula th,
.reticula td {
  border: 1px solid var(--line);
  padding: 6px;
  text-align: center;
  vertical-align: middle;
}
.reticula thead th {
  background: var(--panel-2);
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.78rem;
}
.reticula thead .grupo { font-size: 0.85rem; letter-spacing: 0.04em; }
.reticula th.hora {
  width: 112px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--panel);
}
.reticula td { height: 46px; line-height: 1.2; }
.reticula td .doc { display: block; margin-top: 3px; font-size: 0.7rem; color: var(--muted); }
.reticula td.carrera { background: var(--cell-carrera); }
.reticula td.le { background: var(--cell-le); }
.reticula td.dh { background: var(--cell-dh); }
.reticula td.tutoria { background: var(--cell-tutoria); font-weight: 700; }
.reticula td.libre { background: var(--cell-libre); }
.reticula td.choque { background: var(--cell-choque); color: var(--red); font-weight: 600; }
.reticula td .pin { font-size: 0.7rem; color: var(--muted); margin-left: 3px; }
.resumen-materias td, .resumen-materias th { font-size: 0.8rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.75rem; color: var(--muted); }
.leyenda i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -2px;
}

/* ---------- Acceso ---------- */
.acceso {
  min-height: calc(100vh - 48px);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.acceso .card { width: 100%; max-width: 380px; padding: 22px; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle { display: inline-grid; }
  .sidebar {
    display: none;
    position: fixed;
    top: 48px;
    left: 0;
    width: 260px;
    z-index: 1020;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
  }
  .sidebar.show { display: flex; }
  .main { padding: 16px; }
  .user-pill small { display: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .topbar, .sidebar, .no-print, .nav-tabs, .alert { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; }
  .tab-content > .tab-pane { display: block !important; opacity: 1 !important; break-after: page; }
  :root, [data-bs-theme] {
    --background: #fff; --foreground: #000; --panel: #fff; --panel-2: #d9d9d9; --line: #000; --muted: #333;
    --cell-carrera: #e2efda; --cell-le: #d0cece; --cell-dh: #ddebf7; --cell-tutoria: #fff;
    --cell-libre: #ffe699; --cell-choque: #f8cbad;
  }
  .reticula td, .reticula th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Tamaños compactos, como la consola de referencia */
.btn { --bs-btn-font-size: 0.85rem; --bs-btn-padding-y: 0.4rem; --bs-btn-padding-x: 0.85rem; }
.btn-sm { --bs-btn-font-size: 0.78rem; --bs-btn-padding-y: 0.2rem; --bs-btn-padding-x: 0.55rem; }
.form-control, .form-select { font-size: 0.85rem; padding: 0.4rem 0.65rem; }
.form-select { padding-right: 2rem; }
.form-control::placeholder { color: var(--muted); opacity: 0.8; font-family: var(--sans); }

/* En pantallas angostas la retícula conserva su proporción y se desplaza */
.reticula { min-width: 760px; }
@media print { .reticula { min-width: 0; } }