/* ============================================================================
   PORTAL MAXIM GORKI — SISTEMA DE DISEÑO v2026
   1 Tokens · 2 Base · 3 Shell/Navegación · 4 Componentes · 5 Módulos
   6 Utilidades · 7 Responsive · 8 Accesibilidad · 9 Impresión
   Las clases existentes se conservan: los módulos heredan el sistema sin
   cambiar su HTML. Los colores de estado (verde/ámbar/rojo/azul) son
   semánticos y consistentes en todo el portal.
   ========================================================================== */

/* ===== 1. DESIGN TOKENS ===== */
:root {
  /* Marca y acción */
  --c-primary: #2563eb;
  --c-primary-strong: #1d4ed8;
  --c-primary-soft: #eff6ff;
  --c-primary-border: #bfdbfe;
  /* Estados */
  --c-ok: #16a34a;        --c-ok-text: #15803d;  --c-ok-soft: #f0fdf4;  --c-ok-border: #bbf7d0;
  --c-warn: #d97706;      --c-warn-text: #b45309; --c-warn-soft: #fffbeb; --c-warn-border: #fde68a;
  --c-bad: #dc2626;       --c-bad-text: #b91c1c;  --c-bad-soft: #fef2f2;  --c-bad-border: #fecaca;
  --c-info: var(--c-primary); --c-info-soft: var(--c-primary-soft); --c-info-border: var(--c-primary-border);
  /* Neutros */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e6e8ef;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-2: #64748b;
  --text-3: #94a3b8;
  /* Tipografía */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-h1: 24px; --fs-h2: 19px; --fs-h3: 16px; --fs-h4: 14px;
  --fs-body: 14px; --fs-small: 12.5px; --fs-label: 13px;
  /* Forma */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, .06);
  --shadow-md: 0 4px 14px rgba(2, 6, 23, .07);
  --shadow-lg: 0 18px 50px rgba(2, 6, 23, .22);
  /* Movimiento */
  --t-fast: .14s ease;
  --t-med: .22s ease;
  /* Layout */
  --topbar-h: 56px;
  --sidebar-w: 248px;
  --content-max: 1240px;
  /* Compat legado (columnas sticky de Deudas) */
  --tabs-h: 0px;
  --sticky-bg: #fff;
  --w-col-familia: 180px;
  --w-col-alumno: 160px;
}

