@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =========================================================
   PANEL DE CURSADA — sistema de diseño
   ---------------------------------------------------------
   Identidad: azul marino institucional + serif en los títulos
   (tono académico/jurídico), superficies limpias y un único
   acento cálido (dorado) usado con moderación.
   Todo sale de estos tokens: colores, radios, sombras, escala
   tipográfica y alturas de controles.
   ========================================================= */
:root{
  /* Neutros */
  --bg:#f4f5f8; --surface:#ffffff; --surface-2:#f7f8fa; --surface-3:#eef1f5;
  --ink:#131b26; --ink-soft:#4e5a69; --ink-faint:#8691a0;
  --line:#e1e5eb; --line-soft:#edf0f4; --line-strong:#cdd3dc;
  /* Marca */
  --accent:#1f3d68; --accent-hover:#18325a; --accent-soft:#e9eff8; --accent-ink:#142b4d;
  --gold:#b0822f; --gold-soft:#f6eedf;
  /* Estados */
  --good:#23845a; --good-soft:#e5f3ec;
  --danger:#c2453e; --danger-soft:#fbeceb;
  --warn:#b7791f; --warn-soft:#fbf1e1;
  --celeste:#2f93d1; --celeste-ink:#1c6798; --celeste-soft:#e6f2fa;
  /* Áreas de puntos electivos */
  --area-procesal:#2c7a85; --area-privado:#7b5aa6; --area-publico:#a97a2e;
  --area-penal:#af5050; --area-filosofia:#4c63a6; --area-sociales:#a2577f;
  --area-empresarial:#5f7d2e; --area-cbc:#8b929c;
  /* Horario */
  --c-trabajo-bg:#eef0f3;
  /* Colores de cada materia */
  --mat-0:#3f7cad; --mat-1:#7b5aa6; --mat-2:#b3577b; --mat-3:#b8842f; --mat-4:#2c7a85;
  --mat-5:#5d7a3a; --mat-6:#a66550; --mat-7:#4c63a6; --mat-8:#2f8f6f; --mat-9:#9c5fa0;

  /* Forma y profundidad */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 16px -8px rgba(16,24,40,.12);
  --shadow-md:0 2px 6px rgba(16,24,40,.06), 0 12px 28px -12px rgba(16,24,40,.20);
  --shadow-lg:0 30px 70px -20px rgba(10,18,32,.45);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);

  /* Tipografía */
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px;

  /* Controles */
  --h-ctl:38px; --h-btn:36px; --h-btn-sm:32px;
  /* Movimiento: una sola curva y tres duraciones para toda la app */
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:.14s; --t-med:.22s; --t-slow:.6s;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f141b; --surface:#171e28; --surface-2:#1c2430; --surface-3:#232d3a;
    --ink:#e7ebf0; --ink-soft:#a6afbb; --ink-faint:#76808e;
    --line:#29333f; --line-soft:#222b36; --line-strong:#3a4553;
    --accent:#86abdd; --accent-hover:#9bbbe6; --accent-soft:#1d2c42; --accent-ink:#d3e2f5;
    --gold:#d6aa5c; --gold-soft:#2e2718;
    --good:#5fc08c; --good-soft:#15291f; --danger:#e08680; --danger-soft:#2f1b1b;
    --warn:#dfae5c; --warn-soft:#2d2415;
    --celeste:#63c2f0; --celeste-ink:#a8dcf5; --celeste-soft:#152a37;
    --area-procesal:#5fb4bd; --area-privado:#ab8fd6; --area-publico:#d7a655;
    --area-penal:#d88484; --area-filosofia:#8ba0dd; --area-sociales:#cf8aac;
    --area-empresarial:#a4c26a; --area-cbc:#7a8290;
    --c-trabajo-bg:#212a35;
    --mat-0:#7fb2dd; --mat-1:#ab8fd6; --mat-2:#d98aa8; --mat-3:#d7a655; --mat-4:#5fb4bd;
    --mat-5:#9fc077; --mat-6:#d99a86; --mat-7:#8ba0dd; --mat-8:#6bcf9f; --mat-9:#cf8ed1;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.28), 0 6px 18px -10px rgba(0,0,0,.5);
    --shadow-md:0 2px 6px rgba(0,0,0,.3), 0 14px 30px -12px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#0f141b; --surface:#171e28; --surface-2:#1c2430; --surface-3:#232d3a;
  --ink:#e7ebf0; --ink-soft:#a6afbb; --ink-faint:#76808e;
  --line:#29333f; --line-soft:#222b36; --line-strong:#3a4553;
  --accent:#86abdd; --accent-hover:#9bbbe6; --accent-soft:#1d2c42; --accent-ink:#d3e2f5;
  --gold:#d6aa5c; --gold-soft:#2e2718;
  --good:#5fc08c; --good-soft:#15291f; --danger:#e08680; --danger-soft:#2f1b1b;
  --warn:#dfae5c; --warn-soft:#2d2415;
  --celeste:#63c2f0; --celeste-ink:#a8dcf5; --celeste-soft:#152a37;
  --area-procesal:#5fb4bd; --area-privado:#ab8fd6; --area-publico:#d7a655;
  --area-penal:#d88484; --area-filosofia:#8ba0dd; --area-sociales:#cf8aac;
  --area-empresarial:#a4c26a; --area-cbc:#7a8290;
  --c-trabajo-bg:#212a35;
  --mat-0:#7fb2dd; --mat-1:#ab8fd6; --mat-2:#d98aa8; --mat-3:#d7a655; --mat-4:#5fb4bd;
  --mat-5:#9fc077; --mat-6:#d99a86; --mat-7:#8ba0dd; --mat-8:#6bcf9f; --mat-9:#cf8ed1;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.28), 0 6px 18px -10px rgba(0,0,0,.5);
  --shadow-md:0 2px 6px rgba(0,0,0,.3), 0 14px 30px -12px rgba(0,0,0,.55);
}
/* En modo oscuro el texto sobre el acento va oscuro (el acento es claro). */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --on-accent:#0f1a2b; } }
:root{ --on-accent:#ffffff; }
:root[data-theme="dark"]{ --on-accent:#0f1a2b; }

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box;}
[v-cloak]{display:none!important;}
html,body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:var(--fs-base);
  line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;}
button{font-family:inherit;}
a{color:var(--accent);}
a:hover{color:var(--accent-hover);}
.mono{font-family:var(--font-mono);}
::selection{background:color-mix(in srgb, var(--accent) 22%, transparent);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* Íconos (v-icon dibuja el SVG de Lucide adentro) */
.ico{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex:none; line-height:0;}
.ico svg{width:100%; height:100%; stroke-width:2;}

#app{display:flex; min-height:100vh;}

/* =========================================================
   BARRA LATERAL
   ========================================================= */
.sidebar{
  width:236px; flex:none; background:var(--surface); border-right:1px solid var(--line);
  padding:22px 14px 16px; display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:11px; padding:0 8px 20px; margin-bottom:6px; border-bottom:1px solid var(--line-soft);}
.brand-mark{width:36px; height:36px; flex:none; border-radius:10px; background:var(--accent); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:700; font-size:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow-sm);}
:root[data-theme="dark"] .brand-mark{color:#1b2533;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand-mark{color:#1b2533;} }
.eyebrow{text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; color:var(--ink-faint); font-weight:600; margin:0 0 1px;}
.brand h1{font-family:var(--font-serif); font-size:17px; font-weight:600; margin:0; letter-spacing:-.01em; line-height:1.2; color:var(--ink);}

.nav-btn{
  position:relative; display:flex; align-items:center; gap:11px; border:none; background:none; text-align:left; cursor:pointer;
  height:38px; padding:0 12px; border-radius:var(--r-md); color:var(--ink-soft); font-size:var(--fs-base); font-weight:500;
  transition:background .12s, color .12s;
}
.nav-btn .ico{width:17px; height:17px; opacity:.85;}
.nav-btn:hover{background:var(--surface-2); color:var(--ink);}
.nav-btn.active{background:var(--accent-soft); color:var(--accent-ink); font-weight:600;}
.nav-btn.active .ico{opacity:1; color:var(--accent);}
.nav-btn.active::before{content:''; position:absolute; left:-14px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accent);}

/* Deshacer / Rehacer */
.undo-bar{margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:2px;}
.undo-btn{display:flex; align-items:center; gap:10px; border:none; background:none; text-align:left; cursor:pointer;
  height:34px; padding:0 12px; border-radius:var(--r-sm); color:var(--ink-soft); font-size:var(--fs-md); font-weight:500;}
.undo-btn .ico{width:15px; height:15px;}
.undo-btn span:not(.undo-n){flex:1; min-width:0;}
.undo-btn:hover:not(:disabled){background:var(--surface-2); color:var(--ink);}
.undo-btn:disabled{opacity:.35; cursor:default;}
.undo-n{flex:none; font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); background:var(--surface-3); border-radius:var(--r-pill); padding:1px 7px;}
.undo-hint{margin:6px 12px 0; font-size:10.5px; color:var(--ink-faint); font-family:var(--font-mono);}

/* Cuenta de Google */
.account-box{display:flex; align-items:center; gap:10px; margin:4px 0 12px; padding:9px 10px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2);}
.account-box--login{cursor:pointer; font-size:var(--fs-md); font-weight:600; color:var(--accent); text-align:left; transition:background .12s, border-color .12s;}
.account-box--login:hover{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, var(--line));}
.account-avatar{width:30px; height:30px; border-radius:var(--r-pill); flex:none; object-fit:cover;}
.account-avatar--fallback{display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:13px;}
.account-info{flex:1; min-width:0;}
.account-name{margin:0; font-size:var(--fs-md); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.account-email{margin:0; font-size:var(--fs-xs); color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.account-signout{flex:none; border:none; background:none; cursor:pointer; color:var(--ink-faint); padding:6px; border-radius:var(--r-sm); display:flex;}
.account-signout:hover{background:var(--danger-soft); color:var(--danger);}
.account-signout .ico{width:15px; height:15px;}

/* =========================================================
   PANTALLAS DE ENTRADA (login y perfil obligatorio)
   ========================================================= */
.login-gate{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg);}
.login-card{width:100%; max-width:380px; text-align:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:36px 30px 30px; box-shadow:var(--shadow-md);}
.login-card--form{max-width:440px;}
.login-card--form .form-grid{margin-top:22px;}
.login-icon{width:54px; height:54px; margin:0 auto 18px; border-radius:15px; background:var(--accent); color:var(--gold);
  font-family:var(--font-serif); font-weight:700; font-size:28px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);}
.login-card h1{font-family:var(--font-serif); font-size:24px; font-weight:600; margin:0 0 8px; letter-spacing:-.01em;}
.login-card p{font-size:var(--fs-base); color:var(--ink-soft); line-height:1.55; margin:0 0 24px;}
.login-btn{width:100%; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-size:var(--fs-base); font-weight:600; height:44px; padding:0 16px;
  border-radius:var(--r-md); cursor:pointer; box-shadow:var(--shadow-sm); transition:background .12s, border-color .12s;}
.login-btn:hover:not(:disabled){background:var(--surface-2);}
.login-btn:disabled{opacity:.6; cursor:default;}
.login-btn--primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); margin-top:18px;}
.login-btn--primary:hover:not(:disabled){background:var(--accent-hover); border-color:var(--accent-hover);}
.login-card--form .form-field > label{text-align:left;}
.login-hint{color:var(--danger); font-size:var(--fs-sm); margin:14px 0 0;}
.login-skip{display:block; width:100%; margin-top:16px; border:none; background:none; cursor:pointer; color:var(--ink-faint); font-size:var(--fs-sm); text-decoration:underline; text-underline-offset:3px;}
.login-skip:hover{color:var(--ink-soft);}

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */
.main{flex:1; min-width:0; padding:36px 44px 72px;}
.view{max-width:960px; margin:0 auto; animation:view-in .18s ease-out;}
@keyframes view-in{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.view-head{display:flex; align-items:flex-end; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; margin-bottom:24px;}
.view-head > div, .view-head > h2{min-width:0;}
.view-head h2{font-family:var(--font-serif); font-size:var(--fs-2xl); font-weight:600; margin:0; letter-spacing:-.015em; line-height:1.15;}
.view-head .sub{flex-basis:100%; order:3;}
.sub{color:var(--ink-soft); font-size:var(--fs-base); margin:4px 0 0; line-height:1.5;}
.section-note{color:var(--ink-faint); font-size:var(--fs-sm);}

/* =========================================================
   TARJETAS (una sola base para todas)
   ========================================================= */
.card-block, .card, .orient-bloque, .orient-total-card, .schedule-card, .plan-info{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.card-block{padding:22px 24px; margin-bottom:16px;}
.card-block h3{font-family:var(--font-sans); font-size:var(--fs-lg); font-weight:600; margin:0 0 14px; letter-spacing:-.005em;}
.card{padding:4px 0; position:relative;}

/* =========================================================
   BOTONES
   ========================================================= */
.btn-primary, .btn-mini, .btn-ghost-danger, .icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; white-space:nowrap;
  font-weight:600; border-radius:var(--r-md); border:1px solid transparent; text-decoration:none;
  transition:background .12s, border-color .12s, color .12s, box-shadow .12s, transform .06s;
}
.btn-primary:active:not(:disabled), .btn-mini:active:not(:disabled), .icon-btn:active:not(:disabled), .btn-ghost-danger:active:not(:disabled){transform:translateY(1px);}
.btn-primary:disabled, .btn-mini:disabled, .btn-ghost-danger:disabled, .icon-btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}

/* Primario: la acción principal de cada pantalla/formulario */
.btn-primary{height:var(--h-btn); padding:0 16px; background:var(--accent); color:var(--on-accent); font-size:var(--fs-md);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.08);}
.btn-primary:hover:not(:disabled){background:var(--accent-hover);}
.btn-primary .ico{width:15px; height:15px;}

/* Secundario */
.btn-mini{height:var(--h-btn-sm); padding:0 12px; background:var(--surface); color:var(--ink-soft); border-color:var(--line-strong);
  font-size:12.5px; box-shadow:var(--shadow-sm);}
.btn-mini:hover:not(:disabled){background:var(--surface-2); color:var(--ink); border-color:color-mix(in srgb, var(--ink) 25%, var(--line));}
.btn-mini .ico{width:14px; height:14px;}
.btn-mini.approve{color:var(--good); border-color:color-mix(in srgb, var(--good) 38%, var(--line));}
.btn-mini.approve:hover:not(:disabled){background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb, var(--good) 55%, var(--line));}
.btn-mini.remove{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 32%, var(--line));}
.btn-mini.remove:hover:not(:disabled){background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 55%, var(--line));}

