/* Campus ILC -- estilos del prototipo aprobado "campus-premium"
   (https://claude.ai/artifact/XBPwNCF3jBmmEjvDzkJYdA), copiados TAL CUAL
   el 2026-10-14 (pedido del usuario: "exactamente igual a lo que
   diseñamos"). No editar esta parte a mano: si cambia el prototipo, se
   vuelve a copiar. Lo propio del campus real va al final, en
   "Adaptaciones al contenido real". */
/* Layout: barra lateral en degradado morado ILC → morado oscuro con toques dorados + lienzo lila claro; contenido máx. 1220 px. Solo tema claro (decisión del usuario). */
:root {
  color-scheme: light;
  --bg: #F5F0F6; --surface: #FFFFFF; --surface-2: #FAF6FA;
  --ink: #23161F; --ink-2: #594B5E; --ink-3: #76687C;
  --line: #E6DAE7; --line-2: #D5C4D8;
  --ilc: #6B4771; --ilc-mid: #4A3050; --ilc-deep: #2A1730;
  --accent: #6B4771; --accent-ink: #FFFFFF; --accent-soft: #F3EAF4; --accent-text: #5A3A61;
  --gold: #9C6E24; --gold-bright: #E8CB92; --gold-soft: #F7ECD8; --gold-line: #E2C690;
  --ok: #2B7756; --ok-soft: #E1F1E8; --warn: #845500; --warn-soft: #FAEED3; --bad: #8A2A1A; --bad-soft: #FBE9E5; --info: #1F5F86; --info-soft: #E2EFF7;
  --focus: #C08A35; --shadow: 46 24 52;
  --on-dark: #FBF4FC; --on-dark-2: #E2D0E6;
  --f-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r-xl: 26px; --r-lg: 20px; --r-md: 14px;
  --grad: linear-gradient(160deg, var(--ilc) 0%, var(--ilc-mid) 52%, var(--ilc-deep) 100%);
  --logo: url("../img/sello-ilc.webp");
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: 0.005em; line-height: 1.05; margin: 0; text-wrap: balance; }
h1 { font-size: 40px; }
h2 { font-size: 26px; }
h3 { font-size: 23px; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.tnum { font-variant-numeric: tabular-nums; }
.col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow: hidden; color: var(--on-dark); background: var(--grad); display: flex; flex-direction: column; isolation: isolate; }
.aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; }
.aurora .a1 { width: 360px; height: 360px; left: -140px; top: -110px; background: radial-gradient(closest-side, rgba(196,150,206,0.55), transparent); }
.aurora .a2 { width: 320px; height: 320px; right: -170px; bottom: 30px; background: radial-gradient(closest-side, rgba(232,203,146,0.34), transparent); }
.grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.17; mix-blend-mode: soft-light; pointer-events: none; border-radius: inherit; }
.side-inner { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px 16px 18px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 18px; }
.brand-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ilc-mid); background: linear-gradient(145deg, #FFFFFF, #EEDFF2); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5), inset 0 -2px 0 rgba(74,48,80,0.15); }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name strong { font-size: 15px; letter-spacing: 0.08em; }
.brand-name span { font-size: 11px; letter-spacing: 0.3em; color: var(--gold-bright); }
.nav { position: relative; display: flex; flex-direction: column; gap: 4px; }
.nav-pill { position: absolute; left: 0; top: 0; width: 100%; height: 52px; border-radius: 14px; background: linear-gradient(180deg, #FFFFFF, #F5ECF7); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5), inset 0 1px 0 #FFFFFF; z-index: 0; }
.nav-pill::after { content: ""; position: absolute; left: 12px; top: 50%; width: 4px; height: 18px; margin-top: -9px; border-radius: 4px; background: linear-gradient(180deg, var(--gold-bright), #C99A4A); }
.nav-item { position: relative; z-index: 1; min-height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 26px; border: 0; border-radius: 14px; background: transparent; color: var(--on-dark-2); font-size: 15px; font-weight: 500; text-align: left; transition: color .35s var(--ease); }
.nav-item:hover { color: #FFFFFF; }
.nav-item[aria-current="page"] { color: #3B2241; font-weight: 600; }
.nav-item svg { flex: 0 0 auto; }
.nav-grupo { display: block; padding: 14px 14px 2px 26px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); }
.nav-item .badge { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--gold-bright); color: #3B2241; }
.side-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; margin-top: auto; }
.side-foot .nav-item[aria-current="page"] { background: linear-gradient(180deg, #FFFFFF, #F5ECF7); }
.me { display: flex; align-items: center; gap: 12px; padding: 14px 8px 4px; border-top: 1px solid rgba(255,255,255,0.14); }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #FFFFFF; background: conic-gradient(from 210deg, #A57BAD, #E8CB92, #6B4771, #A57BAD); box-shadow: 0 0 0 2px rgba(255,255,255,0.22); }
.me strong { display: block; font-size: 14px; }
.me span { font-size: 13px; color: var(--on-dark-2); }
.rol-btn { min-height: 44px; border-radius: 12px; border: 1px solid rgba(232,203,146,0.45); background: rgba(255,255,255,0.06); color: #FFFFFF; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .3s; }
.rol-btn:hover { background: rgba(255,255,255,0.12); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 4vw, 40px); background: rgba(245,240,246,0.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(230,218,231,0.8); }
.crumb { font-size: 14px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; min-width: 0; flex-wrap: wrap; }
.crumb strong { color: var(--ink); font-weight: 600; }
.crumb .rolchip { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.switch .track { width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; transition: background-color .3s var(--ease); }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: transform .45s var(--ease); }
.switch[aria-checked="true"] .track { background: var(--accent); }
.switch[aria-checked="true"] .knob { transform: translateX(16px); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink-2); }
.menu-btn { display: none; }
.view { width: 100%; max-width: 1220px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); padding-block: 30px 90px; display: flex; flex-direction: column; gap: 26px; }
.view:focus { outline: none; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.head .t { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 420px; }
.head p { color: var(--ink-2); max-width: 64ch; }

/* ---------- Superficies ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgb(var(--shadow) / 0.06), 0 10px 30px -18px rgb(var(--shadow) / 0.28); }
.lift { transition: transform .5s var(--ease), border-color .35s var(--ease); }
.lift::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 28px 56px -26px rgb(var(--shadow) / 0.45); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.lift:hover { transform: translateY(-5px); border-color: var(--line-2); }
.lift:hover::after { opacity: 1; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(165,123,173,0.17), transparent 50%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; z-index: 0; }
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }
.dark { position: relative; overflow: hidden; isolation: isolate; color: var(--on-dark); border-radius: var(--r-xl); background: linear-gradient(130deg, var(--ilc) 0%, var(--ilc-mid) 48%, var(--ilc-deep) 100%); box-shadow: 0 30px 60px -32px rgba(42,23,48,0.75), inset 0 1px 0 rgba(255,255,255,0.14); }
.dark .blob { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.dark .b1 { width: 520px; height: 520px; right: -150px; top: -270px; background: radial-gradient(closest-side, rgba(232,203,146,0.38), transparent); }
.dark .b2 { width: 460px; height: 460px; left: -170px; bottom: -280px; background: radial-gradient(closest-side, rgba(196,150,206,0.5), transparent); }
.dark .b3 { width: 260px; height: 260px; left: 46%; top: 30%; background: radial-gradient(closest-side, rgba(165,123,173,0.45), transparent); }
.dark .dots-bg { position: absolute; inset: 0; z-index: -1; opacity: 0.22; background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(110deg, transparent 30%, #000 75%); mask-image: linear-gradient(110deg, transparent 30%, #000 75%); }
.dark h2, .dark h3 { color: #FFFFFF; }
.dark .eyebrow { color: var(--gold-bright); }
.dark .muted { color: var(--on-dark-2); }
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(232,203,146,0.55), transparent); border: 0; margin: 0; width: 100%; }

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 14px; border: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; transition: transform .25s var(--ease), background-color .3s var(--ease), color .3s, border-color .3s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(160deg, #7A5481, var(--accent) 60%, #573A5D); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 26px -14px rgb(var(--shadow) / 0.75); }
.btn-gold { background: linear-gradient(160deg, #F0D7A6, #D9AE63 60%, #C2933F); color: #3B2241; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 26px -14px rgba(156,110,36,0.7); }
.btn-light { background: #FFFFFF; color: #3B2241; box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5); }
.btn-ghost { background: var(--surface); color: var(--accent-text); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-glass { background: rgba(255,255,255,0.1); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.32); }
.btn-glass:hover { background: rgba(255,255,255,0.16); }
.btn-ok { background: var(--ok); color: #FFFFFF; }
.btn-danger { background: var(--bad); color: #FFFFFF; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); pointer-events: none; }
.shine:hover::after { left: 130%; transition: left 1s var(--ease); }
.btn.is-done { background: var(--ok); color: #FFFFFF; }
.linkish { border: 0; background: none; padding: 0; font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pastillas, chips, pestañas ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.p-free { background: var(--accent-soft); color: var(--accent-text); }
.p-on { background: var(--warn-soft); color: var(--warn); }
.p-ok { background: var(--ok-soft); color: var(--ok); }
.p-new { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.p-bad { background: var(--bad-soft); color: var(--bad); }
.p-info { background: var(--info-soft); color: var(--info); }
.p-gold { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); }
.p-glass { background: rgba(255,255,255,0.14); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.24); }
.p-prem { background: linear-gradient(135deg, #F0D7A6, #D9AE63); color: #3B2241; }
.ind { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.chips { position: relative; display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); }
.chips .ind { border-radius: 999px; background: linear-gradient(160deg, #7A5481, var(--accent)); box-shadow: 0 8px 18px -10px rgb(var(--shadow) / 0.8); }
.chip { position: relative; z-index: 1; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink-2); transition: color .35s var(--ease); }
.chip[aria-pressed="true"] { color: var(--accent-ink); }
.chip .n { font-weight: 500; opacity: 0.75; margin-left: 4px; }
.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs .ind { border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--gold-bright)); }
.tab { position: relative; z-index: 1; min-height: 50px; padding: 0 18px; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--accent-text); }
.seg { position: relative; display: inline-flex; flex-wrap: wrap; padding: 6px; gap: 4px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.seg .ind { border-radius: 12px; background: var(--surface); box-shadow: 0 8px 18px -10px rgb(var(--shadow) / 0.6), 0 0 0 1px var(--line-2); }
.seg button { position: relative; z-index: 1; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.seg button[aria-pressed="true"] { color: var(--accent-text); }
.rgroup { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.rgroup .ind { border-radius: 20px; border: 2px solid var(--accent); box-shadow: 0 0 0 5px rgba(107,71,113,0.12); }
.rcard { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); text-align: left; color: var(--ink); }
.rcard .lv { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 20px; font-weight: 700; color: #FFFFFF; background: var(--grad); }
.rcard .lv.ok { background: linear-gradient(145deg, #3E9C73, #2B7756); }
/* E-Coach: el sello de la certificación en lugar de la inicial (2026-10-24), como .co-mini */
.rcard .lv.sello { background: #FFFFFF; box-shadow: 0 8px 18px -10px rgb(var(--shadow) / 0.55); }
.rcard .lv.sello img { width: 44px; height: 44px; display: block; }

/* ---------- Búsqueda ---------- */
.search { position: relative; flex: 0 1 380px; min-width: 240px; }
.search input { width: 100%; min-height: 52px; padding: 0 50px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; color: var(--ink); transition: border-color .3s var(--ease), box-shadow .4s var(--ease); }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 5px rgba(107,71,113,0.14), 0 18px 30px -22px rgb(var(--shadow) / 0.6); }
.search > svg { position: absolute; left: 18px; top: 16px; color: var(--accent-text); pointer-events: none; }
.search .clear { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent-soft); color: var(--accent-text); font-size: 18px; line-height: 1; }
.results { position: absolute; top: 60px; left: 0; right: 0; z-index: 15; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.res { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: var(--ink); }
.res:hover { background: var(--accent-soft); }

/* ---------- Tarjeta principal (continuar) ---------- */
.hero { padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 36px; align-items: center; }
.hero h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--on-dark-2); font-size: 15px; }
.hero .meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-bright); }
.hero .hero-sub { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.45; color: var(--on-dark-2); }
.hero .hero-acc { margin-top: 10px; }
.hero .hero-acc .btn { min-height: 60px; padding: 0 30px; font-size: 18px; }
/* Quizzes que quedaron atrás (2026-10-24): aviso chico bajo el botón de la lección. */
.hero .hero-pend { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: 2px; padding: 10px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); background: var(--gold-soft); border: 1px solid var(--gold-line); text-decoration: none; }
.hero .hero-pend svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gold); }
.hero .hero-pend:hover { border-color: var(--gold); }
.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ring-wrap .ring svg { width: 100%; height: 100%; }
.ring-lbl { font-size: 15px; font-weight: 500; color: var(--on-dark-2); text-align: center; }
.ring { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .val { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ring .val strong { font-family: var(--f-display); font-size: 50px; font-weight: 700; color: #FFFFFF; }
.ring .val > span { font-size: 13px; color: var(--on-dark-2); margin-top: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
.steps-mini { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.steps-mini .lbl { font-size: 14px; color: var(--on-dark-2); }
.spills { display: flex; flex-wrap: wrap; gap: 8px; }
.sp { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 7px; border-radius: 999px; font-size: 14px; border: 1px dashed rgba(255,255,255,0.4); color: var(--on-dark-2); background: transparent; transition: background-color .3s var(--ease), color .3s; }
.sp:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: #FFFFFF; }
.sp .c { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 2px solid rgba(255,255,255,0.45); color: #FFFFFF; }
.sp.q .c { border-radius: 8px; }
.sp.done { border-style: solid; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #FFFFFF; }
.sp.done .c { background: #3E9C73; border-color: #3E9C73; }
.sp.now { background: #FFFFFF; color: #3B2241; font-weight: 700; border: 1px solid #FFFFFF; }
.sp.now .c { background: var(--ilc); border-color: var(--ilc); }
.sp:disabled { opacity: 0.7; }

/* ---------- Tarjetas pequeñas ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.tile { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tile .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.tile .grow { flex: 1; }
.tile-gold { background: linear-gradient(160deg, #FFFFFF 30%, var(--gold-soft)); border-color: var(--gold-line); }
.tile-gold .ico { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); }
.date-block { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 70px; flex: 0 0 64px; border-radius: 16px; background: var(--grad); color: #FFFFFF; line-height: 1; box-shadow: 0 12px 24px -14px rgb(var(--shadow) / 0.8); }
.date-block span { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-bright); }
.date-block strong { font-family: var(--f-display); font-size: 32px; }
.date-block.sm { width: 54px; height: 58px; flex-basis: 54px; border-radius: 14px; }
.date-block.sm strong { font-size: 26px; }
.stat { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat strong { font-family: var(--f-display); font-size: 40px; line-height: 1; color: var(--accent-text); }
.stat span { font-size: 14px; color: var(--ink-2); }
/* «5 de 17» y «80 %» del avance: número grande, el resto chico al lado y sin cortar (2026-10-24). */
.stat strong { white-space: nowrap; }
.stat strong span { font-size: inherit; color: inherit; }
.stat strong small { font-size: .5em; font-weight: 600; color: var(--ink-2); }
.strip { padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.strip-gold { background: linear-gradient(110deg, #FFFFFF 10%, var(--gold-soft)); border-color: var(--gold-line); }
.medal { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; display: grid; place-items: center; color: #3B2241; background: radial-gradient(circle at 35% 30%, #FBEBC8, #D9AE63 70%, #B8893C); box-shadow: 0 10px 22px -10px rgba(156,110,36,0.8), inset 0 -2px 0 rgba(0,0,0,0.12); }

/* ---------- Programas ---------- */
.rail { display: flex; align-items: center; gap: 14px; }
.rail-track { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.arrow { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--accent-text); display: grid; place-items: center; transition: transform .35s var(--ease), background-color .3s, color .3s, opacity .3s; box-shadow: 0 10px 24px -16px rgb(var(--shadow) / 0.7); }
.arrow:hover:not(:disabled) { background: var(--accent); color: #FFFFFF; transform: scale(1.06); }
.arrow:disabled { opacity: 0.35; box-shadow: none; }
.dots { display: flex; justify-content: center; gap: 8px; }
.dots button { width: 12px; height: 12px; border-radius: 999px; border: 0; padding: 0; background: var(--line-2); transition: width .5s var(--ease), background-color .4s; }
.dots button[aria-current="true"] { width: 30px; background: var(--accent); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.pcard { overflow: hidden; display: flex; flex-direction: column; }
.cover { position: relative; height: 112px; overflow: hidden; isolation: isolate; background: var(--grad); }
.cover::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(60% 80% at 15% 20%, var(--c1), transparent 70%), radial-gradient(55% 75% at 90% 90%, var(--c2), transparent 70%); opacity: 0.8; transition: transform 1.2s var(--ease); }
.pcard:hover .cover::before { transform: scale(1.08) rotate(2deg); }
.cover .mono { position: absolute; right: 14px; bottom: -18px; font-family: var(--f-display); font-size: 120px; font-weight: 700; line-height: 1; color: rgba(255,255,255,0.14); }
.cover .tags { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.pbody { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pbody h3 { font-family: var(--f-body); font-size: 17px; font-weight: 600; line-height: 1.35; }
/* Botones de las tarjetas uno al lado del otro (pedido del usuario) */
.pbody .acts { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; }
.pbody .acts .btn { flex: 1 1 auto; padding: 0 12px; min-width: 0; }
.pbody .acts .btn:only-child { flex: 0 0 auto; padding: 0 18px; }
.pbody .acts.wrap { flex-wrap: wrap; }
.pbody .acts.wrap .btn { flex: 0 1 auto; }
.bar { position: relative; height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #B486BE); transform-origin: left center; }
.bar.gold i { background: linear-gradient(90deg, #C99A4A, #E8CB92); }
.bar.on-dark { background: rgba(255,255,255,0.16); }
.barline { display: flex; align-items: center; gap: 12px; }
.barline .bar { flex: 1; }
.barline b { font-size: 14px; color: var(--accent-text); min-width: 42px; text-align: right; }
.guide { padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.guide .g { display: flex; flex-direction: column; gap: 8px; }
.guide .g .k { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--accent); color: #FFFFFF; }
.guide .g .k.alt { background: var(--surface); color: var(--accent-text); border: 1px solid var(--line-2); }
.guide .g p { font-size: 15px; color: var(--ink-2); }
.empty { padding: 28px; text-align: center; color: var(--ink-2); }

/* ---------- Módulos y lecciones ---------- */
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--accent-text); font-size: 14px; font-weight: 600; transition: transform .35s var(--ease); }
.back:hover { transform: translateX(-3px); }
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.split > .mc { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.split > .ac { flex: 1 1 300px; max-width: 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mod { overflow: hidden; }
.mod.locked { opacity: 0.78; }
.mod-head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 0; background: none; text-align: left; color: var(--ink); }
.mod-head .num { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--f-display); font-size: 22px; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); }
.mod-head .num.ok { background: var(--ok-soft); color: var(--ok); }
.mod-head .num.cur { background: var(--grad); color: #FFFFFF; }
.mod-head .num.lock { background: var(--surface-2); color: var(--ink-3); border: 1px dashed var(--line-2); }
.mod-head .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mod-head .tt strong { font-size: 16px; }
.mod-head .chev { transition: transform .5s var(--ease); color: var(--accent-text); }
.mod-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mod-body { overflow: hidden; }
.mod-body .inner { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.lrow { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 8px 18px -14px rgb(var(--shadow) / 0.45); color: var(--ink); text-align: left; width: 100%; transition: border-color .3s var(--ease), transform .35s var(--ease); }
button.lrow:hover:not(:disabled) { border-color: var(--line-2); transform: translateX(4px); }
.lrow.next { border-color: var(--accent); background: var(--surface); box-shadow: 0 12px 24px -14px rgb(var(--shadow) / 0.7); }
.lrow .c { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; border: 2px solid var(--line-2); color: var(--ink-3); }
.lrow.q .c { border-radius: 9px; }
.lrow.done .c { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.lrow.next .c { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.lrow .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lrow .tt span { font-size: 13px; color: var(--ink-3); }
.lrow .st { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.lrow.next .st { color: var(--accent-text); }
.how { padding: 22px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(170deg, var(--surface-2), var(--surface)); }
.how ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.how li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.how li i { font-style: normal; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--grad); color: #FFFFFF; }
.how .k { display: inline-flex; align-self: flex-start; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); }

/* ---------- Lección y quiz ---------- */
.lesson { width: 100%; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
/* La lección que es una herramienta de dos columnas (la Rueda de espacios vitales) usa todo el ancho: con 820 px cada columna quedaba apretada (pedido del usuario 2026-10-24). */
.lesson:has(.lesson-body [data-ilc-rueda]) { max-width: 1180px; }
.lesson-top { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lesson-top h1 { font-size: clamp(34px, 4.4vw, 48px); }
.player { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--ilc) 0%, var(--ilc-mid) 45%, var(--ilc-deep) 100%); box-shadow: 0 40px 70px -40px rgba(42,23,48,0.85); }
.player .blob { position: absolute; border-radius: 50%; z-index: -1; }
.player .b1 { width: 70%; aspect-ratio: 1; left: -20%; top: -30%; background: radial-gradient(closest-side, rgba(196,150,206,0.5), transparent); }
.player .b2 { width: 55%; aspect-ratio: 1; right: -15%; bottom: -35%; background: radial-gradient(closest-side, rgba(232,203,146,0.4), transparent); }
.poster { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; color: #FFFFFF; text-align: center; padding: 20px; }
.play { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #FFFFFF; color: #3B2241; box-shadow: 0 20px 40px -14px rgba(0,0,0,0.55); transition: transform .4s var(--ease); }
.play:hover { transform: scale(1.06); }
.play::before, .play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(232,203,146,0.6); animation: pulse 2.6s var(--ease) infinite; }
.play::after { animation-delay: 1.3s; }
@keyframes pulse { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.45); opacity: 0; } }
.playing { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px; display: flex; align-items: center; gap: 14px; color: #FFFFFF; font-size: 14px; background: linear-gradient(transparent, rgba(0,0,0,0.5)); }
.playing .bar { flex: 1; background: rgba(255,255,255,0.25); height: 6px; }
.playing .bar i { background: linear-gradient(90deg, #FFFFFF, var(--gold-bright)); transform: scaleX(0); }
.prose { font-size: 17px; line-height: 1.75; text-align: justify; hyphens: auto; }
.prose strong { color: var(--accent-text); }
.lesson-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.qbox { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; border-width: 2px; }
.qbox.bien { border-color: #BFE0CE; }
.qbox.mal { border-color: #EFC9C0; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); text-align: left; font-size: 15px; color: var(--ink); transition: border-color .3s, background-color .3s; }
.opt .r { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; }
.opt .r::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .35s var(--ease); }
.opt[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-checked="true"] .r { border-color: var(--accent); }
.opt[aria-checked="true"] .r::after { transform: scale(1); }
.score { padding: 24px; display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
.score .big { font-family: var(--f-display); font-size: 64px; line-height: 1; }

/* Temario en la barra lateral */
.toc-back { align-self: flex-start; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.32); background: transparent; color: #FFFFFF; font-size: 14px; font-weight: 600; }
.toc-back:hover { background: rgba(255,255,255,0.08); }
.toc-title { font-family: var(--f-body); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; color: #FFFFFF; } /* mismo estilo que "ILC ACADEMY" (pedido del usuario 2026-10-15) */
.toc-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; }
.toc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E8CB92, #FFFFFF); transform-origin: left center; }
.toc-mod { border-radius: 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.toc-mod .lbl { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.toc-mod .lbl span { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright); }
.toc-mod .lbl strong { font-size: 16px; color: #FFFFFF; line-height: 1.3; }
.toc-l { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--on-dark); font-size: 14px; line-height: 1.35; text-align: left; transition: background-color .3s var(--ease); }
button.toc-l:hover { background: rgba(255,255,255,0.08); }
.toc-l[aria-current="step"] { background: #FFFFFF; color: #3B2241; font-weight: 600; box-shadow: 0 10px 20px -12px rgba(0,0,0,0.55); }
.toc-l .c { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 2px solid rgba(255,255,255,0.5); }
.toc-l.q .c { border-radius: 7px; }
.toc-l.done .c { background: #3E9C73; border-color: #3E9C73; color: #FFFFFF; }
.toc-l[aria-current="step"] .c { background: var(--ilc); border-color: var(--ilc); color: #FFFFFF; }
.toc-l.lock { color: var(--on-dark-2); }
.toc-l.lock .c { border-style: dashed; }
.toc-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 8px 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.32); background: transparent; color: #FFFFFF; font-size: 15px; font-weight: 600; text-align: left; }
.toc-next:hover { background: rgba(255,255,255,0.08); }
.toc-next .go { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-bright); color: #3B2241; transition: transform .4s var(--ease); }
.toc-next:hover .go { transform: translateX(3px); }
.toc-lock { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 1px dashed rgba(255,255,255,0.3); color: var(--on-dark-2); font-size: 14px; line-height: 1.35; }

/* ---------- Listas de personas y filas ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.prow { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: left; color: var(--ink); width: 100%; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s; }
button.prow:hover { border-color: var(--line-2); transform: translateX(3px); }
.prow.sel { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(107,71,113,0.1); }
.ava { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); }
.ava.warn { background: var(--bad-soft); color: var(--bad); }
.ava.gold { background: var(--gold-soft); color: var(--gold); }
.prow .tt { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prow .tt strong { font-size: 15px; }
.prow .tt span { font-size: 13px; color: var(--ink-2); }
.pend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px 14px 16px; border-top: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.pend .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.pend .tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent); }
.check-btn { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; border: 1px solid #BFE0CE; background: #F1FAF5; color: var(--ok); display: grid; place-items: center; transition: transform .3s var(--ease), background-color .3s, color .3s; }
.check-btn:hover { background: var(--ok); color: #FFFFFF; transform: scale(1.06); }
.agenda-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.agenda-item .h { min-width: 78px; font-weight: 700; color: var(--accent-text); font-size: 14px; }

/* ---------- Calendario ---------- */
.cal { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.cal-grid { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-grid .dow { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.08em; padding-bottom: 4px; }
.calchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background-color .3s, border-color .3s, color .3s; }
.calchip i { width: 10px; height: 10px; border-radius: 50%; }
.calchip[aria-pressed="true"] { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
.calchip[aria-pressed="false"] i { background: var(--line-2) !important; }
.tri-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent-text); font-size: 14px; font-weight: 700; }
.tri-btn[aria-pressed="true"] { background: var(--grad); color: #FFFFFF; border-color: transparent; }
.evt { display: flex; gap: 16px; align-items: flex-start; padding: 18px; }
.evt .time { min-width: 86px; display: flex; flex-direction: column; font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--accent-text); }
.evt .time span { font-family: var(--f-body); font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.evt .calname { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.evt .calname i { width: 8px; height: 8px; border-radius: 50%; }
/* Calendario: mes con el nombre de cada clase (elegido por el usuario 2026-10-22; antes un punto de color por día).
   Estudiante y CIT (.cal-simple): sin colores. Equipo (.cal-equipo): el color de la cohorte, con su nombre escrito. */
.cal-grid .dow .dc { display: none; }
.day { position: relative; min-height: 104px; min-width: 0; box-sizing: border-box; padding: 8px; border: 0; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.day:hover { background: var(--accent-soft); }
.day.out { background: transparent; color: var(--ink-3); opacity: 0.5; cursor: default; }
.day .num { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.day .hoy { padding: 1px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--warn); font-size: 11px; font-weight: 700; }
.day[aria-pressed="true"] { background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--accent); }
.cal-ev { display: flex; flex-direction: column; min-width: 0; padding: 4px 7px; border-radius: 7px; font-size: 12px; line-height: 1.3; }
.cal-ev .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev small { font-size: 11px; opacity: 0.85; }
.cal-ev.extra { display: none; }
.cal-mas { font-size: 12px; font-weight: 600; color: var(--accent-text); padding-left: 4px; }
.cal-simple .cal-ev { background: var(--ilc); color: #FFFFFF; font-weight: 600; }
.cal-simple .cal-ev.act { background: var(--gold-soft); color: var(--ink); }
.cal-ev .co { display: flex; align-items: center; gap: 5px; font-weight: 700; overflow: hidden; white-space: nowrap; }
.cal-equipo .cal-ev { background: color-mix(in srgb, var(--c) 14%, #FFFFFF); color: var(--ink); }
.cal-equipo .cal-ev .co::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--c); }
.calchip i { border-radius: 4px; }
.cal-detalle { display: flex; flex-direction: column; gap: 14px; }
.cal-detalle h2 { font-size: 22px; }
.dia-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.dia-lista:not(.sel) { display: none; }
.dia-lista .dia-tit { display: none; }
.cal-tipo { font-size: 12px; }
.cal-equipo .evt { box-shadow: inset 4px 0 0 var(--c); }
.cal-mes-vacio { margin: 0; text-align: center; }
/* Mes y detalle del día lado a lado (2026-10-24): el mes más bajo, el detalle fijo a la derecha al bajar. */
.cal-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 22px; align-items: start; }
.cal-dos .day { min-height: 82px; padding: 7px; }
.cal-dos .cal-detalle { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 2px 4px 8px 2px; }
.cal-dos .cal-detalle h2 { font-size: 20px; }
.cal-dos .dia-lista { grid-template-columns: minmax(0, 1fr); }
.cal-dos .evt { padding: 16px; gap: 12px; }
.cal-dos .evt .time { min-width: 64px; font-size: 22px; }
@media (max-width: 1180px) {
  .cal-dos { grid-template-columns: minmax(0, 1fr); }
  .cal-dos .cal-detalle { position: static; max-height: none; overflow: visible; padding: 0; }
  .cal-dos .dia-lista { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}
@media (max-width: 760px) {
  /* En el celular la grilla de 7 columnas no deja leer los nombres: se ve la lista del mes, día por día. */
  .cal-grid, .cal-detalle > h2[data-dia-titulo] { display: none; }
  .dia-lista, .dia-lista:not(.sel) { display: flex; flex-direction: column; gap: 10px; }
  .dia-lista.vacia { display: none; }
  .dia-lista .dia-tit { display: block; margin: 6px 0 0; font-size: 17px; }
}

/* ---------- Formularios ---------- */
.form { padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 18px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.field { position: relative; }
.field input, .field select, .field textarea { width: 100%; min-height: 60px; padding: 24px 16px 8px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); font-size: 16px; color: var(--ink); transition: border-color .3s var(--ease), box-shadow .4s var(--ease); appearance: none; -webkit-appearance: none; }
.field textarea { min-height: 110px; resize: vertical; padding-top: 28px; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 22px) 28px, calc(100% - 16px) 28px; background-size: 6px 6px; background-repeat: no-repeat; }
.field label { position: absolute; left: 17px; top: 19px; font-size: 16px; color: var(--ink-3); pointer-events: none; transform-origin: left top; transition: transform .35s var(--ease), color .3s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 5px rgba(107,71,113,0.13); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field select + label { transform: translateY(-11px) scale(0.8); color: var(--accent-text); }
.fset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fset legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 10px; }
.togs { display: flex; flex-wrap: wrap; gap: 8px; }
.tog { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px 6px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); font-size: 15px; color: var(--ink); text-align: left; transition: border-color .3s, background-color .3s; }
.tog .box { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: grid; place-items: center; border: 2px solid var(--line-2); color: transparent; transition: background-color .3s, border-color .3s; }
.tog[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.tog[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.tog small { display: block; font-size: 13px; color: var(--ink-3); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 0; border: 0; background: none; text-align: left; font-size: 15px; color: var(--ink-2); }
.check .box { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; border: 2px solid var(--line-2); display: grid; place-items: center; color: #FFFFFF; transition: background-color .3s, border-color .3s; }
.check[aria-checked="true"] .box { background: var(--accent); border-color: var(--accent); }
.check .box path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s var(--ease) .05s; }
.check[aria-checked="true"] .box path { stroke-dashoffset: 0; }
/* Dentro de una ventana, «.box» también es el marco de la ventana (.modal .box): la casilla vuelve a su tamaño (2026-10-23, «Crear una cuenta» en Personas). */
.modal .check .box { position: static; width: 28px; height: 28px; max-height: none; overflow: visible; padding: 0; gap: 0; display: grid; border-radius: 9px; background: none; box-shadow: none; }
.modal .check[aria-checked="true"] .box { background: var(--accent); }
.success { padding: 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.success svg circle, .success svg path { fill: none; stroke: var(--ok); stroke-linecap: round; stroke-linejoin: round; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(59,34,65,0.25); border-top-color: #3B2241; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.profile { padding: 24px; display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; }
.profile .big { width: 84px; height: 84px; flex: 0 0 84px; font-size: 30px; font-family: var(--f-display); }
.row-set { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: flex-start; }
.row-set > .lbl { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.row-set > .lbl strong { font-size: 17px; }
.row-set > .card { flex: 999 1 440px; min-width: 0; }
.passbox { font-family: ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: 0.06em; color: var(--ok); word-break: break-all; }

/* ---------- Avisos, modal y efectos ---------- */
.toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; width: min(92vw, 480px); }
.toast { pointer-events: auto; width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(130deg, var(--ilc-mid), var(--ilc-deep)); color: #FFFFFF; font-size: 15px; font-weight: 500; box-shadow: 0 24px 48px -20px rgba(42,23,48,0.65); }
.toast .ti { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; background: #3E9C73; }
.toast .tl { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold-bright); transform-origin: left center; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }
.scrim { position: fixed; inset: 0; z-index: 39; background: rgba(42,23,48,0.42); backdrop-filter: blur(3px); }
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.modal .bg { position: absolute; inset: 0; background: rgba(42,23,48,0.5); backdrop-filter: blur(6px); }
.modal .box { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--r-xl); background: var(--surface); padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 50px 90px -40px rgba(42,23,48,0.8); }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.rolecard { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); text-align: left; color: var(--ink); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; }
.rolecard:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 20px 36px -24px rgb(var(--shadow) / 0.7); }
.rolecard[aria-current="true"] { border-color: var(--gold-line); background: linear-gradient(160deg, #FFFFFF 40%, var(--gold-soft)); }
.rolecard strong { font-size: 16px; }


/* ---------- Logo oficial (sello): solo el logo, con una sombra suave ---------- */
.seal { display: inline-block; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--logo) center / contain no-repeat; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35)); }
.seal.lg { width: 104px; height: 104px; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.4)); }
.seal.sm { width: 40px; height: 40px; filter: drop-shadow(0 4px 8px rgba(42,23,48,0.3)); }
.top-seal { display: none; }
/* ---------- Pantalla de acceso ---------- */
.app.off { visibility: hidden; }
/* Diseño D (aprobado 2026-10-23, https://claude.ai/artifact/Ku9qCnoct3PW4d2KKVkbbu): láminas a pantalla completa
   (Inicio, CLC, MLC, CEO, XS & AI y LiZ) con el ingreso flotando, y «Tu camino como Coach» con el sello de cada
   programa. En la lámina de la MLC (dorado claro) el texto y el camino van oscuros: data-claro. */
.login { position: fixed; inset: 0; z-index: 100; overflow-x: hidden; overflow-y: auto; color: var(--on-dark);
  --l-tinta: var(--on-dark); --l-acento: var(--gold-bright); --l-trazo: var(--gold-bright); --l-riel: rgba(251,244,252,0.3); --l-texto: rgba(251,244,252,0.85); --l-halo: rgba(232,203,146,0.28); --l-borde: rgba(251,244,252,0.45); }
.login[data-claro] { --l-tinta: #2A1D0A; --l-acento: #2A1D0A; --l-trazo: #2A1D0A; --l-riel: rgba(42,29,10,0.28); --l-texto: rgba(42,29,10,0.85); --l-halo: rgba(42,29,10,0.16); --l-borde: rgba(42,29,10,0.5); }
/* El aviso de «Entrar con Google» (.modal, z-index 70) quedaba DEBAJO de la pantalla de acceso (z-index 100):
   se abría sin verse y el botón parecía no hacer nada (reporte del usuario 2026-10-18). */
.ilc-acceso .modal { z-index: 110; }
.lam-fondos { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.lam-fondos span { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.lam-fondos [data-i="0"] { background: linear-gradient(140deg, #6B4771 0%, #4A3050 50%, #2A1730 100%); }
.lam-fondos [data-i="1"] { background: linear-gradient(140deg, #1F7A71 0%, #17524C 55%, #0C2C29 100%); }
.lam-fondos [data-i="2"] { background: linear-gradient(140deg, #5E3A63 0%, #3A2140 55%, #1F1023 100%); }
.lam-fondos [data-i="3"] { background: linear-gradient(140deg, #D9BC82 0%, #C1995A 55%, #946F37 100%); }
.lam-fondos [data-i="4"] { background: linear-gradient(140deg, #6E58A0 0%, #45366F 55%, #221A3D 100%); }
.lam-fondos [data-i="5"] { background: linear-gradient(140deg, #2353B3 0%, #173F8F 55%, #0B1F4A 100%); }
.login[data-lam="0"] .lam-fondos [data-i="0"], .login[data-lam="1"] .lam-fondos [data-i="1"], .login[data-lam="2"] .lam-fondos [data-i="2"],
.login[data-lam="3"] .lam-fondos [data-i="3"], .login[data-lam="4"] .lam-fondos [data-i="4"], .login[data-lam="5"] .lam-fondos [data-i="5"] { opacity: 1; }
/* El sello de la lámina, de marca de agua: claro sobre los fondos oscuros, café oscuro sobre el dorado (claro no se veía). */
.lam-marca { position: fixed; right: 24%; top: 50%; z-index: 0; width: 760px; height: 760px; pointer-events: none; opacity: 0.13; filter: grayscale(1) brightness(1.9); transform: translateY(-50%) rotate(-10deg); }
.login[data-claro] .lam-marca { opacity: 0.2; filter: sepia(1) saturate(1.6) brightness(0.32); }
.lam-marca.gira { animation: lam-gira 1.2s var(--ease) both; }
@keyframes lam-gira { from { opacity: 0; transform: translateY(-50%) rotate(-24deg) scale(0.9); } }
@keyframes lam-gira-m { from { opacity: 0; transform: rotate(-24deg) scale(0.9); } }
.login-d { position: relative; z-index: 1; min-height: 100%; max-width: 1360px; margin: 0 auto; padding: 40px clamp(24px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.login-brand { flex: 999 1 540px; min-width: 0; color: var(--l-tinta); transition: color .6s ease; }
.lb-inner { display: flex; flex-direction: column; gap: 30px; }
.lb-brand { display: flex; align-items: center; gap: 14px; }
.lb-brand .seal { width: 58px; height: 58px; }
.lb-brand .bn strong { display: block; font-size: 16px; letter-spacing: 0.14em; line-height: 1.15; }
.lb-brand .bn span { display: block; font-size: 10px; letter-spacing: 0.4em; line-height: 1.15; color: var(--l-acento); }
.lam-caja { min-height: 340px; display: flex; align-items: center; }
.lam { display: flex; flex-direction: column; gap: 14px; }
.lam.entra { animation: lam-entra .8s var(--ease) both; }
@keyframes lam-entra { from { opacity: 0; transform: translateY(22px); } }
.lam-ceja { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); }
.login[data-claro] .lam-ceja { color: #5A3E12; }
.lam-t { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 4.4vw, 62px); line-height: 0.95; text-transform: uppercase; color: inherit; }
.lam-t em { font-style: normal; color: var(--gold-bright); }
.lam-d { font-size: 16px; line-height: 1.6; max-width: 50ch; }
.lam[data-i="1"] .lam-d { color: #EAF8F6; max-width: 44ch; }
.lam[data-i="2"] .lam-d { color: #F3E9F5; }
.lam[data-i="3"] .lam-d { color: #3A2A10; }
.lam[data-i="4"] .lam-d { color: #F1EDFA; }
.lam[data-i="5"] .lam-d { color: #EEF3FC; }
.lam-d.lam-lema { font-size: 17px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; max-width: none; }
.lam-m { display: none; }
.lam-liz { flex-direction: row; align-items: center; gap: 28px; }
.lam-liz img { height: 260px; flex-shrink: 0; filter: drop-shadow(0 26px 30px rgba(0,0,0,0.45)); }
.lam-liz .lam-txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lam-liz .lam-t { font-size: clamp(36px, 4vw, 56px); }
/* Botón para pausar las láminas (la línea de tiempo se retiró el 2026-10-23; la pausa queda por accesibilidad). */
.lam-control { display: flex; }
.lam-pausa { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--l-borde); background: transparent; color: var(--l-tinta); display: grid; place-items: center; transition: color .6s ease, border-color .6s ease; }
.lam-pausa .i-seguir, .lam-pausa[aria-pressed="true"] .i-pausa { display: none; }
.lam-pausa[aria-pressed="true"] .i-seguir { display: block; }
.login-form { flex: 0 1 420px; min-width: 0; margin: 0 auto; color: var(--ink); }
.lf-card { width: 100%; display: flex; flex-direction: column; gap: 17px; padding: 38px 34px; border-radius: 28px; background: rgba(255,255,255,0.95); box-shadow: 0 40px 80px -36px rgba(0,0,0,0.6); backdrop-filter: blur(16px); }
.lf-t { font-size: 38px; color: var(--ink); }
.login .lf-t { font-size: 34px; line-height: 1.05; }
.lf-error { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--bad-soft); color: var(--bad); font-size: 14px; font-weight: 500; line-height: 1.45; }
.lf-error.lf-bien { background: var(--ok-soft); color: var(--ok); }
.field.pw input { padding-right: 56px; }
.eye { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ink-3); display: grid; place-items: center; }
.eye:hover { background: var(--accent-soft); color: var(--accent-text); }
.lf-go { width: 100%; min-height: 54px; font-size: 16px; }
.btn-google { width: 100%; min-height: 52px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn-google:hover { border-color: var(--accent); }
/* Aviso antes de Google y «No encontramos tu cuenta» (2026-10-23): letra grande y una idea por renglón, pensado
   para alguien de 10 o de 80 años. */
.g-lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.g-opciones { display: grid; gap: 10px; }
.g-op { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2, #FBF8FB); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.g-op strong { color: var(--ink); font-size: 16px; }
.g-op > .col { min-width: 0; }
.g-op .btn { align-self: flex-start; white-space: normal; text-align: left; height: auto; min-height: 40px; padding: 9px 14px; line-height: 1.3; }
.g-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.g-ico svg { width: 18px; height: 18px; }
.g-si .g-ico { background: var(--ok-soft); color: var(--ok); }
.g-otro .g-ico { background: var(--accent-soft); color: var(--accent); }
.lf-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--ok-soft); color: var(--ink); font-size: 15px; line-height: 1.5; }
.lf-aviso svg { flex: 0 0 auto; color: var(--ok); margin-top: 2px; }
.lf-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lf-pasos li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.lf-pasos li > span:first-child { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #FFFFFF; font-weight: 700; font-size: 14px; }
.g-oficial { min-height: 44px; display: flex; align-items: center; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.demo-box { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.demo { display: flex; flex-wrap: wrap; gap: 6px; }
.demo button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--gold); font-size: 13px; font-weight: 700; transition: transform .3s var(--ease), background-color .3s; }
.demo button:hover { transform: translateY(-2px); background: #F3E2BF; }
.lf-ok svg circle, .lf-ok svg path { fill: none; stroke: var(--ok); stroke-linecap: round; stroke-linejoin: round; }
.side-actions { display: flex; gap: 8px; }
.side-actions .rol-btn { flex: 1 1 auto; }
.side-actions .out { flex: 0 0 auto; width: 44px; padding: 0; }
/* Celular (diseño D): la lámina arriba, más corta, y el ingreso en una hoja blanca que sube sobre ella. */
@media (max-width: 900px) {
  .login-d { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; }
  .login-brand { flex: 0 0 auto; position: relative; padding: 18px 22px 46px; }
  .lam-control { position: absolute; top: 18px; right: 22px; }
  .lb-inner { gap: 14px; }
  .lb-brand { gap: 10px; }
  .lb-brand .seal { width: 34px; height: 34px; }
  .lb-brand .bn strong { font-size: 12.5px; }
  .lb-brand .bn span { display: none; }
  .lam-marca { position: absolute; right: -70px; top: 30px; width: 260px; height: 260px; opacity: 0.14; transform: rotate(-10deg); }
  .lam-marca.gira { animation-name: lam-gira-m; }
  .lam-caja { min-height: 92px; align-items: flex-end; }
  .lam { gap: 6px; }
  .lam.entra { animation-duration: .6s; }
  .lam-ceja { font-size: 10.5px; letter-spacing: 0.18em; }
  .lam[data-i="0"] .lam-ceja { display: none; }
  .lam-t { font-size: 27px; line-height: 1; }
  .lam-liz .lam-t { font-size: 24px; }
  .lam-d { display: none; }
  .lam-m { display: block; font-size: 13px; line-height: 1.45; }
  .lam-liz { gap: 12px; align-items: flex-end; }
  .lam-liz img { height: 92px; filter: none; }
  .lam-liz .lam-txt { gap: 6px; }
  .login-form { flex: 1 0 auto; position: relative; margin: -28px 0 0; padding: 12px 22px 24px; background: var(--surface); border-radius: 28px 28px 0 0; box-shadow: 0 -12px 30px -18px rgba(0,0,0,0.45); }
  .login-form::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--line); }
  .lf-card { max-width: 460px; margin: 0 auto; padding: 0; gap: 12px; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .login .lf-t { font-size: 27px; }
  .lam-pausa { width: 34px; height: 34px; }
  .lam-pausa svg { width: 13px; height: 13px; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 300px); height: auto; z-index: 40; transform: translateX(-105%); transition: transform .5s var(--ease); }
  .side.open { transform: translateX(0); }
  .menu-btn { display: grid; }
  .top-seal { display: inline-block; }
  .switch .lbl-long { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .ring { width: 140px; height: 140px; }
  .ring-wrap { flex-direction: row; justify-content: flex-start; gap: 16px; }
  .ring-lbl { text-align: left; }
  .ring-wrap .ring { width: 96px; height: 96px; }
  .ring-wrap .ring .val strong { font-size: 28px; }
  .hero .hero-acc .btn { width: 100%; padding: 0 16px; font-size: 16px; }
  .rail .arrow { width: 44px; height: 44px; flex-basis: 44px; }
  .rail-track { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .play::before, .play::after { animation: none; display: none; }
  .lift:hover { transform: none; }
}

/* =====================================================================
   Adaptaciones al contenido real (2026-10-14). En el prototipo todo era
   un <button> y el contenido era de muestra; acá hay enlaces, formularios
   y bloques reales del editor. Mismo aspecto, sin inventar estilos nuevos.
   ===================================================================== */
[hidden] { display: none !important; } /* guarda [hidden]: si la clase fija display, igual se oculta */
a.card, a.nav-item, a.btn, a.back, a.prow, a.lrow, a.toc-l, a.toc-next, a.toc-back, a.rcard, a.res, a.rol-btn, a.tab, a.arrow, a.sp, a.calchip, a.tri-btn, a.chip { text-decoration: none; }
a.nav-item, a.rol-btn, a.toc-back, a.toc-next, a.tab, a.arrow { cursor: pointer; }
a.tab, a.toc-back { display: inline-flex; align-items: center; }
a.lrow:hover { border-color: var(--line-2); transform: translateX(4px); }
a.prow:hover, label.prow:hover { border-color: var(--line-2); transform: translateX(3px); }
a.toc-l:hover { background: rgba(255,255,255,0.08); }
a.toc-l[aria-current="step"]:hover { background: #FFFFFF; }
a.sp:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; }
a.sp.now:hover { background: #FFFFFF; color: #3B2241; }
a.res:hover { background: var(--accent-soft); }
a.arrow[aria-disabled="true"] { opacity: 0.35; box-shadow: none; pointer-events: none; }
.side-actions .rol-btn { flex: 1 1 auto; }
form.inline { display: contents; }
.btn[disabled], button.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Lección: los bloques reales del editor con el aspecto del reproductor y del texto del prototipo */
.lesson-body { display: flex; flex-direction: column; gap: 22px; }
.lesson-body > *:first-child { margin-top: 0; }
.lesson-body .ilc-bloque-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--ilc) 0%, var(--ilc-mid) 45%, var(--ilc-deep) 100%); box-shadow: 0 40px 70px -40px rgba(42,23,48,0.85); }
.lesson-body .ilc-bloque-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lesson-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-xl); display: block; box-shadow: 0 40px 70px -40px rgba(42,23,48,0.85); }
.lesson-body div[style*="padding"]:has(> iframe) { padding: 0 !important; height: auto !important; }
.lesson-body .ilc-bloque-titulo, .lesson-body h2, .lesson-body h3, .lesson-body h4 { font-family: var(--f-display); text-align: center; color: var(--ink); margin: 10px 0 0; }
.lesson-body h2, .lesson-body .ilc-bloque-titulo { font-size: 30px; }
.lesson-body h3 { font-size: 24px; }
.lesson-body h4 { font-size: 20px; }
.lesson-body p, .lesson-body li { text-align: justify; hyphens: auto; }
.lesson-body p { margin: 0 0 1em; }
.lesson-body .ilc-bloque-texto > *:last-child, .lesson-body p:last-child { margin-bottom: 0; }
.lesson-body a { color: var(--accent-text); font-weight: 600; }
.lesson-body img { max-width: 100%; height: auto; border-radius: var(--r-lg); display: block; margin: 0 auto; }
.lesson-body .ilc-bloque-imagen { margin: 0 auto; }
.lesson-body .ilc-bloque-imagen img { width: 100%; }
.lesson-body .ilc-bloque-imagen.es-mediano { max-width: 60%; }
.lesson-body .ilc-bloque-imagen.es-pequeno { max-width: 35%; }
.lesson-body .ilc-bloque-codigo { overflow-x: auto; }
.lesson-body blockquote { margin: 0; padding: 16px 20px; border-left: 4px solid var(--gold-bright); background: var(--surface-2); border-radius: 0 14px 14px 0; }
.lesson-body .ilc-leccion-descargas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lesson-body .ilc-boton-descarga { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--accent-text); font-size: 15px; font-weight: 600; text-decoration: none; text-align: center; transition: border-color .3s; }
.lesson-body .ilc-boton-descarga:hover { border-color: var(--accent); }
.lesson-body .ilc-boton-descarga svg { flex: 0 0 auto; }
.prev-aviso { padding: 12px 16px; border-radius: 14px; background: var(--info-soft); color: var(--info); font-size: 15px; }

/* Quiz real: radios de verdad con el aspecto de las opciones del prototipo */
.opt { position: relative; cursor: pointer; width: 100%; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opt:has(input:checked) .r { border-color: var(--accent); }
.opt:has(input:checked) .r::after { transform: scale(1); }
.opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.opt.locked { cursor: default; }
.qbox .qtxt { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.55; color: var(--ink); }
.qbox .qtxt .qn { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--line); margin-top: 1px; }
.qbox .qtxt .qcuerpo { flex: 1; min-width: 0; font-weight: 700; }
.qbox .qtxt.caso .qcuerpo { font-weight: 400; } /* caso de varios párrafos: texto normal, con sus negritas */
.qbox .qtxt .qcuerpo p { margin: 0 0 10px; }
.qbox .qtxt .qcuerpo p:last-child { margin-bottom: 0; }
.qbox .qtxt .qcuerpo strong { font-weight: 700; }
.quiz-timer { font-family: ui-monospace, Menlo, monospace; font-size: 30px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.04em; }
.quiz-timer.urgente { color: #F3AFA0; }

/* Calendario real: cambio de mes */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-head .arrow { width: 40px; height: 40px; flex-basis: 40px; }
.evt .desc { white-space: pre-line; }

/* Mi cuenta: consultas con soporte */
.ticket .resp { background: var(--surface); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ticket .resp p { margin: 0 0 .6em; }
.ticket .resp p:last-child { margin-bottom: 0; }

/* Aviso de Soporte en el Inicio de quien corresponda */
.aviso-row { cursor: default; }
.aviso-row.imp { border-color: var(--gold-line); background: linear-gradient(110deg, #FFFFFF 40%, var(--gold-soft)); }

/* Sin barra superior (pedido del usuario 2026-10-14): sin migas ni interruptor de animaciones.
   En computadora no se muestra; en el celular queda solo con el botón del menú y el sello. */
@media (min-width: 901px) {
  .topbar { display: none; }
}

/* Autocompletado del navegador (correo y contraseña guardados, reportado por el usuario 2026-10-14):
   Chrome rellena al cargar pero el campo cuenta como vacío hasta que la persona toca la página,
   así que la etiqueta quedaba encima del texto. Con :autofill sube igual, y el campo conserva el
   fondo del campus en vez del celeste del navegador. Reglas separadas: un selector desconocido
   invalida la regla completa en los navegadores que no lo entienden. */
.field input:-webkit-autofill + label { transform: translateY(-11px) scale(0.8); color: var(--accent-text); }
.field input:autofill + label { transform: translateY(-11px) scale(0.8); color: var(--accent-text); }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
.field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 5px rgba(107,71,113,0.13); }

/* Portadas de las tarjetas de programa (propuesta B, elegida por el usuario 2026-10-14):
   fondo claro con el tinte de cada certificación, su sello en un medallón y de marca de
   agua, "Cohorte N" y una línea de color abajo. Los programas: portada genérica sin sello.
   Reemplaza al degradado morado con la letra grande del prototipo. */
.cover.cover-cert, .cover.cover-prog { height: 148px; background: linear-gradient(120deg, #FFFFFF 0%, var(--cv-tinte) 100%); border-bottom: 4px solid var(--cv-linea); }
.cover.cover-cert::before, .cover.cover-prog::before { display: none; }
.cover.cover-prog { --cv-tinte: #F7ECD8; --cv-linea: #C2933F; --cv-color: #3B2241; }
.cover .cv-wm { position: absolute; right: -58px; top: -52px; width: 250px; height: 250px; opacity: 0.13; transform: rotate(-12deg); z-index: -1; pointer-events: none; display: block; }
.cover-prog .cv-wm { opacity: 0.32; transform: none; color: var(--gold); }
.cover .cv-medal { position: absolute; left: 18px; top: 50%; width: 86px; height: 86px; margin-top: -43px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgb(var(--shadow) / 0.55), 0 0 0 1px rgb(var(--shadow) / 0.06); }
.cover .cv-medal img { width: 78px; height: 78px; display: block; }
.cover-prog .cv-medal { color: var(--gold); }
.cover-prog .cv-medal svg { width: 34px; height: 34px; }
.cover .cv-col { position: absolute; left: 122px; right: 14px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.cover .cv-col .tags { position: static; margin-bottom: 6px; }
.cover .cv-eb { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cv-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-prog .cv-eb { color: var(--gold); }
.cover .cv-n { font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--cv-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover .cv-n.prog { font-size: 24px; line-height: 1.05; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cover-cert .pill.p-glass, .cover-prog .pill.p-glass { background: rgba(255,255,255,0.78); color: var(--accent-text); border: 1px solid var(--line); }
.cover .cv-col .pill { min-height: 24px; padding: 0 9px; font-size: 11.5px; }

/* Tarjeta principal de una certificación EN CURSO (Inicio del CIT y Mis certificaciones, 2026-10-15):
   mismo estilo que su portada (tinte, sello, su color y la línea abajo). Terminada o programa: la morada. */
.hero-cert { position: relative; overflow: hidden; isolation: isolate; color: var(--ink); border-radius: var(--r-xl); background: linear-gradient(120deg, #FFFFFF 0%, var(--cv-tinte) 100%); border: 1px solid var(--line); border-bottom: 5px solid var(--cv-linea); box-shadow: 0 30px 60px -36px rgb(var(--shadow) / 0.45); }
.hero-cert .hero-wm { position: absolute; right: -90px; top: -110px; width: 420px; height: 420px; opacity: 0.1; transform: rotate(-12deg); z-index: -1; pointer-events: none; }
.hero-cert .hero-cab { gap: 12px; flex-wrap: nowrap; }
.hero-cert .hero-medal { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgb(var(--shadow) / 0.55), 0 0 0 1px rgb(var(--shadow) / 0.06); }
.hero-cert .hero-medal img { width: 52px; height: 52px; display: block; }
.hero-cert .eyebrow { color: var(--cv-color); }
.hero-cert h2 { color: var(--cv-color); }
.hero-cert .hero-sub, .hero-cert .ring-lbl { color: var(--ink-2); }
.hero-cert .btn-light, .hero-cert .btn-gold { background: var(--cv-color); color: #FFFFFF; box-shadow: 0 14px 28px -16px rgb(var(--shadow) / 0.7); }
.hero-cert .btn-glass { background: #FFFFFF; color: var(--cv-color); border: 1px solid var(--line-2); }
.hero-cert .btn-glass:hover { border-color: var(--cv-linea); background: #FFFFFF; }
.hero-cert .ring circle { stroke: color-mix(in srgb, var(--cv-linea) 16%, transparent); }
.hero-cert .ring circle[data-ring] { stroke: var(--cv-linea); }
.hero-cert .ring .val strong { color: var(--cv-color); }
.hero-cert .ring .val > span { color: var(--ink-2); }
.hero-cert .gold-rule { background: linear-gradient(90deg, transparent, var(--cv-linea), transparent); opacity: 0.45; }
.hero-cert .steps-mini .lbl { color: var(--ink-2); }
.hero-cert .sp { border-color: var(--line-2); color: var(--ink-2); }
.hero-cert .sp:hover:not(:disabled) { background: #FFFFFF; color: var(--ink); }
.hero-cert .sp .c { border-color: var(--line-2); color: var(--ink-2); }
.hero-cert .sp.done { border-color: var(--line); background: rgba(255,255,255,0.8); color: var(--ink); }
.hero-cert .sp.done .c { background: #3E9C73; border-color: #3E9C73; color: #FFFFFF; }
.hero-cert .sp.now { background: var(--cv-color); border-color: var(--cv-color); color: #FFFFFF; }
.hero-cert .sp.now .c { background: #FFFFFF; border-color: #FFFFFF; color: var(--cv-color); }

/* Tarjeta de ayuda: ícono en un círculo suave en vez del rótulo con forma de botón (2026-10-15). */
.guide .g .gi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); }
.guide .g .gi svg { width: 20px; height: 20px; }

/* Calendario: leyenda de colores bajo el mes (2026-10-15), agrupada por tipo y en grilla */

/* Bloques de rediseño (2026-10-15): Pasos, Nota destacada, Video en partes, Grabaciones por grupo */
.lesson-body .ilc-bloque-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: none; }
.lesson-body .ilc-bloque-pasos li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.lesson-body .ilc-paso-n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 16px; border: 1px solid var(--line); }
.lesson-body .ilc-paso-t { flex: 1; min-width: 0; padding-top: 5px; text-align: left; hyphens: manual; }
.lesson-body .ilc-bloque-nota { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); color: var(--ink); } /* fondo blanco y línea morada (pedido del usuario 2026-10-15) */
.lesson-body .ilc-bloque-nota svg { flex: none; color: var(--accent-text); margin-top: 2px; }
.lesson-body .ilc-bloque-nota div { text-align: left; }
.lesson-body .ilc-bloque-partes { display: flex; flex-direction: column; gap: 14px; }
.lesson-body .ilc-partes-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lesson-body .ilc-partes-tabs button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.lesson-body .ilc-partes-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.lesson-body .ilc-bloque-partes .ilc-bloque-video[hidden] { display: none; }
.lesson-body .ilc-bloque-grabaciones { display: flex; flex-direction: column; gap: 14px; }
.lesson-body .ilc-grab-aviso { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 0; color: var(--ink-2); font-size: 15px; text-align: center; }
.lesson-body .ilc-grab-aviso svg { flex: none; color: var(--accent-text); }
.lesson-body .ilc-grab-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lesson-body .ilc-grab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--accent-text); font-size: 15px; font-weight: 600; text-decoration: none; text-align: center; transition: border-color .3s, background-color .3s; }
.lesson-body a.ilc-grab { flex-direction: row; gap: 8px; }
.lesson-body a.ilc-grab:hover { border-color: var(--accent); background: var(--accent-soft); }
.lesson-body .ilc-grab.sin { color: var(--ink-3); background: var(--surface-2); border-style: dashed; cursor: default; }
.lesson-body .ilc-grab.sin small { font-size: 12px; font-weight: 500; }
@media (max-width: 600px) { .lesson-body .ilc-grab-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lesson-body .ilc-bloque-pasos li { padding: 14px; gap: 12px; } }

/* Barra lateral de la lección: volver al módulo anterior (2026-10-15), mismo botón que "Ir al Módulo N" con la flecha a la izquierda */
.toc-next.es-volver { justify-content: flex-start; padding: 0 16px 0 8px; gap: 12px; }
.toc-next.es-volver:hover .go { transform: translateX(-3px); }
.toc-next.es-volver > span:last-child { flex: 1 1 auto; margin: 0; text-align: left; }

/* Barra lateral de la lección, versión «Solo tu módulo» (elegida por el usuario 2026-10-22): un botón de salida,
   nombre y avance, el módulo actual con letra grande, qué viene después y el enlace al temario completo. */
.toc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.06); color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .3s; }
.toc-btn:hover { background: rgba(255,255,255,0.14); color: #FFFFFF; }
.toc-btn svg { width: 18px; height: 18px; flex: none; }
.toc-inicio { min-height: 52px; font-size: 16px; }
.toc-cab { display: flex; flex-direction: column; gap: 8px; padding: 10px 4px 4px; }
.toc-nombre { font-size: 15px; font-weight: 600; line-height: 1.35; color: #FFFFFF; }
.toc-cab .toc-bar { height: 8px; }
.toc-pct { font-size: 14px; color: var(--on-dark-2); }
.toc-modulo { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); }
.toc-mod-cab { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 10px; }
.toc-mod-cab strong { font-size: 22px; font-weight: 700; line-height: 1.2; color: #FFFFFF; }
.toc-mod-cab span { font-size: 15px; line-height: 1.35; color: var(--on-dark-2); }
.toc-modulo .toc-l { align-items: center; min-height: 48px; padding: 8px 12px; font-size: 15px; }
.toc-modulo .toc-l .c { width: 26px; height: 26px; flex-basis: 26px; }
.toc-modulo .toc-l .c svg { width: 13px; height: 13px; }
.toc-modulo .toc-l[aria-current="step"] { font-weight: 600; }
.toc-modulo .toc-l .t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.toc-modulo .toc-l .t small { display: block; font-size: 12px; font-weight: 400; color: var(--on-dark-2); }
.toc-modulo .toc-l.lock .c { border-radius: 50%; }
.toc-sig { margin: 8px 0 0; padding: 16px 4px 0; border-top: 1px solid rgba(255,255,255,0.14); font-size: 14px; color: var(--on-dark-2); }
.toc-sig strong { font-weight: 600; color: #FFFFFF; }
.toc-todo { margin-top: 6px; background: transparent; }


/* Foto de perfil (2026-10-15): la foto llena el círculo en lugar de las iniciales */
.avatar img, .ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar:has(> img), .ava:has(> img) { background: var(--surface-2); padding: 0; overflow: hidden; }
.foto-btn { cursor: pointer; }
.foto-btn svg { width: 16px; height: 16px; }


/* Triadas de Coordinación (2026-10-15): calendario de horarios (de pay.ilcacademy.com) */
.tri-cal { overflow-x: auto; }
.tri-cal-grid { display: grid; gap: 6px; min-width: 900px; }
.tri-cal-dia { text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 6px 0; }
.tri-cal-hora { font-size: 12px; font-weight: 600; color: var(--ink-3); padding-top: 10px; text-align: right; padding-right: 6px; white-space: nowrap; }
.tri-cal-celda { min-height: 46px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.tri-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px; background: var(--tc, var(--accent)); color: #FFFFFF; font-size: 12px; line-height: 1.25; text-align: left; cursor: pointer; transition: transform .2s; }
.tri-slot:hover { transform: translateY(-1px); }
.tri-slot strong { font-size: 12.5px; }
.tri-slot span { opacity: .9; }
.tri-slot.pend { background: #1F1722; }
.tri-ley { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 4px; background: var(--accent); display: inline-block; }
.tri-ley.pend { background: #1F1722; }

/* E-Coach: proponer horarios (2026-10-15) */
.tri-mas { width: 100%; min-height: 40px; border: 1px dashed var(--line-2); border-radius: 9px; background: transparent; color: var(--ink-3); font-size: 18px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.tri-mas:hover { border-color: var(--accent); color: var(--accent-text); }
.tri-mas[aria-pressed="true"] { background: var(--accent); border-style: solid; border-color: var(--accent); color: #FFFFFF; }
.tri-prop .tri-sel { position: sticky; top: 16px; }
.tri-sel li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; font-weight: 600; }
.tri-sel li button { border: 0; background: transparent; color: var(--ink-3); font-size: 18px; cursor: pointer; line-height: 1; }

/* E-Coach: entrega de grabaciones (2026-10-15) */
.grab-tipo { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grab-op { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); cursor: pointer; }
.grab-op:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.grab-op input { margin-top: 4px; accent-color: var(--accent); }
.grab-op span { display: flex; flex-direction: column; gap: 2px; }
.grab-op small { color: var(--ink-3); font-size: 13px; }
.grab-ayuda { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.grab-ayuda[hidden], .grab-clave[hidden] { display: none; }
.grab-ayuda ol { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) { .grab-tipo { grid-template-columns: 1fr; } }

/* Grabaciones (2026-10-15): pestañas Triadas | Webinars y enlaces "en partes" (+ Agregar otra parte) */
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.chip[aria-selected="true"] { color: var(--accent-ink); }
.partes-campo .parte { display: flex; gap: 8px; align-items: flex-start; }
.partes-campo .parte > .icon-btn { margin-top: 8px; flex: none; }
.partes-campo .parte > .icon-btn[hidden], .partes-campo .grab-clave[hidden] { display: none; }

/* ==========================================================================
   Ajustes generales (pedido del usuario 2026-10-16)
   1. Una sola fuente en todo el campus: Poppins. Los títulos y cifras dejan la
      Barlow Condensed; como Poppins es más ancha, sus tamaños bajan ~20 % para
      mantener las mismas proporciones (y que los títulos no salten a dos líneas).
   2. Fondo blanco en vez de lila, para leer mejor. Las tarjetas ya tienen borde
      y sombra, así que siguen separándose del fondo. La barra lateral no cambia.
   ========================================================================== */
:root {
  --bg: #FFFFFF;
  --f-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 19px; }
@media (max-width: 900px) { h1 { font-size: 26px; } }
.brand-mark { font-size: 16px; }
.rcard .lv { font-size: 17px; }
.ring .val strong { font-size: 40px; }
.date-block strong { font-size: 26px; }
.date-block.sm strong { font-size: 21px; }
.stat strong { font-size: 32px; }
.cover .mono { font-size: 96px; }
.mod-head .num { font-size: 18px; }
.score .big { font-size: 52px; }
.evt .time { font-size: 21px; }
.profile .big { font-size: 26px; }
.lf-t { font-size: 30px; }
.lesson-body h2, .lesson-body .ilc-bloque-titulo { font-size: 24px; }
.lesson-body h3, .lesson-body h4 { font-size: 20px; }
.cover .cv-n { font-size: 28px; }
.hero h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.12; }
.lesson-top h1 { font-size: clamp(28px, 3.4vw, 38px); }

/* Botones de descarga con color y «Presiona para descargar» fuera del botón, debajo (pedido del usuario 2026-10-16). */
.lesson-body .ilc-descarga-item { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.lesson-body .ilc-descarga-item > small { font-size: 12px; color: var(--ink-3); }
.lesson-body .ilc-boton-descarga { gap: 10px; min-height: 52px; padding: 0 24px 0 18px; border: 0; background: linear-gradient(160deg, #7A5481, var(--accent) 60%, #573A5D); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 26px -16px rgb(var(--shadow) / 0.75); transition: transform .3s var(--ease), box-shadow .3s; }
.lesson-body .ilc-boton-descarga:hover { border-color: transparent; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 16px 30px -16px rgb(var(--shadow) / 0.9); }
.lesson-body .ilc-boton-descarga svg { width: 22px; height: 22px; }
.lesson-body .ilc-descarga-nombre { font-size: 15px; font-weight: 600; }
@media (max-width: 900px) { .lesson-body .ilc-descarga-item, .lesson-body .ilc-boton-descarga { width: 100%; } }

/* Temario: los títulos de las lecciones sin negrita (pedido del usuario 2026-10-16); la actual se distingue por su fondo blanco. */
.toc-l, .toc-l[aria-current="step"] { font-weight: 400; }

/* Imágenes de las lecciones con borde y sombra suaves: sobre el fondo blanco (2026-10-16) no se distinguían, p. ej. las capturas de la guía de la Orientación. */
.lesson-body .ilc-bloque-imagen img { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 34px -22px rgb(var(--shadow) / 0.55); }

/* Guía del campus (2026-10-16): primeros pasos, temas que se abren y preguntas frecuentes. */
.guia-inicio, .guia-faqs { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.guia-pps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.guia-pp { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); flex-wrap: wrap; }
.guia-pp .ilc-paso-n, .guia-inicio .ilc-paso-n { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #FFFFFF; background: var(--accent); }
.guia-temas { display: flex; flex-direction: column; gap: 10px; }
.guia-tema { padding: 0; overflow: hidden; }
.guia-tema > summary, .guia-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; }
.guia-tema > summary { padding: 18px 22px; }
.guia-tema > summary::-webkit-details-marker, .guia-faq > summary::-webkit-details-marker { display: none; }
.guia-tema > summary strong { font-size: 17px; }
.guia-tema > summary > svg, .guia-faq > summary > svg { flex: 0 0 auto; transition: transform .3s var(--ease); color: var(--accent-text); }
.guia-tema[open] > summary > svg, .guia-faq[open] > summary > svg { transform: rotate(180deg); }
.guia-tema[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.guia-cuerpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.guia-faq { border-top: 1px solid var(--line); padding: 14px 0; }
.guia-faq > summary { justify-content: space-between; }
.guia-faq p { margin: 10px 0 0; color: var(--ink-2); }
.guia-ayuda { padding: 20px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.guia-tema[hidden] { display: none; }
.guia-lista { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; }
.guia-lista li::marker { color: var(--accent-text); }

/* Guía: los botones dentro del cuerpo de un tema conservan su color (el estilo de enlaces de las lecciones los pintaba de morado). */
.guia-cuerpo a.btn { text-decoration: none; }
.guia-cuerpo a.btn-primary, .guia-cuerpo a.btn-primary:hover { color: var(--accent-ink); }

/* Mis pagos (2026-10-18): cada compra de pay.ilcacademy.com con su avance, su tarjeta y sus cuotas. */
.pago { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.pago-cab { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.pago-cab h2 { margin: 0; }
.pago-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pago-stats .stat { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.pago-stats .stat strong { font-size: 24px; }
.pago-stats .stat-prox { background: var(--accent-soft); border-color: var(--line-2); }
.pago-aviso, .pago-contado, .pago-seguro { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 15px; line-height: 1.45; }
.pago-aviso { background: var(--warn-soft); color: var(--warn); font-weight: 500; }
.pago-contado { background: var(--ok-soft); color: var(--ok); font-weight: 500; }
.pago-seguro { background: transparent; color: var(--ink-2); font-size: 14px; padding: 4px 2px; }
.pago-tarjeta { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); }
.pago-tarjeta .ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.pago-tarjeta { flex-wrap: wrap; }
.pago-tarjeta > .col { flex: 1 1 220px; }
.pago-aviso .btn { font-weight: 600; }
.pago-cuotas > summary { cursor: pointer; font-weight: 600; color: var(--accent-text); padding: 6px 0; }
.pago-cuotas ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.cuota { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.cuota:last-child { border-bottom: 0; }
.cuota-monto { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 110px; text-align: right; }
@media (max-width: 640px) {
  .pago { padding: 18px 16px; }
  .cuota-monto { min-width: 0; text-align: left; }
}

/* Mi mentoría (2026-10-18): horarios para elegir, con la confirmación en línea. */
.mentoria-horarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mentoria-horarios > li { padding: 14px 2px; border-bottom: 1px solid var(--line); }
.mentoria-horarios > li:last-child { border-bottom: 0; }
.mentoria-horarios [hidden] { display: none; }

/* Recursos (2026-10-18): Brochures y Calendarios de las asesoras, para Coordinación Académica. */
.recursos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.recurso { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.recurso-cab { display: flex; gap: 12px; align-items: center; }
.recurso-cab img { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; object-fit: cover; }
.recurso-cab h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.recurso-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.recurso-datos b { color: var(--accent-text); }
.recurso-url { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.recurso-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }


/* LiZ (2026-10-18): con el botón flotante de LiZ en la página, lo último del contenido no queda tapado. */
body:has(#ilc-liz-fab) .view { padding-bottom: 170px; }

/* Preguntas a la E-Coach (2026-10-18): la duda de la persona, como cita. */
.pregunta { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.pregunta-texto { margin: 0; padding: 12px 16px; background: var(--surface-2); border-left: 4px solid var(--accent); border-radius: 10px; }

/* «Mis triadas»: el avance de cada participante y la ventana «Ver avance» (pedido del usuario 2026-10-22). */
.av-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.av-p .tt { flex: 1 1 140px; }
.av-resumen { display: flex; align-items: center; gap: 22px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(120deg, #FFFFFF 0%, var(--accent-soft) 100%); border: 1px solid var(--line); }
.av-ring { width: 120px; height: 120px; flex: none; }
.av-ring svg { width: 100%; height: 100%; }
.av-ring circle { stroke: var(--line); }
.av-ring circle[data-ring] { stroke: var(--accent); }
.av-ring .val strong { font-size: 30px; color: var(--accent-text); }
.av-ring .val > span { font-size: 10px; color: var(--ink-2); margin-top: 4px; letter-spacing: 0.06em; }
/* Semáforo del grupo: compara a los participantes entre sí (rojo = menos avance, verde = más), en pastel. */
.av-p.av-bajo { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 22%, #FFFFFF); }
.av-p.av-medio { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 22%, #FFFFFF); }
.av-p.av-alto { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 22%, #FFFFFF); }
.av-p.av-bajo .btn, .av-p.av-medio .btn, .av-p.av-alto .btn { background: #FFFFFF; }

/* Inicio de la E-Coach: una tarjeta partida en dos (opción 2, elegida por el usuario 2026-10-22). Izquierda: la cohorte
   que acompaña, con el tinte y el sello de su certificación. Derecha: sus triadas. */
.ec-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); border-bottom: 5px solid var(--ilc-mid); box-shadow: 0 30px 60px -36px rgb(var(--shadow) / 0.45); background: var(--surface); }
.ec-izq { display: flex; flex-direction: column; }
.ec-coh { position: relative; overflow: hidden; isolation: isolate; flex: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; color: var(--cv-color, var(--ilc-mid)); background: linear-gradient(120deg, #FFFFFF 0%, var(--cv-tinte, var(--accent-soft)) 100%); }
.ec-coh + .ec-coh { border-top: 1px solid var(--line); }
.ec-coh .ec-wm { position: absolute; right: -110px; top: -110px; width: 340px; height: 340px; opacity: 0.1; transform: rotate(-12deg); z-index: -1; pointer-events: none; }
.ec-coh .hero-medal { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgb(var(--shadow) / 0.55); }
.ec-coh .hero-medal img { width: 48px; height: 48px; display: block; }
.ec-coh .eyebrow, .ec-coh strong, .ec-coh h2 { color: var(--cv-color, var(--ilc-mid)); }
.ec-split h2 { margin: 4px 0 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.ec-sub { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.ec-btn { min-height: 56px; padding: 0 26px; font-size: 17px; margin-top: 6px; }
.ec-coh .ec-btn { background: var(--cv-color, var(--ilc)); color: #FFFFFF; }
.ec-tri { padding: 30px 32px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ec-ico { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.ec-ico svg { width: 26px; height: 26px; }
@media (max-width: 900px) {
  .ec-split { grid-template-columns: minmax(0, 1fr); }
  .ec-tri { border-left: 0; border-top: 1px solid var(--line); }
  .ec-btn { width: 100%; }
}

/* «Tu semana» de la E-Coach: la clase de la cohorte y su triada, en los próximos 7 días (2026-10-22). */
.sem-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sem-item { position: relative; }
.sem-item.es-tri { background: linear-gradient(120deg, #FFFFFF 0%, var(--accent-soft) 100%); border-color: var(--line-2); }

/* Look premium de las piezas nuevas de la E-Coach (pedido del usuario 2026-10-22): la mitad de triadas con el fondo
   del prototipo (degradado, textura y dorado), tarjetas con ícono que se elevan, avatares, bloques de fecha y anillo. */
.ec-tri.dark { position: relative; overflow: hidden; isolation: isolate; border-left: 0; border-radius: 0; box-shadow: none; color: #FFFFFF; }
.ec-tri.dark .eyebrow { color: var(--gold-bright); }
.ec-tri.dark strong, .ec-tri.dark h2 { color: #FFFFFF; }
.ec-tri.dark .ec-sub { color: var(--on-dark-2); }
.ec-tri.dark .ec-ico { background: rgba(255,255,255,0.12); color: var(--gold-bright); border: 1px solid rgba(255,255,255,0.18); }
.ec-tri.dark .btn-light { color: #3B2241; }
/* Inicio de la E-Coach con 2 o más cohortes (opción A, elegida por el usuario 2026-10-24): una fila corta por
   cohorte a la izquierda y, a la derecha, el avance de sus participantes con una pestaña por cohorte. */
.ec-lista { flex: 1; padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(120deg, #FFFFFF 0%, var(--accent-soft) 100%); }
.ec-lista-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ec-fila { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(120deg, #FFFFFF 0%, var(--cv-tinte, var(--accent-soft)) 100%); }
.ec-fila .co-mini { width: 48px; height: 48px; }
.ec-fila .co-mini img { width: 44px; height: 44px; }
.ec-fila .tt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ec-fila .eyebrow { font-size: 11.5px; letter-spacing: 0.1em; color: var(--cv-color, var(--ilc-mid)); }
.ec-fila strong { font-size: 19px; line-height: 1.2; color: var(--cv-color, var(--ilc-mid)); }
.ec-fila .ec-sub { font-size: 14px; }
.ec-fila .btn { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; background: var(--cv-color, var(--ilc)); color: #FFFFFF; }
.ec-varias .ec-tri h2 { font-size: clamp(22px, 2vw, 26px); }
.ec-tri .chips { align-self: flex-start; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.ec-tri .chips .ind { background: #FFFFFF; }
.ec-tri .chip { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 6px; color: #FFFFFF; }
.ec-tri .chip[aria-pressed="true"] { color: #3B2241; }
.ch-sello { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; }
.ch-sello img { width: 28px; height: 28px; display: block; }
.ec-pan { display: flex; flex-direction: column; gap: 6px; }
.ec-pan[hidden] { display: none; }
.ec-pp { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 12px; border-radius: 12px; background: rgba(255,255,255,0.08); }
.ec-pp .pt { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: rgba(255,255,255,0.45); }
.ec-pp .tt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ec-pp .l, .ec-portal .l { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ec-pp .l strong { font-size: 14px; }
.ec-pp .l b { white-space: nowrap; }
.ec-pp .l strong span { font-weight: 400; color: var(--on-dark-2); }
.ec-pp .nota { font-size: 13px; color: var(--on-dark-2); }
.ec-pp .b, .ec-portal .b { display: block; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.18); overflow: hidden; }
.ec-pp .b i, .ec-portal .b i { display: block; height: 100%; border-radius: 99px; background: var(--gold-bright); }
.ec-pp.av-alto .pt, .ec-pp.av-alto .b i { background: #7BD3A6; }
.ec-pp.av-medio .pt, .ec-pp.av-medio .b i { background: #F2C46D; }
.ec-pp.av-bajo .pt, .ec-pp.av-bajo .b i { background: #F08B7E; }
.ec-pp .ver { min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--gold-bright); font-size: 13px; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.ec-portal { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); font-size: 14px; line-height: 1.45; color: var(--on-dark-2); }
.ec-portal strong, .ec-portal .l { color: #FFFFFF; }
.ec-nota { font-size: 13px; color: var(--on-dark-2); }
.ec-mas { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--gold-bright); text-decoration: underline; }
.ec-pie { margin-top: auto; padding-top: 4px; }
.grid-2.ec-abajo { align-items: stretch; } /* «Tus grabaciones» y «Tu semana», del mismo alto */
/* «Mis triadas» (opción A, elegida por el usuario 2026-10-24): una tarjeta por grupo, con el color de su certificación,
   y al tocarla la página del grupo (?g=id) con lo que falta entregar arriba. */
.tri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tri-grid > [hidden] { display: none; }
.tri-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: linear-gradient(130deg, #FFFFFF 0%, var(--cv-tinte, var(--accent-soft)) 100%); box-shadow: 0 10px 30px -18px rgb(var(--shadow) / 0.28); }
.tri-card .cab { display: flex; align-items: center; gap: 12px; }
.tri-card .cab > img { box-shadow: 0 8px 18px -10px rgb(var(--shadow) / 0.55); }
.tri-card .tt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tri-card .eyebrow { font-size: 12px; letter-spacing: 0.12em; color: var(--cv-color, var(--accent-text)); }
.tri-card strong { font-size: 19px; line-height: 1.2; color: var(--cv-color, var(--ink)); }
.tri-card .cab svg { width: 20px; height: 20px; color: var(--cv-color, var(--accent)); flex: none; }
.tri-card .gente { font-size: 14px; color: var(--ink-2); }
.tri-card .pub, .tri-grupo .pub { display: flex; flex-direction: column; gap: 6px; }
.tri-card .pub .l, .tri-grupo .pub .l { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink-2); }
.tri-card .pub .l b, .tri-grupo .pub .l b { color: var(--ink); }
.tri-card .pub .b, .tri-grupo .pub .b { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.85); overflow: hidden; }
.tri-card .pub .b i, .tri-grupo .pub .b i { display: block; height: 100%; border-radius: 99px; background: var(--cv-color, var(--accent)); }
.tri-est { align-self: flex-start; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid; }
.tri-est.toca { background: var(--gold-soft); color: #7A4F12; border-color: var(--gold-line); }
.tri-est.on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--line-2); }
.tri-est.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, #FFFFFF); }
.tri-est.luego { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.tri-grupo { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 24px 26px; border-radius: var(--r-xl); border: 1px solid var(--line); border-bottom: 5px solid var(--cv-color, var(--ilc-mid)); background: linear-gradient(120deg, #FFFFFF 0%, var(--cv-tinte, var(--accent-soft)) 100%); }
.tri-grupo > img { box-shadow: 0 10px 22px -12px rgb(var(--shadow) / 0.55); }
.tri-grupo .tt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.tri-grupo .eyebrow { color: var(--cv-color, var(--accent-text)); }
.tri-grupo h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; color: var(--cv-color, var(--ink)); }
.tri-grupo .pub { flex: 0 1 300px; }
.tri-sec h2 { margin: 0; font-size: 20px; }
.tri-sec h2 .muted { font-weight: 500; }
.tri-mod.falta { border-color: var(--gold-line); background: linear-gradient(120deg, #FFFFFF 0%, var(--gold-soft) 100%); }
.tri-mod.falta .ava { border-radius: 12px; background: #FFFFFF; color: #7A4F12; box-shadow: inset 0 0 0 1px var(--gold-line); font-weight: 700; }
.tri-mod .ava { border-radius: 12px; font-weight: 700; }
.tri-mod { flex-wrap: wrap; }
.tri-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tri-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.tri-chip .n { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--line); color: var(--ink-2); }
.tri-chip .n svg { width: 14px; height: 14px; }
.tri-chip .tt { display: flex; flex-direction: column; min-width: 0; }
.tri-chip strong { font-size: 14px; }
.tri-chip .tt span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tri-chip.ok { border-color: color-mix(in srgb, var(--ok) 25%, #FFFFFF); background: color-mix(in srgb, var(--ok-soft) 60%, #FFFFFF); }
.tri-chip.ok .n { background: var(--ok); color: #FFFFFF; }
.tri-chip.ok strong { color: #1F5A41; }
.tri-aldia { margin: 0; padding: 16px 18px; background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, #FFFFFF); color: var(--ok); font-weight: 600; }
.tri-pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 520px) {
  .ec-fila { flex-wrap: wrap; }
  .ec-fila .btn { flex: 1 1 100%; }
  .ec-pp { flex-wrap: wrap; }
  .ec-pp .tt { flex: 1 1 calc(100% - 22px); }
  .ec-pp .l strong span { display: block; }
  .ec-pp .ver { margin-left: 16px; }
}
.ec-grab .ava svg { width: 20px; height: 20px; }
.ec-grab .barline { display: flex; margin-top: 6px; }
.ec-grab .barline .bar { flex: 1; }
/* Look premium de «Tus grabaciones» (lila, cada grupo con el color y el sello de su certificación) y «Tu semana»
   (dorada) en el inicio de la E-Coach: con color, no blancas (pedido del usuario 2026-10-24). */
.tile-lila { background: linear-gradient(160deg, #FFFFFF 25%, var(--accent-soft)); border-color: var(--line-2); }
.tile-lila .ico, .tile-gold .ico { width: 48px; height: 48px; }
.tile-lila .ico { background: var(--grad); color: #FFFFFF; box-shadow: 0 10px 22px -12px rgb(var(--shadow) / 0.7); }
.tile-lila .ec-grab { background: linear-gradient(120deg, #FFFFFF 0%, var(--cv-tinte, var(--accent-soft)) 100%); border-color: var(--line); }
.tile-lila .ec-grab strong { color: var(--cv-color, var(--ink)); }
.ec-grab .co-mini { width: 44px; height: 44px; }
.ec-grab .co-mini img { width: 40px; height: 40px; }
.tile-lila .ec-grab .bar { background: rgba(255,255,255,0.8); }
.tile-lila .ec-grab .bar i { background: var(--cv-color, var(--accent)); }
.tile-gold .sem-item { background: rgba(255,255,255,0.88); border-color: var(--gold-line); }
/* Inicio del CIT (2026-10-24): «Clase en vivo» con el tinte de su certificación, como la tarjeta grande. */
.tile-cert { background: linear-gradient(160deg, #FFFFFF 20%, var(--cv-tinte)); border-color: var(--line); border-bottom: 4px solid var(--cv-linea); }
.tile-cert .eyebrow, .tile-cert h3 { color: var(--cv-color); }
.tile-cert .date-block { background: var(--cv-color); }
.tile-cert .btn-primary { background: var(--cv-color); }
.tile-lila .bar, .tile-gold .bar { background: rgba(255,255,255,0.85); }
.av-p.av-bajo .ava { background: #FFFFFF; color: var(--bad); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bad) 30%, #FFFFFF); }
.av-p.av-medio .ava { background: #FFFFFF; color: var(--warn); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 30%, #FFFFFF); }
.av-p.av-alto .ava { background: #FFFFFF; color: var(--ok); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ok) 30%, #FFFFFF); }
.ac .av-p { flex-wrap: wrap; }
.ac .av-p .btn { flex: 1 1 100%; }
@media (max-width: 900px) { .av-resumen { flex-direction: column; text-align: center; } }

/* Inicio de Coordinación: lo que viene (rediseño del 2026-10-22). */
.co-hero { grid-template-columns: minmax(0, 1fr) auto; }
.co-sub { font-size: 17px; color: var(--on-dark-2); }
.co-btn { min-height: 56px; padding: 0 24px; font-size: 17px; }
.co-sello { width: 140px; height: 140px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6); }
.co-sello img { width: 124px; height: 124px; display: block; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.co-coh { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; border: 1px solid var(--line); border-bottom: 4px solid var(--cv-linea, var(--ilc)); background: linear-gradient(120deg, #FFFFFF 0%, var(--cv-tinte, var(--accent-soft)) 100%); color: var(--ink); text-decoration: none; }
.co-mini { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 8px 18px -10px rgb(var(--shadow) / 0.55); }
.co-mini img { width: 40px; height: 40px; display: block; }
.co-nom { font-size: 16px; color: var(--cv-color, var(--ilc-mid)); }
.co-va { font-size: 21px; line-height: 1.2; color: var(--cv-color, var(--ilc-mid)); }
.co-prox { font-size: 14px; color: var(--ink-2); }
.co-prox strong { color: var(--ink); }
.co-btn-coh { align-self: flex-start; margin-top: 4px; background: var(--cv-color, var(--ilc)); color: #FFFFFF; }
.sem-item.es-hoy { border-color: var(--accent); background: var(--accent-soft); }

/* Pedir un cambio (Coordinación → Soporte, 2026-10-22) */
.pc-ayuda { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); font-size: 15px; }
.pc-ayuda svg { flex: none; }
.pc-mis { background: var(--surface); border: 1px solid var(--line-2); color: var(--accent-text); text-decoration: none; }
.pc-parte { position: relative; display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-lg); transition: outline-color .3s var(--ease); outline: 2px dashed transparent; outline-offset: 6px; }
.pc-parte:hover, .pc-parte.pc-activa { outline-color: var(--gold-line); }
.pc-parte.pc-activa { outline: 3px solid var(--gold); }
.pc-btn { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--accent-text); font: 600 14px var(--f-body); cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
.pc-btn:hover, .pc-activa > .pc-btn { background: var(--gold-soft); border-color: var(--gold-line); }
.ilc-descarga-item .pc-btn { align-self: center; margin-top: 4px; }
.pc-otra { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px dashed var(--line-2); }
.pc-form { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--gold-line); background: var(--gold-soft); text-align: left; }
.pc-form[hidden], .pc-form [hidden] { display: none; }
.pc-titulo { font-size: 18px; }
.pc-titulo span { color: var(--warn); }
.pc-archivo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-2); background: var(--surface); font-size: 15px; cursor: pointer; }
.pc-archivo input { flex: 1 1 220px; min-height: 44px; font: inherit; }
.pc-mas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-mas .chip { min-height: 44px; border: 1px solid var(--line-2); background: var(--surface); color: var(--accent-text); }
.pc-acciones { justify-content: flex-end; gap: 10px; }
/* Pasos para pedir un cambio, en una columna a la derecha de la lección (pedido del usuario 2026-10-22) */
.pc-con-pasos { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; align-items: start; }
.pc-pasos { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; }
.pc-pasos ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pc-pasos li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(170deg, var(--surface-2), var(--surface)); font-size: 15px; line-height: 1.5; box-shadow: 0 10px 30px -22px rgb(var(--shadow) / 0.4); }
.pc-pasos li i { font-style: normal; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--grad); color: #FFFFFF; }
.pc-pasos li > span { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pc-muestra { align-self: flex-start; pointer-events: none; }
.pc-pasos .btn { justify-content: center; }
.pc-con-pasos .pc-ayuda { display: none; }
@media (max-width: 1250px) {
  .pc-con-pasos { display: block; }
  .pc-pasos { display: none; }
  .pc-con-pasos .pc-ayuda { display: flex; }
}

/* Mis pedidos (Coordinación) y Solicitudes de cambios (Soporte) */
.pedido { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.pedido-donde { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-size: 15px; }
.pedido-texto { margin: 0; padding: 12px 16px; border-left: 4px solid var(--accent); border-radius: 8px; background: var(--surface-2); white-space: pre-line; }
.pedido-adj { display: flex; flex-wrap: wrap; gap: 8px; }
.pedido-adj a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--accent-text); font-weight: 600; font-size: 14px; text-decoration: none; overflow-wrap: anywhere; }
.pedido-nuevo-texto { margin: 0; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--line-2); white-space: pre-line; font-size: 15px; }
.pedido-hecho { padding: 12px 16px; border-radius: 12px; background: var(--ok-soft); }
.pedido-acciones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.pedido-acciones form { margin: 0; }
.pedido details { flex: 1 1 100%; }
.pedido details[open] { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); }
.pedido summary { cursor: pointer; }
@media (max-width: 900px) {
  .co-hero { grid-template-columns: minmax(0, 1fr); }
  .co-sello { display: none; }
  .co-btn { width: 100%; }
}

/* ---------- Soporte: Seguridad e Inicio «tu lista de hoy» (rediseño del rol, 2026-10-22) ---------- */
.seg-sem { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--ok-soft); color: var(--ok); }
.seg-sem.mirar { background: var(--warn-soft); color: var(--warn); }
.seg-sem strong { font-size: 20px; }
.seg-luz { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center; background: currentColor; font-size: 28px; font-weight: 700; }
.seg-luz svg, .seg-sem.mirar .seg-luz { color: #FFFFFF; }
.seg-sem.mirar .seg-luz { background: var(--warn); }
.seg-sem.ok .seg-luz svg { width: 28px; height: 28px; }
.seg-sem.ok .seg-luz { background: var(--ok); }
.seg-lista { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.seg-lista li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); }
.seg-lista li:first-child { border-top: 0; }
.seg-lista li .col { flex: 1 1 auto; }
.seg-punto { width: 14px; height: 14px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--ok); }
.seg-lista li.mirar .seg-punto { background: var(--warn); }
.so-hoy { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.so-hoy > .so-tile { grid-column: span 2; }
button.so-tile { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.so-hoy > .so-llega, .so-hoy > .so-liz { grid-column: span 3; }
/* «Lo que llega» es una lista: nombre a la izquierda, número y «Al día» (o el botón) a la derecha. */
.so-items { display: flex; flex-direction: column; }
.so-item { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .3s; }
.so-item:first-child { border-top: 0; }
.so-item:hover, .so-item.hay { background: var(--accent-soft); border-radius: 12px; }
.so-item > .muted { flex: 1 1 auto; min-width: 0; }
.so-tile .so-item .so-n { font-size: 32px; min-width: 36px; text-align: right; }
.so-item > .so-al, .so-tile .so-item .btn { flex: 0 0 140px; justify-content: flex-start; align-self: center; margin-top: 0; }
.so-tile.so-liz { position: relative; overflow: hidden; background: var(--grad); border-color: transparent; color: var(--on-dark); }
.so-liz .eyebrow { color: var(--gold-bright); }
.so-liz-t { font-family: var(--f-display); font-size: 26px; line-height: 1.15; color: #FFFFFF; }
.so-liz .small { color: var(--on-dark-2); }
.so-tile .so-est { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--ink-2); }
.so-tile.seg-ok { background: var(--ok-soft); border-color: #BFDFCB; }
.so-tile.seg-ok .so-est { color: var(--ok); }
.so-tile.seg-mirar { background: var(--warn-soft); border-color: #EED9A6; }
.so-tile.seg-mirar .so-est { color: var(--warn); }
#pendBox > .card { margin-top: 4px; }
.so-tile { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.so-tile.hay { background: var(--accent-soft); border-color: var(--accent); }
.so-tile .so-n { font-family: var(--f-display); font-size: 52px; font-weight: 700; line-height: 1; color: var(--accent-text); }
.so-tile .so-al { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; }
/* Con color, no blancas (pedido del usuario 2026-10-24, el look premium de los otros inicios): «Lo que llega» dorada,
   «Contenido por revisar» y «Crear algo nuevo» lila. «Seguridad» sigue con el color de su estado (verde o ámbar). */
.so-tile.so-llega { background: linear-gradient(160deg, #FFFFFF 25%, var(--gold-soft)); border-color: var(--gold-line); }
.so-llega .eyebrow { color: var(--gold); }
.so-llega .so-item { border-top-color: var(--gold-line); }
.so-llega .so-item:hover, .so-llega .so-item.hay { background: rgba(255,255,255,0.75); }
.so-tile.so-cont:not(.hay), .so-tile.so-crear { background: linear-gradient(160deg, #FFFFFF 25%, var(--accent-soft)); border-color: var(--line-2); }
.so-crear .so-cr-b { background: rgba(255,255,255,0.85); }
.so-tile .btn { align-self: flex-start; margin-top: auto; }
.so-tile .so-cr-b { align-self: stretch; margin-top: 0; justify-content: flex-start; min-height: 52px; gap: 12px; font-size: 15px; }
.so-cr-b span { flex: 1 1 auto; text-align: left; white-space: normal; line-height: 1.3; }
.so-cr-b svg { flex: none; }
.head .so-buscar { flex: 0 1 480px; align-self: center; gap: 10px; flex-wrap: nowrap; }
@media (max-width: 700px) { .head .so-buscar { flex-basis: 100%; } }
.so-cr-b svg:last-child { opacity: .6; }
@media (max-width: 1100px) { .so-hoy { grid-template-columns: repeat(2, minmax(0, 1fr)); } .so-hoy > .so-tile { grid-column: auto; } }
@media (max-width: 700px) { .so-hoy { grid-template-columns: minmax(0, 1fr); } .so-item > .so-al, .so-tile .so-item .btn { flex-basis: auto; } }

/* ---------- Soporte: gestión de calendarios (2026-10-22) ---------- */
.cg-n { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 14px; font-weight: 700; vertical-align: middle; }
.cg-form legend { font-size: 18px; }
.cg-cohs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cg-coh { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; cursor: pointer; }
.cg-coh input { position: absolute; opacity: 0; pointer-events: none; }
.cg-coh img { width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; flex: none; }
.cg-coh .cg-sin { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.cg-coh:has(input:checked) { border: 2px solid var(--cv-color, var(--accent)); background: var(--cv-tinte, var(--accent-soft)); color: var(--cv-color, var(--accent-text)); }
.cg-coh:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.cg-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cg-seg button { min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cg-seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.cg-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 500; cursor: pointer; }
.cg-check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.cg-fechas { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-fecha { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.cg-fecha.saltada { background: var(--surface); color: var(--ink-3); text-decoration: line-through; }
.cg-nota summary { cursor: pointer; color: var(--accent-text); font-weight: 600; font-size: 15px; padding: 6px 0; }
.cg-acc { gap: 8px; margin-top: 8px; }
.cg-mas summary { cursor: pointer; color: var(--ink-2); font-size: 14px; font-weight: 600; }
[data-ev][draggable="true"] { cursor: grab; }
.cg-arrastrando .day[data-k] { outline: 2px dashed var(--line-2); outline-offset: -2px; }
.day.cg-sobre { background: var(--accent-soft); outline: 3px solid var(--accent) !important; }
.modal[hidden] { display: none; }
/* Con una ventana abierta, el botón flotante de LiZ se oculta: en el celular tapaba el final de la ventana (los
   porcentajes de «Ver avance», revisión 2026-10-23). Vuelve al cerrarla. */
body:has(.modal:not([hidden])) .ilc-liz-fab { visibility: hidden; }
.so-tile[aria-expanded="true"] .btn svg { transform: rotate(180deg); }

/* ---------- Soporte: Consultas (2026-10-22, el tablero de soporte.ilcacademy.com dentro del campus) ---------- */
.cs-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cs-num { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.cs-num strong { font-family: var(--f-display); font-size: 34px; line-height: 1.1; color: var(--accent-text); }
.cs-lista { gap: 8px; }
.cs-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color .3s, border-color .3s; }
a.cs-row:hover { background: var(--accent-soft); }
.cs-row.nueva { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.cs-row .ava { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.cs-row strong { font-size: 15px; line-height: 1.35; }
.cs-det { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.cs-cab { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.cs-tit { font-size: 30px; }
.cs-bloque { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
details.cs-bloque > summary { cursor: pointer; list-style: revert; }
.cs-conv { margin-top: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); font-size: 15px; line-height: 1.6; white-space: normal; max-height: 420px; overflow: auto; }
.cs-msg { padding: 14px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.cs-msg.nota { background: var(--gold-soft); border-color: var(--gold-line); }
.cs-msg p { margin: 0 0 6px; }
.cs-hist { font-size: 13px; color: var(--ink-3); padding: 0 6px; }
.cs-hist span { opacity: .8; }
.cs-lado .field select { min-height: 56px; }
@media (max-width: 1000px) { .cs-det { grid-template-columns: minmax(0, 1fr); } .cs-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Soporte: Chats en vivo (2026-10-22, la bandeja de soporte.ilcacademy.com dentro del campus) ---------- */
.cv { display: grid; grid-template-columns: 320px minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.cv > .card { padding: 14px; min-width: 0; }
.cv-lista { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 220px); position: sticky; top: 16px; }
.cv-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.cv-tabs button { flex: 1 1 0; min-height: 40px; padding: 4px 2px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cv-tabs button[aria-selected="true"] { background: var(--surface); color: var(--accent-text); box-shadow: 0 4px 12px -8px rgb(var(--shadow) / .6); }
.cv-tabs .n { font-size: 12px; opacity: .7; }
.cv-lista > .search { flex: none; }
.cv-items { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 120px; flex: 1 1 auto; }
.cv-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.cv-item:hover { background: var(--accent-soft); }
.cv-item.sel { background: var(--accent-soft); border-color: var(--accent); }
.cv-item .ava, .cv-perfil .ava { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.cv-item.tomada .ava { background: var(--ok-soft); color: var(--ok); }
.cv-top { display: flex; justify-content: space-between; gap: 8px; }
.cv-top strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-top .small { flex: none; white-space: nowrap; }
.cv-prev { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); }
.cv-cargando { padding: 12px; }
.cv-hilo { display: flex; flex-direction: column; gap: 12px; min-height: 420px; }
.cv-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 380px; text-align: center; }
.cv-vacio-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.cv-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.cv-nombre { font-family: var(--f-display); font-size: 24px; line-height: 1.1; }
.cv-acc { gap: 8px; }
.cv-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 6px 2px; }
.cv-msg { max-width: 80%; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); align-self: flex-start; }
.cv-msg.liz { background: var(--accent-soft); border-color: transparent; }
.cv-msg.agente { align-self: flex-end; background: var(--accent); color: #FFFFFF; border-color: transparent; }
.cv-msg.agente .cv-msg-quien { color: #F1E4F3; }
.cv-msg-quien { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.cv-msg-txt { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.cv-msg img { max-width: 240px; border-radius: 10px; display: block; }
.cv-sug { padding: 12px 14px; border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid var(--gold-line); display: flex; flex-direction: column; gap: 6px; }
.cv-sug p { margin: 0; }
.cv-resp { display: flex; flex-direction: column; gap: 8px; }
.cv-resp textarea { min-height: 90px; }
.btn.grabando { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.cv-perfil { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; position: sticky; top: 16px; }
.cv-perfil .ava.grande { width: 56px; height: 56px; font-size: 22px; }
.cv-dato { display: flex; flex-direction: column; gap: 0; font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 1250px) { .cv { grid-template-columns: 300px minmax(0, 1fr); } .cv-perfil { grid-column: 1 / -1; position: static; } }
@media (max-width: 860px) { .cv { grid-template-columns: minmax(0, 1fr); } .cv-lista { position: static; max-height: none; } }

/* ---------- Revisión del look de Soporte y Coordinación (2026-10-23) ---------- */
.chips-fila { gap: 10px; }
.tri-gente { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.tri-gente li { flex-wrap: nowrap; padding: 8px 0; border-top: 1px solid var(--line); }
.tri-gente li:first-child { border-top: 0; }
.tri-gente li > span { min-width: 0; }
.asig-lista { display: flex; flex-direction: column; gap: 4px; max-height: 440px; overflow-y: auto; padding-right: 4px; }
.asig-item { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.asig-item:hover { background: var(--accent-soft); }
.ficha-sello { width: 92px; height: 92px; flex: none; }
.ficha-sello img { width: 82px; height: 82px; }
.ficha-cal { padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.so-ico { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.recurso.co-coh { padding: 20px 22px; }
.recurso.co-coh .recurso-cab h3 { color: var(--cv-color, var(--ink)); }
.recurso-url { display: none; } /* «Copiar enlace» la sigue leyendo */
.dia-lista .dia-agregar { grid-column: 1 / -1; }
@media (max-width: 760px) { .ficha-sello { display: none; } }
.evt:has(> .cg-acc) { flex-wrap: wrap; }
.evt > .cg-acc { flex-basis: 100%; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.dia-lista:has(.dia-agregar) { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
@media (max-width: 760px) { .dia-lista:has(.dia-agregar) { grid-template-columns: 1fr; } }
.evt:has(> .cg-acc) > .col { flex: 1 1 0; }
#chAsig .chip { padding-inline: 12px; white-space: nowrap; }
@media (min-width: 761px) { #chAsig { flex-wrap: nowrap; max-width: 100%; } }

/* ---------- Avisos de clase por correo (Calendario → «Avisos por correo», 2026-10-23) ---------- */
.avc-estado { gap: 10px; }
.avc-estado .so-est svg { width: 28px; height: 28px; }
.avc-estado form { align-self: flex-start; margin-top: 6px; }
.avc-estado > .btn { margin-top: 6px; }
.avc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.avc-tipo { display: flex; gap: 16px; align-items: flex-start; }
.avc-tipo strong { font-size: 17px; line-height: 1.3; }
.avc-clase .co-mini { flex: none; }
.avc-clase .pill svg { width: 14px; height: 14px; }
.avc-marco { width: 100%; height: min(62vh, 640px); border: 1px solid var(--line); border-radius: 16px; background: #F4F1F5; }
.avc-ver form.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 760px) { .avc-dos { grid-template-columns: 1fr; } }

/* ---------- Recorrido de bienvenida por rol (2026-10-23, inc/campus-recorrido.php) ----------
   LiZ ilumina cada opción del menú con un globo al lado. Por encima del menú del celular (40) y de la pantalla de acceso (100). */
.rc-capa { position: fixed; inset: 0; z-index: 150; background: rgba(28,12,32,0); pointer-events: none; transition: background-color .35s ease; }
.rc-capa.on { pointer-events: auto; }
.rc-capa.oscura { background: rgba(28,12,32,0.55); }
.rc-foco { position: fixed; z-index: 151; border-radius: 14px; box-shadow: 0 0 0 3px var(--gold-bright), 0 0 0 200vmax rgba(28,12,32,0.6); pointer-events: none; opacity: 0; transition: left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease), opacity .3s ease; }
.rc-foco.on { opacity: 1; }
.rc-foco::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--gold-bright); animation: rc-late 1.6s ease-out infinite; }
@keyframes rc-late { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.16); } }
.rc-globo { position: fixed; z-index: 152; left: 0; top: 0; width: min(350px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: left .55s var(--ease), top .55s var(--ease), opacity .3s ease, transform .3s ease; }
.rc-globo.on { opacity: 1; transform: none; pointer-events: auto; }
.rc-cuenta { display: flex; align-items: center; gap: 10px; }
.rc-cuenta img { width: 26px; height: 56px; object-fit: contain; }
.rc-cuenta span { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.rc-globo h2 { font-size: 21px; }
.rc-globo p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.rc-puntos { display: flex; flex-wrap: wrap; gap: 5px; }
.rc-puntos b { width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .3s var(--ease), background-color .3s; }
.rc-puntos b.on { width: 20px; background: var(--accent); }
.rc-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-nav { display: flex; gap: 8px; }
.rc-pie .btn { min-height: 46px; padding: 0 16px; }
.rc-saltar { min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--ink-3); font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rc-modal { position: fixed; z-index: 152; left: 50%; top: 50%; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: 24px; padding: 26px 26px 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; opacity: 0; transform: translate(-50%, -46%) scale(.96); pointer-events: none; transition: opacity .35s ease, transform .45s var(--ease); }
.rc-modal.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.rc-liz { height: 150px; animation: rc-flota 3.2s ease-in-out infinite; }
@keyframes rc-flota { 50% { transform: translateY(-6px); } }
.rc-modal h2 { font-size: 24px; }
.rc-modal p { font-size: 16px; color: var(--ink-2); max-width: 34ch; }
.rc-modal small { font-size: 13px; color: var(--ink-3); }
.rc-fila { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
.rc-globo [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rc-foco, .rc-globo, .rc-modal, .rc-capa { transition-duration: .01s; } .rc-foco::after, .rc-liz { animation: none; } }
/* LiZ animada en la ventana del recorrido: el lienzo del video es más grande que la figura (deja aire arriba para el
   saludo), así que se compensa para que ocupe el mismo lugar que la imagen fija de 150 px. */
.rc-liz-anim { height: 192px; width: auto; margin: -30px 0 -12px; }
.rc-liz[hidden], .rc-liz-anim[hidden] { display: none; }

/* Celular: las etiquetas largas («Certificación completa ✓ · fecha») bajan de línea y los enlaces escritos como texto (p. ej. el de Zoom) se cortan, en vez de ensanchar la página (auditoría 2026-10-24). */
.pill { max-width: 100%; }
main a { overflow-wrap: anywhere; }
@media (max-width: 600px) { .pill { white-space: normal; padding-block: 4px; line-height: 1.3; } }