/* ===== 2. BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; }
h3 { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 8px; color: var(--text); }
h4 { font-size: var(--fs-h4); font-weight: 700; margin: 14px 0 6px; color: var(--text); }
p { margin: 6px 0; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
::selection { background: var(--c-primary-soft); }

/* Scrollbars discretos */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Controles base: todo input/botón hereda el sistema aunque no tenga clase */
button {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 7px 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
button:hover { background: var(--surface-2); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  min-height: 36px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea { min-height: 70px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover, select:hover, textarea:hover { border-color: #b6c0cf; }
input:focus, select:focus, textarea:focus, button:focus { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
button:focus-visible, .tab:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-2); }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 16px; height: 16px; accent-color: var(--c-primary); }
input[type="date"], input[type="time"], input[type="number"] { font-variant-numeric: tabular-nums; }
label { font-size: var(--fs-label); color: #334155; font-weight: 600; }
label > input, label > select, label > textarea { font-weight: 400; }

fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; margin: 10px 0; }
legend { font-size: var(--fs-label); font-weight: 700; color: var(--c-primary-strong); padding: 0 6px; }

details { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; margin: 8px 0; background: var(--surface); }
details > summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 8px; user-select: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(-45deg); transition: transform var(--t-fast); margin-top: -2px;
}
details[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
details[open] > summary { margin-bottom: 6px; }

hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }

/* ===== 3. SHELL Y NAVEGACIÓN ===== */
.app-shell { min-height: 100dvh; background: var(--bg); }

/* Topbar */
.app-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-burger {
  display: none;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-burger i { width: 17px; height: 2px; border-radius: 2px; background: var(--text); display: block; transition: transform var(--t-med), opacity var(--t-med); }
body.nav-open .nav-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-burger i:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-logo-small { width: 30px; height: 30px; object-fit: contain; }
.brand-name { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.brand-right { display: flex; align-items: center; }
.topbar-spacer { flex: 1 1 auto; }
.session { display: flex; align-items: center; gap: 10px; min-width: 0; }
.status { font-weight: 600; font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.app-topbar.header-loading .status,
.app-topbar.header-loading #userCategory { visibility: hidden; }
.header-loading #header-user { visibility: hidden; }
#header-user { transition: opacity .15s ease; }

/* Sidebar (la barra de navegación #mainNav) */
.tabs {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 950;
  width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px 18px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nav-group-label {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 10px 10px 4px;
}
.tab {
  appearance: none;
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-weight: 600; font-size: 13.5px; color: #3f4a5c;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab.active {
  background: var(--c-primary-soft);
  color: var(--c-primary-strong);
  box-shadow: inset 3px 0 0 var(--c-primary);
}
.nav-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 940;
  background: rgba(15, 23, 42, .42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* Área de contenido */
#routeView, .app-main {
  padding: 18px 20px 28px;
  padding-top: calc(var(--topbar-h) + 18px);
  margin-left: var(--sidebar-w);
}
.app-main { padding-top: 0; }
#routeView > section.card, #routeView > .card { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
#dataTable { overflow-x: auto; }

/* ===== 4. BIBLIOTECA DE COMPONENTES ===== */

/* --- Tarjeta --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin: 10px 0;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }
.card > p:first-of-type { color: var(--text-2); }

/* --- Botones --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button.primary, .btn.primary, .primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 700;
  padding: 8px 16px;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .35);
}
button.primary:hover, .btn.primary:hover, .primary:hover { background: var(--c-primary-strong); border-color: var(--c-primary-strong); }
.secondary, button.secondary {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
}
.secondary:hover { background: var(--surface-2); }
.btn-mini {
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--r-sm); padding: 4px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer; color: var(--text);
}
.btn-mini:hover { background: var(--surface-2); }
.btn-mini.ok { border-color: var(--c-ok); color: var(--c-ok-text); }
.btn-mini.ok:hover { background: var(--c-ok-soft); }
.btn-mini.warn { border-color: var(--c-warn); color: var(--c-warn-text); }
.btn-mini.warn:hover { background: var(--c-warn-soft); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.link-button { background: none; border: 0; color: var(--c-primary); font-weight: 600; padding: 2px 4px; cursor: pointer; }
.link-button:hover { text-decoration: underline; background: none; }
.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ur-danger, .pv2-danger { border-color: #fca5a5 !important; color: var(--c-bad-text) !important; }
.ur-danger:hover, .pv2-danger:hover { background: var(--c-bad-soft) !important; }

/* --- Login --- */
.login-screen {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(37, 99, 235, .12), transparent 60%),
    radial-gradient(800px 420px at 108% 110%, rgba(22, 163, 74, .10), transparent 55%),
    var(--bg);
}
.login-card {
  width: min(92vw, 460px); text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: clamp(24px, 4vmin, 38px);
  box-shadow: var(--shadow-lg);
}
.login-logo { width: clamp(96px, 20vmin, 168px); height: auto; object-fit: contain; margin: 4px auto 12px; }
.login-title { margin: 0; font-size: clamp(21px, 3vmin, 27px); font-weight: 800; color: var(--text); }
.login-subtitle { margin: 6px 0 20px; color: var(--text-2); font-size: clamp(13px, 2vmin, 15px); }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; font-weight: 700; font-size: 15px;
  border-radius: 12px;
}
.login-error { color: var(--c-bad-text); font-weight: 600; margin-top: 14px; }

/* --- Formularios --- */
.row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.form-grid { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.form-grid textarea, .form-grid input, .form-grid select { width: 100%; }
.form-grid textarea { min-height: 120px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ur-grid {
  display: grid; gap: 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 8px 0;
}
.ur-grid label { display: flex; flex-direction: column; gap: 4px; }
.error { color: var(--c-bad-text); font-weight: 600; }
.ur-error { color: var(--c-bad-text); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 6px; }
.readonly-box, .availability-box, .box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 9px 12px; font-size: 13.5px;
}
.availability-box { border-left: 4px solid var(--c-primary); }
.grid { display: grid; gap: 10px; }

/* --- Tablas --- */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
.table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-body);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.table thead th {
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 1;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #f4f7ff; }
.ur-table td { vertical-align: middle; }
.seg-detail > td { background: var(--surface-2); }
.seg-subtable { margin: 6px 0; font-size: 13px; }
.table .table { box-shadow: none; }
.table th.sticky-col-1, .table td.sticky-col-1 {
  position: sticky; left: 0; z-index: 3; background: var(--sticky-bg);
  min-width: var(--w-col-familia); max-width: var(--w-col-familia);
  box-shadow: 2px 0 0 rgba(0, 0, 0, .05);
}
.table th.sticky-col-2, .table td.sticky-col-2 {
  position: sticky; left: var(--w-col-familia); z-index: 2; background: var(--sticky-bg);
  min-width: var(--w-col-alumno); max-width: var(--w-col-alumno);
  box-shadow: 2px 0 0 rgba(0, 0, 0, .04);
}

/* Datos monetarios y estados de deuda */
.money { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.family, .grade { font-weight: 600; }
.neg { color: var(--c-bad-text); font-weight: 600; }
.pos { color: var(--text); }
.zero { color: var(--text-2); }
.due { background: var(--c-warn-soft); }
.credit { background: #e6fffa; }
.total { font-weight: 700; }

/* --- Badges, pills y chips --- */
.badge-status, .status-pill, .pv2-pill, .wb-prio, .wb-doc-status, .ur-alert-pill {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; border: 1px solid transparent;
  background: var(--surface-2); color: #334155; border-color: var(--border);
}
.st-draft { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.st-in_progress { background: var(--c-info-soft); color: var(--c-primary-strong); border-color: var(--c-info-border); }
.st-ready { background: #fefce8; color: #a16207; border-color: var(--c-warn-border); }
.st-approved { background: var(--c-ok-soft); color: var(--c-ok-text); border-color: var(--c-ok-border); }
.st-needs_changes { background: var(--c-bad-soft); color: var(--c-bad-text); border-color: var(--c-bad-border); }
.st-complete, .st-completed { background: var(--c-ok-soft); color: var(--c-ok-text); border-color: var(--c-ok-border); }
.pv2-pill-ok { background: var(--c-ok-soft); color: var(--c-ok-text); border-color: var(--c-ok-border); }
.pv2-pill-bad { background: var(--c-bad-soft); color: var(--c-bad-text); border-color: var(--c-bad-border); }
.pv2-pill-warn { background: var(--c-warn-soft); color: var(--c-warn-text); border-color: var(--c-warn-border); }
.pv2-pill-info { background: var(--c-info-soft); color: var(--c-primary-strong); border-color: var(--c-info-border); }
.wb-prio-low { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.wb-prio-medium { background: var(--c-info-soft); color: var(--c-primary-strong); border-color: var(--c-info-border); }
.wb-prio-high { background: var(--c-warn-soft); color: var(--c-warn-text); border-color: var(--c-warn-border); }
.wb-prio-urgent { background: var(--c-bad-soft); color: var(--c-bad-text); border-color: var(--c-bad-border); }
.wb-doc-received { background: var(--c-warn-soft); color: var(--c-warn-text); border-color: var(--c-warn-border); }
.wb-doc-in_review { background: var(--c-info-soft); color: var(--c-primary-strong); border-color: var(--c-info-border); }
.wb-doc-reviewed { background: var(--c-ok-soft); color: var(--c-ok-text); border-color: var(--c-ok-border); }
.wb-doc-needs_update { background: var(--c-bad-soft); color: var(--c-bad-text); border-color: var(--c-bad-border); }
.ur-alert-pill.sev-high { background: var(--c-bad-soft); color: var(--c-bad-text); border-color: var(--c-bad-border); }
.ur-alert-pill.sev-medium { background: var(--c-warn-soft); color: var(--c-warn-text); border-color: var(--c-warn-border); }
.ur-chip {
  display: inline-block; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 1px 8px; font-size: 12px; font-weight: 700;
  color: #334155; cursor: help;
}
.pill {
  background: var(--c-primary-soft); color: #1e293b;
  border: 1px solid var(--c-primary-border); border-radius: var(--r-pill);
  padding: 4px 9px; display: inline-flex; gap: 6px; align-items: center;
}
.pill-x { background: transparent; border: 0; cursor: pointer; line-height: 1; font-weight: 700; padding: 0 2px; }
.pill-x:hover { color: var(--c-bad-text); background: none; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.chip-check, .radio-chip, .cal-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px;
  cursor: pointer; user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.chip-check:hover, .radio-chip:hover, .cal-chip:hover { background: var(--surface-2); }
.chip-check { border-color: var(--c-info-border); background: var(--c-info-soft); }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cal-chip .swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }
.ur-perm-group { margin: 4px 0 8px; }
.ur-sync { font-weight: 800; }
.ur-sync.ok { color: var(--c-ok-text); }
.ur-sync.bad { color: var(--c-warn-text); }

/* --- KPI cards --- */
.kpi-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.kpi {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 12px; background: var(--surface); text-align: center;
  box-shadow: var(--shadow-sm);
}
button.kpi { cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); }
button.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--surface); }
.kpi-value { font-size: 23px; font-weight: 800; color: var(--text); line-height: 1.15; }
.kpi-label { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.kpi-ok { background: var(--c-ok-soft); border-color: var(--c-ok-border); }
.kpi-warn { background: var(--c-warn-soft); border-color: var(--c-warn-border); }
.kpi-bad { background: var(--c-bad-soft); border-color: var(--c-bad-border); }
.kpi-info { background: var(--c-info-soft); border-color: var(--c-info-border); }
.stat-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 12px 14px; background: var(--surface); box-shadow: var(--shadow-sm);
}

/* --- Barras de progreso --- */
.progress {
  display: inline-block; vertical-align: middle;
  width: 90px; height: 8px; border-radius: var(--r-pill);
  background: #e5e7eb; overflow: hidden;
}
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-primary), #4f8df9); border-radius: var(--r-pill); }
.seg-pct { font-size: 12px; margin-left: 6px; color: var(--text-2); }

/* --- Alertas --- */
.alert-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--r-md); padding: 9px 12px; margin: 6px 0;
  background: var(--surface); font-size: 14px;
}
.alert-item.sev-high { border-left-color: var(--c-bad); background: #fff7f7; }
.alert-item.sev-medium { border-left-color: #f59e0b; background: #fffdf5; }
.alert-item.sev-low { border-left-color: var(--text-3); }
.alert-item.sev-info { border-left-color: var(--c-primary); background: #f7fbff; }
.warning-card { border: 1px solid #f59e0b; background: var(--c-warn-soft); }
.sev-bad { color: var(--c-bad-text); font-weight: 700; }
.sev-warn { color: var(--c-warn-text); font-weight: 700; }
.seg-obs {
  background: var(--c-bad-soft); border: 1px solid var(--c-bad-border); border-radius: var(--r-sm);
  padding: 6px 10px; margin: 6px 0; font-size: 13px;
}
.seg-alert-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.seg-alert-list .sev-high { color: var(--c-bad-text); }
.seg-alert-list .sev-medium { color: var(--c-warn-text); }
.seg-alert-list .sev-low, .seg-alert-list .sev-info { color: #475569; }
.seg-info { color: #a16207; font-weight: 700; }
.seg-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.ur-warn {
  background: var(--c-warn-soft); border: 1px solid var(--c-warn-border); color: #92400e;
  border-radius: var(--r-sm); padding: 6px 10px; margin: 6px 0; font-size: 13px;
}

/* --- Modales --- */
.ur-modal-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 23, 42, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 12px; overflow: auto;
  animation: fadeIn var(--t-med) both;
}
.ur-modal {
  background: var(--surface); border-radius: var(--r-xl); border: 1px solid var(--border);
  width: min(880px, 100%); max-height: 92dvh; overflow: auto;
  padding: 18px 20px 16px; box-shadow: var(--shadow-lg);
  animation: riseIn var(--t-med) both;
}
.ur-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ur-modal-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* --- Dropdowns / multiselects --- */
.multi-select { position: relative; display: grid; gap: 8px; }
.ms-input-row { display: grid; gap: 8px; grid-template-columns: 1fr 200px; }
.ms-pills, .ms2-pills { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.ms-dropdown, .ms2-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 25;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); margin-top: 5px; overflow: hidden;
}
.ms-dropdown { max-height: 300px; overflow: auto; }
#ms-stu-list { list-style: none; padding: 6px; margin: 0; }
.ms-item { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.ms-item:hover { background: var(--surface-2); }
.ms-title { font-weight: 700; }
.ms-meta, .ms2-meta { font-size: 12px; color: var(--text-2); }
.ms-empty { padding: 8px 10px; color: var(--text-2); }
.ms2 { position: relative; display: grid; gap: 8px; }
.ms2-toggle { height: 40px; padding: 0 14px; border-radius: var(--r-md); font-weight: 600; }
.ms2-dropdown { display: grid; grid-template-rows: auto 260px auto; }
.ms2-search { padding: 8px; border-bottom: 1px solid var(--surface-2); }
.ms2-search input { width: 100%; }
.ms2-list { overflow: auto; padding: 6px 8px; display: grid; gap: 6px; }
.ms2-item { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; padding: 6px 8px; border-radius: var(--r-sm); }
.ms2-item:hover { background: var(--surface-2); }
.ms2-name { font-weight: 700; }
.ms2-actions { display: flex; gap: 8px; justify-content: space-between; padding: 8px; border-top: 1px solid var(--surface-2); }

/* --- Estados vacíos, carga y esqueletos --- */
.empty-state {
  text-align: center; color: var(--text-2);
  padding: 34px 16px; border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg); background: var(--surface-2);
}
.empty-state b { color: var(--text); }
.skel {
  position: relative; overflow: hidden;
  background: #edf0f6; border-radius: var(--r-sm); color: transparent !important;
  min-height: 12px;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--c-primary);
  display: inline-block; animation: spin .8s linear infinite; vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Dashboard de inicio --- */
.home-hero {
  max-width: var(--content-max); margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(120deg, #ffffff 0%, #f3f7ff 100%);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.home-hero h2 { margin: 0; }
.home-hero-badge {
  background: var(--c-primary-soft); color: var(--c-primary-strong);
  border: 1px solid var(--c-info-border); border-radius: var(--r-pill);
  padding: 4px 12px; font-weight: 700; font-size: 12.5px;
}
.home-kpis { max-width: var(--content-max); margin: 0 auto 6px; }
.home-kpis .kpi { border: 1px solid var(--border); }
.home-sec { max-width: var(--content-max); margin: 18px auto 8px; }
.qa-grid {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.qa-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 14px; text-align: left; box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.qa-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c-primary-border); background: var(--surface); }
.qa-ico { font-size: 21px; line-height: 1; margin-bottom: 5px; }
.qa-t { font-weight: 700; }
.qa-d { font-size: 12px; color: var(--text-2); font-weight: 500; }
.home-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1100px; margin: 0 auto; }

/* --- Carrusel institucional --- */
.carousel {
  position: relative; overflow: hidden;
  max-width: var(--content-max); margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.carousel img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.carousel .caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px;
  background: linear-gradient(to top, rgba(2, 6, 23, .55), rgba(2, 6, 23, 0));
  color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.carousel .dots { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; gap: 6px; justify-content: center; }
.carousel .dot {
  width: 8px; height: 8px; border-radius: var(--r-pill); padding: 0;
  background: rgba(255, 255, 255, .65); border: 1px solid rgba(255, 255, 255, .9);
}
.carousel .dot.active { background: var(--c-primary); border-color: #fff; width: 20px; }

/* --- FullCalendar --- */
#calendar { min-height: 70vh; }
#coursePlanningCalendar { margin-top: 12px; }
.fc { --fc-border-color: var(--border); --fc-page-bg-color: var(--surface); font-family: var(--font); }
.fc .fc-toolbar-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: .7em; gap: 8px; flex-wrap: wrap; }
.fc .fc-button {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  font-weight: 600; border-radius: var(--r-sm); padding: 6px 11px;
  box-shadow: none; text-transform: none;
}
.fc .fc-button:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.fc .fc-button:focus, .fc .fc-button:active { box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.fc .fc-button:disabled { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }
.fc .fc-col-header-cell-cushion { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; padding: 6px 4px; }
.fc .fc-daygrid-day-number { font-size: 12.5px; color: var(--text-2); padding: 5px 7px; }
.fc .fc-day-today { background: var(--c-primary-soft) !important; }
.fc .fc-event { cursor: pointer; border-radius: 6px; font-size: 12px; }
.fc .fc-daygrid-event { border-radius: 6px; padding: 2px 5px; }
.fc .fc-list-event:hover td { background: var(--surface-2); }

/* --- Curriculum y desempeños (vistas clásicas) --- */
.curriculum-block { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin: 8px 0; background: var(--surface); }
.curriculum-item { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.curriculum-item:last-child { border-bottom: 0; }
.curriculum-code { font-weight: 800; color: var(--c-primary-strong); font-size: 12px; }
.curriculum-text { font-size: 13.5px; }
.performance-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin: 8px 0; background: var(--surface); }
.performance-header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.performance-capacity { font-size: 12px; color: var(--text-2); }
.performance-original { color: var(--text-2); font-size: 13px; }
.performance-adjusted { background: var(--c-warn-soft); border: 1px solid var(--c-warn-border); border-radius: var(--r-sm); padding: 6px 9px; margin-top: 6px; font-size: 13px; }
.teacher-performance { font-size: 13px; }
.unit-card, .session { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; margin: 10px 0; background: var(--surface); box-shadow: var(--shadow-sm); }
.unit-card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.unit-session-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.unit-sessions-preview { margin-top: 8px; }
.session-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.impact-rule-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; margin-top: 10px; background: var(--surface-2); }

/* --- Timeline (vista clásica de unidades) --- */
.unit-timeline { display: grid; gap: 12px; margin-top: 12px; }
.unit-timeline-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; }
.unit-timeline-label { display: grid; gap: 4px; }
.unit-timeline-label small { color: var(--text-2); }
.unit-timeline-track { position: relative; height: 34px; background: #eef1f7; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.unit-timeline-bar {
  position: absolute; top: 4px; bottom: 4px; border: 0; border-radius: var(--r-pill);
  padding: 0 10px; background: var(--c-primary); color: #fff; font-weight: 700; cursor: pointer;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.unit-timeline-bar:hover { filter: brightness(1.08); }

/* --- Usuarios y Roles --- */
.ur-count { font-size: 12px; margin: 4px 0 6px; color: var(--text-2); }
.ur-actions { white-space: nowrap; }
.ur-actions .btn-mini { margin: 1px 2px; }
.ur-links { font-size: 12px; line-height: 1.4; }
.ur-section { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px 10px; margin: 10px 0; }
.ur-section legend { color: var(--c-primary-strong); }
.ur-perm-grid { display: grid; gap: 6px 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ur-perm-group-title { font-size: 12px; font-weight: 800; color: var(--text-2); margin: 6px 0 2px; text-transform: uppercase; letter-spacing: .03em; }
.ur-perm-grid .radio-chip { font-size: 13px; }
.ur-byrole { background: #f0f7ff; border-color: var(--c-info-border); }
.ur-meta { font-size: 12px; color: #475569; margin: 8px 0 4px; line-height: 1.6; }
.ur-claims {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 10px; font-size: 12px; word-break: break-all; margin-top: 6px;
  font-family: var(--font-mono);
}
.ur-claims.bad { background: var(--c-warn-soft); border-color: var(--c-warn-border); }
.ur-audit-item { border-bottom: 1px dashed var(--border); padding: 6px 0; font-size: 13px; }
.ur-audit-item:last-child { border-bottom: none; }
.ur-audit-diff { font-size: 11px; color: #475569; word-break: break-all; margin-top: 2px; }

/* --- Bienestar --- */
.wb-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wb-subtabs .radio-chip { cursor: pointer; user-select: none; }
.wb-subtabs .wb-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 700; }
.wb-dx-banner {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  background: var(--c-info-soft); border: 1px solid var(--c-info-border); border-left: 4px solid var(--c-primary);
  border-radius: var(--r-md); padding: 9px 12px; font-size: 13px; color: #1e3a5f;
}
.wb-dx-banner .btn-mini { background: var(--surface); }
.wb-diff-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) 110px minmax(110px, 1fr) 130px 32px;
  gap: 6px; align-items: center; margin-bottom: 6px;
}
.wb-diff-row select, .wb-diff-row input { min-height: 32px; padding: 4px 6px; font-size: 13px; }
.wb-fu-item {
  border: 1px solid var(--border); border-left: 3px solid var(--c-primary);
  border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 8px;
  font-size: 13px; line-height: 1.5; background: #fafcff;
}
.wb-fu-priv {
  background: #fff7ed; border: 1px dashed #fdba74; border-radius: 6px;
  padding: 4px 8px; margin: 4px 0; color: #9a3412;
}

/* ===== 5. MÓDULO PLANIFICACIÓN V2 (pv2-*) ===== */
.pv2-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pv2-inline { display: inline-flex; flex-direction: column; gap: 2px; font-size: 13px; color: #475569; }
.pv2-inline select, .pv2-inline input { min-width: 120px; }
.pv2-spacer { flex: 1 1 auto; }
.pv2-search { min-width: 220px; }
.pv2-hr { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.pv2-actrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv2-pre { white-space: pre-wrap; }

.pv2-bar { display: inline-flex; align-items: center; gap: 6px; min-width: 110px; }
.pv2-bar > i { flex: 0 0 80px; height: 8px; border-radius: var(--r-pill); background: #e5e7eb; overflow: hidden; display: inline-block; }
.pv2-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, #f59e0b, var(--c-ok)); }
.pv2-bar > span { font-size: 12px; color: #475569; font-weight: 600; }

.pv2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.pv2-course-card {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  padding: 14px 15px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.pv2-course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pv2-cc-title { font-weight: 800; color: var(--text); }
.pv2-cc-sub { font-size: 12.5px; color: var(--text-2); }
.pv2-cc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pv2-cc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.pv2-flag { color: var(--c-bad-text); font-size: 12px; font-weight: 700; }

.pv2-chiprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv2-chip {
  border: 1px solid var(--border-strong); background: var(--surface); color: #334155;
  border-radius: var(--r-pill); padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pv2-chip:hover { background: var(--surface-2); }
.pv2-chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.pv2-vtab.active { background: var(--c-primary); border-color: var(--c-primary); }

.pv2-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.pv2-col { flex: 1 1 220px; min-width: 215px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; }
.pv2-col-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; color: var(--text); }
.pv2-unit-card {
  border: 1px solid var(--border); border-left: 4px solid var(--text-3); border-radius: var(--r-md);
  background: var(--surface); padding: 10px 12px; margin: 7px 0; cursor: pointer;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.pv2-unit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pv2-unit-card.st-draft { border-left-color: #f59e0b; }
.pv2-unit-card.st-in_progress { border-left-color: var(--c-warn); }
.pv2-unit-card.st-ready { border-left-color: var(--c-ok); }
.pv2-unit-card.st-approved { border-left-color: var(--c-primary); }
.pv2-unit-card.st-needs_changes { border-left-color: var(--c-bad); }
.pv2-uc-title { font-weight: 700; color: var(--text); font-size: 13.5px; }
.pv2-uc-meta { font-size: 12px; color: var(--text-2); margin: 3px 0; }
.pv2-uc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }

.pv2-timeline { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px 12px; background: var(--surface); overflow-x: auto; }
.pv2-tl-months { position: relative; height: 18px; margin-left: 148px; }
.pv2-tl-month { position: absolute; top: 0; font-size: 11px; color: var(--text-3); border-left: 1px solid #eef2f7; padding-left: 3px; height: 100%; }
.pv2-tl-bims { position: relative; height: 16px; margin: 2px 0 6px 148px; }
.pv2-tl-bim {
  position: absolute; top: 0; height: 14px; border-radius: 4px;
  background: #eef2ff; color: #4338ca; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
}
.pv2-tl-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.pv2-tl-name {
  flex: 0 0 140px; max-width: 140px; font-size: 12px; color: #334155; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.pv2-tl-track { position: relative; flex: 1 1 auto; height: 16px; background: #eef1f7; border-radius: var(--r-pill); min-width: 320px; }
.pv2-tl-bar { position: absolute; top: 1px; height: 14px; border-radius: var(--r-pill); cursor: pointer; background: var(--text-3); min-width: 8px; opacity: .92; }
.pv2-tl-bar:hover { opacity: 1; box-shadow: 0 0 0 2px rgba(15, 23, 42, .18); }
.pv2-tl-bar.st-draft { background: #f59e0b; }
.pv2-tl-bar.st-in_progress { background: var(--c-warn); }
.pv2-tl-bar.st-ready { background: var(--c-ok); }
.pv2-tl-bar.st-approved { background: var(--c-primary); }
.pv2-tl-bar.st-needs_changes { background: var(--c-bad); }
.pv2-tl-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #ef4444; }
.pv2-tl-nodates { font-size: 11.5px; color: var(--c-warn-text); }

.pv2-s { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; border: 1px solid transparent; }
.pv2-s-draft { background: var(--c-warn-soft); color: var(--c-warn-text); border-color: var(--c-warn-border); }
.pv2-s-progress { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.pv2-s-complete { background: var(--c-ok-soft); color: var(--c-ok-text); border-color: var(--c-ok-border); }
.pv2-s-approved { background: var(--c-info-soft); color: var(--c-primary-strong); border-color: var(--c-info-border); }
.pv2-s-late { background: var(--c-bad-soft); color: var(--c-bad-text); border-color: var(--c-bad-border); }

.pv2-tlses-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; flex-wrap: wrap; }
.pv2-tlses-sqs { display: flex; gap: 4px; flex-wrap: wrap; }
.pv2-sq { width: 16px; height: 16px; border-radius: 4px; display: inline-block; cursor: pointer; border: 1px solid rgba(2, 6, 23, .12); transition: transform var(--t-fast); }
.pv2-sq:hover { transform: scale(1.3); }

.pv2-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: #475569; align-items: center; }
.pv2-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: -1px; }

.pv2-affbox {
  border: 1px solid var(--c-bad-border); border-left: 4px solid var(--c-bad); background: #fff7f7;
  border-radius: var(--r-md); padding: 10px 12px; margin: 10px 0;
}
.pv2-affrow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px dashed var(--c-bad-border); font-size: 13.5px;
}
.pv2-affrow:first-of-type { border-top: 0; }
.pv2-bulk { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; margin: 8px 0; background: var(--surface-2); }
.pv2-bulk > summary { font-weight: 600; color: #334155; font-size: 13.5px; }

.pv2-ses-table td, .pv2-ses-table th { vertical-align: middle; }
.pv2-ses-title { width: 100%; min-width: 200px; border: 1px solid transparent; background: transparent; padding: 5px 7px; border-radius: var(--r-sm); min-height: 32px; }
.pv2-ses-title:hover { border-color: var(--border); background: var(--surface); }
.pv2-ses-title:focus { border-color: var(--c-primary-border); background: var(--surface); }
.pv2-ses-st { padding: 4px 7px; border-radius: var(--r-sm); min-height: 32px; }
.pv2-ses-mini { max-height: 240px; overflow: auto; border: 1px solid #eef2f7; border-radius: var(--r-sm); }

.pv2-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  background: var(--text); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 4000; pointer-events: none;
  max-width: 86vw;
}
.pv2-toast.show { opacity: 1; transform: translate(-50%, 0); }
.pv2-toast-err { background: var(--c-bad-text); }

.pv2-modal-xl { max-width: 980px !important; width: 96% !important; }
.pv2-modal-pad { padding: 4px 2px; }

.pv2-dx-psy {
  border: 1px solid var(--c-info-border); border-left: 4px solid var(--c-primary); background: var(--c-info-soft);
  border-radius: var(--r-md); padding: 10px 12px; margin: 8px 0; font-size: 13.5px; color: #1e3a8a;
}

.pv2-comp-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-comp { display: inline-block; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 11px; font-size: 12.5px; background: var(--surface-2); color: var(--text-2); }
.pv2-comp-ok { background: var(--c-ok-soft); color: var(--c-ok-text); border-color: var(--c-ok-border); font-weight: 600; }
.pv2-perf-panel { max-height: 52vh; overflow: auto; border: 1px solid #eef2f7; border-radius: var(--r-md); padding: 8px 12px; }
.pv2-perf-group { margin: 8px 0 12px; }
.pv2-perf-list { margin: 4px 0 0; padding: 0; list-style: none; }
.pv2-perf-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-bottom: 1px dashed #eef2f7; font-size: 13px; }
.pv2-perf-item:last-child { border-bottom: 0; }

.pv2-doc-list { list-style: none; margin: 4px 0; padding: 0; font-size: 13.5px; }
.pv2-doc-list li { padding: 2px 0; }
.pv2-ok { color: var(--c-ok-text); font-weight: 700; }
.pv2-x { color: var(--c-bad-text); font-weight: 700; }
.pv2-alert-list { margin-top: 6px; }

.pv2-inherit { border: 1px solid #e0e7ff; border-left: 4px solid #6366f1; background: #f5f7ff; border-radius: var(--r-md); padding: 8px 12px; margin: 8px 0; }
.pv2-inherit > summary { color: #3730a3; }
.pv2-inherit-item { font-size: 13px; margin: 6px 0; color: #1e293b; }
.pv2-inherit-list { margin: 4px 0 4px 18px; padding: 0; font-size: 13px; }
.pv2-docu, .pv2-docedit { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; margin: 8px 0; background: #fafafa; }
.pv2-docu label, .pv2-docedit label { display: block; margin-top: 8px; }
.pv2-docu textarea, .pv2-docedit textarea { width: 100%; }

/* ===== 6. UTILIDADES ===== */
.hidden { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-small); }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt { margin-top: 12px; }
.ok { color: var(--c-ok-text); }
.bad { color: var(--c-bad-text); }
.warn { color: var(--c-warn-text); }
.status { font-weight: 600; }

/* ===== 7. RESPONSIVE ===== */

/* Tablet y móvil: la barra lateral se vuelve cajón (drawer) */
@media (max-width: 1023px) {
  .tabs {
    transform: translateX(-102%);
    transition: transform var(--t-med);
    width: min(300px, 84vw);
    box-shadow: none;
  }
  body.nav-open .tabs { transform: translateX(0); box-shadow: var(--shadow-lg); }
  body.nav-open .nav-overlay { display: block; animation: fadeIn var(--t-med) both; }
  body.nav-open { overflow: hidden; }
  .nav-burger { display: inline-flex; }
  #routeView, .app-main { margin-left: 0; padding-left: 14px; padding-right: 14px; }
  .brand-name { font-size: 14.5px; }
}

/* Móvil */
@media (max-width: 720px) {
  :root { --fs-h1: 21px; --fs-h2: 17.5px; }
  #routeView, .app-main { padding-left: 10px; padding-right: 10px; }
  .card { padding: 14px; border-radius: 12px; }
  #userCategory { display: none; }
  .status { max-width: 40vw; }
  .home-hero { padding: 14px 16px; }
  .ur-modal-backdrop { padding: 2vh 8px; }
  .ur-modal { padding: 14px; border-radius: 14px; }
  .pv2-board { flex-direction: column; }
  .pv2-col { min-width: 0; }
  .pv2-tl-name { flex-basis: 100px; max-width: 100px; }
  .pv2-tl-months, .pv2-tl-bims { margin-left: 108px; }
  .pv2-modal-xl { width: 99% !important; }
  .ms-input-row { grid-template-columns: 1fr; }
  .wb-diff-row { grid-template-columns: 1fr 1fr; }
  .unit-timeline-row { grid-template-columns: 1fr; }
  .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; align-items: stretch; }
  .fc .fc-toolbar-chunk { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
  .qa-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

  /* Tablas → tarjetas (las celdas reciben data-label automáticamente) */
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table { display: block; border: 0; background: transparent; overflow: visible; }
  .table tbody { display: block; }
  .table tbody tr {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    margin: 10px 0; padding: 4px 2px; box-shadow: var(--shadow-sm);
  }
  .table tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    border: 0; border-bottom: 1px dashed var(--border);
    padding: 8px 12px; text-align: right;
  }
  .table tbody td:last-child { border-bottom: 0; }
  .table tbody td::before {
    content: attr(data-label);
    font-weight: 700; font-size: 12px; color: var(--text-2);
    text-align: left; flex: 0 1 auto;
  }
  .table tbody td:not([data-label])::before { content: none; }
  .table tbody td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .table tbody tr:hover td { background: transparent; }
  .table .sticky-col-1, .table .sticky-col-2 {
    position: static !important; min-width: 0 !important; max-width: none !important; box-shadow: none !important;
  }
  .table input, .table select { flex: 1 1 160px; }
  .pv2-ses-title { min-width: 150px; }
}

/* Táctil: objetivos de toque cómodos */
@media (pointer: coarse) {
  button, .btn, .tab, .fc .fc-button { min-height: 40px; }
  .btn-mini { min-height: 34px; padding: 5px 12px; }
  input, select { min-height: 40px; }
  .carousel .dot { width: 12px; height: 12px; }
  .pv2-sq { width: 20px; height: 20px; }
}

/* Escritorio amplio */
@media (min-width: 1600px) {
  :root { --content-max: 1380px; --sidebar-w: 264px; }
}

/* ===== 8. ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== 9. IMPRESIÓN ===== */
@media print {
  body { background: #fff; }
  .app-topbar, .tabs, .nav-overlay, .nav-burger { display: none !important; }
  #routeView, .app-main { margin-left: 0; padding-top: 0; }
  .card { box-shadow: none; }
  .table thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .table, .table tbody, .table tbody tr, .table tbody td { display: revert; }
  .table th, .table td { border: 1px solid #999 !important; color: #111 !important; background: #fff !important; }
  .table thead th { background: #fff !important; color: #000 !important; box-shadow: none !important; text-transform: none; }
  .due, .credit, .neg, .pos, .zero { background: none !important; color: #000 !important; }
}

/* ===== CAL2: Calendarización institucional ===== */
.cal2-pill { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.cal2-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); align-items: center; }
.cal2-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.cal2-imp-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.cal2-imp { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; background: var(--surface); transition: border-color var(--t-fast), background var(--t-fast); }
.cal2-imp input { accent-color: var(--imp); margin: 0 0 2px; width: 15px; height: 15px; }
.cal2-imp:has(input:checked) { border-color: var(--imp); background: var(--imp-soft); box-shadow: inset 3px 0 0 var(--imp); }
.cal2-imp b { color: var(--imp); }
.cal2-year { display: grid; gap: 5px; overflow-x: auto; padding-bottom: 4px; }
.cal2-month-row { display: flex; align-items: center; gap: 8px; }
.cal2-month-label { flex: 0 0 34px; font-size: 11px; font-weight: 800; color: var(--text-2); text-transform: uppercase; }
.cal2-days { display: grid; grid-template-columns: repeat(31, minmax(11px, 1fr)); gap: 3px; flex: 1 1 auto; min-width: 430px; }
.cal2-d { height: 13px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; display: block; transition: transform var(--t-fast); }
.cal2-d:hover { transform: scale(1.3); }
.cal2-d.imp-info { background: #94a3b8; border-color: #94a3b8; }
.cal2-d.imp-mod { background: #d97706; border-color: #d97706; }
.cal2-d.imp-rem { background: #dc2626; border-color: #dc2626; }
.cal2-d.cal2-bim { box-shadow: 0 3px 0 0 #6366f1; }
.cal2-d-off { visibility: hidden; cursor: default; }
.cal2-evrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 4px; border-top: 1px dashed var(--border); font-size: 13.5px; }
.cal2-evrow:first-of-type { border-top: 0; }
@media (max-width: 720px) {
  .cal2-imp-grid { grid-template-columns: 1fr; }
  .cal2-days { min-width: 380px; }
  .cal2-month-label { flex-basis: 28px; }
}

/* ===== INC2: Incidencias V2 ===== */
.inc2-pill { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.inc2-block { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--r-md); padding: 12px 14px; margin-top: 12px; background: var(--surface); }
.inc2-block h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.inc2-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; flex: 0 0 22px; }
.inc2-sev-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.inc2-sev { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--sbd); border-radius: var(--r-pill); background: var(--sbg); color: var(--sfg); font-weight: 700; font-size: 13px; cursor: pointer; }
.inc2-sev input { accent-color: var(--sfg); margin: 0; }
.inc2-sev:has(input:checked) { box-shadow: 0 0 0 2px var(--sfg); }
.inc2-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; margin: 2px 4px 2px 0; }
.inc2-chip small { color: var(--text-2); }
.inc2-chip button { border: 0; background: transparent; cursor: pointer; color: var(--text-2); font-size: 11px; padding: 0 2px; }
.inc2-chip button:hover { color: var(--bad, #b91c1c); }
.inc2-fu-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; margin-top: 8px; background: var(--surface); }
.inc2-parentbox { border: 1px solid #99f6e4; background: #f0fdfa; border-radius: var(--r-md); padding: 10px 12px; }
.ms2-item.sel { background: var(--surface-2); }
@media (max-width: 720px) { .inc2-sev-row { gap: 6px; } .inc2-sev { padding: 6px 9px; font-size: 12px; } }

/* ===== INC2 8.1: selector en modal (alumnos/testigos) ===== */
.inc2-pk { width: min(560px, 94vw); }
.inc2-pk-search { gap: 8px; margin-top: 4px; }
.inc2-pk-list { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-md); max-height: min(46vh, 360px); overflow-y: auto; background: var(--surface); }
.inc2-pk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); cursor: pointer; font-size: 14px; }
.inc2-pk-item:first-child { border-top: 0; }
.inc2-pk-item:hover { background: var(--surface-2); }
.inc2-pk-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; flex: 0 0 16px; }
.inc2-pk-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc2-pk-meta { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.inc2-pk-ext { color: var(--primary); font-weight: 600; }
.inc2-pk-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.inc2-pk-count { color: var(--text-2); font-size: 12.5px; }
.inc2-field-row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.inc2-pillwrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; min-height: 28px; }
@media (max-width: 600px) { .inc2-pk { width: 94vw; } .inc2-pk-list { max-height: 52vh; } }

/* ===== NTF: campana y panel de notificaciones ===== */
.ntf-bell { position: relative; font-size: 17px; line-height: 1; }
.ntf-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ntf-panel { position: fixed; top: 56px; right: 10px; z-index: 1200; width: min(380px, 94vw); max-height: min(70vh, 520px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(15, 23, 42, .18); display: flex; flex-direction: column; overflow: hidden; }
.ntf-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ntf-list { overflow-y: auto; }
.ntf-item { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; background: transparent; border: 0; border-top: 1px solid var(--border); cursor: pointer; font: inherit; }
.ntf-item:first-child { border-top: 0; }
.ntf-item:hover { background: var(--surface-2); }
.ntf-unread { background: #eff6ff; }
.ntf-unread:hover { background: #e0ecff; }
.ntf-ico { font-size: 17px; flex: 0 0 22px; }
.ntf-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ntf-tx b { font-size: 13.5px; }
.ntf-body { color: var(--text-2); font-size: 12.5px; }
.ntf-ago { color: var(--text-2); font-size: 11px; }
@media (max-width: 600px) { .ntf-panel { right: 6px; left: 6px; width: auto; top: 54px; } }

/* ===== MD: tablero «Mi día» ===== */
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.md-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.md-info { border-left-color: #3b82f6; }
.md-warn { border-left-color: #f59e0b; }
.md-bad { border-left-color: #dc2626; }
.md-head { display: flex; align-items: center; gap: 8px; }
.md-ico { font-size: 17px; }
.md-count { margin-left: auto; min-width: 24px; text-align: center; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-2); font-weight: 800; font-size: 13px; }
.md-count-warn { background: #fffbeb; color: #b45309; }
.md-count-bad { background: #fef2f2; color: #b91c1c; }
.md-count-info { background: #eff6ff; color: #1d4ed8; }
.md-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.md-empty { color: var(--text-2); font-size: 13px; padding: 2px 0 4px; }
.md-flag { color: #b45309; font-size: 11.5px; font-weight: 700; }
.md-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.md-skel { gap: 10px; }
.md-skel-bar { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), #eef2f7, var(--surface-2)); background-size: 200% 100%; animation: mdSkel 1.2s infinite; }
.md-skel-bar.w60 { width: 60%; }
@keyframes mdSkel { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }

/* ===== GR: Notas (planilla y consolidado) ===== */
.gr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gr-sel { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font: inherit; max-width: 320px; }
.gr-bims { display: flex; gap: 4px; }
.gr-bim { padding: 6px 11px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill); cursor: pointer; font: inherit; font-weight: 700; font-size: 12.5px; }
.gr-bim.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.gr-tabs { display: flex; gap: 4px; }
.gr-tab { padding: 6px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 13px; }
.gr-tab.on { background: var(--surface-2); font-weight: 700; }
.gr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.gr-newform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px; border: 1px dashed var(--border); border-radius: var(--r-sm); margin-bottom: 8px; background: var(--surface-2); }
.gr-newform input, .gr-newform select { padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; background: var(--surface); }
#grNfTitle { min-width: 240px; flex: 1; }
.gr-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.gr-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.gr-table th, .gr-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 6px 8px; text-align: center; background: var(--surface); }
.gr-table thead th { background: var(--surface-2); position: sticky; top: 0; z-index: 2; }
.gr-n { width: 34px; color: var(--text-2); }
.gr-name { text-align: left !important; min-width: 170px; max-width: 230px; position: sticky; left: 0; z-index: 1; font-weight: 600; }
.gr-table thead .gr-name { z-index: 3; }
.gr-colh { min-width: 96px; vertical-align: top; }
.gr-colt { font-weight: 700; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 auto; }
.gr-comp { display: block; font-size: 10.5px; color: #1d4ed8; font-weight: 600; margin-top: 2px; }
.gr-comp-no { color: var(--text-2); font-weight: 400; }
.gr-instr { font-size: 11px; }
.gr-colops { display: flex; gap: 2px; justify-content: center; margin-top: 3px; }
.gr-mini { border: 0; background: transparent; cursor: pointer; font-size: 12px; padding: 1px 4px; border-radius: 4px; }
.gr-mini:hover { background: var(--surface-2); }
.gr-in { width: 58px; padding: 4px 5px; border: 1px solid var(--border); border-radius: 6px; text-align: center; font: inherit; font-size: 13px; }
.gr-in.gr-dirty { border-color: #f59e0b; background: #fffbeb; }
.gr-avg { font-weight: 800; }
.gr-cons { white-space: nowrap; }
.gr-badge { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: var(--r-pill); font-weight: 800; font-size: 11.5px; }
.gr-AD { background: #dcfce7; color: #15803d; }
.gr-A { background: #dbeafe; color: #1d4ed8; }
.gr-B { background: #fef3c7; color: #b45309; }
.gr-C { background: #fee2e2; color: #b91c1c; }
.gr-none { background: var(--surface-2); color: var(--text-2); }
@media (max-width: 700px) { .gr-name { min-width: 130px; } .gr-sel { max-width: 100%; width: 100%; } }
.gr-cell { padding: 4px 6px; }
.btn-primary { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn-primary:hover { background: #1e40af; border-color: #1e40af; color: #fff; }

/* ===== GR v2: motor de evaluación ===== */
.gr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; }
.gr-chip { padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.gr-chip-warn { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.gr-sel-sm { max-width: 230px; font-size: 12.5px; padding: 6px 8px; }
.gr-sem { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.gr-sem-green { background: #16a34a; }
.gr-sem-yellow { background: #f59e0b; }
.gr-sem-red { background: #dc2626; }
.gr-hsub { font-size: 10.5px; color: var(--text-2); margin-top: 1px; }
.gr-hbadges { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin-top: 3px; }
.gr-hb { font-size: 10px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); }
.gr-hb-comp { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; font-weight: 700; }
.gr-hb-none { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.gr-hb-st { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.gr-open { margin-top: 3px; font-size: 10.5px; color: var(--text-2); }
.gr-insel { width: 60px; padding: 4px 2px; }
.gr-ck { white-space: nowrap; }
.gr-ck i { font-style: normal; color: var(--text-2); font-size: 11px; }
.gr-inck { width: 46px; }
.gr-fbdot { font-size: 10px; margin-right: 2px; cursor: help; }
.gr-new2 { display: block; }
.gr-nf-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.gr-nf-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.gr-nf-row input, .gr-nf-row select { padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; background: var(--surface); min-width: 120px; }
.gr-nf-grow { flex: 1; min-width: 220px; }
.gr-nf-grow input { width: 100%; }
.gr-nf-sem { font-size: 12px; margin-top: 2px; }
.gr-nf-issue { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); margin: 2px 2px 0 0; font-size: 11.5px; }
.gr-nf-yellow { background: #fef3c7; color: #92400e; }
.gr-nf-red { background: #fee2e2; color: #b91c1c; }
.gr-nf-info { background: var(--surface-2); color: var(--text-2); }
.gr-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,.12); z-index: 60; display: flex; flex-direction: column; }
.gr-dw-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.gr-dw-body { overflow-y: auto; padding: 12px 14px; }
.gr-dw-sec { margin-bottom: 16px; }
.gr-dw-sec label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.gr-dw-sec label input, .gr-dw-sec label select { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; background: var(--surface); }
.gr-dw-sec .gr-nf-row label { display: flex; }
.gr-fb-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px; }
.gr-fb-row { display: flex; gap: 8px; align-items: center; padding: 3px 2px; }
.gr-fb-name { min-width: 150px; max-width: 150px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-fb-name i { color: var(--text-2); font-weight: 400; }
.gr-fb-in { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: 12.5px; }
.gr-table-cons td { text-align: left; }
.gr-cons { white-space: nowrap; font-size: 12px; }
.gr-cons > span { margin-right: 8px; }
.gr-cons-empty { background: #fff7ed; }
.gr-warn-txt { color: #b45309; font-weight: 700; font-size: 11.5px; }
.gr-fin { white-space: nowrap; }
.gr-final { padding: 3px 4px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; }
.gr-cmt { opacity: .55; }
.gr-cmt.gr-has { opacity: 1; }
.gr-closed { padding: 9px 12px; border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; border-radius: var(--r-sm); font-weight: 600; margin-bottom: 8px; }
@media (max-width: 760px) { .gr-fb-name { min-width: 110px; max-width: 110px; } }

/* ===== Fix global: el atributo hidden siempre gana a cualquier display de clase
   (corrige el panel de detalle de Notas, el panel de notificaciones, el contador
   de la campana y el campo "N° criterios" que quedaban visibles) ===== */
[hidden] { display: none !important; }

/* ===== A4: buscador global + ficha 360° ===== */
.gsearch { position: relative; flex: 0 1 360px; margin: 0 12px; min-width: 0; }
.gsearch #gsInput { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); font: inherit; font-size: 13px; background: var(--surface-2); }
.gsearch #gsInput:focus { outline: none; background: var(--surface); border-color: var(--brand, #2563eb); }
.gs-results { position: absolute; top: 110%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(15,23,42,.18); z-index: 1300; max-height: min(64vh, 420px); overflow-y: auto; padding: 4px; }
.gs-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer; }
.gs-item:hover { background: var(--surface-2); }
.gs-nm { font-weight: 700; font-size: 13px; }
.gs-meta { font-size: 11.5px; color: var(--text-2); }
.gs-empty { padding: 10px 12px; color: var(--text-2); font-size: 13px; }
.sp-head { display: flex; align-items: center; gap: 14px; }
.sp-ava { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sp-hmain { flex: 1; min-width: 0; }
.sp-name { margin: 0 0 4px; font-size: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-hmeta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.sp-chip { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--r-pill); }
.sp-alerts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.sp-alert { padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; }
.sp-red { background: #fee2e2; color: #b91c1c; }
.sp-yellow { background: #fef3c7; color: #92400e; }
.sp-ok { background: #dcfce7; color: #15803d; }
.sp-gray { background: var(--surface-2); color: var(--text-2); }
.sp-bad { background: #fee2e2; color: #b91c1c; }
.sp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0; border-bottom: 1px solid var(--border); }
.sp-tab { padding: 8px 14px; border: 0; background: transparent; border-bottom: 2px solid transparent; font: inherit; font-weight: 600; font-size: 13px; color: var(--text-2); cursor: pointer; }
.sp-tab.on { color: var(--brand, #2563eb); border-bottom-color: var(--brand, #2563eb); }
.sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sp-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.sp-kpis-4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.sp-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.sp-kpi-ok { border-left: 4px solid #16a34a; }
.sp-kpi-warn { border-left: 4px solid #f59e0b; }
.sp-kpi-bad { border-left: 4px solid #dc2626; }
.sp-kpi-gray { border-left: 4px solid var(--border); opacity: .75; }
.sp-kpi-t { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.sp-kpi-v { font-size: 24px; font-weight: 800; line-height: 1.2; }
.sp-kpi-s { font-size: 11px; color: var(--text-2); }
.sp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-tablewrap { overflow-x: auto; }
.sp-att { padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; }
.sp-att-present { background: #dcfce7; color: #15803d; }
.sp-att-late { background: #fef3c7; color: #92400e; }
.sp-att-absent { background: #fee2e2; color: #b91c1c; }
.sp-sev { padding: 2px 9px; border-radius: var(--r-pill); background: #fef3c7; color: #92400e; font-size: 11.5px; font-weight: 700; }
.sp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-sib { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 1023px) { .gsearch { flex-basis: 200px; } }
@media (max-width: 760px) { .sp-kpis-3 { grid-template-columns: 1fr; } .sp-grid2 { grid-template-columns: 1fr; } .gsearch { display: none; } }

/* ===== A5: aulas y tutores ===== */
.hr-assign { display: flex; gap: 8px; align-items: center; }
.hr-sel { flex: 1; min-width: 160px; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: 13px; background: var(--surface); }
.hr-save { white-space: nowrap; }


/* =====================================================================
   A6 · Mi horario — estilos (pega en styles.css o enlaza este archivo)
   Paleta alineada con el portal (verde/ámbar/rojo/azul/índigo).
   ===================================================================== */
.mh-wrap { display: flex; flex-direction: column; gap: 14px; }

.mh-teacher { min-width: 200px; }

.mh-alerts { display: flex; flex-direction: column; gap: 6px; }
.mh-alert {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 10px; padding: 8px 12px; font-size: 13px;
}

/* ---------- tarjeta HOY ---------- */
.mh-today { padding: 14px 16px; }
.mh-today-head { display: flex; align-items: baseline; gap: 8px; }
.mh-today-grid {
  display: grid; grid-template-columns: auto auto 1fr; gap: 18px;
  align-items: center; margin-top: 10px;
}
.mh-today-grid > div { display: flex; flex-direction: column; }
.mh-kpi { font-size: 28px; font-weight: 700; line-height: 1; }
.mh-kpi.neg { color: #dc2626; }
.mh-next { gap: 2px; }
.mh-today-events { margin-top: 10px; font-size: 13px; color: #374151; }
.mh-quick { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- grilla semanal ---------- */
.mh-grid-wrap { overflow-x: auto; }
table.mh-grid { width: 100%; border-collapse: separate; border-spacing: 6px; }
table.mh-grid th { text-align: center; font-weight: 600; padding: 6px 4px; vertical-align: top; }
table.mh-grid .mh-th-time { width: 64px; text-align: right; color: #6b7280; vertical-align: top; padding-top: 12px; }
table.mh-grid .mh-th-today { color: #2563eb; }
table.mh-grid td { vertical-align: top; min-width: 150px; }

.mh-empty { padding: 18px; }
.mh-events-only, .mh-today-events { line-height: 1.6; }

/* ---------- bloque de clase ---------- */
.mh-block {
  border: 1px solid #e5e7eb; border-left: 4px solid #16a34a;
  border-radius: 10px; padding: 8px 10px; background: #fff;
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px;
}
.mh-block-top { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.mh-grade { color: #6b7280; font-size: 12px; white-space: nowrap; }
.mh-time { color: #6b7280; }
.mh-line { font-size: 12px; color: #374151; }
.mh-tag {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe;
  border-radius: 6px; padding: 0 5px; margin-right: 4px;
}
.mh-miss { color: #b45309; font-weight: 600; }
.mh-affected { font-size: 12px; color: #991b1b; margin-top: 2px; }
.mh-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }

/* estados */
.mh-block.mh-pending   { border-left-color: #f59e0b; background: #fffdf5; }
.mh-block.mh-special   { border-left-color: #d97706; background: #fff7ed; }
.mh-block.mh-cancelled { border-left-color: #dc2626; background: #fef2f2; opacity: .85; }
.mh-block.mh-cancelled .mh-block-top b { text-decoration: line-through; color: #991b1b; }
.mh-block.mh-now { box-shadow: 0 0 0 2px #2563eb33; border-left-color: #2563eb; }

/* leyenda */
.mh-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #6b7280; }
.mh-legend .mh-i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.mh-i-normal { background: #16a34a; }
.mh-i-cancelled { background: #dc2626; }
.mh-i-special { background: #d97706; }
.mh-i-pending { background: #f59e0b; }
.mh-i-now { background: #2563eb; }

/* ---------- móvil: la grilla pasa a lista por día ---------- */
@media (max-width: 760px) {
  table.mh-grid, table.mh-grid thead, table.mh-grid tbody,
  table.mh-grid th, table.mh-grid td, table.mh-grid tr { display: block; width: 100%; }
  table.mh-grid thead { display: none; }
  table.mh-grid .mh-th-time { text-align: left; padding: 8px 0 0; }
  table.mh-grid td { min-width: 0; }
  .mh-today-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Menú lateral por rol — estilos (pegar al final de styles.css)
   ===================================================================== */

/* Ocultamiento por configuración: gana a estilos inline y al atributo hidden */
.nv-hidden { display: none !important; }

/* ---------- Editor /admin/nav ---------- */
.nv-wrap { display: flex; flex-direction: column; gap: 12px; }
.nv-card { padding: 12px 14px; }
.nv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px; cursor: pointer; border-radius: 8px;
}
.nv-row:hover { background: #f8fafc; }
.nv-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2563eb; }
.nv-strong { font-weight: 600; }
.nv-items { margin-top: 4px; padding-left: 6px; display: flex; flex-direction: column; }
#nvRole { min-width: 200px; }


/* =====================================================================
   Comisiones · Mesa de trabajo — estilos (pegar al final de styles.css)
   ===================================================================== */
.cm-wrap { display: flex; flex-direction: column; gap: 12px; }
.cm-card { padding: 14px 16px; }
.cm-search { min-width: 200px; }
.cm-type { min-width: 160px; }

.cm-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-chip {
  border: 1px solid #e5e7eb; background: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.cm-chip.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.cm-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cm-commission { display: flex; flex-direction: column; gap: 8px; }
.cm-c-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cm-c-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.cm-c-desc { min-height: 32px; }
.cm-c-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #374151; }
.cm-c-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

.cm-pill {
  display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; margin-right: 3px;
}
.cm-p-pend   { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.cm-p-prog   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.cm-p-rev    { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.cm-p-done   { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.cm-p-cancel { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }
.cm-p-over   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.cm-p-vis    { background: #f8fafc; }
.cm-over { color: #b91c1c; font-weight: 600; }
.cm-row-over td { background: #fff7f7; }

.cm-sec-title { font-weight: 700; margin-bottom: 8px; }
.cm-kpis { display: flex; gap: 22px; flex-wrap: wrap; }
.cm-kpis > div { display: flex; flex-direction: column; }
.cm-kpi { font-size: 26px; font-weight: 700; line-height: 1.1; }
.cm-list { margin: 4px 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-summary { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.cm-actions-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

.cm-mytasks { display: flex; flex-direction: column; gap: 8px; }
.cm-mytask {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid #eef2f7; border-radius: 10px; padding: 8px 10px;
}
.cm-mytask-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.cm-files { display: flex; flex-direction: column; gap: 8px; }
.cm-file {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid #eef2f7; border-radius: 10px; padding: 8px 10px;
}

/* ---------- modal ---------- */
.cm-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 12px; z-index: 1000; overflow: auto;
}
.cm-modal { width: min(720px, 100%); max-height: 90vh; overflow: auto; padding: 14px 16px; background: #fff; }
.cm-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

/* ---------- formularios ---------- */
.cm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cm-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.cm-form input, .cm-form select, .cm-form textarea {
  font-weight: 400; padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;
}
.cm-form .cm-full { grid-column: 1 / -1; }
.cm-inline { display: flex; gap: 4%; }

/* acuerdos */
.cm-ag { border: 1px solid #eef2f7; border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.cm-ag textarea { width: 100%; box-sizing: border-box; }
.cm-ag-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.cm-ag-meta select, .cm-ag-meta input { padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }

/* ---------- móvil ---------- */
@media (max-width: 760px) {
  .cm-summary { grid-template-columns: 1fr; }
  .cm-form { grid-template-columns: 1fr; }
  .cm-mytask { flex-direction: column; align-items: flex-start; }
  .cm-mytask-meta { white-space: normal; }
}

/* =====================================================================
   Comisiones v2 — estilos ADICIONALES (pegar al final de styles.css,
   después de los estilos v1 de Comisiones)
   ===================================================================== */

/* Kanban */
.cm-kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.cm-kan-col {
  flex: 1 0 220px; min-width: 220px; background: #f8fafc;
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.cm-kan-head { font-weight: 700; font-size: 13px; padding: 2px 4px; }
.cm-kan-col.cm-kan-hover { background: #eff6ff; border-color: #93c5fd; }
.cm-kan-card {
  background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #2563eb;
  border-radius: 10px; padding: 8px 10px; cursor: grab;
  display: flex; flex-direction: column; gap: 3px;
}
.cm-kan-card.cm-dragging { opacity: .5; }
.cm-kan-card.cm-kan-over { border-left-color: #dc2626; background: #fff7f7; }
.cm-kan-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Próximas reuniones */
.cm-meets { display: flex; flex-direction: column; gap: 6px; }
.cm-meet {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px solid #eef2f7; border-radius: 10px; padding: 7px 10px;
}
.cm-meet .mono { color: #1d4ed8; font-weight: 600; }
.cm-meet button { margin-left: auto; }

/* Detalle de tarea + comentarios */
.cm-det { display: flex; flex-direction: column; gap: 8px; }
.cm-det-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cm-comments { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; }
.cm-comment {
  border: 1px solid #eef2f7; border-radius: 10px; padding: 7px 10px;
  background: #fafbfc; font-size: 14px;
}
.cm-det input#dNew {
  padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;
}

@media (max-width: 760px) {
  .cm-kan-col { flex-basis: 78vw; min-width: 78vw; }
}



/* =====================================================================
   Comisiones v2 — estilos ADICIONALES (pegar al final de styles.css,
   después de los estilos v1 de Comisiones)
   ===================================================================== */

/* Kanban */
.cm-kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.cm-kan-col {
  flex: 1 0 220px; min-width: 220px; background: #f8fafc;
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.cm-kan-head { font-weight: 700; font-size: 13px; padding: 2px 4px; }
.cm-kan-col.cm-kan-hover { background: #eff6ff; border-color: #93c5fd; }
.cm-kan-card {
  background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #2563eb;
  border-radius: 10px; padding: 8px 10px; cursor: grab;
  display: flex; flex-direction: column; gap: 3px;
}
.cm-kan-card.cm-dragging { opacity: .5; }
.cm-kan-card.cm-kan-over { border-left-color: #dc2626; background: #fff7f7; }
.cm-kan-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Próximas reuniones */
.cm-meets { display: flex; flex-direction: column; gap: 6px; }
.cm-meet {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px solid #eef2f7; border-radius: 10px; padding: 7px 10px;
}
.cm-meet .mono { color: #1d4ed8; font-weight: 600; }
.cm-meet button { margin-left: auto; }

/* Detalle de tarea + comentarios */
.cm-det { display: flex; flex-direction: column; gap: 8px; }
.cm-det-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cm-comments { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; }
.cm-comment {
  border: 1px solid #eef2f7; border-radius: 10px; padding: 7px 10px;
  background: #fafbfc; font-size: 14px;
}
.cm-det input#dNew {
  padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;
}

@media (max-width: 760px) {
  .cm-kan-col { flex-basis: 78vw; min-width: 78vw; }
}

/* ===== v3 · Integración con Calendarización ===== */
.cm-approve-panel { border-left: 4px solid #d97706; }
.cm-props { display: flex; flex-direction: column; gap: 8px; }
.cm-prop {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  border: 1px solid #eef2f7; border-radius: 10px; padding: 8px 10px;
}
.cm-prop-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 760px) {
  .cm-prop { flex-direction: column; }
}

/* ===== v4 · Selector de personas, grados afectados, progreso ===== */
.cm-pk { position: relative; }
.cm-pk-btn {
  width: 100%; text-align: left; padding: 7px 9px; font-size: 14px; cursor: pointer;
  border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
}
.cm-pk-count { color: #2563eb; font-weight: 700; }
.cm-pk-panel {
  position: absolute; z-index: 50; left: 0; right: 0; margin-top: 4px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12); padding: 8px;
}
.cm-pk-search { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 6px; }
.cm-pk-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
.cm-pk-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.cm-pk-row:hover { background: #f8fafc; }
.cm-pk-row span:first-of-type { font-weight: 600; }
.cm-pk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cm-pk-chip {
  font-size: 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8;
  border-radius: 999px; padding: 2px 8px;
}
.cm-pk-chip a { cursor: pointer; margin-left: 4px; color: #1d4ed8; }
.cm-pk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.cm-grades { border: 1px dashed #fbbf24; background: #fffdf5; border-radius: 10px; padding: 10px; }
.cm-grades-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cm-grade-chk {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
  border: 1px solid #e5e7eb; border-radius: 999px; padding: 3px 10px; cursor: pointer; background: #fff;
}
.cm-grade-chk input:checked + *, .cm-grade-chk:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.cm-grade-all { font-weight: 700; }

.cm-prog { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.cm-prog-bar { height: 100%; background: #16a34a; border-radius: 999px; transition: width .3s; }

@media (max-width: 760px) { .cm-pk-grid { grid-template-columns: 1fr; } }

/* ===== "Ver como" · barra de simulación ===== */
#impBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  background: repeating-linear-gradient(45deg, #b45309, #b45309 14px, #92400e 14px, #92400e 28px);
  color: #fff; padding: 8px 14px; font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#impBar .imp-dot { width: 10px; height: 10px; border-radius: 50%; background: #fde68a; flex: none; animation: impPulse 1.4s infinite; }
@keyframes impPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#impBar .imp-txt { flex: 1; }
#impBar button {
  flex: none; background: #fff; color: #92400e; border: 0; border-radius: 8px;
  padding: 5px 12px; font-weight: 700; cursor: pointer;
}
#impBar button:hover { background: #fde68a; }
/* empuja la app hacia abajo para no tapar la barra */
body.imp-on { padding-top: 44px; }
body.imp-on .app-topbar { top: 44px; }
@media (max-width: 760px) { #impBar { font-size: 12px; } #impBar .imp-txt b { display: inline; } }

/* ===== Finanzas (1.1) ===== */
.fin-search { position: relative; margin-top: 10px; }
.fin-search > input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 9px; font-size: 14px; }
.fin-results { position: absolute; z-index: 40; left: 0; right: 0; margin-top: 4px; background: #fff; border: 1px solid #d1d5db; border-radius: 10px; box-shadow: 0 10px 24px rgba(15,23,42,.12); max-height: 280px; overflow: auto; }
.fin-res { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.fin-res:hover { background: #f8fafc; }
.fin-detail { margin-top: 14px; }
.fin-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.fin-plan { padding: 12px; border-radius: 12px; margin-bottom: 14px; }
.fin-cancel { opacity: .5; text-decoration: line-through; }
.fin-cancel-row { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 8px 0; }
.fin-cal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0; }
.fin-cal-grid label, .fin-plan label { font-size: 13px; }
@media (max-width: 760px) { .fin-cal-grid { grid-template-columns: 1fr; } }


/* ===== Grupos colapsables del sidebar (nav) ===== */
.nav-group-label { cursor: pointer; user-select: none; }
.nav-group-label::after { content: " \25BE"; font-size: 10px; opacity: .55; margin-left: 4px; }
.nav-group.nv-collapsed > .nav-group-label::after { content: " \25B8"; }
.nav-group.nv-collapsed > .tab { display: none !important; }
.nav-group-label:hover { color: var(--text); }
/* ===== fin grupos colapsables ===== */


/* ===== Permisos por usuario: estados (heredado / extra / quitado) ===== */
.ur-extra { background: #f0fdf4; border-color: #bbf7d0; }
.ur-denied { background: #fef2f2; border-color: #fecaca; opacity: .9; }
.ur-denied, .ur-denied * { text-decoration: line-through; }
/* ===== fin estados de permisos ===== */