/* Terciario destructivo (acciones secundarias que borran) */
.btn-ghost-danger{height:var(--h-btn-sm); padding:0 10px; background:none; color:var(--ink-faint); font-size:12.5px; font-weight:500;}
.btn-ghost-danger:hover:not(:disabled){background:var(--danger-soft); color:var(--danger);}

/* Botón solo-ícono */
.icon-btn{width:30px; height:30px; padding:0; background:var(--surface); color:var(--ink-soft); border-color:var(--line); border-radius:var(--r-sm);}
.icon-btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.icon-btn .ico{width:15px; height:15px;}

.link-btn{display:inline-flex; align-items:center; gap:4px; border:none; background:none; color:var(--accent); font-size:var(--fs-md); font-weight:600; cursor:pointer; padding:6px 0; border-radius:4px;}
.link-btn:hover{color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px;}

/* =========================================================
   RESUMEN
   ========================================================= */
.stats-row{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:20px;}
.stat{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--shadow); min-width:0; text-align:left; font:inherit; color:inherit;}
.stat-ico{width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.stat-ico .ico{width:20px; height:20px;}
.stat-ico--good{background:var(--good-soft); color:var(--good);}
.stat-ico--accent{background:var(--accent-soft); color:var(--accent);}
.stat-ico--gold{background:var(--gold-soft); color:var(--gold);}
.stat-ico--info{background:var(--celeste-soft); color:var(--celeste-ink);}
.stat-body{min-width:0;}
.stat .n{font-size:26px; font-weight:600; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.stat .l{color:var(--ink-soft); font-size:12.5px; margin-top:4px; display:flex; align-items:center; gap:6px; white-space:nowrap;}
.stat-tag{font-size:10px; font-weight:600; letter-spacing:.03em; color:var(--gold); background:var(--gold-soft); border-radius:var(--r-pill); padding:1px 7px;}
.stat--editable{cursor:pointer; transition:border-color .12s, box-shadow .12s;}
.stat--editable:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:var(--shadow-md);}
.stat--editable .edit-ico{width:12px; height:12px; opacity:.55;}
.stat--editable:hover .edit-ico{opacity:1; color:var(--accent);}

/* Barras de progreso */
.progress-row{margin-bottom:16px;}
.progress-row:last-child{margin-bottom:0;}
.progress-label{display:flex; align-items:center; gap:8px; font-size:var(--fs-base); font-weight:500; margin-bottom:7px;}
.progress-label .dot{width:9px; height:9px; border-radius:50%; flex:none;}
.progress-count{margin-left:auto; font-size:var(--fs-md); color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.progress-bar{height:8px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;}
.progress-bar.big{height:11px;}
.progress-fill{height:100%; background:var(--accent); border-radius:var(--r-pill); transition:width .3s ease;}

/* Tarjeta de proyección en Resumen y resultado en Proyección */
.esp-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.sim-hero{text-align:center; padding:26px 20px 24px; border-radius:var(--r-lg); margin-bottom:4px;
  background:linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 45%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--accent) 14%, var(--line));}
.sim-hero--done{background:var(--good-soft);}
.sim-hero-label{margin:0; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:600;}
.sim-hero-big{margin:6px 0 2px; font-family:var(--font-serif); font-size:30px; font-weight:600; color:var(--accent-ink); line-height:1.15; letter-spacing:-.015em;}
.sim-hero--done .sim-hero-big{color:var(--good);}
.sim-hero-sub{margin:0; font-size:var(--fs-md); color:var(--ink-soft);}
.sim-badge{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 16px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); font-size:var(--fs-md); color:var(--ink); box-shadow:var(--shadow-sm);}
.sim-badge .ico{color:var(--gold);}
.sim-badge{flex-wrap:wrap; justify-content:center;}
.sim-badge strong{color:var(--accent-ink); white-space:nowrap;}
.sim-check{display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-md); color:var(--ink-soft); cursor:pointer; line-height:1.4;}
.sim-check input{margin-top:2px; flex:none;}

/* =========================================================
   FILTROS, CHIPS Y PESTAÑAS
   ========================================================= */
.hist-filters{display:flex; gap:10px 22px; flex-wrap:wrap; margin-bottom:16px; padding:12px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);}
.filter-group{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.flabel{font-size:var(--fs-sm); color:var(--ink-faint); font-weight:600; margin-right:4px;}
.chip{height:28px; padding:0 12px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font-size:12.5px; font-weight:500; border-radius:var(--r-pill); cursor:pointer; transition:all .12s;}
.chip:hover:not(.active){border-color:var(--line-strong); color:var(--ink); background:var(--surface-2);}
.chip.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}
.chip-suggest{height:28px; padding:0 12px; border:1px dashed var(--line-strong); background:var(--surface-2); color:var(--accent);
  font-size:12.5px; font-weight:600; border-radius:var(--r-pill); cursor:pointer; margin:2px 4px 2px 0;}
.chip-suggest:hover{background:var(--accent-soft);}

/* Pestañas: control segmentado */
.tab-bar{display:flex; gap:4px; padding:4px; margin-bottom:20px; background:var(--surface-3); border-radius:12px; border:1px solid var(--line-soft);}
.tab-btn{flex:1 1 0; height:36px; padding:0 12px; text-align:center; font-size:var(--fs-md); font-weight:600; cursor:pointer;
  border:none; border-radius:9px; background:transparent; color:var(--ink-soft); transition:background .12s, color .12s, box-shadow .12s;}
.tab-btn:not(.active):hover{color:var(--ink); background:color-mix(in srgb, var(--surface) 55%, transparent);}
.tab-btn.active{background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow-sm), 0 0 0 1px var(--line);}
.tab-bar--sub{display:inline-flex; margin-bottom:16px;}
.tab-bar--sub .tab-btn{flex:none; min-width:96px; height:32px;}

.cpo-orientaciones{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.cpo-chip{height:30px; padding:0 13px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font-size:12.5px; font-weight:600; border-radius:var(--r-pill); cursor:pointer; transition:all .12s;}
.cpo-chip:hover{border-color:var(--accent); color:var(--accent);}
.cpo-chip--actual{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}

/* =========================================================
   LISTAS: CURSANDO E HISTORIAL
   ========================================================= */
.cycle-block{margin-bottom:26px;}
.cycle-block h3{font-family:var(--font-sans); font-size:var(--fs-lg); font-weight:600; margin:0 0 10px; display:flex; align-items:center; gap:8px;}
.count{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 7px;
  border-radius:var(--r-pill); background:var(--surface-3); color:var(--ink-soft); font-size:var(--fs-xs); font-weight:600; font-variant-numeric:tabular-nums;}

.cur-row{display:grid; grid-template-columns:1.5fr .9fr 1fr .8fr auto; gap:14px; align-items:center; padding:14px 18px;
  border-bottom:1px solid var(--line-soft); transition:background .12s;}
.cur-row:last-child{border-bottom:none;}
.cur-row:hover{background:var(--surface-2);}
.cur-name{font-weight:600; font-size:var(--fs-base); margin:0;}
.cur-catedra{font-size:var(--fs-sm); color:var(--ink-faint); margin:2px 0 0 16px;}
.cur-meta{font-size:var(--fs-md); color:var(--ink-soft);}
.cur-name-row{display:flex; align-items:center; margin:0;}
.mat-dot{width:9px; height:9px; border-radius:50%; background:var(--mc); flex:none; display:inline-block; margin-right:8px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mc) 18%, transparent);}
.cur-actions{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap;}
.area-tag{font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill);
  white-space:nowrap; display:inline-flex; align-items:center; gap:5px;}

.hist-row{display:grid; grid-template-columns:1fr auto auto auto auto; align-items:center; gap:14px; padding:13px 18px;
  border-bottom:1px solid var(--line-soft); transition:background .12s;}
.hist-row:last-child{border-bottom:none;}
.hist-row:hover{background:var(--surface-2);}
.hist-main{min-width:0;}
.hist-name{font-weight:600; font-size:var(--fs-base); margin:0;}
.hist-comment{font-size:var(--fs-sm); color:var(--ink-faint); margin:2px 0 0;}
.hist-cat{font-size:var(--fs-sm); color:var(--ink-soft); white-space:nowrap; padding:3px 9px; background:var(--surface-3); border-radius:var(--r-pill);}
.hist-date{font-size:var(--fs-sm); color:var(--ink-faint); font-family:var(--font-mono); white-space:nowrap;}
.hist-nota{font-size:var(--fs-base); font-weight:600; width:34px; height:34px; border-radius:50%; flex:none; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--line); color:var(--ink);}
.hist-nota.high{color:var(--good); background:var(--good-soft); border-color:color-mix(in srgb, var(--good) 35%, transparent);}
.hist-empty{color:var(--ink-faint); font-size:var(--fs-md); padding:28px 18px; text-align:center; margin:0;}
.hist-link{font-size:var(--fs-sm); margin:6px 0 0;}
.carpeta-chip{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px 0 7px; border:1px solid var(--line);
  background:var(--surface-2); border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); text-decoration:none;}
.carpeta-chip .ico{width:12px; height:12px; opacity:.7;}
.carpeta-chip:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.hist-tags{display:flex; gap:6px; margin-top:5px;}
.hist-tags:empty{display:none;}
.hist-tag{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:var(--r-pill);}
.hist-tag--rechazada{background:var(--danger-soft); color:var(--danger);}
.hist-tag--recursada{background:var(--warn-soft); color:var(--warn);}
.hist-actions{display:flex; gap:6px;}

/* =========================================================
   ESTADOS VACÍOS
   ========================================================= */
.empty-state{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:34px 20px;
  border:1.5px dashed var(--line-strong); border-radius:var(--r-lg); background:var(--surface-2); margin-bottom:26px;}
.empty-state--card{border-style:solid; border-width:1px; border-color:var(--line); background:var(--surface);}
.empty-ico{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:10px;}
.empty-ico .ico{width:22px; height:22px;}
.empty-title{margin:0; font-size:var(--fs-lg); font-weight:600; color:var(--ink);}
.empty-sub{margin:0 0 6px; font-size:var(--fs-md); color:var(--ink-soft); max-width:440px; line-height:1.5;}
.empty-state .btn-primary{margin-top:12px;}
.empty{color:var(--ink-faint); font-size:var(--fs-md); padding:16px 4px; text-align:center;}

/* =========================================================
   CARRERA → ORIENTACIÓN
   ========================================================= */
.view--rail{max-width:none; margin-left:0; margin-right:0;}
.orient-layout{display:flex; align-items:flex-start; gap:28px;}
.orient-rail{width:200px; flex:none; position:sticky; top:24px; display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 8px; box-shadow:var(--shadow);}
.orient-rail-title{margin:2px 8px 8px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); font-weight:700;}
.orient-rail-btn{display:flex; align-items:center; gap:6px; width:100%; text-align:left; cursor:pointer; font-size:var(--fs-md); font-weight:500;
  line-height:1.3; min-height:36px; padding:7px 10px; border-radius:var(--r-sm); border:none; background:none; color:var(--ink-soft); transition:all .12s;}
.orient-rail-btn:hover{background:var(--surface-2); color:var(--ink);}
.orient-rail-btn.active{background:var(--accent-soft); color:var(--accent-ink); font-weight:600;}
.orient-rail-name{flex:1; min-width:0;}
.orient-rail-tag{flex:none; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--good);
  background:var(--good-soft); border-radius:var(--r-pill); padding:2px 7px;}
.orient-rail-foot{margin:10px 8px 2px; padding-top:10px; border-top:1px solid var(--line-soft); font-size:var(--fs-xs); line-height:1.5; color:var(--ink-faint);}
.orient-main{flex:1 1 auto; min-width:0; max-width:900px;}
.orient-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.orient-title{margin:0; font-family:var(--font-serif); font-size:22px; font-weight:600; letter-spacing:-.01em;}
.orient-badge{font-size:var(--fs-xs); font-weight:600; color:var(--good); background:var(--good-soft); border-radius:var(--r-pill); padding:4px 10px;}
.orient-switch{height:28px; font-size:var(--fs-sm); font-weight:600; cursor:pointer; color:var(--accent); background:var(--surface);
  border:1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius:var(--r-pill); padding:0 12px;}
.orient-switch:hover{background:var(--accent-soft); border-style:solid;}
.orient-fijas{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:4px;}
.orient-fijas li{display:flex; align-items:center; gap:9px; font-size:var(--fs-md); color:var(--ink-soft); padding:7px 12px;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-sm);}
.orient-fijas li::before{content:''; width:5px; height:5px; border-radius:2px; background:var(--ink-faint); flex:none;}
.orient-fija-name{flex:1; min-width:0;}
.orient-fija-pts{flex:none; font-size:var(--fs-sm); color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.orient-total-card{padding:20px 24px; margin-bottom:16px;}

.orient-bloque{padding:18px 22px; margin-bottom:14px; transition:border-color .12s, box-shadow .12s;}
.orient-bloque--dragover{border-color:var(--accent); box-shadow:var(--ring), var(--shadow);}
.orient-bloque-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.orient-bloque-head h3{font-family:var(--font-sans); font-size:15px; font-weight:600; margin:0;}
.orient-bloque-head .count{height:22px; font-size:var(--fs-sm);}
.orient-nota{font-size:var(--fs-md); color:var(--ink-faint); margin:10px 0 4px; line-height:1.5;}
.orient-items{margin-top:12px; border-top:1px solid var(--line-soft);}
.orient-item{display:flex; align-items:center; gap:10px; padding:10px 2px; border-top:1px solid var(--line-soft); font-size:var(--fs-base); cursor:grab; flex-wrap:wrap;}
.orient-item:first-child{border-top:none;}
.orient-item--static{cursor:default;}
.orient-item:active{cursor:grabbing;}
.cbc-quitar{color:var(--ink-faint);}
.drag-handle{display:flex; color:var(--ink-faint); opacity:.6;}
.drag-handle .ico{width:14px; height:14px;}
.orient-item-name{flex:1;}
.orient-item-namewrap{flex:1; min-width:180px;}
.orient-item-namewrap .orient-item-name{display:block; font-weight:500;}
.cbc-correlativas{font-size:var(--fs-sm); color:var(--ink-faint); margin:3px 0 0;}
.cbc-correlativas--none{font-style:italic;}
.cbc-nota-fecha{font-size:var(--fs-sm); color:var(--good); margin:3px 0 0; font-weight:600;}
.correlativa-ok{color:var(--good);}
.correlativa-pendiente{color:var(--ink-soft);}
.orient-item-pts{font-size:var(--fs-md); color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.orient-item-status{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap;}
.status--aprobada, .status--asignada{background:var(--good-soft); color:var(--good);}
.status--aceptada, .status--cursando{background:var(--celeste-soft); color:var(--celeste-ink);}
.status--inscripto{background:transparent; color:var(--celeste-ink); border:1px dashed color-mix(in srgb, var(--celeste) 60%, transparent);}
.status--pendiente{background:var(--surface-3); color:var(--ink-soft);}
.orient-item-status--click{cursor:pointer; transition:filter .12s;}
.orient-item-status--click:hover{filter:brightness(.94);}
.orient-sugeridas{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.check-row{display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-base); margin-top:8px; cursor:pointer;}
.check-row input{width:17px; height:17px; accent-color:var(--accent); cursor:pointer;}

/* Menú "Mover" */
.orient-mover{position:relative; flex:none;}
.orient-mover-btn{display:inline-flex; align-items:center; gap:6px; height:28px; font-size:var(--fs-sm); font-weight:500; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:0 10px; cursor:pointer;}
.orient-mover-btn:hover, .orient-mover-btn.open{border-color:var(--accent); color:var(--accent);}
.orient-mover-caret{width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4.5px solid currentColor; opacity:.7;}
.orient-mover-btn.open .orient-mover-caret{transform:rotate(180deg);}
.orient-mover-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:30; width:256px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:var(--shadow-md); animation:pop-in .12s ease-out;}
@keyframes pop-in{from{opacity:0; transform:translateY(-4px) scale(.98);} to{opacity:1; transform:none;}}
.orient-mover-h{margin:4px 8px 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:700;}
.orient-mover-g{margin:8px 8px 3px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600;}
.orient-mover-op{display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; font-size:var(--fs-md);
  color:var(--ink); background:none; border:none; border-radius:var(--r-sm); padding:8px 9px;}
.orient-mover-op:hover:not(:disabled){background:var(--accent-soft); color:var(--accent-ink);}
.orient-mover-op-name{flex:1; min-width:0;}
.orient-mover-op-pts{flex:none; font-size:var(--fs-xs); color:var(--ink-faint);}
.orient-mover-op.actual{color:var(--ink-faint); cursor:default;}
.orient-mover-sep{height:1px; background:var(--line-soft); margin:6px 4px;}
.orient-mover-op--quitar{color:var(--danger); font-weight:500;}
.orient-mover-op--quitar:hover{background:var(--danger-soft)!important; color:var(--danger)!important;}

/* =========================================================
   CUADRO DE CORRELATIVIDADES (Carrera y "Elegir en tabla")
   ========================================================= */
.view--wide{max-width:1260px;}
.plan-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 12px;}
.plan-help{margin:0; font-size:var(--fs-md); color:var(--ink-soft); line-height:1.55; max-width:640px;}
.plan-help b{color:var(--ink); font-weight:600;}
.plan-tools{display:flex; align-items:center; gap:4px; flex:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:3px;}
.plan-tool{border:none; background:none; color:var(--ink-soft); border-radius:7px; width:28px; height:28px; font-size:16px; line-height:1; cursor:pointer;}
.plan-tool--txt{width:auto; padding:0 10px; font-size:var(--fs-sm); font-weight:600;}
.plan-tool:hover{background:var(--accent-soft); color:var(--accent);}
.plan-zoomval{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); width:40px; text-align:center;}

.plan-summary{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px;}
.plan-sum{font-size:var(--fs-sm); font-weight:500; height:26px; display:inline-flex; align-items:center; padding:0 11px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);}
.plan-sum--aprobada{color:var(--good); border-color:color-mix(in srgb, var(--good) 40%, transparent); background:var(--good-soft);}
.plan-sum--cursando{color:var(--celeste-ink); border-color:color-mix(in srgb, var(--celeste) 45%, transparent); background:var(--celeste-soft);}
.plan-sum--disponible{color:var(--area-publico); border-color:color-mix(in srgb, var(--area-publico) 45%, transparent);}
.plan-sum--bloqueada{color:var(--ink-faint);}
.plan-sum--planificada{color:var(--good); border-color:var(--good); background:var(--good-soft);}

.plan-scroller{overflow-x:auto; overflow-y:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:2px; box-shadow:var(--shadow);}
.plan-stage{position:relative;}
.plan-canvas{position:absolute; left:0; top:0; transform-origin:0 0; --plan-line:#aeb8c4; --plan-line-soft:#dde2e8;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .plan-canvas{--plan-line:#5a6774; --plan-line-soft:#333f4c;} }
:root[data-theme="dark"] .plan-canvas{--plan-line:#5a6774; --plan-line-soft:#333f4c;}
.plan-svg{position:absolute; left:0; top:0; overflow:visible; pointer-events:none;}
.plan-edge{stroke:var(--plan-line); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .12s, opacity .12s;}
.plan-edge.edge--ok{stroke:color-mix(in srgb, var(--good) 60%, var(--plan-line));}
.plan-canvas--focus .plan-edge{stroke:var(--plan-line-soft); opacity:.6;}
.plan-canvas--focus .plan-edge.edge--dim{opacity:.13;}
.plan-canvas--focus .plan-edge.edge--pre{stroke:var(--accent); opacity:1; stroke-width:2.2;}
.plan-canvas--focus .plan-edge.edge--post{stroke:var(--area-publico); opacity:1; stroke-width:2.2;}
.pa{transition:fill .12s;}
.pa--normal{fill:var(--plan-line);}
.pa--ok{fill:color-mix(in srgb, var(--good) 60%, var(--plan-line));}
.pa--pre{fill:var(--accent);}
.pa--post{fill:var(--area-publico);}
.pa--dim{fill:var(--plan-line-soft);}
.plan-node{position:absolute; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:7px 22px 7px 10px; border:1.5px solid var(--line); background:var(--surface); border-radius:10px;
  font-size:11px; line-height:1.28; color:var(--ink); cursor:pointer; z-index:2;
  transition:opacity .12s, box-shadow .12s, border-color .12s, transform .12s, background .12s;}
.plan-node-name{display:block;}
.plan-node-num{position:absolute; top:4px; right:6px; font-family:var(--font-mono); font-size:9px; color:var(--ink-faint);}
.plan-node:hover{transform:translateY(-1px); box-shadow:var(--shadow);}
.plan-node--aprobada{background:color-mix(in srgb, var(--good) 12%, var(--surface)); border-color:var(--good); color:color-mix(in srgb, var(--good) 75%, var(--ink)); font-weight:600;}
.plan-node--cursando{background:color-mix(in srgb, var(--celeste) 14%, var(--surface)); border-color:var(--celeste); color:var(--celeste-ink); font-weight:600;}
.plan-node--disponible{background:var(--surface); border-color:var(--area-publico); border-style:dashed; color:var(--ink);}
.plan-node--bloqueada{background:var(--surface-2); border-color:var(--line); color:var(--ink-faint);}
.plan-node--planificada{background:var(--good); border-color:var(--good); color:#fff; font-weight:600;}
.plan-node--planificada .plan-node-num{color:rgba(255,255,255,.8);}
.plan-node--planificada:not(.is-elegible){opacity:.72;}
.plan-node-per{position:absolute; left:8px; bottom:2px; font-size:8.5px; font-weight:600; letter-spacing:.02em; opacity:.92;}
.plan-canvas--focus .plan-node{opacity:.35;}
.plan-canvas--focus .plan-node.is-dim{opacity:.16;}
.plan-canvas--focus .plan-node.is-pre{opacity:1; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);}
.plan-canvas--focus .plan-node.is-post{opacity:1; box-shadow:0 0 0 2px color-mix(in srgb, var(--area-publico) 45%, transparent);}
.plan-canvas--focus .plan-node.is-focus{opacity:1; box-shadow:0 0 0 3px var(--ink), var(--shadow); z-index:3;}

.plan-info{margin-top:14px; padding:16px 20px;}
.plan-info-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.plan-info-head h4{margin:0; font-family:var(--font-serif); font-size:18px; font-weight:600;}
.plan-node-num--big{position:static; font-size:var(--fs-xs); padding:2px 7px; border-radius:6px; background:var(--surface-3);}
.plan-chip{font-size:var(--fs-xs); font-weight:600; padding:3px 10px; border-radius:var(--r-pill); border:1px solid var(--line);}
.plan-chip--aprobada{color:var(--good); border-color:transparent; background:var(--good-soft);}
.plan-chip--cursando{color:var(--celeste-ink); border-color:transparent; background:var(--celeste-soft);}
.plan-chip--disponible{color:var(--area-publico); border-color:color-mix(in srgb, var(--area-publico) 45%, transparent);}
.plan-chip--bloqueada{color:var(--ink-faint); background:var(--surface-2);}
.plan-info-nota{font-size:var(--fs-sm); color:var(--ink-faint); margin-left:auto;}
.plan-info-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.plan-info-t{margin:0 0 6px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600;}
.plan-info-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px;}
.plan-info-list li{font-size:var(--fs-md); color:var(--ink-soft);}
.plan-info-list li.ok{color:var(--good);}
.plan-info-list li.falta{color:var(--danger);}
.plan-info-empty{margin:0; font-size:var(--fs-md); color:var(--ink-faint);}
.plan-info-hint{margin:14px 0 0; font-size:var(--fs-md); color:var(--ink-faint);}
.plan-leyenda{display:flex; gap:10px 18px; flex-wrap:wrap; margin-top:14px; font-size:var(--fs-sm); color:var(--ink-soft);}
.plan-leyenda span{display:inline-flex; align-items:center; gap:7px;}
.plan-lg{width:15px; height:15px; border-radius:4px; border:1.5px solid var(--line); background:var(--surface); flex:none;}
.plan-lg--aprobada{background:color-mix(in srgb, var(--good) 12%, var(--surface)); border-color:var(--good);}
.plan-lg--cursando{background:color-mix(in srgb, var(--celeste) 14%, var(--surface)); border-color:var(--celeste);}
.plan-lg--disponible{border-color:var(--area-publico); border-style:dashed;}
.plan-lg--bloqueada{background:var(--surface-2);}
.plan-lg--planificada{background:var(--good); border-color:var(--good);}

/* =========================================================
   HORARIO SEMANAL (en Cursando)
   ========================================================= */
.schedule-card{padding:20px 20px 14px; overflow-x:auto;}
.schedule-grid{display:grid; grid-template-columns:58px repeat(5, minmax(118px,1fr)); min-width:680px; position:relative;}
.day-head{grid-row:1; align-self:center; text-align:center; font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em; padding-bottom:8px; border-bottom:1px solid var(--line);}
.hline{grid-column:1/-1; border-top:1px solid var(--line-soft); height:0;}
.hlabel{grid-column:1; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); transform:translateY(-7px);}
.ev{position:relative; margin:1px 3px; border-radius:7px; padding:5px 8px; font-size:11px; line-height:1.28; overflow:hidden; border:1px solid transparent; border-left-width:3px;}
.ev-t{display:block; font-weight:600;}
.ev-t--sub{font-size:9.5px; font-weight:400; opacity:.85; margin-top:1px;}
.ev--trabajo{background:var(--c-trabajo-bg); color:var(--ink-soft); border-color:var(--line); border-left-color:var(--ink-faint);}
.ev--materia{background:color-mix(in srgb, var(--mc) 15%, var(--surface)); color:color-mix(in srgb, var(--mc) 80%, var(--ink));
  border-color:color-mix(in srgb, var(--mc) 30%, transparent); border-left-color:var(--mc);}
.ev--materia.virtual{border-style:dashed; border-left-style:solid;}
.ev-bim{position:absolute; top:3px; right:6px; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; opacity:.72;}
.ev--bim{padding-top:15px;}
.legend{display:flex; gap:10px 18px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);}
.legend-item{display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--ink-soft);}
.swatch{width:12px; height:12px; border-radius:3px; flex:none;}
.swatch.trabajo{background:var(--c-trabajo-bg); border:1px solid var(--line);}
.swatch.virtual{background:var(--surface-2); border:1px dashed var(--ink-faint);}

/* Pendientes sueltos (tracker) */
.tracker-body{padding:12px;}
.add-row{display:flex; gap:8px; margin-bottom:12px;}
.add-row input[type="text"], .add-row select{height:var(--h-ctl); border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-md); padding:0 11px; font-size:var(--fs-md); color:var(--ink);}
.add-row input[type="text"]{flex:1; min-width:0;}
.add-row button{border:none; background:var(--accent); color:var(--on-accent); font-weight:600; font-size:var(--fs-md); border-radius:var(--r-md); padding:0 16px; cursor:pointer;}
ul.items{list-style:none; margin:0; padding:0;}
.item{display:flex; align-items:flex-start; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line-soft);}
.item:last-child{border-bottom:none;}
.item input[type="checkbox"]{width:17px; height:17px; margin-top:2px; accent-color:var(--accent); flex:none; cursor:pointer;}
.item .txt{flex:1; font-size:var(--fs-base); min-width:0; word-break:break-word;}
.item.done .txt{color:var(--ink-faint); text-decoration:line-through;}
.item .tag{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:var(--r-pill); flex:none; margin-top:1px;}
.item .del{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:15px; line-height:1; padding:2px 4px; flex:none;}
.item .del:hover{color:var(--danger);}
.tag--parcial{background:var(--accent-soft); color:var(--accent-ink);}
.tag--entrega{background:color-mix(in srgb, var(--area-privado) 16%, transparent); color:var(--area-privado);}
.tag--otro{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);}

/* =========================================================
   FORMULARIOS
   ========================================================= */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 14px;}
.form-grid optgroup{font-style:normal;}
.form-field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.form-field--full{grid-column:1 / -1;}
.form-field > label, .form-grid label.flabel{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); text-transform:none; letter-spacing:0; margin:0;}
.form-grid label.flabel{grid-column:1 / -1; margin-bottom:-10px;}
.modal-sm .form-grid{grid-template-columns:1fr;}
.form-hint{font-size:var(--fs-sm); font-weight:400; color:var(--ink-faint);}
.form-grid input, .form-grid select, .esp-search, .esp-practico-row select,
.login-card input, .login-card select{
  height:var(--h-ctl); border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-md); padding:0 12px;
  font-size:var(--fs-base); color:var(--ink); font-family:inherit; width:100%; transition:border-color .12s, box-shadow .12s;
}
.form-grid select, .esp-practico-row select{appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238691a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;}
.form-grid input:hover, .form-grid select:hover, .esp-search:hover, .esp-practico-row select:hover{border-color:color-mix(in srgb, var(--ink) 28%, var(--line));}
.form-grid input:focus, .form-grid select:focus, .esp-search:focus, .esp-practico-row select:focus,
.login-card input:focus, .login-card select:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring);}
.form-grid input::placeholder, .esp-search::placeholder{color:var(--ink-faint);}
.form-grid input:disabled{opacity:.5; cursor:not-allowed; background:var(--surface-2);}
.dia-chips{display:flex; gap:6px; flex-wrap:wrap;}
.dia-chip{height:34px; min-width:48px; padding:0 12px; font-size:var(--fs-md); font-weight:500; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); border-radius:var(--r-md); transition:all .12s;}
.dia-chip:hover:not(:disabled):not(.on){border-color:var(--accent); color:var(--accent);}
.dia-chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}
.dia-chip:disabled{opacity:.4; cursor:not-allowed;}
.hora-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.hora-row input[type=time]{width:auto; min-width:124px; flex:none; text-align:center; font-variant-numeric:tabular-nums;}
.hora-sep{color:var(--ink-faint);}
.cond-row{display:flex; gap:10px; flex-wrap:wrap;}
.cond-row select{flex:1 1 150px;}
input[type="file"]{font-size:var(--fs-md); color:var(--ink-soft);}
input[type="file"]::file-selector-button{height:var(--h-btn-sm); margin-right:10px; padding:0 12px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink-soft); border-radius:var(--r-md); font:600 12.5px var(--font-sans); cursor:pointer;}
input[type="file"]::file-selector-button:hover{background:var(--surface-2); color:var(--ink);}

.backup-box{width:100%; border:1px solid var(--line-strong); background:var(--surface-2); border-radius:var(--r-md); padding:11px 13px;
  font-family:var(--font-mono); font-size:11.5px; line-height:1.55; color:var(--ink); resize:vertical; margin-top:4px; transition:border-color .12s, box-shadow .12s;}
.backup-box:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring); background:var(--surface);}
.backup-box--in{margin-top:8px;}
.card-block > .btn-mini, .card-block > .btn-primary{margin-top:12px;}
.import-avisos{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:var(--fs-md); color:var(--ink-soft); max-height:320px; overflow-y:auto;}
.import-avisos li{line-height:1.45; padding:9px 12px; background:var(--warn-soft); border-left:3px solid var(--warn); border-radius:0 var(--r-sm) var(--r-sm) 0;}

/* =========================================================
   MODALES
   ========================================================= */
.modal-backdrop{position:fixed; inset:0; background:rgba(12,18,28,.48); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:95; animation:fade-in .14s ease-out;}
@keyframes fade-in{from{opacity:0;} to{opacity:1;}}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  padding:26px 28px 22px; width:100%; max-width:540px; max-height:90vh; overflow-y:auto; animation:modal-in .18s cubic-bezier(.2,.8,.3,1);}
@keyframes modal-in{from{opacity:0; transform:translateY(8px) scale(.985);} to{opacity:1; transform:none;}}
.modal-sm{max-width:380px;}
.modal h3{font-family:var(--font-serif); font-size:var(--fs-xl); font-weight:600; margin:0 0 18px; letter-spacing:-.01em; line-height:1.25;}
.modal-actions{display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:22px -28px -22px; padding:14px 28px;
  border-top:1px solid var(--line-soft); background:var(--surface-2); border-radius:0 0 var(--r-xl) var(--r-xl); position:sticky; bottom:-22px;}
.modal-actions .btn-mini, .modal-actions .btn-primary{height:var(--h-btn);}
.asignar-list{max-height:300px; overflow-y:auto; margin-top:12px; display:flex; flex-direction:column; gap:6px;}
.asignar-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-md); padding:10px 12px; font-size:var(--fs-base); color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s;}
.asignar-item:hover{border-color:var(--accent); background:var(--accent-soft);}
.asignar-item-name{flex:1;}
.asignar-item-pts{font-size:var(--fs-sm); color:var(--ink-soft);}
.asignar-item-tag{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); background:var(--surface-3); border-radius:var(--r-pill); padding:2px 8px;}

/* =========================================================
   AVISO FLOTANTE (toast)
   ========================================================= */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); max-width:min(560px, calc(100vw - 32px));
  display:flex; align-items:center; gap:10px; background:#141c27; color:#f1f4f8; padding:12px 18px 12px 16px;
  border-radius:12px; font-size:var(--fs-md); line-height:1.4; box-shadow:var(--shadow-lg); z-index:96;}
.toast::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--good); flex:none; box-shadow:0 0 0 3px rgba(95,192,140,.25);}

/* =========================================================
   PERFIL
   ========================================================= */
.plan-badge{display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:14px 16px; border-radius:12px; border:1px solid var(--line);}
.plan-badge > .ico{width:20px; height:20px; margin-top:1px;}
.plan-badge-title{margin:0 0 3px; font-weight:600; font-size:var(--fs-base);}
.plan-badge-sub{margin:0; font-size:var(--fs-md); color:var(--ink-soft); line-height:1.5;}
.plan-badge--nuevo{background:var(--good-soft); border-color:color-mix(in srgb, var(--good) 30%, transparent);}
.plan-badge--nuevo > .ico, .plan-badge--nuevo .plan-badge-title{color:var(--good);}
.plan-badge--viejo{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 20%, transparent);}
.plan-badge--viejo > .ico, .plan-badge--viejo .plan-badge-title{color:var(--accent);}

/* =========================================================
   PROYECCIÓN
   ========================================================= */
.esp-panel{margin-top:16px; border-top:1px solid var(--line-soft); padding-top:16px;}
.esp-practico{border:1px solid color-mix(in srgb, var(--good) 30%, var(--line)); border-radius:12px; padding:16px 18px; margin-bottom:18px; background:var(--good-soft);
  transition:background .2s, border-color .2s;}
.esp-practico--falta{border-color:color-mix(in srgb, var(--warn) 45%, transparent); background:var(--warn-soft);}
.esp-practico-label{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:var(--fs-base); font-weight:600; color:var(--ink);}
.esp-practico-label .ico{color:var(--good);}
.esp-practico--falta .esp-practico-label .ico{color:var(--warn);}
.esp-practico-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.esp-practico-row select{width:auto; min-width:120px;}
.esp-practico-fin{display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:var(--r-pill); background:var(--surface);
  font-size:var(--fs-md); color:var(--good); font-weight:600;}
.esp-practico-hint{margin:10px 0 0; font-size:var(--fs-sm); color:var(--ink-soft);}
.esp-search{margin-bottom:14px; padding-left:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238691a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px center;}

.esp-periodo{border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:12px; background:var(--surface); transition:border-color .15s, box-shadow .15s;}
.esp-periodo--saved{background:var(--surface-2);}
.esp-periodo--saved:hover{border-color:var(--line-strong);}
.esp-periodo--edit{border-color:var(--accent); box-shadow:var(--ring), var(--shadow);}
.esp-periodo--done{background:var(--surface-2);}
.esp-periodo-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.esp-periodo-titlewrap{min-width:0;}
.esp-periodo-title{margin:0; font-size:15px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.esp-periodo-meta{margin:2px 0 0; font-size:var(--fs-sm); color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.esp-periodo-tag{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); background:var(--gold-soft); border-radius:var(--r-pill); padding:2px 8px;}
.esp-estado{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); background:var(--accent-soft); border-radius:var(--r-pill); padding:2px 8px;}
.esp-badge-edit{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--on-accent); background:var(--accent); border-radius:var(--r-pill); padding:2px 8px;}
.esp-counter{font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft);}
.esp-counter--over{color:var(--danger);}
.esp-head-right{display:flex; align-items:center; gap:8px;}
.esp-mover{display:flex; gap:4px;}
.esp-mats{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.esp-mat{display:inline-flex; align-items:center; gap:6px; min-height:30px; font-size:var(--fs-md); font-weight:500; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:3px 10px 3px 12px; color:var(--ink);}
.esp-periodo--edit .esp-mat{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent-ink);}
.esp-mat--on{background:var(--accent-soft); border-color:var(--accent);}
.esp-mat-pts{font-size:var(--fs-xs); color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.esp-mat-x{border:none; background:none; cursor:pointer; color:var(--ink-faint); font-size:16px; line-height:1; width:18px; height:18px; border-radius:50%; padding:0;
  display:inline-flex; align-items:center; justify-content:center;}
.esp-mat-x:hover{color:var(--danger); background:var(--danger-soft);}
.esp-pts-btn{border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; width:20px; height:20px; border-radius:6px; line-height:1; font-size:13px;
  color:var(--ink-soft); padding:0; display:inline-flex; align-items:center; justify-content:center;}
.esp-pts-btn:hover{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.esp-vacio{margin:10px 0 0; font-size:var(--fs-md); color:var(--ink-faint);}
.esp-sub-t{margin:16px 0 8px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:700;}
.esp-disponibles{display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; padding-right:2px;}
.esp-add{display:flex; align-items:center; gap:10px; width:100%; min-height:40px; text-align:left; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-md); padding:8px 12px; cursor:pointer; font-size:var(--fs-md); color:var(--ink); transition:border-color .12s, background .12s;}
.esp-add:hover{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 45%, var(--line));}
.esp-add--elec{border-style:dashed;}
.esp-add-plus{width:20px; height:20px; border-radius:6px; background:var(--accent-soft); color:var(--accent); font-weight:700; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px;}
.esp-add:hover .esp-add-plus{background:var(--accent); color:var(--on-accent);}
.esp-add-name{flex:1; min-width:0; font-weight:500;}
.esp-add-tag{font-size:var(--fs-xs); color:var(--ink-faint); flex:0 1 auto; text-align:right;}
.esp-periodo-foot{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.esp-foot-right{display:flex; align-items:center; gap:8px; margin-left:auto;}
.esp-acciones{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px;}
.esp-hint{display:inline-flex; align-items:center; gap:8px; margin:0; font-size:var(--fs-md); color:var(--ink-soft);
  background:var(--accent-soft); border-radius:var(--r-md); padding:8px 12px;}
.esp-hint .ico{color:var(--accent);}
.esp-resultado{margin-top:18px;}
.esp-resultado .orient-nota{display:flex; align-items:center; gap:8px; margin:0; padding:12px 14px; border-radius:var(--r-md); background:var(--warn-soft); color:var(--ink-soft);}
.esp-resultado .ico{color:var(--warn);}

/* "Elegir en tabla" */
.modal.modal-tabla{max-width:1280px; width:96vw; max-height:94vh;}
.esp-tabla-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px;}
.esp-tabla-head h3{margin:0 0 6px;}
.modal-tabla .plan-scroller{overflow-y:auto; max-height:60vh;}
.modal-tabla .plan-node.is-fija{cursor:default;}
.modal-tabla .plan-node.is-fija:hover{transform:none; box-shadow:none;}
.modal-tabla .plan-node--disponible.is-elegible:hover{background:var(--good-soft); border-color:var(--good); border-style:solid;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .main{padding:30px 28px 64px;}
}
@media (max-width:900px){
  .stats-row{grid-template-columns:repeat(2, minmax(0,1fr));}
  .orient-layout{flex-direction:column; gap:14px;}
  .orient-rail{position:static; width:100%; flex-direction:row; flex-wrap:wrap; gap:6px; padding:10px;}
  .orient-rail-title, .orient-rail-foot{width:100%;}
  .orient-rail-btn{width:auto; border:1px solid var(--line);}
}
@media (max-width:820px){
  .cur-row{grid-template-columns:1fr auto; row-gap:6px;}
  .cur-row > .cur-meta{grid-column:1; color:var(--ink-faint); font-size:var(--fs-sm);}
  .cur-actions{grid-column:1 / -1; justify-content:flex-start;}
}
@media (max-width:760px){
  #app{flex-direction:column;}
  .sidebar{width:100%; height:auto; position:sticky; top:0; z-index:40; flex-direction:row; align-items:center; overflow-x:auto; gap:4px;
    padding:8px 10px; border-right:none; border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); scrollbar-width:none;}
  .sidebar::-webkit-scrollbar{display:none;}
  .brand{border:none; padding:0 6px 0 2px; margin:0;}
  .brand > div{display:none;}
  .brand-mark{width:32px; height:32px; font-size:18px; border-radius:9px;}
  .account-box{margin:0; padding:3px; border:none; background:none; flex:none;}
  .account-info, .account-box--login span{display:none;}
  .account-box--login{padding:8px;}
  .nav-btn{flex:none; height:38px; gap:7px; padding:0 12px; font-size:var(--fs-md); border-radius:var(--r-pill);}
  .nav-btn .ico{width:16px; height:16px;}
  .nav-btn.active::before{display:none;}
  .undo-bar{margin:0 0 0 auto; padding:0 0 0 6px; border-top:none; border-left:1px solid var(--line-soft); flex-direction:row; align-items:center; flex:none;}
  .undo-btn{width:38px; padding:0; justify-content:center;}
  .undo-btn span{display:none;}
  .undo-hint{display:none;}
  .main{padding:22px 16px 56px;}
  .view-head{margin-bottom:18px;}
  .view-head h2{font-size:24px;}
  .card-block{padding:18px;}
  .hist-row{grid-template-columns:1fr auto; row-gap:8px; padding:12px 14px;}
  .hist-actions{grid-column:1 / -1;}
  .plan-info-cols{grid-template-columns:1fr;}
  .modal{padding:22px 20px 18px;}
  .modal-actions{margin:20px -20px -18px; padding:12px 20px; bottom:-18px;}
  .modal-backdrop{align-items:flex-end; padding:0;}
  .modal:not(.modal-tabla){max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:92vh;}
  .tab-btn{font-size:12.5px; padding:0 8px;}
}
@media (max-width:560px){
  .stats-row{gap:10px;}
  .stat{padding:14px; gap:11px;}
  .stat-ico{width:36px; height:36px;}
  .stat .n{font-size:22px;}
  .form-grid{grid-template-columns:1fr;}
  .form-field{grid-column:1 / -1;}
  .esp-head-right{width:100%; justify-content:flex-end;}
  .orient-mover-menu{width:220px;}
  .esp-add{flex-wrap:wrap; row-gap:2px;}
  .esp-add-tag{flex-basis:100%; text-align:left; padding-left:30px;}
  .sim-hero-big{font-size:25px;}
  .sim-badge{border-radius:12px; font-size:var(--fs-sm);}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important;}
}


/* =========================================================
   MICROINTERACCIONES
   ---------------------------------------------------------
   Regla: hover = --t-fast; abrir/cerrar/seleccionar = --t-med;
   progreso = --t-slow. Todo con la misma curva (--ease).
   Solo se "levanta" (elevación) lo que se puede clickear.
   ========================================================= */

/* ---- Tooltips (data-tip) ----
   Aparecen con un pequeño retraso para no molestar al pasar el mouse. */
[data-tip]{position:relative;}
[data-tip]::after{
  content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); z-index:60;
  transform:translate(-50%, 4px); opacity:0; pointer-events:none; white-space:nowrap;
  background:#141c27; color:#f1f4f8; font:500 11.5px/1.35 var(--font-sans); letter-spacing:0; text-transform:none;
  padding:6px 9px; border-radius:7px; box-shadow:var(--shadow-md);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); transition-delay:0s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after{opacity:1; transform:translate(-50%, 0); transition-delay:.35s;}
/* En tarjetas y barras anchas el tooltip va alineado a la izquierda */
.stat[data-tip]::after, .progress-row[data-tip]::after{left:16px; transform:translate(0, 4px);}
.stat[data-tip]:hover::after, .progress-row[data-tip]:hover::after{transform:translate(0, 0);}
.progress-row[data-tip]::after{bottom:auto; top:calc(100% + 4px);}
@media (hover:none){ [data-tip]::after{display:none;} }
/* Tooltips de botones que están contra el borde derecho: se alinean a la derecha */
.cur-actions > [data-tip]:last-child::after, .hist-actions > [data-tip]:last-child::after,
.esp-mover > [data-tip]:last-child::after, .hist-nota[data-tip]::after{left:auto; right:0; transform:translate(0, 4px);}
.cur-actions > [data-tip]:last-child:hover::after, .hist-actions > [data-tip]:last-child:hover::after,
.esp-mover > [data-tip]:last-child:hover::after, .hist-nota[data-tip]:hover::after{transform:translate(0, 0);}
/* Un tooltip oculto no puede generar scroll horizontal */
.main{overflow-x:clip;}

/* ---- Botones: respuesta al pasar, presionar y cargar ---- */
.btn-primary, .btn-mini, .btn-ghost-danger, .icon-btn, .chip, .cpo-chip, .dia-chip, .tab-btn, .link-btn, .login-btn,
.orient-rail-btn, .orient-mover-btn, .orient-mover-op, .esp-add, .asignar-item, .nav-btn, .undo-btn, .plan-tool, .esp-pts-btn, .esp-mat-x{
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn-primary:hover:not(:disabled){transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-primary:active:not(:disabled){transform:translateY(0) scale(.98); box-shadow:var(--shadow-sm);}
.btn-mini:active:not(:disabled), .icon-btn:active:not(:disabled), .btn-ghost-danger:active:not(:disabled),
.chip:active, .cpo-chip:active, .dia-chip:active:not(:disabled), .esp-pts-btn:active, .plan-tool:active{transform:scale(.96);}
.btn-mini .ico, .btn-primary .ico{transition:transform var(--t-fast) var(--ease);}
.btn-mini.approve:hover:not(:disabled) .ico{transform:scale(1.15);}
.btn-mini.remove:hover:not(:disabled) .ico{transform:rotate(-8deg) scale(1.1);}
.btn-primary:hover:not(:disabled) .ico{transform:translateX(1px);}
/* Foco de teclado visible y consistente */
.btn-primary:focus-visible, .btn-mini:focus-visible, .btn-ghost-danger:focus-visible, .icon-btn:focus-visible,
.chip:focus-visible, .tab-btn:focus-visible, .nav-btn:focus-visible, .stat--editable:focus-visible, .esp-add:focus-visible{
  outline:none; box-shadow:var(--ring);
}

/* ---- Navegación ---- */
.nav-btn .ico{transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);}
.nav-btn:hover .ico{transform:scale(1.08); opacity:1;}
.nav-btn:active{transform:scale(.98);}
.nav-btn.active::before{animation:nav-bar-in var(--t-med) var(--ease);}
@keyframes nav-bar-in{from{transform:scaleY(0); opacity:0;} to{transform:scaleY(1); opacity:1;}}
.undo-btn:not(:disabled):active{transform:scale(.97);}
.orient-rail-btn:hover:not(.active){transform:translateX(2px);}

/* ---- Pestañas y filtros: el cambio de selección se ve ---- */
.tab-btn.active{animation:sel-pop var(--t-med) var(--ease);}
.chip.active, .cpo-chip--actual, .dia-chip.on{animation:sel-pop var(--t-med) var(--ease);}
@keyframes sel-pop{0%{transform:scale(.96);} 60%{transform:scale(1.02);} 100%{transform:scale(1);}}
.chip.active{box-shadow:0 1px 0 rgba(0,0,0,.04), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);}

/* ---- Resumen ---- */
.stat{transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);}
.stat-ico{transition:transform var(--t-med) var(--ease);}
.stat:hover .stat-ico{transform:scale(1.07);}                 /* informativas: respuesta leve, sin "levantarse" */
.stat:not(.stat--editable):hover{border-color:var(--line-strong);}
.stat--editable:hover{transform:translateY(-2px);}            /* clickeable: se eleva */
.stat--editable:active{transform:translateY(0) scale(.99);}
.stat .n{animation:num-in .5s var(--ease) both;}
@keyframes num-in{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.stats-row .stat:nth-child(2) .n{animation-delay:.05s;}
.stats-row .stat:nth-child(3) .n{animation-delay:.1s;}
.stats-row .stat:nth-child(4) .n{animation-delay:.15s;}

/* Barras de progreso: se llenan al aparecer y se deslizan al actualizarse */
.progress-fill{transition:width var(--t-slow) var(--ease); animation:progress-in .8s var(--ease) both;}
@keyframes progress-in{from{clip-path:inset(0 100% 0 0 round 99px);} to{clip-path:inset(0 0 0 0 round 99px);}}
.progress-row[data-tip]{cursor:default;}
.progress-row[data-tip]:hover .progress-bar{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);}
.progress-bar{transition:box-shadow var(--t-fast) var(--ease);}

.sim-hero{animation:fade-up var(--t-med) var(--ease);}
.sim-badge{transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);}

/* ---- Filas de Cursando / Historial ---- */
.cur-row, .hist-row{transition:background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);}
.cur-row:hover{box-shadow:inset 3px 0 0 var(--mc);}
.hist-row:hover{box-shadow:inset 3px 0 0 var(--accent);}
.card > :first-child{border-radius:var(--r-lg) var(--r-lg) 0 0;}
.card > :last-child{border-radius:0 0 var(--r-lg) var(--r-lg);}
.card > :only-child{border-radius:var(--r-lg);}
.mat-dot{transition:box-shadow var(--t-fast) var(--ease);}
.cur-row:hover .mat-dot{box-shadow:0 0 0 4px color-mix(in srgb, var(--mc) 26%, transparent);}
.hist-nota{transition:transform var(--t-fast) var(--ease);}
.hist-row:hover .hist-nota{transform:scale(1.06);}
.cur-actions .btn-mini{height:30px; padding:0 10px;}

/* Entradas y salidas de filas (filtros, aprobar, eliminar, agregar) */
.row-enter-active{transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);}
.row-leave-active{transition:opacity var(--t-fast) ease-in, transform var(--t-fast) ease-in;}
.row-enter-from{opacity:0; transform:translateY(-4px);}
.row-leave-to{opacity:0; transform:translateX(8px);}
.row-move{transition:transform var(--t-med) var(--ease);}

/* ---- Tarjetas de la orientación / Carrera ---- */
.orient-bloque:hover{border-color:var(--line-strong);}
.orient-item{transition:background-color var(--t-fast) var(--ease);}
.orient-item:not(.orient-item--static):hover{background:var(--surface-2);}
.orient-item:not(.orient-item--static):hover .drag-handle{opacity:1; color:var(--accent);}
.orient-mover-menu{transform-origin:top right;}
.check-row:hover{color:var(--accent-ink);}
.plan-info{animation:fade-up var(--t-med) var(--ease);}

/* ---- Proyección ---- */
.esp-mat{animation:chip-in var(--t-med) var(--ease);}
@keyframes chip-in{from{opacity:0; transform:scale(.92);} to{opacity:1; transform:none;}}
.esp-periodo--edit .esp-sub-t, .esp-periodo--edit .esp-disponibles, .esp-periodo--edit .esp-periodo-foot{animation:fade-up var(--t-med) var(--ease) both;}
.esp-periodo--edit .esp-disponibles{animation-delay:.03s;}
.esp-periodo--edit .esp-periodo-foot{animation-delay:.06s;}
.esp-add:hover{transform:translateX(2px);}
.esp-add:active{transform:translateX(2px) scale(.99);}
.esp-add-plus{transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);}
.esp-add:hover .esp-add-plus{transform:rotate(90deg);}
.esp-periodo--saved{cursor:default;}
.esp-estado{animation:sel-pop var(--t-med) var(--ease);}
.esp-hint{animation:fade-up var(--t-med) var(--ease);}
.esp-practico-fin{animation:chip-in var(--t-med) var(--ease);}
.asignar-item:hover{transform:translateX(2px);}
@keyframes fade-up{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---- Formularios ---- */
.form-grid input, .form-grid select, .esp-search, .esp-practico-row select, .backup-box{transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);}
.form-field:focus-within > label{color:var(--accent);}
.form-field > label{transition:color var(--t-fast) var(--ease);}

/* ---- Modales: también se animan al cerrar ---- */
.modal-leave-active{transition:opacity var(--t-fast) ease-in; pointer-events:none;}
.modal-leave-active .modal{transition:transform var(--t-fast) ease-in, opacity var(--t-fast) ease-in;}
.modal-leave-to{opacity:0;}
.modal-leave-to .modal{transform:translateY(6px) scale(.985); opacity:0;}

/* ---- Avisos: tipo (éxito / aviso / neutro) y entrada/salida ---- */
.toast--ok::before{background:var(--good); box-shadow:0 0 0 3px rgba(95,192,140,.25);}
.toast--warn::before{background:#e4a73f; box-shadow:0 0 0 3px rgba(228,167,63,.28);}
.toast--info::before{background:#8fb3e3; box-shadow:0 0 0 3px rgba(143,179,227,.25);}
.toast-enter-active{transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);}
.toast-leave-active{transition:opacity var(--t-fast) ease-in, transform var(--t-fast) ease-in;}
.toast-enter-from{opacity:0; transform:translate(-50%, 10px) scale(.98);}
.toast-leave-to{opacity:0; transform:translate(-50%, 4px);}

/* ---- Cuadro de correlatividades ---- */
.plan-tools .plan-tool:active{transform:scale(.92);}
.modal-tabla .plan-node.is-elegible{cursor:pointer;}
.modal-tabla .plan-node--planificada.is-elegible:hover{filter:brightness(1.05); box-shadow:var(--shadow-md);}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none!important; transition:none!important;}
}

/* =========================================================
   REFINAMIENTO DE IDENTIDAD (navy · blanco roto · grises · dorado)
   ---------------------------------------------------------
   Solo tokens y acabado: los componentes son los mismos.
   ========================================================= */
:root{
  --bg:#f6f5f1; --surface:#ffffff; --surface-2:#faf9f6; --surface-3:#f1efe9;
  --ink:#17213a; --ink-soft:#525b6c; --ink-faint:#8b909a;
  --line:#e8e5de; --line-soft:#f0ede7; --line-strong:#d9d4ca;
  --accent:#1c3158; --accent-hover:#15264a; --accent-soft:#eef1f7; --accent-ink:#13223f;
  --gold:#a6813f; --gold-soft:#f6f0e4; --gold-line:#dcc9a3; --gold-bright:#d6b877;
  --shadow-sm:0 1px 2px rgba(23,33,58,.05);
  --shadow:0 1px 2px rgba(23,33,58,.035), 0 8px 24px -16px rgba(23,33,58,.12);
  --shadow-md:0 2px 4px rgba(23,33,58,.05), 0 16px 36px -18px rgba(23,33,58,.22);
  --r-lg:16px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --gold-line:#5c4c2c; --gold-bright:#d6b877; } }
:root[data-theme="dark"]{ --gold-line:#5c4c2c; --gold-bright:#d6b877; }

/* ---- Fondo: blanco roto con una luz navy casi imperceptible arriba ---- */
html, body{
  background:
    radial-gradient(1100px 420px at 78% -160px, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%),
    var(--bg);
  background-attachment:fixed;
}
.sidebar{background:color-mix(in srgb, var(--surface) 92%, var(--bg)); border-right-color:var(--line);}

/* ---- Tipografía: serif en títulos y datos destacados; sans en todo lo demás ---- */
.view-head h2{font-size:30px; letter-spacing:-.02em;}
.card-block h3, .cycle-block h3, .orient-bloque-head h3, .esp-periodo-title, .plan-info-head h4, .empty-title{
  font-family:var(--font-serif); font-weight:600; letter-spacing:-.01em;
}
.card-block h3{font-size:18px; margin-bottom:18px;}
.cycle-block h3{font-size:18px;}
.orient-bloque-head h3{font-size:16px;}
.esp-periodo-title{font-size:17px;}
.eyebrow, .flabel, .plan-info-t, .esp-sub-t, .orient-rail-title{letter-spacing:.11em;}

/* ---- Tarjetas: un solo acabado ---- */
.card-block{padding:24px 26px;}
.card-block, .card, .orient-bloque, .orient-total-card, .schedule-card, .plan-info, .stat, .hist-filters, .orient-rail, .esp-periodo{
  border-color:var(--line);
}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
.card-head h3{margin:0!important; min-width:0;}
.card-head .link-btn{flex:none; white-space:nowrap;}
.card-block--compact{padding:20px 26px 22px;}
.link-btn .ico{width:14px; height:14px; transition:transform var(--t-fast) var(--ease);}
.link-btn:hover .ico{transform:translateX(2px);}

/* ---- Métricas: un único sistema (mosaico de ícono tintado + número serif + etiqueta) ---- */
.stats-row{gap:16px; margin-bottom:18px;}
.stat{padding:20px; gap:16px;}
.stat-ico{width:42px; height:42px; border-radius:12px; color:var(--accent);
  background:color-mix(in srgb, currentColor 8%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);}
.stat-ico--good{color:var(--good);}      /* logrado */
.stat-ico--accent{color:var(--accent);}  /* puntos acumulados */
.stat-ico--gold{color:var(--gold);}      /* calificación */
.stat-ico--info{color:var(--celeste-ink);} /* en curso */
.stat-ico .ico{width:19px; height:19px;}
.stat .n{font-family:var(--font-serif); font-size:31px; font-weight:600; letter-spacing:-.015em; line-height:1; color:var(--ink);}
.stat .l{margin-top:6px; font-size:12.5px; color:var(--ink-soft);}
.stat-tag{background:var(--gold-soft); color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold-line);}

/* ---- Progreso: nombre → barra → porcentaje en una sola línea ---- */
.prog-list{display:flex; flex-direction:column; gap:20px;}
.prog{display:grid; grid-template-columns:minmax(120px, 240px) minmax(0, 1fr) 130px; align-items:center; gap:20px; position:relative;}
.prog-name{min-width:0; display:flex; flex-direction:column; gap:1px;}
.prog-t{font-size:var(--fs-base); font-weight:600; color:var(--ink);}
.prog-sub{font-size:var(--fs-sm); color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.prog-track{height:6px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent); transition:box-shadow var(--t-fast) var(--ease);}
.prog-fill{height:100%; border-radius:var(--r-pill); background:var(--accent);}
.prog--done .prog-fill{background:var(--gold);}                  /* ciclo completo: dorado */
.prog-val{display:grid; grid-template-columns:58px 64px; align-items:baseline; column-gap:8px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.prog-pct{text-align:right;}
.prog-count{text-align:left;}
.prog-pct{font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.01em;}
.prog--done .prog-pct{color:var(--gold);}
.prog-count{font-size:var(--fs-sm); color:var(--ink-faint);}
.prog:hover .prog-track{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);}
.prog[data-tip]::after{left:0; bottom:auto; top:calc(100% + 4px); transform:translate(0, 4px);}
.prog[data-tip]:hover::after{transform:translate(0, 0);}

/* ---- Recibida: la fecha es el dato principal (navy con un toque dorado) ---- */
.recibida{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:30px 34px; border:1px solid #16284a; border-radius:var(--r-lg); color:#f3efe6;
  background:linear-gradient(135deg, #1c3158 0%, #203a66 100%); box-shadow:var(--shadow-md);}
.recibida::before{content:''; position:absolute; left:34px; top:0; width:48px; height:2px; background:var(--gold-bright); border-radius:0 0 2px 2px;}
.recibida-main{min-width:0;}
.recibida-eyebrow{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-bright);}
.recibida-eyebrow .ico{width:15px; height:15px;}
.recibida-fecha{margin:0; font-family:var(--font-serif); font-size:42px; font-weight:600; line-height:1.05; letter-spacing:-.02em; color:#fbf8f2;}
.recibida-fecha span{font-weight:400; font-size:.72em; color:rgba(251,248,242,.55);}
.recibida-sub{margin:12px 0 0; font-size:var(--fs-base); color:rgba(243,239,230,.72);}
.recibida-sub strong{color:#fbf8f2; font-weight:600;}
.recibida-nota{margin:10px 0 0; font-size:var(--fs-sm); color:rgba(243,239,230,.6); max-width:560px;}
.btn-recibida{flex:none; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; cursor:pointer; white-space:nowrap;
  border-radius:var(--r-md); border:1px solid rgba(214,184,119,.45); background:rgba(255,255,255,.04); color:#f3efe6;
  font:600 var(--fs-md) var(--font-sans);
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);}
.btn-recibida:hover{background:rgba(214,184,119,.14); border-color:var(--gold-bright);}
.btn-recibida:active{transform:scale(.98);}
.btn-recibida .ico{width:15px; height:15px; transition:transform var(--t-fast) var(--ease);}
.btn-recibida:hover .ico{transform:translateX(2px);}
.btn-recibida:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px;}
.recibida--inline{animation:fade-up var(--t-med) var(--ease);}

/* ---- Detalles dorados, con moderación ---- */
.nav-btn.active::before{background:var(--gold);}
.orient-rail-tag, .orient-badge{background:var(--gold-soft); color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold-line);}
.esp-periodo-tag{box-shadow:inset 0 0 0 1px var(--gold-line);}

/* ---- Superficies secundarias más limpias ---- */
.hist-filters{box-shadow:var(--shadow);}
.tab-bar{background:color-mix(in srgb, var(--surface-3) 80%, var(--bg)); border-color:var(--line);}
.progress-bar{height:6px; background:var(--surface-3); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent);}
.progress-bar.big{height:8px;}
.chip.active, .cpo-chip--actual, .dia-chip.on{background:var(--accent); border-color:var(--accent);}

@media (max-width:760px){
  .prog{grid-template-columns:minmax(0,1fr) auto; row-gap:8px; gap:8px 12px;}
  .prog-track{grid-column:1 / -1; order:3;}
  .prog-val{grid-template-columns:auto auto;}
  .recibida{flex-direction:column; align-items:flex-start; padding:26px 22px;}
  .stat .l{white-space:normal; flex-wrap:wrap; row-gap:3px;}
  .stat{padding:16px; gap:12px;}
  .stat .n{font-size:26px;}
  .recibida::before{left:22px;}
  .recibida-fecha{font-size:34px;}
  .view-head h2{font-size:25px;}
  .card-block{padding:20px;}
}

/* =========================================================
   ESTRUCTURA DE PANTALLAS (Resumen · Historial · Proyección · Datos)
   Misma paleta; nueva composición según las referencias.
   ========================================================= */

/* ---------- Resumen ---------- */
.view--dash{max-width:1180px;}
.saludo-mano{display:inline-block; font-size:.8em; transform-origin:70% 80%; animation:saludo 1.2s var(--ease) .3s 1;}
@keyframes saludo{0%,100%{transform:rotate(0);} 20%{transform:rotate(14deg);} 40%{transform:rotate(-6deg);} 60%{transform:rotate(10deg);} 80%{transform:rotate(-2deg);}}
.stats-row .stat{align-items:flex-start; padding:20px 22px;}
.stat-body{display:flex; flex-direction:column; align-items:flex-start;}
.stat-chip{margin-top:10px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:10px; max-width:100%; line-height:1.35;}
.stat-chip--good{color:var(--good); background:var(--good-soft);}
.stat-chip--accent{color:var(--accent); background:var(--accent-soft);}
.stat-chip--info{color:var(--celeste-ink); background:var(--celeste-soft);}
.stat-note{margin-top:10px; font-size:11.5px; color:var(--ink-faint); white-space:nowrap;}

.dash-grid{display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:16px; margin-bottom:16px; align-items:stretch;}
.dash-grid > .card-block, .dash-col > .card-block, .dash-col > .recibida{margin-bottom:0;}
.dash-col{display:flex; flex-direction:column; gap:16px;}
.dash-progreso{display:flex; flex-direction:column;}
.dash-progreso .prog-list{flex:1; justify-content:center; gap:26px; padding:6px 0 18px;}
.dash-progreso .prog{grid-template-columns:minmax(90px, 150px) minmax(0, 1fr) 124px;}
.info-dot{display:inline-flex; vertical-align:middle; margin-left:6px; color:var(--ink-faint); cursor:help;}
.info-dot .ico{width:15px; height:15px;}
.info-dot:hover{color:var(--accent);}
.dash-toggle{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:42px; margin-top:auto;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); color:var(--accent-ink);
  font:600 var(--fs-md) var(--font-sans); cursor:pointer;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);}
.dash-toggle:hover{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 30%, var(--line));}
.dash-toggle .ico{width:15px; height:15px; transition:transform var(--t-med) var(--ease);}
.dash-toggle .ico.is-open{transform:rotate(180deg);}
.detalle-ciclos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:0 0 14px; padding:14px; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:var(--r-md); animation:fade-up var(--t-med) var(--ease);}
.detalle-ciclo-t{margin:0 0 6px; font-size:var(--fs-md); font-weight:600;}
.detalle-ciclo-t span{font-weight:400; color:var(--ink-faint);}
.detalle-ciclo ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px;}
.detalle-ciclo li{font-size:var(--fs-sm); color:var(--ink-soft);}
.detalle-ciclo li em{font-style:normal; margin-left:6px; font-size:10.5px; font-weight:600; color:var(--celeste-ink); background:var(--celeste-soft); padding:1px 6px; border-radius:var(--r-pill);}

.dash-orient .card-head{justify-content:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.dash-orient .card-head h3{font-size:17px;}
.orient-badge{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px;}
.dash-orient-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px;}
.dash-orient-row .prog-t{font-weight:500; color:var(--ink-soft);}
.dash-orient-row .prog-val{display:flex; gap:8px;}
.dash-orient .prog-track{height:7px;}
.dash-orient-foot{display:flex; justify-content:flex-end; margin-top:10px;}

.recibida--dash{flex:1; display:block; padding:26px 28px;}
.recibida--dash::before{left:28px;}
.recibida--dash .recibida-fecha{font-size:36px;}
.recibida--dash .btn-recibida{margin-top:16px;}
.recibida-marca{position:absolute; right:22px; bottom:18px; width:92px; height:92px; color:rgba(255,255,255,.07); pointer-events:none;}
.recibida-marca svg{stroke-width:1.4;}

/* Tabla (Últimas materias / Historial) */
.tabla-head{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.tabla-row--ultimas{display:grid; grid-template-columns:minmax(0, 1fr) 190px 80px 110px; align-items:center; gap:16px;}
.tabla-head.tabla-row--ultimas{padding:0 4px 10px; border-bottom:1px solid var(--line-soft);}
.tabla-row.tabla-row--ultimas{padding:13px 4px; border-bottom:1px solid var(--line-soft); transition:background-color var(--t-fast) var(--ease);}
.tabla-row.tabla-row--ultimas:last-child{border-bottom:none;}
.tabla-row.tabla-row--ultimas:hover{background:var(--surface-2);}
.tabla-materia{display:flex; align-items:center; gap:10px; font-weight:500; min-width:0;}
.tabla-ok{color:var(--good); width:17px; height:17px;}
.tabla-chip{display:inline-block; font-size:var(--fs-sm); color:var(--ink-soft); background:var(--surface-3); border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap;}
.tabla-fecha{font-size:var(--fs-md); color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.dash-ultimas .hist-nota{width:30px; height:30px; font-size:var(--fs-md);}

/* ---------- Filtros (Historial y Cursando) ---------- */
.filtros{display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:0; margin-bottom:16px; padding:18px 8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);}
.filtros--uno{grid-template-columns:auto;}
.filtro{padding:0 22px; border-left:1px solid var(--line);}
.filtro:first-child{border-left:none;}
.filtro-t{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:var(--fs-base); font-weight:600; color:var(--ink);}
.filtro-ico{width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;}
.filtro-ico .ico{width:15px; height:15px;}
.filtro-ico--good{background:var(--good-soft); color:var(--good);}
.filtro-ico--accent{background:var(--accent-soft); color:var(--accent);}
.filtro-ico--gold{background:var(--gold-soft); color:var(--gold);}
.filtro-pills{display:flex; flex-wrap:wrap; gap:8px;}
.filtros .chip{height:34px; padding:0 15px; border:none; background:var(--surface-3); color:var(--ink-soft); font-size:var(--fs-md); font-weight:500; border-radius:10px;}
.filtros .chip:hover:not(.active){background:color-mix(in srgb, var(--surface-3) 60%, var(--line)); color:var(--ink);}
.filtros .chip.active{background:var(--accent); color:var(--on-accent); font-weight:600; box-shadow:var(--shadow-sm);}

.hist-tabla{padding:6px 0;}
.hist-row{grid-template-columns:minmax(0, 1fr) 150px 110px 100px 200px; padding:13px 22px;}
.hist-row > .hist-cat{justify-self:start;}
.hist-row > .hist-nota{justify-self:start;}
.hist-row > .hist-actions{justify-self:end;}
.hist-row--head{padding-top:12px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.hist-row--head:hover{background:none; box-shadow:none;}
.hist-row--head > span:last-child{justify-self:end;}

/* ---------- Cursando: rojo más suave en Desaprobada / Rechazada ---------- */
.cur-actions .btn-mini.remove{color:color-mix(in srgb, var(--danger) 62%, var(--ink-soft)); border-color:color-mix(in srgb, var(--danger) 18%, var(--line));}
.cur-actions .btn-mini.remove:hover:not(:disabled){color:color-mix(in srgb, var(--danger) 80%, var(--ink-soft)); background:color-mix(in srgb, var(--danger-soft) 70%, var(--surface)); border-color:color-mix(in srgb, var(--danger) 30%, var(--line));}

/* ---------- Proyección: arriba en dos columnas ---------- */
.proy-top{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); gap:28px; align-items:center; margin-bottom:22px;}
.proy-top--solo{grid-template-columns:1fr;}
.proy-title{font-family:var(--font-serif); font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.15; margin:0;}
.proy-intro .sub{margin-top:6px;}
.proy-orient{display:flex; align-items:center; gap:10px; margin:18px 0 6px; font-size:var(--fs-base); color:var(--ink);}
.proy-orient .orient-badge{font-size:12.5px; text-transform:none; letter-spacing:0; padding:4px 12px; cursor:help;}
.proy-orient-link{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-md); font-weight:600; color:var(--accent); text-decoration:none;}
.proy-orient-link .ico{width:13px; height:13px;}
.proy-orient-link:hover{text-decoration:underline; text-underline-offset:3px;}

.proy-practico{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); background:var(--surface); border:1px solid color-mix(in srgb, var(--good) 22%, var(--line));
  border-radius:var(--r-lg); box-shadow:var(--shadow); transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);}
.proy-practico--falta{border-color:color-mix(in srgb, var(--warn) 40%, var(--line)); background:color-mix(in srgb, var(--warn-soft) 55%, var(--surface));}
.proy-pr-col{display:flex; align-items:flex-start; gap:14px; padding:20px 22px; min-width:0;}
.proy-pr-col--fin{border-left:1px solid var(--line-soft);}
.proy-pr-ico{width:40px; height:40px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--good-soft); color:var(--good);}
.proy-pr-ico .ico{width:19px; height:19px;}
.proy-practico--falta .proy-pr-ico{background:var(--warn-soft); color:var(--warn);}
.proy-pr-ico--fin{background:var(--accent-soft); color:var(--accent);}
.proy-practico--falta .proy-pr-ico--fin{background:var(--surface-3); color:var(--ink-faint);}
.proy-pr-body{min-width:0;}
.proy-pr-t{margin:0 0 10px; font-size:var(--fs-base); font-weight:600; color:var(--ink);}
.proy-pr-t span{font-weight:400; color:var(--ink-faint);}
.proy-pr-col--fin .proy-pr-t{margin-bottom:2px; font-weight:500; color:var(--ink-soft);}
.proy-pr-fin{margin:0; font-family:var(--font-serif); font-size:24px; font-weight:600; color:var(--accent-ink); letter-spacing:-.01em;}
.proy-practico--falta .proy-pr-fin{color:var(--ink-faint);}
.proy-pr-hint{margin:6px 0 0; font-size:var(--fs-sm); color:var(--ink-faint); line-height:1.45;}
.proy-practico .esp-practico-row select{min-width:112px;}
.proy-sep{height:1px; background:var(--line); margin:0 0 20px;}
.proy-body .esp-search{max-width:420px; background-color:var(--surface);}

/* Períodos: banda lateral que dice qué tipo es */
.esp-periodo{display:flex; padding:0; overflow:visible;}
.esp-banda{flex:none; width:64px; display:flex; justify-content:center; padding-top:18px; border-radius:var(--r-lg) 0 0 var(--r-lg);
  background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border-right:1px solid var(--line-soft);}
.esp-banda-ico{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--accent);
  box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--line-soft);}
.esp-banda-ico .ico{width:19px; height:19px;}
.esp-periodo--verano .esp-banda{background:color-mix(in srgb, var(--gold-soft) 85%, var(--surface));}
.esp-periodo--verano .esp-banda-ico{color:var(--gold); background:color-mix(in srgb, var(--gold-soft) 70%, var(--surface));}
.esp-periodo--invierno .esp-banda{background:color-mix(in srgb, var(--celeste-soft) 90%, var(--surface));}
.esp-periodo--invierno .esp-banda-ico{color:var(--celeste-ink); background:color-mix(in srgb, var(--celeste-soft) 70%, var(--surface));}
.esp-periodo--edit .esp-banda{border-right-color:color-mix(in srgb, var(--accent) 20%, var(--line-soft));}
.esp-cuerpo{flex:1; min-width:0; padding:16px 18px;}
.esp-periodo--invierno .esp-periodo-tag{color:var(--celeste-ink); background:var(--celeste-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--celeste) 30%, transparent);}
.esp-mat{gap:7px;}
.esp-mat-ico{width:14px; height:14px; color:color-mix(in srgb, var(--accent) 70%, var(--ink-faint));}
.icon-btn{width:34px; height:34px; border-radius:10px;}
.icon-btn.is-open{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.icon-btn--edit{background:var(--surface-2);}

/* Menú ⋮ del período */
.esp-menu-wrap{position:relative;}
.esp-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:220px; padding:6px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md); animation:pop-in .12s var(--ease); transform-origin:top right;}
.esp-menu-op{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:none; background:none; border-radius:8px; cursor:pointer;
  font:500 var(--fs-md) var(--font-sans); color:var(--ink); text-align:left; transition:background-color var(--t-fast) var(--ease);}
.esp-menu-op .ico{width:15px; height:15px; color:var(--ink-faint);}
.esp-menu-op span{margin-left:auto; font-size:11px; color:var(--ink-faint);}
.esp-menu-op:hover:not(:disabled){background:var(--accent-soft); color:var(--accent-ink);}
.esp-menu-op:disabled{opacity:.4; cursor:not-allowed;}
.esp-menu-op--danger{color:var(--danger);}
.esp-menu-op--danger .ico{color:var(--danger);}
.esp-menu-op--danger:hover:not(:disabled){background:var(--danger-soft); color:var(--danger);}
.esp-menu-sep{height:1px; background:var(--line-soft); margin:5px 4px;}

/* ---------- Datos ---------- */
.dato{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px; align-items:start; padding:24px 26px;}
.dato--fila{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.dato--fila > .btn-primary, .dato--fila > .btn-mini{margin-top:0; flex:none;}
.dato-info{display:flex; gap:16px; align-items:flex-start; min-width:0;}
.dato-ico{width:44px; height:44px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.dato-ico .ico{width:20px; height:20px;}
.dato-ico--accent{background:var(--accent-soft); color:var(--accent);}
.dato-ico--violeta{background:color-mix(in srgb, var(--area-privado) 12%, var(--surface)); color:var(--area-privado);}
.dato-ico--good{background:var(--good-soft); color:var(--good);}
.dato-ico--danger{background:var(--danger-soft); color:var(--danger);}
.dato-texto h3{font-family:var(--font-sans); font-size:15.5px; font-weight:600; letter-spacing:0; margin:2px 0 6px;}
.dato-texto p{margin:0 0 16px; font-size:var(--fs-base); color:var(--ink-soft); line-height:1.55;}
.dato--fila .dato-texto p{margin-bottom:0; max-width:560px;}
.dato-texto a{font-weight:600; color:var(--accent); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset:3px;}
.dato-texto a:hover{text-decoration-color:var(--accent);}
.dato-texto .btn-primary, .dato-texto .btn-mini{margin-top:0;}
.dato-caja{margin:0; min-height:150px; height:100%; background:var(--surface-2); font-family:var(--font-sans); font-size:var(--fs-md);}
.dato-archivo{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; font-size:var(--fs-sm); color:var(--ink-faint);}
.dato--peligro{border-color:color-mix(in srgb, var(--danger) 16%, var(--line));}

/* ---------- Responsive de las pantallas nuevas ---------- */
@media (max-width:1100px){
  .dash-grid{grid-template-columns:1fr;}
  .proy-top{grid-template-columns:1fr; gap:18px;}
}
@media (max-width:900px){
  .filtros{grid-template-columns:1fr; gap:16px; padding:16px;}
  .filtro{padding:0; border-left:none; border-top:1px solid var(--line-soft); padding-top:14px;}
  .filtro:first-child{border-top:none; padding-top:0;}
  .hist-row{grid-template-columns:minmax(0,1fr) auto; row-gap:8px;}
  .hist-row--head{display:none;}
  .hist-row > .hist-actions{grid-column:1 / -1; justify-self:start;}
  .dato{grid-template-columns:1fr; gap:16px;}
  .dato--fila{flex-direction:column; align-items:flex-start;}
  .detalle-ciclos{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .tabla-row--ultimas{grid-template-columns:minmax(0,1fr) auto;}
  .tabla-row--ultimas > :nth-child(2), .tabla-head.tabla-row--ultimas{display:none;}
  .tabla-row.tabla-row--ultimas > .tabla-fecha{grid-column:1 / -1; padding-left:27px; margin-top:-8px; font-size:var(--fs-sm);}
  .proy-practico{grid-template-columns:1fr;}
  .proy-pr-col--fin{border-left:none; border-top:1px solid var(--line-soft);}
  .esp-banda{width:48px;}
  .esp-banda-ico{width:32px; height:32px;}
  .stat-note, .stat-chip{white-space:normal;}
  .dash-progreso .prog{grid-template-columns:minmax(0,1fr) auto;}
  .proy-title{font-size:25px;}
}

/* Ancho de contenido unificado para todas las pestañas */
.view, .view--dash{max-width:1140px;}
.proy-top{grid-template-columns:minmax(0, .85fr) minmax(0, 1.45fr);}
.proy-practico .esp-practico-row{flex-wrap:nowrap;}
@media (max-width:1100px){ .proy-top{grid-template-columns:1fr;} }
@media (max-width:520px){ .proy-practico .esp-practico-row{flex-wrap:wrap;} }
@media (max-width:560px){
  .stats-row .stat{flex-direction:column; gap:10px; padding:16px;}
  .stats-row .stat-ico{width:36px; height:36px;}
  .stat-chip{margin-top:8px;}
}

/* ============================================================
   AJUSTES PEDIDOS POR RAMIRO (sept. 2026)
   ------------------------------------------------------------
   1) Tarjetas del Resumen: el dato chico va DENTRO de su celda,
      pegado al borde inferior y alineado con el borde izquierdo
      de la tarjeta (antes quedaba corrido a la derecha porque
      vivía en la columna del texto, después del ícono).
   2) Cabecera de Proyección: el título arriba; orientación y
      Práctico arrancan juntos en una segunda línea.
   3) Rojo suave (el de "Desaprobada") en todos los botones
      destructivos: Eliminar del Historial y Quitar asignación.
   ============================================================ */

/* --- 1) Tarjetas de métricas --- */
.stats-row{align-items:stretch;}
.stats-row .stat{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:16px; row-gap:0;
  align-items:start; align-content:start;
}
.stats-row .stat > .stat-ico{grid-column:1; grid-row:1;}
.stats-row .stat > .stat-body{grid-column:2; grid-row:1;}
/* El pie ocupa el ancho completo de la tarjeta y se pega abajo. */
.stats-row .stat > .stat-pie{
  grid-column:1 / -1; grid-row:2;
  display:flex; align-items:flex-end;
  min-height:26px; margin-top:14px;
}
.stats-row .stat-chip, .stats-row .stat-note{margin-top:0;}
.stat-note{color:var(--ink-faint);}

/* --- 2) Cabecera de Proyección --- */
.proy-top{display:block; margin-bottom:22px;}
.proy-intro{margin-bottom:18px;}
.proy-cols{
  display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.45fr);
  gap:28px; align-items:start;
}
.proy-orient-box{padding-top:2px;}
.proy-orient{margin:0 0 8px;}
.orient-badge--falta{
  color:var(--warn); background:var(--warn-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent);
}
@media (max-width:1100px){ .proy-cols{grid-template-columns:1fr; gap:18px;} }

/* --- 3) Botones destructivos, todos con el mismo rojo suave --- */
.btn-mini.remove{
  color:color-mix(in srgb, var(--danger) 62%, var(--ink-soft));
  border-color:color-mix(in srgb, var(--danger) 18%, var(--line));
}
.btn-mini.remove:hover:not(:disabled){
  color:color-mix(in srgb, var(--danger) 80%, var(--ink-soft));
  background:color-mix(in srgb, var(--danger-soft) 70%, var(--surface));
  border-color:color-mix(in srgb, var(--danger) 30%, var(--line));
}

/* --- Cursando: nombre clickeable, carpeta y foco en el horario --- */
.cur-name--btn{
  background:none; border:0; padding:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer; border-bottom:1px dashed transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cur-name--btn:hover{color:var(--accent); border-bottom-color:color-mix(in srgb, var(--accent) 45%, transparent);}
.cur-name--btn:focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px;}
.cur-link{margin:6px 0 0;}
.cur-link .carpeta-chip{font-size:11.5px;}

/* Materia resaltada en el horario tras tocarla en la lista. */
.ev--foco{
  outline:2px solid var(--gold-bright, var(--gold)); outline-offset:1px;
  box-shadow:0 6px 18px color-mix(in srgb, var(--ink) 22%, transparent);
  z-index:3; animation:ev-foco-in .5s var(--ease);
}
.ev--apagado{opacity:.4;}
.ev--materia{transition:opacity var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);}
@keyframes ev-foco-in{
  0%{transform:scale(1);} 40%{transform:scale(1.04);} 100%{transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){ .ev--foco{animation:none;} }

/* ============================================================
   CAMPANITA + CENTRO DE ALERTAS + GUÍA INICIAL (sept. 2026)
   Capa nueva: no toca ninguna regla anterior.
   ============================================================ */

/* --- Campanita, siempre arriba a la derecha --- */
.campana-wrap{position:fixed; top:18px; right:20px; z-index:60;}
.campana-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.campana-btn .ico{width:18px; height:18px;}
.campana-btn:hover{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:var(--shadow-md);}
.campana-btn:active{transform:translateY(1px);}
.campana-btn:focus-visible{outline:none; box-shadow:var(--ring);}
.campana-btn--on{color:var(--accent); border-color:var(--accent); background:var(--accent-soft);}
/* Indicador discreto: número chico, sin colores estridentes. */
.campana-badge{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--accent); color:var(--on-accent);
  font-size:10.5px; font-weight:600; line-height:18px; text-align:center;
  border:2px solid var(--bg); font-variant-numeric:tabular-nums;
}

/* --- Panel de alertas (solo aparece al tocar la campanita) --- */
.alertas-panel{
  position:absolute; top:52px; right:0; width:min(390px, calc(100vw - 32px));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
  max-height:min(72vh, 640px); display:flex; flex-direction:column;
}
.alertas-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 16px 12px; border-bottom:1px solid var(--line-soft);
}
.alertas-head h3{margin:0; font-family:var(--font-serif); font-size:18px; font-weight:600;}
.alertas-sub{margin:3px 0 0; font-size:var(--fs-sm); color:var(--ink-faint);}
.alertas-lista{overflow-y:auto; padding:8px;}
.alerta{
  display:flex; gap:12px; padding:13px; border-radius:var(--r-md);
  border:1px solid var(--line-soft); background:var(--surface);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.alerta + .alerta{margin-top:8px;}
.alerta:hover{border-color:var(--line-strong); background:var(--surface-2);}
.alerta-ico{
  width:32px; height:32px; flex:none; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--ink-soft);
}
.alerta-ico .ico{width:16px; height:16px;}
.alerta--warn .alerta-ico{background:var(--warn-soft); color:var(--warn);}
.alerta--info .alerta-ico{background:var(--celeste-soft); color:var(--celeste-ink);}
.alerta--idea .alerta-ico{background:var(--gold-soft); color:var(--gold);}
.alerta-body{min-width:0; flex:1;}
.alerta-t{margin:0; font-size:var(--fs-base); font-weight:600; color:var(--ink); line-height:1.35;}
.alerta-x{margin:4px 0 0; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.5;}
.alerta-pie{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap;}
.alerta-pie .btn-mini .ico{width:12px; height:12px;}
.alerta-descartar{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:var(--fs-sm); color:var(--ink-faint);
  text-decoration:underline; text-underline-offset:3px;
  transition:color var(--t-fast) var(--ease);
}
.alerta-descartar:hover{color:var(--ink-soft);}
.alertas-vacio{padding:30px 22px 34px; text-align:center;}
.alertas-vacio-ico{
  width:44px; height:44px; margin:0 auto 10px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--good-soft); color:var(--good);
}
.alertas-vacio-ico .ico{width:21px; height:21px;}
.alertas-vacio-t{margin:0; font-weight:600; color:var(--ink);}
.alertas-vacio-x{margin:5px 0 0; font-size:var(--fs-sm); color:var(--ink-faint); line-height:1.5;}

.alertas-enter-active, .alertas-leave-active{transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);}
.alertas-enter-from, .alertas-leave-to{opacity:0; transform:translateY(-8px) scale(.98);}

/* --- Guía inicial --- */
.guia-capa{
  position:fixed; inset:0; z-index:70;
  background:color-mix(in srgb, #0b1524 55%, transparent);
  backdrop-filter:blur(2px);
}
.guia-card{
  /* Por encima del recorte de luz del elemento resaltado (.guia-foco), que
     usa una sombra enorme para oscurecer todo lo demás. Su posición (top/left)
     la calcula JS en cada paso, siempre en el rincón opuesto a lo señalado,
     así nunca tapa lo que la guía está explicando; por eso se anima al moverse. */
  position:fixed; z-index:90;
  width:min(520px, calc(100vw - 32px));
  max-height:calc(100vh - 32px); overflow:auto;
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius:var(--r-xl, 18px);
  /* Se tiene que distinguir de las tarjetas de la app que quedan nítidas
     alrededor: borde dorado suave + sombra marcada. */
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent), 0 22px 60px rgba(4,8,16,.45);
  padding:22px 24px 20px;
  transition:top .34s var(--ease), left .34s var(--ease);
}
@media (prefers-reduced-motion:reduce){ .guia-card{transition:none;} }
.guia-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.guia-paso{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-soft); padding:4px 10px; border-radius:var(--r-pill);
}
.guia-omitir{
  background:none; border:0; padding:4px 6px; cursor:pointer; font:inherit;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-faint);
  transition:color var(--t-fast) var(--ease);
}
.guia-omitir:hover{color:var(--ink);}
.guia-barra{height:3px; border-radius:2px; background:var(--surface-3); margin:14px 0 16px; overflow:hidden;}
.guia-barra-fill{height:100%; background:var(--accent); border-radius:2px; transition:width var(--t-med) var(--ease);}
.guia-t{margin:0; font-family:var(--font-serif); font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1.25;}
.guia-x{margin:9px 0 0; font-size:var(--fs-base); color:var(--ink-soft); line-height:1.6;}
.guia-pie{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:20px;}
.guia-pie .guia-atras{margin-right:auto;}
.guia-pie .btn-primary .ico{width:14px; height:14px;}
.guia-enter-active, .guia-leave-active{transition:opacity var(--t-med) var(--ease);}
.guia-enter-from, .guia-leave-to{opacity:0;}
.guiacard-enter-active{animation:guia-in var(--t-med) var(--ease);}
.guiacard-leave-active{transition:opacity var(--t-fast) var(--ease);}
.guiacard-leave-to{opacity:0;}
@keyframes guia-in{from{transform:translateY(14px); opacity:0;} to{transform:translateY(0); opacity:1;}}

/* Mini-importador dentro de la solapa (paso de materias, opcional). */
.guia-siu{margin-top:14px; padding:14px 14px 12px; border:1px solid var(--line); border-radius:var(--r-lg, 14px); background:var(--surface-2);}
.guia-siu-pasos{margin:0 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:5px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.5;}
.guia-siu-pasos a{color:var(--accent); font-weight:600;}
.guia-siu kbd{font:inherit; font-size:11px; font-weight:600; padding:1px 5px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:5px; background:var(--surface); color:var(--ink);}
.guia-siu-caja{width:100%; min-height:56px; resize:vertical; margin:0;}
.guia-siu-acc{display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap;}
.guia-siu-acc .ico{width:14px; height:14px;}
.guia-siu-nota{flex:1; min-width:180px; font-size:12px; color:var(--ink-faint); line-height:1.45;}
.guia-ok{display:flex; align-items:flex-start; gap:8px; margin:12px 0 0; padding:10px 12px; border-radius:var(--r-md);
  background:var(--good-soft); color:var(--ink); font-size:var(--fs-sm); line-height:1.5;}
.guia-ok .ico{width:16px; height:16px; flex:none; color:var(--good); margin-top:1px;}

/* ---- Lo que la guía está señalando queda POR ENCIMA del velo ----
   El velo (.guia-capa, z-index 70) oscurece y desenfoca lo que queda por
   debajo. Todo lo que el paso actual señala sube por encima: así se ve
   nítido y sin oscurecer, y el resto de la pantalla queda de fondo.
   `guia-arriba` sube los contenedores que crean contexto de apilado (la
   barra lateral, la capa de la campanita), si no sus hijos no podrían subir.
   La clase va repetida para ganarle en especificidad al z-index propio de
   cada contenedor, sin necesidad de !important. */
.guia-arriba.guia-arriba{z-index:72;}
/* El contenedor que tiene ADENTRO lo señalado (la campanita, la barra
   lateral) va por encima del contenido nítido: si no, la placa de
   `.guia-claro` (z 74) lo tapa cuando se superponen. */
.guia-arriba.guia-arriba:has(.guia-foco){z-index:77;}

/* Contenido del que habla el paso: nítido, sin marco. */
.guia-claro{position:relative; z-index:74;}
/* Placa opaca detrás, para que no se transparente el velo oscuro. */
.guia-claro::before{
  content:''; position:absolute; inset:-18px -22px; z-index:-1;
  background:var(--bg); border-radius:22px;
}

/* Elemento señalado: además, marco dorado. */
.guia-foco{
  position:relative; z-index:76;
  outline:3px solid var(--gold); outline-offset:3px; border-radius:var(--r-md);
  animation:guia-latido 2.4s var(--ease) infinite;
}
.guia-foco::before{
  content:''; position:absolute; inset:-4px; z-index:-1;
  background:var(--surface); border-radius:var(--r-md);
}
@keyframes guia-latido{
  0%, 100%{ outline-color:var(--gold); }
  50%{ outline-color:color-mix(in srgb, var(--gold) 45%, transparent); }
}
@media (prefers-reduced-motion:reduce){ .guia-foco{animation:none;} }

/* En la barra lateral, la pestaña señalada es la única que queda encendida. */
.sidebar.guia-arriba .nav-btn:not(.guia-foco),
.sidebar.guia-arriba .account-box,
.sidebar.guia-arriba .undo-bar,
.sidebar.guia-arriba .brand{opacity:.3; transition:opacity var(--t-med) var(--ease);}
.sidebar.guia-arriba .nav-btn.guia-foco{opacity:1;}

@media (max-width:760px){
  .campana-wrap{top:auto; bottom:18px; right:16px;}
  .alertas-panel{top:auto; bottom:52px; right:0;}
  .guia-card{padding:18px 18px 16px;}
  .guia-t{font-size:19px;}
}
@media (prefers-reduced-motion:reduce){
  .guiacard-enter-active{animation:none;}
}

/* En pantallas angostas el dato chico no debe comerse la tarjeta. */
@media (max-width:560px){
  .stats-row .stat{padding:15px;}
  .stats-row .stat > .stat-pie{margin-top:10px; min-height:0;}
  .stats-row .stat-chip{font-size:10.5px; padding:3px 8px;}
  .stats-row .stat-note{font-size:10.5px;}
}

/* ============================================================
   PANEL LATERAL DE MATERIA + CARPETA INTERNA (sept. 2026)
   ============================================================ */

/* --- Filas clickeables: toda la superficie abre el panel --- */
.cur-row--click, .hist-row--click{cursor:pointer;}
.cur-row--click:hover, .hist-row--click:hover{background:var(--surface-2);}
.row--abierta{background:var(--accent-soft);}
.row--abierta:hover{background:var(--accent-soft);}
/* Lo que tiene acción propia no debe "sentirse" parte del fondo clickeable. */
.cur-row--click .btn-mini, .hist-row--click .btn-mini,
.cur-row--click .carpeta-chip, .hist-row--click .carpeta-chip,
.cur-row--click .cur-name--btn{cursor:pointer;}

/* --- El panel --- */
.mpanel{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 92vw); z-index:64;
  background:var(--surface); border-left:1px solid var(--line);
  box-shadow:-18px 0 40px -28px color-mix(in srgb, var(--ink) 55%, transparent);
  display:flex; flex-direction:column;
  transition:width var(--t-med) var(--ease);
}
/* Expandido: ocupa casi toda la pantalla. */
.mpanel--grande{
  width:min(1100px, 100vw); left:auto;
  border-left:1px solid var(--line);
}
.mpanel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 18px 14px; border-bottom:1px solid var(--line-soft); flex:none;
}
.mpanel-titulo{min-width:0;}
.mpanel-eyebrow{
  margin:0 0 3px; font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint);
}
.mpanel-head h3{
  margin:0; font-family:var(--font-serif); font-size:20px; font-weight:600;
  line-height:1.25; letter-spacing:-.01em;
}
.mpanel-acciones{display:flex; gap:6px; flex:none;}
.mpanel-body{overflow-y:auto; padding:16px 18px 28px; flex:1;}

/* Datos de la materia */
.mpanel-datos{
  display:grid; grid-template-columns:1fr; gap:0;
  border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden;
}
.mpanel-dato{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 13px; border-bottom:1px solid var(--line-soft); font-size:var(--fs-sm);
}
.mpanel-dato:last-child{border-bottom:none;}
.mpanel-dato-k{color:var(--ink-faint); flex:none;}
.mpanel-dato-v{color:var(--ink); font-weight:500; text-align:right; min-width:0;}

/* Bloque de Drive */
.mpanel-drive{
  display:flex; align-items:center; gap:12px; margin-top:14px; padding:13px;
  border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--surface-2);
}
.mpanel-drive-ico{
  width:32px; height:32px; flex:none; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--celeste-soft); color:var(--celeste-ink);
}
.mpanel-drive-ico .ico{width:15px; height:15px;}
.mpanel-drive-txt{min-width:0; flex:1;}
.mpanel-drive-t{margin:0; font-size:var(--fs-sm); font-weight:600; color:var(--ink);}
.mpanel-drive-x{margin:2px 0 0; font-size:var(--fs-xs, 11.5px); color:var(--ink-faint); line-height:1.45;}
.mpanel-drive .btn-mini{flex:none; text-decoration:none;}
.mpanel-drive .btn-mini .ico{width:12px; height:12px;}

/* Carpeta interna */
.mpanel-sec{margin-top:22px;}
.mpanel-sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px;}
.mpanel-sec-head h4{margin:0; font-family:var(--font-serif); font-size:16px; font-weight:600;}
.mpanel-peso{font-size:var(--fs-sm); color:var(--ink-faint);}
.mpanel-subir{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:var(--h-btn); border-radius:var(--r-md); cursor:pointer;
  border:1px dashed color-mix(in srgb, var(--accent) 38%, var(--line));
  background:var(--accent-soft); color:var(--accent); font-weight:600; font-size:var(--fs-base);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mpanel-subir:hover{background:color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border-color:var(--accent);}
.mpanel-subir .ico{width:15px; height:15px;}
.mpanel-subir input[type="file"]{display:none;}
.mpanel-subir--cargando{opacity:.6; cursor:progress;}
.mpanel-hint{margin:7px 0 0; font-size:var(--fs-sm); color:var(--ink-faint); text-align:center;}

.mpanel-archivos{margin-top:14px; display:flex; flex-direction:column; gap:7px;}
.marchivo{
  display:flex; align-items:center; gap:11px; padding:10px 11px;
  border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--surface);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.marchivo:hover{border-color:var(--line-strong); background:var(--surface-2);}
.marchivo-ico{
  width:30px; height:30px; flex:none; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--ink-soft);
}
.marchivo-ico .ico{width:15px; height:15px;}
.marchivo-body{min-width:0; flex:1;}
.marchivo-n{margin:0; font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.marchivo-m{margin:2px 0 0; font-size:11px; color:var(--ink-faint);}
.marchivo-acciones{display:flex; gap:3px; flex:none;}
.marchivo-acciones .icon-btn{width:30px; height:30px;}
.marchivo-acciones .icon-btn .ico{width:14px; height:14px;}
.icon-btn--del:hover:not(:disabled){color:color-mix(in srgb, var(--danger) 75%, var(--ink-soft));}
.marchivo--lejos{opacity:.62;}
.marchivo--lejos .marchivo-ico{background:var(--warn-soft); color:var(--warn);}

.mpanel-vacio{
  margin-top:16px; padding:26px 18px; text-align:center;
  border:1px dashed var(--line); border-radius:var(--r-md); background:var(--surface-2);
}
.mpanel-vacio-ico{
  width:38px; height:38px; margin:0 auto 9px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--ink-faint);
}
.mpanel-vacio-ico .ico{width:18px; height:18px;}
.mpanel-vacio-t{margin:0; font-weight:600; color:var(--ink-soft); font-size:var(--fs-base);}
.mpanel-vacio-x{margin:5px auto 0; max-width:34ch; font-size:var(--fs-sm); color:var(--ink-faint); line-height:1.5;}
.mpanel-nota{margin:16px 0 0; font-size:11px; color:var(--ink-faint); line-height:1.5;}

/* En pantalla grande, los archivos se acomodan en dos columnas. */
.mpanel--grande .mpanel-body{max-width:1000px; margin:0 auto; width:100%; padding:22px 26px 34px;}
.mpanel--grande .mpanel-datos{grid-template-columns:repeat(2, minmax(0,1fr));}
.mpanel--grande .mpanel-dato:nth-last-child(2):nth-child(odd){border-bottom:none;}
.mpanel--grande .mpanel-archivos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px;}
.mpanel--grande .mpanel-head{max-width:1000px; margin:0 auto; width:100%; padding:22px 26px 16px;}

.mpanel-enter-active, .mpanel-leave-active{transition:transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);}
.mpanel-enter-from, .mpanel-leave-to{transform:translateX(24px); opacity:0;}

@media (max-width:760px){
  .mpanel{width:100vw; border-left:none;}
  .mpanel--grande{width:100vw;}
  .mpanel--grande .mpanel-datos, .mpanel--grande .mpanel-archivos{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .mpanel-enter-active, .mpanel-leave-active{transition:none;}
}

/* Con el panel lateral abierto, el contenido se corre para que no quede
   tapado (en pantalla grande el panel ya ocupa todo y no hace falta). */
.main{transition:padding-right var(--t-med) var(--ease);}
@media (min-width:1000px){
  .main--panel{padding-right:calc(min(420px, 92vw) + 44px);}
}
.campana-wrap{transition:right var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);}
@media (min-width:1000px){
  .campana-wrap--corrida{right:calc(min(420px, 92vw) + 20px);}
}
.campana-wrap--oculta{opacity:0; pointer-events:none;}