/* ============================================================
   FocusPI — "Cuaderno"
   Capa de diseño que se carga la ULTIMA. Idea: un cuaderno de estudio
   bien cuidado. Papel con grano, tinta azul petróleo, subrayado de
   fosforito, pósits en la semana y cinta washi en las tarjetas clave.

   - Titulares: Fraunces (serif con caracter, ejes SOFT/WONK).
   - Interfaz: Hanken Grotesk.
   - La adaptacion a la dislexia (OpenDyslexic, espaciado, temas de
     lectura) vive SOLO en el TEXTO de los apuntes (.ai-content, lector, editor).
   ============================================================ */

/* ---------- Tokens (pisan los temas de a11y.css fuera de los apuntes) ---------- */
html, html[data-theme] {
  --paper:      #F3ECDF;
  --paper-2:    #EDE4D3;
  --sheet:      #FFFBF4;
  --sheet-2:    #F8F1E4;
  --ink:        #262019;
  --ink-2:      #5F574B;
  --ink-3:      #8C8374;
  --rule:       #E3D8C5;
  --rule-2:     #D5C7B0;

  --teal:       #1C5D5B;
  --teal-2:     #154847;
  --teal-deep:  #0E3433;
  --teal-soft:  rgba(28, 93, 91, .10);
  --marker:     #F6D65A;
  --marker-soft:#FBEBA6;
  --coral:      #DB6A4B;
  --coral-soft: #F8DDD3;
  --sage:       #7E9F78;
  --sage-soft:  #E1EBDC;
  --lilac:      #8E82C0;
  --lilac-soft: #E6E2F4;

  /* Traduccion a los tokens que usa el resto del CSS */
  --bg: var(--paper);  --bg-2: var(--sheet-2);
  --surface: var(--sheet); --surface-2: var(--sheet-2); --surface-3: var(--paper-2);
  --border: var(--rule-2); --border-soft: var(--rule);
  --text: var(--ink); --muted: var(--ink-2); --muted-2: var(--ink-3);
  --accent: var(--teal); --accent-hover: var(--teal-2); --accent-press: var(--teal-deep);
  --accent-soft: var(--teal-soft); --accent-ring: rgba(28, 93, 91, .32); --accent-ink: #FFFBF4;
  --danger: var(--coral); --ok: #4F7F4A; --warn: #B98A12;
  --hm-0: #E9E0CF; --hm-1: #BFD6CF; --hm-2: #7FB0A6; --hm-3: #3F8480; --hm-4: #1C5D5B;
  --code-bg: #F1E8D6;
  --r: 18px; --r-sm: 12px; --r-xs: 8px;
  --shadow-sm: 0 1px 0 rgba(60, 45, 20, .06), 0 2px 6px -2px rgba(60, 45, 20, .10);
  --shadow:    0 1px 0 rgba(60, 45, 20, .06), 0 14px 30px -18px rgba(60, 45, 20, .35);
  --shadow-lg: 0 30px 60px -30px rgba(60, 45, 20, .45), 0 2px 0 rgba(60, 45, 20, .05);
  --glow: 0 0 0 3px rgba(28, 93, 91, .22);

  --font: 'Hanken Grotesk', 'Segoe UI', sans-serif;
  --display: 'Fraunces', Georgia, serif;
  --trans: 180ms cubic-bezier(.3, .7, .2, 1);

  font-size: 16px;
}

/* Colores de la zona de lectura segun el tema elegido en el panel 👁️ */
html { --read-bg: #FAF4E6; --read-fg: #3B342A; }
html[data-theme="sepia"]   { --read-bg: #F1E4CE; --read-fg: #43372A; }
html[data-theme="azul"]    { --read-bg: #E4EDF5; --read-fg: #2B3742; }
html[data-theme="menta"]   { --read-bg: #E3EFE6; --read-fg: #2C3A31; }
html[data-theme="grafito"] { --read-bg: #22262B; --read-fg: #E4E6E9; }
html[data-theme="carbon"]  { --read-bg: #161616; --read-fg: #E8E6E3; }

/* ---------- Base ---------- */
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
  word-spacing: 0;
  color: var(--ink);
  background-color: var(--paper);
  /* Papel: rejilla de puntos + grano + dos manchas de luz */
  background-image:
    radial-gradient(rgba(38, 32, 25, .09) 1px, transparent 1.2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 110% -10%, rgba(246, 214, 90, .18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(28, 93, 91, .08), transparent 60%);
  background-size: 22px 22px, 220px 220px, auto, auto;
  /* Sin "fixed": repintar el grano en cada scroll es caro en moviles. */
  min-height: 100vh;
}
h1, h2, h3, .card-title { font-family: var(--display); color: var(--ink); letter-spacing: -.01em; }
h1 { font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; }
h2, h3, .card-title { font-variation-settings: "SOFT" 60, "WONK" 0; font-weight: 650; }
a { color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--teal-2); }
code { background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 6px; padding: .05rem .35rem; font-size: .85em; }
::selection { background: var(--marker); color: var(--ink); }
.muted { color: var(--ink-2); }
.small { font-size: .86rem; }

/* Fosforito: subrayado grueso y algo torcido, como hecho a mano */
.marker, .page-head h1 > .hl {
  background: linear-gradient(100deg, transparent 0 1%, var(--marker) 1.5% 97%, transparent 98%)
              0 88% / 100% 42% no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .12em;
}

/* ---------- Contenedor y cabecera de pagina ---------- */
.container { max-width: 1200px; padding: 2rem 1.6rem 5rem; }
.page-head { margin-bottom: 1.4rem; }
.page-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.1; margin: 0 0 .35rem; }
.page-head h1 span:first-child:not(.hl) { font-size: .8em; }
.page-head p { color: var(--ink-2); max-width: 60ch; margin: 0; }

/* ---------- Barra superior ---------- */
.topbar {
  background: rgba(255, 251, 244, .82);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--rule), 0 6px 20px -16px rgba(60, 45, 20, .5);
  padding: .6rem 1.4rem;
}
.topbar::after {           /* costura del cuaderno */
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--rule-2) 0 7px, transparent 7px 13px);
}
.brand { gap: .55rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  background: var(--teal); color: var(--marker);
  font-family: var(--display); font-weight: 800; font-size: 1.25rem;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  transform: rotate(-6deg); box-shadow: 2px 3px 0 var(--teal-deep);
  transition: transform var(--trans);
}
.brand:hover .brand-mark { transform: rotate(4deg) scale(1.05); }
.brand-word { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.brand-word em { font-style: normal; color: var(--teal); font-variation-settings: "SOFT" 100, "WONK" 1; }

.mainnav a, .navmore > summary {
  color: var(--ink-2); font-weight: 600; font-size: .9rem; border-radius: 999px;
  padding: .4rem .75rem; background: transparent; box-shadow: none;
}
.mainnav a:hover, .navmore > summary:hover, .navmore[open] > summary { background: var(--sheet-2); color: var(--ink); }
.mainnav a.active, .navmore.active > summary {
  color: var(--ink); box-shadow: none;
  background: linear-gradient(transparent 58%, var(--marker) 58% 92%, transparent 92%);
  border-radius: 4px;
}
.navmore-menu, .tabmore-menu { background: var(--sheet); border-color: var(--rule-2); border-radius: 14px; }
.nav-icon { border-radius: 999px; }
.pill { background: var(--coral); color: #fff; font-weight: 700; }
.logout .btn-ghost { border-radius: 999px; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--shadow);
  position: relative;
}
.card:hover { box-shadow: var(--shadow); }
.card-title { font-size: 1.2rem; margin-bottom: 1rem; }
.card-title .ico { color: inherit; font-size: 1rem; }

/* Cinta washi en las tarjetas protagonistas */
.now-card::before, .assistant::before, .block-form::before, .login-card::before, .moodle-card::before {
  content: ""; position: absolute; top: -11px; left: 28px; width: 92px; height: 22px;
  background: repeating-linear-gradient(135deg, rgba(246, 214, 90, .85) 0 8px, rgba(246, 214, 90, .6) 8px 16px);
  transform: rotate(-3deg); border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  pointer-events: none;
}
.assistant::before { background: repeating-linear-gradient(135deg, rgba(126, 159, 120, .7) 0 8px, rgba(126, 159, 120, .5) 8px 16px); left: auto; right: 36px; transform: rotate(4deg); }
.moodle-card::before { background: repeating-linear-gradient(135deg, rgba(219, 106, 75, .55) 0 8px, rgba(219, 106, 75, .38) 8px 16px); }

/* Aparicion en cascada al cargar (se anula con "Animaciones suaves" off) */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main.container > *, .today-main > *, .today-side > * { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
main.container > *:nth-child(2), .today-main > *:nth-child(2), .today-side > *:nth-child(2) { animation-delay: .06s; }
main.container > *:nth-child(3), .today-main > *:nth-child(3), .today-side > *:nth-child(3) { animation-delay: .12s; }
main.container > *:nth-child(4), .today-main > *:nth-child(4) { animation-delay: .18s; }
main.container > *:nth-child(n+5), .today-main > *:nth-child(n+5) { animation-delay: .24s; }
html[data-motion="0"] main.container > *, html[data-motion="0"] .today-main > *, html[data-motion="0"] .today-side > * { animation: none; }
@media (prefers-reduced-motion: reduce) { main.container > *, .today-main > *, .today-side > * { animation: none; } }

/* ---------- Botones ---------- */
.btn-primary {
  background: var(--teal); color: #FFFBF4; border-radius: 999px; font-weight: 700;
  padding: .62rem 1.2rem; font-size: .92rem; box-shadow: 0 3px 0 var(--teal-deep);
  letter-spacing: .01em;
}
.btn-primary:hover { background: var(--teal-2); box-shadow: 0 3px 0 var(--teal-deep); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--teal-deep); }
.btn-ghost {
  border-radius: 999px; background: var(--sheet); border: 1.5px solid var(--rule-2);
  color: var(--ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.btn-ghost:hover { border-color: var(--ink-3); background: var(--sheet); transform: translateY(-1px); }
.btn-mini { border-radius: 999px; background: var(--sheet-2); border: 1px solid var(--rule-2); font-weight: 600; }
.btn-mini.accent { background: var(--marker-soft); color: var(--ink); border-color: transparent; }
.btn-mini.accent:hover { background: var(--marker); }
.btn-icon:hover { background: var(--sheet-2); }
.chip-btn { background: var(--sheet); border: 1.5px solid var(--rule-2); font-weight: 600; }
.chip-btn:hover { background: var(--marker-soft); border-color: transparent; }
.chip-btn.is-on { background: var(--ink); color: var(--sheet); }
.btn-primary, .btn-ghost, .btn-mini, .chip-btn { transition: transform var(--trans), background var(--trans), box-shadow var(--trans), border-color var(--trans); }

/* ---------- Formularios ---------- */
input[type=text], input[type=password], input[type=number], input[type=date], input[type=url],
input[type=datetime-local], input[type=time], textarea, select {
  background: var(--sheet); border: 1.5px solid var(--rule-2); border-radius: 12px;
  color: var(--ink); font-size: .95rem; padding: .6rem .8rem; width: 100%; font-family: inherit;
}
input:focus, textarea:focus, select:focus { border-color: var(--teal); box-shadow: var(--glow); outline: none; }
label { color: var(--ink-2); font-weight: 600; font-size: .86rem; }
.chk { font-weight: 500; }
.segmented { background: var(--paper-2); }
.segmented label.active, .segmented button.active { background: var(--sheet); box-shadow: 0 1px 0 var(--rule-2); color: var(--ink); }

/* ---------- Avisos ---------- */
.alert { border-radius: 12px; }
.alert.info { background: var(--teal-soft); color: var(--teal-deep); border-color: rgba(28, 93, 91, .2); }
.alert.error { background: var(--coral-soft); color: #8E3A22; border-color: rgba(219, 106, 75, .35); }
.toast {
  background: var(--marker-soft); border: 0; color: var(--ink); font-weight: 600;
  border-radius: 4px 4px 14px 4px; box-shadow: 0 16px 30px -18px rgba(60, 45, 20, .55);
  transform: translateY(-10px) rotate(-1deg);
}
.toast.show { transform: rotate(-1deg); }
.toast.error { background: var(--coral-soft); color: #8E3A22; }
.status.ok { color: var(--ok); }
.badge { background: var(--sheet-2); border-color: var(--rule-2); color: var(--ink-2); font-weight: 600; }
.spinner { color: var(--ink-2); font-weight: 600; }
.progress { background: var(--paper-2); border-radius: 999px; overflow: hidden; height: 10px; }
.progress span { background: repeating-linear-gradient(135deg, var(--teal) 0 10px, var(--teal-2) 10px 20px); border-radius: 999px; }

/* ============================================================
   HOY
   ============================================================ */
.hero-date { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: .2rem; }
.hd-num {
  font-family: var(--display); font-weight: 800; font-size: clamp(4.2rem, 9vw, 6.5rem); line-height: .8;
  color: var(--teal); font-variation-settings: "SOFT" 100, "WONK" 1;
  text-shadow: 4px 4px 0 var(--marker);
}
.hd-rest { display: flex; flex-direction: column; padding-bottom: .35rem; }
.hd-day { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.1; text-transform: capitalize; }
.hd-month { color: var(--ink-2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.hd-clock { margin-left: auto; align-self: center; text-align: right; color: var(--ink-2); font-size: .85rem; }
.hd-clock strong { display: block; font-family: var(--display); font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Asistente: una linea de cuaderno donde escribir */
.assistant { padding-top: 1.5rem; }
.assistant-label { font-family: var(--display); font-size: 1.15rem; font-weight: 650; color: var(--ink); }
.assistant-row input {
  font-size: 1.08rem; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; padding: .55rem .2rem; box-shadow: none;
}
.assistant-row input:focus { box-shadow: none; border-bottom-color: var(--teal); background: linear-gradient(transparent 70%, var(--marker-soft) 70%); }
.assistant-examples .chip-btn { color: var(--ink-2); font-weight: 500; border-style: dashed; }
.assist-reply { background: var(--sage-soft); border: 0; border-left: 4px solid var(--sage); border-radius: 4px 14px 14px 4px; }

/* Ahora / siguiente: ficha grande */
.now-card { border: 0; background: var(--sheet); padding-top: 1.6rem; }
.now-card::after {         /* margen rojo de cuaderno */
  content: ""; position: absolute; top: 0; bottom: 0; left: 18px; width: 2px; background: rgba(219, 106, 75, .35);
}
.now-card { padding-left: 2.7rem; }
.now-card > * { position: relative; z-index: 1; }
.now-tag { background: var(--ink); color: var(--sheet); letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; padding: .25rem .7rem; }
.now-tag.is-now { background: var(--coral); color: #fff; animation: pulse 2.4s ease-in-out infinite; }
.now-tag.is-next { background: var(--teal); color: #fff; }
.now-tag.is-free { background: var(--sage); color: #fff; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(219, 106, 75, .15); } }
html[data-motion="0"] .now-tag.is-now { animation: none; }
.now-title { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.15; margin: .7rem 0 .4rem; font-variation-settings: "SOFT" 100; }

.fix-card { border: 0; border-left: 5px solid var(--marker); border-radius: 6px var(--r) var(--r) 6px; }
.fix-card.is-soft { border-left-color: var(--rule-2); }

/* Linea del dia: cuaderno con margen */
.timeline { gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4.9rem; width: 2px; background: rgba(219, 106, 75, .28); }
.tl-row {
  background: transparent; border-left: 0; border-radius: 0;
  border-bottom: 1px dashed var(--rule-2); padding: .75rem .3rem; grid-template-columns: 4.3rem 1fr auto; gap: 1.2rem;
  transition: background var(--trans);
}
.tl-row:last-child { border-bottom: 0; }
.tl-row:hover { background: var(--sheet-2); }
.tl-time { font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.tl-time small { font-family: var(--font); }
.tl-body { position: relative; padding-left: .2rem; }
.tl-body::before {         /* punto de color sobre el margen */
  content: ""; position: absolute; left: -1.05rem; top: .45rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ev-color, var(--ink-3)); box-shadow: 0 0 0 3px var(--sheet);
}
.tl-row.kind-block .tl-body::before { background: var(--ev-color, var(--sage)); }
.tl-row.kind-google .tl-body::before { background: var(--ev-color, var(--lilac)); }
.tl-row.kind-busy .tl-body::before { background: var(--rule-2); }
.tl-row.state-now { background: var(--marker-soft); box-shadow: none; border-radius: 10px; }
.tl-row.state-now .tl-body::before { box-shadow: 0 0 0 3px var(--marker-soft), 0 0 0 7px rgba(219, 106, 75, .25); background: var(--coral); }
.tl-title { font-weight: 700; font-size: 1.02rem; }
.tl-check { accent-color: var(--teal); }
.gaps .chip-btn { border-style: dashed; }

/* Proximos examenes y entregas (Moodle) */
.deadline-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.deadline-list li { display: flex; gap: .8rem; align-items: center; }
.dl-count {
  flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: .82rem; line-height: 1.05; padding: .2rem;
  border: 2px dashed currentColor; color: var(--teal); background: var(--teal-soft); transform: rotate(-8deg);
}
.lvl-warn .dl-count { color: #9A6B00; background: var(--marker-soft); }
.lvl-danger .dl-count { color: var(--coral); background: var(--coral-soft); }
.dl-body { display: flex; flex-direction: column; line-height: 1.3; }
.dl-body small { color: var(--ink-2); }
.steps { padding-left: 1.2rem; margin: .4rem 0 1rem; }
.steps li { margin-bottom: .35rem; }
.chip-check { display: inline-flex; margin: 0; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span {
  border: 1.5px solid var(--rule-2); border-radius: 999px; padding: .3rem .75rem; font-size: .82rem;
  background: var(--sheet); color: var(--ink); font-weight: 600;
}
.chip-check input:checked + span { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.chip-check input:focus-visible + span { box-shadow: var(--glow); }
.moodle-prefs { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--rule-2); }

/* ============================================================
   SEMANA: hoja de planificador con posits
   ============================================================ */
.week-head .week-label { font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.lg { border-radius: 3px; }
.lg-google { background: var(--lilac); } .lg-plan { background: var(--sage); }
.lg-agenda { background: var(--marker); } .lg-busy { background: repeating-linear-gradient(135deg, var(--rule-2) 0 3px, transparent 3px 6px); border: 1px solid var(--rule-2); }
.wg-dayhead { background: var(--sheet); border-bottom: 2px solid var(--ink); height: 46px; }
.wd-name { font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
.wd-num { font-family: var(--display); font-size: 1.15rem; }
.wg-day.is-today .wg-dayhead { background: var(--marker-soft); }
.wg-day.is-today .wd-num { background: var(--coral); color: #fff; width: 1.9rem; height: 1.9rem; font-size: .95rem; }
.wg-day.is-today .wg-slots { background: rgba(246, 214, 90, .09); }
.wg-day.is-weekend { background: transparent; }
.wg-day.is-weekend .wg-slots { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(120, 100, 70, .03) 10px 20px); }
.wg-corner { height: 46px; }
.wg-slot { border-bottom: 1px solid var(--rule); }
.wg-slot:nth-child(odd) { background: rgba(255, 251, 244, .5); }
.wg-hour { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 600; }

.wg-event {
  border-radius: 3px 3px 10px 3px; border-left: 0; padding: .28rem .4rem .3rem;
  color: var(--ink); box-shadow: 0 6px 12px -8px rgba(60, 45, 20, .5), 0 1px 0 rgba(0, 0, 0, .04);
  font-size: .72rem;
}
.wg-event::before {        /* banda superior: el "pegamento" del posit */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(0, 0, 0, .07); border-radius: 3px 3px 0 0;
}
.wg-event.ev-google, .wg-event.ev-google[style*="--ev-color"] { background: color-mix(in srgb, var(--ev-color, var(--lilac)) 26%, #FFFBF4); border-left: 0; }
.wg-event.ev-plan, .wg-event.ev-focuspi { background: var(--sage-soft); border-left: 0; }
.wg-event.ev-agenda { background: var(--marker-soft); border-left: 0; }
.wg-event.ev-plan[style*="--ev-color"], .wg-event.ev-agenda[style*="--ev-color"] { background: color-mix(in srgb, var(--ev-color) 22%, #FFFBF4); }
.wg-event.ev-busy {
  background: repeating-linear-gradient(135deg, rgba(213, 199, 176, .45) 0 6px, rgba(213, 199, 176, .2) 6px 12px);
  box-shadow: none; opacity: 1; color: var(--ink-2);
}
.wg-event.ev-busy::before { display: none; }
.wge-time { font-family: var(--display); font-weight: 700; opacity: .75; }
.wge-title { font-weight: 700; }
.wg-event.is-editable:hover { box-shadow: 0 12px 20px -10px rgba(60, 45, 20, .55), 0 0 0 2px var(--ink); transform: translateY(-1px); }
.wg-event.is-done { opacity: .5; }
.wg-now { background: var(--coral); height: 2px; }
.wg-now::before { background: var(--coral); }
.ev-chip { background: var(--lilac-soft); border-radius: 6px; font-weight: 600; }
.ev-chip.is-deadline { background: var(--coral-soft); border-color: rgba(219, 106, 75, .4); }
.cal-toolbar .btn-ghost { background: var(--sheet); }

/* ---------- Dialogo de bloque: ficha ---------- */
.block-dialog { border: 0; border-radius: 6px 6px 22px 6px; background: var(--sheet); overflow: visible; box-shadow: 0 40px 80px -30px rgba(40, 30, 10, .6); }
.block-dialog::backdrop { background: rgba(38, 32, 25, .35); backdrop-filter: blur(3px); }
.block-dialog[open] { animation: rise .25s cubic-bezier(.2, .7, .2, 1); }
.block-form { position: relative; background-image: linear-gradient(transparent 0 calc(100% - 1px), transparent); }
.bf-kicker { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--ink-2); }
.bf-title {
  font-family: var(--display) !important; font-size: 1.5rem !important; font-weight: 700;
  border: 0 !important; border-bottom: 2px solid var(--ink) !important; border-radius: 0 !important;
  background: transparent !important; padding: .3rem .1rem !important; box-shadow: none !important;
}
.bf-title:focus { border-bottom-color: var(--teal) !important; }
.bf-legend { color: var(--ink-2); }
.bf-repeat { border: 1.5px dashed var(--rule-2); border-radius: 12px; padding: .6rem .8rem; }
.bf-repeat.is-open { background: var(--sheet-2); }
.bf-repeat-body { margin-top: .6rem; }
.wd-picker { display: flex; gap: .35rem; margin-bottom: .7rem; flex-wrap: wrap; }
.wd-chip { margin: 0; cursor: pointer; }
.wd-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wd-chip span {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  border: 1.5px solid var(--rule-2); background: var(--sheet); font-weight: 700; color: var(--ink);
}
.wd-chip input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.wd-chip input:focus-visible + span { box-shadow: var(--glow); }

/* ---------- Otras pantallas ---------- */
.tile { background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 14px; }
.tile-num { font-family: var(--display); color: var(--teal); }
.quadrant { background: var(--sheet); border-radius: var(--r); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
.matrix-grid .quadrant:nth-child(1) { border-top: 6px solid var(--coral); }
.matrix-grid .quadrant:nth-child(2) { border-top: 6px solid var(--teal); }
.matrix-grid .quadrant:nth-child(3) { border-top: 6px solid var(--marker); }
.matrix-grid .quadrant:nth-child(4) { border-top: 6px solid var(--sage); }
.quadrant-head h2, .quadrant-head h3 { font-family: var(--display); }
.task-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-sm); }
.task-card:hover { border-color: var(--rule-2); box-shadow: var(--shadow); }
.task-title { font-weight: 700; }
.project-card { border-radius: var(--r); background: var(--sheet); }
.project-name { font-family: var(--display); }
.plan-day-head { font-family: var(--display); font-weight: 700; border-bottom: 2px solid var(--ink); }
.pomo-display { font-family: var(--display); font-variant-numeric: tabular-nums; }
.chat-msg.user { background: var(--marker-soft); border: 0; }
.chat-msg.ai { background: var(--sheet-2); border: 0; }
.kv li { border-color: var(--rule); }
.tabbar { background: rgba(255, 251, 244, .94); backdrop-filter: blur(8px); border-top: 1px solid var(--rule-2); }
.tabbar > a.active { background: var(--marker-soft); color: var(--ink); }
.a11y-fab { background: var(--teal); box-shadow: 2px 3px 0 var(--teal-deep); }

/* Login */
.login-body { background-color: var(--paper); }
.login-card { background: var(--sheet); border: 0; border-radius: 6px 6px 26px 6px; padding: 2.6rem 2.2rem 2rem; position: relative; }
.login-card .brand { font-family: var(--display); font-size: 2.4rem; font-variation-settings: "SOFT" 100, "WONK" 1; }
.login-card .brand span { color: var(--teal); }

/* ============================================================
   ZONA DE LECTURA (solo apuntes): aqui SI va la adaptacion a la dislexia
   ============================================================ */
/* Solo el TEXTO de los apuntes (no los botones ni los formularios). */
.ai-content, .sd-content, .sd-doc, .review-back, .mindmap, .reader-page, .w-editor {
  font-family: 'OpenDyslexic', var(--font);
  font-size: var(--a11y-base, 17px);
  line-height: var(--a11y-line, 1.9);
  letter-spacing: var(--a11y-letter, .8px);
  word-spacing: var(--a11y-word, 3px);
}
.ai-content h1, .ai-content h2, .ai-content h3, .reader-page h1, .reader-page h2,
.reader-page h3, .w-editor h2, .w-editor h3 { font-family: 'OpenDyslexic', var(--font); letter-spacing: 0; }
.ai-content, .sd-doc {
  background: var(--read-bg); color: var(--read-fg);
  border-radius: 12px; padding: 1rem 1.2rem; max-width: var(--a11y-measure, 62ch);
}
.ai-content em, .ai-content i, .sd-doc em, .sd-doc i { font-style: normal; font-weight: 700; }
.ai-content p, .ai-content li, .reader-page p, .reader-page li { text-align: left; hyphens: none; }

@media (max-width: 760px) {
  .container { padding: 1.3rem 1rem 6.5rem; }
  .hero-date { gap: .7rem; }
  .hd-clock { display: none; }
  .timeline::before { left: 4.3rem; }
  .tl-row { grid-template-columns: 3.7rem 1fr; gap: 1rem; }
  .card { padding: 1.1rem 1.05rem; }
}

/* Todos los titulos de pagina llevan su trazo de fosforito */
.page-head h1:not(.hd-day) {
  width: fit-content;
  background: linear-gradient(100deg, transparent 0 1%, var(--marker) 1.5% 97%, transparent 98%) 0 90% / 100% 38% no-repeat;
  padding-right: .15em;
}
.rep-ico { font-size: .8em; opacity: .75; }
.assistant-row .dictado-wrap { flex: 1; min-width: 0; display: flex; align-items: center; }
.assistant-row .dictado-wrap input { flex: 1; }
.bf-title-wrap, .block-form .dictado-wrap { display: flex; align-items: center; width: 100%; }
code, pre, .code-block { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; letter-spacing: 0; word-spacing: 0; }
.settings-grid { align-items: start; }

/* Bloques cortos: hora y titulo en una sola linea para que se lea el titulo */
.wg-event.is-short { display: flex; gap: .3rem; align-items: baseline; padding-top: .2rem; white-space: nowrap; }
.wg-event.is-short .wge-title { overflow: hidden; text-overflow: ellipsis; }
.wg-event.is-short .wge-loc { display: none; }
/* El tirador para estirar solo aparece al pasar el raton */
.wg-resize::after { opacity: 0; transition: opacity var(--trans); }
.wg-event.is-editable:hover .wg-resize::after { opacity: .45; }
.reader-page em, .reader-page i, .w-editor em, .w-editor i { font-style: normal; font-weight: 700; }

/* Clases del horario: tinta azul petroleo, con aula visible */
.lg-clase { background: #9CC3C0; }
.wg-event.ev-clase { background: #D6E8E6; }
.wg-event.ev-clase .wge-loc { font-weight: 600; opacity: .85; }
.tl-row.kind-block[class*="state"] .tl-meta br + * { display: block; }
.bf-details { border: 1.5px dashed var(--rule-2); border-radius: 12px; padding: .5rem .8rem; }
.bf-details[open] { background: var(--sheet-2); }
.bf-details summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.bf-details label { margin-top: .6rem; }

/* ---------- Coach: plan semanal, asignaturas, pregunta del pomodoro ---------- */
.week-plan-cta {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; text-decoration: none; color: var(--ink);
  background: var(--marker-soft); border: 0;
}
.week-plan-cta:hover { color: var(--ink); transform: translateY(-1px); }
.wpc-ico { font-size: 2rem; }
.wpc-go { margin-left: auto; font-weight: 700; color: var(--teal); white-space: nowrap; }
.wp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.wp-step { padding-top: 1.6rem; }
.wp-num {
  position: absolute; top: -14px; left: 20px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal); color: var(--marker);
  font-family: var(--display); font-weight: 800; font-size: 1.1rem; box-shadow: 2px 3px 0 var(--teal-deep);
}
.wp-sub { font-size: 1rem; margin: 1.2rem 0 .6rem; }
.wp-done { margin-top: 1rem; width: 100%; font-size: 1rem; padding: .8rem; }
.free-bars, .subject-bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.fb-row, .subject-bars li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; }
.subject-bars li { grid-template-columns: minmax(7rem, 11rem) 1fr auto; }
.fb-bar, .sb-bar { height: 12px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.fb-bar span { display: block; height: 100%; background: var(--sage); border-radius: 999px; }
.sb-bar span { display: block; height: 100%; background: var(--sc, var(--teal)); border-radius: 999px; }
.fb-num, .sb-num { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.sb-name a { color: var(--ink); text-decoration: none; font-weight: 600; }
.dl-prep { margin-top: .3rem; align-self: flex-start; }
.course-map { display: grid; grid-template-columns: 1fr minmax(9rem, 14rem); gap: .6rem; align-items: center; }
.block-ask {
  margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 6px 6px 18px 6px;
  background: var(--marker-soft); box-shadow: var(--shadow);
}
.block-ask p { margin: 0 0 .3rem; }
/* Clase de una asignatura con color: fondo suave y borde del color de la asignatura */
.wg-event.ev-clase[style*="--ev-color"] {
  background: color-mix(in srgb, var(--ev-color) 22%, #FFFBF4);
  box-shadow: inset 4px 0 0 var(--ev-color), 0 6px 12px -8px rgba(60, 45, 20, .5);
}
.light { display: inline-block; font-size: .78rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; margin-top: .25rem; }
.light-ok { background: var(--sage-soft); color: #3F6B3B; }
.light-warn { background: var(--marker-soft); color: #7A5A00; }
.light-danger { background: var(--coral-soft); color: #8E3A22; }
.subj-tag { font-weight: 700; color: var(--sc); }
.sb-learn { display: block; color: var(--ink-3); font-size: .74rem; }
.report-tiles { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.report-tiles span { background: var(--sheet-2); border-radius: 10px; padding: .35rem .7rem; font-size: .85rem; }
.report-tiles strong { font-family: var(--display); font-size: 1.15rem; color: var(--teal); }

/* ============================================================
   APUNTES v2: acciones, hoja a mano, editor y modo lectura
   ============================================================ */
.note-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.note-action {
  display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.2rem; border-radius: var(--r);
  background: var(--sheet); box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); transition: transform var(--trans), box-shadow var(--trans);
}
.note-action:hover { transform: translateY(-2px); color: var(--ink); box-shadow: 0 18px 30px -18px rgba(60,45,20,.5); }
.na-ico { font-size: 1.8rem; }
.note-card { scroll-margin-top: 90px; }

/* Barra de herramientas comun (hoja, editor, lector) */
.ink-toolbar, .w-toolbar, .reader-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px;
  padding: .45rem .6rem; box-shadow: var(--shadow-sm);
}
.ink-group { display: flex; gap: .25rem; align-items: center; padding-right: .5rem; border-right: 1px dashed var(--rule-2); }
.ink-group:last-child { border-right: 0; }
.ink-btn {
  min-width: 2.4rem; height: 2.4rem; border-radius: 10px; border: 1.5px solid transparent;
  background: var(--sheet-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0 .5rem;
}
.ink-btn:hover { border-color: var(--rule-2); }
.ink-btn.is-on { background: var(--ink); color: var(--sheet); }
.ink-btn .dot { width: 16px; height: 16px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px var(--sheet); }
.ink-btn:disabled { opacity: .5; }
.ink-pageinfo { font-size: .82rem; color: var(--ink-2); padding: 0 .3rem; white-space: nowrap; }

/* Hoja a mano: cabe entera en la pantalla (no hace falta scroll al escribir) */
.ink-app { display: flex; flex-direction: column; gap: .7rem; align-items: stretch; }
.ink-head { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.ink-head input { flex: 1; min-width: 12rem; font-family: var(--display); font-size: 1.2rem; font-weight: 700; }
.ink-head select { width: auto; }
.ink-sheet {
  align-self: center; width: min(100%, calc((100vh - 200px) * 1240 / 1754));
  aspect-ratio: 1240 / 1754; background-color: #fffdf8; border-radius: 6px;
  box-shadow: 0 30px 50px -30px rgba(60,45,20,.55), 0 0 0 1px var(--rule);
  background-size: 100% 3.2%;
}
.ink-sheet[data-paper="rayas"] {
  background-image: linear-gradient(to bottom, transparent 96%, rgba(80, 120, 170, .22) 96%),
                    linear-gradient(to right, transparent 9%, rgba(219,106,75,.35) 9%, rgba(219,106,75,.35) 9.2%, transparent 9.2%);
  background-size: 100% 3.2%, 100% 100%;
}
.ink-sheet[data-paper="cuadros"] {
  background-image: linear-gradient(to bottom, rgba(80,120,170,.16) 1px, transparent 1px),
                    linear-gradient(to right, rgba(80,120,170,.16) 1px, transparent 1px);
  background-size: 2.2% 1.556%;
}
.ink-sheet[data-paper="liso"] { background-image: none; }
#ink-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.ink-foot { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ink-foot .muted { margin-right: auto; }

/* Editor */
.write-card { display: flex; flex-direction: column; gap: .8rem; }
.w-editor {
  min-height: 55vh; max-width: none !important; outline: none; padding: 1.2rem 1.4rem;
  border: 1.5px solid var(--rule-2); border-radius: 12px; background: var(--read-bg);
}
.w-editor:focus { border-color: var(--teal); box-shadow: var(--glow); }
.w-editor:empty::before { content: "Empieza a escribir aquí…"; color: var(--ink-3); }

/* Modo lectura */
.reader-bar { position: sticky; top: 64px; z-index: 20; margin-bottom: 1.2rem; }
.reader-voice { display: inline-flex; gap: .3rem; align-items: center; }
.reader-voice select { width: auto; padding: .35rem .5rem; }
.reader-page { max-width: 780px; margin: 0 auto; background: var(--read-bg); color: var(--read-fg);
  border-radius: 8px; padding: 2rem 2.2rem 3rem; box-shadow: var(--shadow); }
.reader-title { font-size: 1.7rem !important; margin-top: 0; }
.reader-body { background: none !important; padding: 0 !important; max-width: none !important; }
.reader-body .is-reading { background: var(--marker-soft); border-radius: 6px; box-shadow: 0 0 0 6px var(--marker-soft); }
.reader.is-focus .reader-body > *, .reader.is-focus .reader-body li { opacity: .28; transition: opacity .2s; }
.reader.is-focus .reader-body .is-reading,
.reader.is-focus .reader-body li.is-reading,
.reader.is-focus .reader-body :has(.is-reading) { opacity: 1; }
.reader-body mark { background: var(--marker-soft); }
.reader-body dt { margin-top: .6rem; }
.reader-body dd { margin-left: 1rem; }

@media print {
  .topbar, .tabbar, .reader-bar, .a11y-fab, .toast, .block-dialog, #ruler-top, #reading-ruler, #ruler-bottom { display: none !important; }
  body { background: #fff !important; }
  main.container { padding: 0 !important; max-width: none !important; }
  .reader-page { box-shadow: none; background: #fffaf0 !important; max-width: none; padding: 0; }
  .reader-body p, .reader-body li, .reader-body dd { break-inside: avoid; }
  .reader-body h2, .reader-body h3 { break-after: avoid; }
}
@media (max-width: 760px) {
  .reader-page { padding: 1.2rem 1rem 2rem; }
  .reader-bar { top: 56px; }
}
.ink-status { margin: -.3rem 0 0; }
.reader-bar #rd-spin:not(.htmx-request) { display: none; }

/* ============================================================
   CALENDARIO v2: semana / 3 dias / dia, filas altas, nada cortado
   ============================================================ */
.week-wrap { --hour-h: 62px; }
.week-wrap.view-3, .week-wrap.view-day { --hour-h: 78px; }
.week-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.week-nav { display: flex; gap: .3rem; align-items: center; }
.nav-arrow, .nav-today {
  height: 2.4rem; min-width: 2.4rem; border-radius: 999px; border: 1.5px solid var(--rule-2);
  background: var(--sheet); font: inherit; font-weight: 700; font-size: 1.1rem; cursor: pointer; color: var(--ink);
}
.nav-today { font-size: .9rem; padding: 0 .9rem; }
.nav-arrow:hover, .nav-today:hover { background: var(--marker-soft); border-color: transparent; }
.week-head .week-label { font-family: var(--display); font-size: 1.45rem; font-weight: 700; flex: 1; min-width: 12rem; }
.view-switch { display: inline-flex; background: var(--paper-2); border-radius: 999px; padding: .25rem; gap: .15rem; }
.view-switch button {
  border: 0; background: transparent; border-radius: 999px; padding: .4rem .9rem; font: inherit;
  font-weight: 700; font-size: .85rem; color: var(--ink-2); cursor: pointer;
}
.view-switch button.is-on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 0 var(--rule-2), 0 3px 8px -4px rgba(60,45,20,.35); }
.week-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--ink-2); margin-bottom: .7rem; }
.week-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.week-legend .lg { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg-clase { background: #9CC3C0; }

.week-scroll { overflow-x: auto; border-radius: 14px; border: 1px solid var(--rule); background: var(--sheet); }
.week-grid {
  display: grid; grid-template-columns: 58px repeat(var(--ndays), minmax(0, 1fr));
  min-width: calc(58px + var(--ndays) * 128px);
}
.view-3 .week-grid, .view-day .week-grid { min-width: 0; }
.wg-corner { border-bottom: 2px solid var(--ink); background: var(--sheet); position: sticky; left: 0; z-index: 3; height: auto; }
.wg-dayhead {
  height: auto; min-height: 58px; padding: .45rem .4rem .5rem; border-left: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink); display: flex; flex-direction: column; align-items: center; gap: .1rem;
  background: var(--sheet); position: static;
}
.wg-dayhead .wd-name { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.view-3 .wd-name, .view-day .wd-name { text-transform: capitalize; letter-spacing: .02em; font-size: .88rem; }
.wg-dayhead .wd-num { font-family: var(--display); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.wg-dayhead.is-today { background: var(--marker-soft); }
.wg-dayhead.is-today .wd-num {
  background: var(--coral); color: #fff; border-radius: 50%; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center; font-size: 1.05rem;
}
.wd-top { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: .3rem; }
.wd-top .ev-chip { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: left; }

.wg-hours { position: sticky; left: 0; z-index: 2; background: var(--sheet); border-right: 1px solid var(--rule); display: block; }
.wg-hour { height: var(--hour-h); font-size: .72rem; font-weight: 600; color: var(--ink-3); text-align: right; padding-right: .45rem; }
.wg-hour span { position: relative; top: -.55em; background: var(--sheet); padding-left: .2rem; }
.wg-hour:first-child span { visibility: hidden; }
.wg-day { border-left: 1px solid var(--rule); display: block; }
.wg-day.is-today { background: rgba(246, 214, 90, .07); }
.wg-day.is-weekend .wg-slots { background: none; }
.wg-slots { position: relative; }
.wg-slot { height: var(--hour-h); border-bottom: 1px solid var(--rule); background: none !important; }
.wg-slot::after { content: ""; display: block; height: 50%; border-bottom: 1px dashed rgba(213, 199, 176, .45); }

/* Tarjetas */
.wg-event {
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  padding: .3rem .45rem .35rem .6rem; border-radius: 8px; font-size: .76rem; line-height: 1.25;
  box-shadow: inset 4px 0 0 var(--ev-color, var(--sage)), 0 4px 10px -6px rgba(60, 45, 20, .45);
  background: color-mix(in srgb, var(--ev-color, var(--sage)) 16%, #FFFBF4);
  color: var(--ink); border-left: 0;
}
.wg-event::before { display: none; }
.wg-event.ev-clase { --ev-color: #5E9E99; }
.wg-event.ev-agenda { --ev-color: #E0B33A; }
.wg-event.ev-google { --ev-color: var(--lilac); }
.wg-event.ev-plan { --ev-color: var(--sage); }
.wg-event.ev-clase, .wg-event.ev-plan, .wg-event.ev-agenda, .wg-event.ev-google,
.wg-event[style*="--ev-color"] { background: color-mix(in srgb, var(--ev-color) 17%, #FFFBF4); }
.wg-event.ev-clase[style*="--ev-color"] { background: color-mix(in srgb, var(--ev-color) 24%, #FFFBF4);
  box-shadow: inset 4px 0 0 var(--ev-color), 0 4px 10px -6px rgba(60, 45, 20, .45); }
.wg-event.ev-busy {
  --ev-color: var(--rule-2); box-shadow: inset 4px 0 0 var(--rule-2);
  background: repeating-linear-gradient(135deg, rgba(213,199,176,.30) 0 6px, rgba(213,199,176,.12) 6px 12px);
  color: var(--ink-2);
}
.wge-time { font-family: var(--font); font-weight: 700; font-size: .7rem; opacity: .75; white-space: nowrap; }
.wge-title {
  font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.wge-loc, .wge-notes {
  font-size: .68rem; opacity: .8; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; overflow: hidden; font-weight: 500;
}
.wg-event.is-long .wge-title { -webkit-line-clamp: 3; }
.wg-event.is-long .wge-loc { -webkit-line-clamp: 2; }
.wg-event.is-short { flex-direction: row; align-items: baseline; gap: .35rem; padding-top: .15rem; white-space: nowrap; }
.wg-event.is-short .wge-title { -webkit-line-clamp: 1; display: block; text-overflow: ellipsis; white-space: nowrap; }
.wg-event.is-short .wge-end, .wg-event.is-short .wge-loc, .wg-event.is-narrow .wge-end { display: none; }
.view-3 .wg-event, .view-day .wg-event { font-size: .86rem; padding: .4rem .6rem .45rem .75rem; }
.view-3 .wge-time, .view-day .wge-time { font-size: .76rem; }
.view-day .wge-title { -webkit-line-clamp: 3; font-size: .95rem; }
.view-day .wge-loc, .view-day .wge-notes { font-size: .78rem; -webkit-line-clamp: 2; }
.wg-event.is-editable:hover { transform: translateY(-1px); box-shadow: inset 4px 0 0 var(--ev-color, var(--sage)), 0 0 0 2px var(--ink), 0 10px 16px -8px rgba(60,45,20,.5); z-index: 5; }
.wg-event.is-done { opacity: .5; }
.wg-event.is-done .wge-title { text-decoration: line-through; }
.wg-now { background: var(--coral); height: 2px; left: -1px; right: 0; }
.wg-now::before { width: 11px; height: 11px; left: -6px; top: -5px; }
.week-foot { margin-top: .7rem; }
@media (max-width: 760px) {
  .week-head .week-label { font-size: 1.15rem; order: 3; flex-basis: 100%; }
  .view-switch { margin-left: auto; }
  .week-grid { grid-template-columns: 44px repeat(var(--ndays), minmax(0, 1fr)); }
  .wg-hour { font-size: .64rem; padding-right: .25rem; }
}

/* Palabras enteras (sin partirlas a la mitad); en columnas estrechas, letra algo menor */
.wge-title { overflow-wrap: normal; word-break: normal; }
@media (max-width: 760px) {
  .view-3 .wg-event { font-size: .72rem; padding: .3rem .35rem .3rem .5rem; }
  .view-3 .wge-title { -webkit-line-clamp: 3; }
  .view-3 .wge-notes { display: none; }
}

/* ============================================================
   GRABAR CLASE · BUSCADOR · EXPLICAMELO · APUNTES DE CLASE
   ============================================================ */
.note-action.is-rec { background: linear-gradient(160deg, var(--coral-soft), var(--sheet) 70%); }

.rec-app { max-width: 760px; }
.rec-fields { margin-bottom: .6rem; }
.rec-stage { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding: 1rem 0; }
.rec-big {
  width: 8.5rem; height: 8.5rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--coral); color: #FFFBF4; font: inherit; font-weight: 800; font-size: 1.15rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: 0 0 0 8px var(--coral-soft), 0 16px 28px -14px rgba(160,60,30,.7);
  transition: transform .15s ease;
}
.rec-big:hover { transform: scale(1.04); }
.rec-big:disabled { background: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.rec-dot { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #FFFBF4; }
.rec-live { display: none; flex: 1; min-width: 240px; flex-direction: column; gap: .7rem; }
.rec-app[data-mode="recording"] .rec-big,
.rec-app[data-mode="finishing"] .rec-big { display: none; }
.rec-app[data-mode="recording"] .rec-live { display: flex; }
.rec-app[data-mode="recording"] .rec-fields,
.rec-app[data-mode="recording"] .rec-or,
.rec-app[data-mode="finishing"] .rec-or { display: none; }
.rec-app[data-mode="finishing"] .rec-status::before {
  content: ""; display: inline-block; width: .9rem; height: .9rem; margin-right: .5rem; vertical-align: -2px;
  border: 2px solid var(--teal); border-right-color: transparent; border-radius: 50%; animation: rec-spin 1s linear infinite;
}
@keyframes rec-spin { to { transform: rotate(360deg); } }
.rec-time { font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rec-app[data-mode="recording"] .rec-time::before {
  content: ""; display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; background: var(--coral);
  margin-right: .6rem; vertical-align: middle; animation: rec-blink 1.2s ease-in-out infinite;
}
@keyframes rec-blink { 50% { opacity: .2; } }
.rec-meter { height: .6rem; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.rec-meter span { display: block; height: 100%; width: 0; background: var(--sage); border-radius: 999px; transition: width .08s linear; }
.rec-status { font-weight: 600; }
.rec-segments { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .45rem; }
.rec-segments li { background: var(--sheet-2); border-radius: 12px; padding: .55rem .8rem; }
.rec-segments .seg-txt { margin-top: .25rem; }
.rec-tips { margin: .8rem 0; }
.rec-tips summary { cursor: pointer; font-weight: 700; }
.rec-or { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; border-top: 1px dashed var(--rule-2); padding-top: .8rem; }
.rec-file-btn { cursor: pointer; }
@media (max-width: 560px) {
  .rec-big { width: 100%; height: 5.5rem; border-radius: 22px; flex-direction: row; }
  .rec-time { font-size: 2.4rem; }
  .rec-live .now-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
}

.note-search { margin-bottom: 1.2rem; padding: .8rem 1rem; }
.ns-box { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.2rem; }
.ns-box input { flex: 1; margin: 0; font-size: 1rem; }
#ns-out:not(:empty) { margin-top: .7rem; }
.ns-results { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .5rem; }
.ns-results li { border-left: 3px solid var(--marker); padding: .2rem 0 .2rem .7rem; }
.ns-snip { margin: .2rem 0 0; color: var(--ink-2); }
.ns-snip mark { background: var(--marker); color: var(--ink); padding: 0 .1em; }

.rd-audio { margin: 0 0 1rem; }
.rd-audio summary { cursor: pointer; }
.rd-audio audio { display: block; width: 100%; margin-top: .4rem; }
.explain-btn {
  position: fixed; z-index: 40; border: 0; border-radius: 999px; padding: .5rem .9rem;
  background: var(--teal); color: #FFFBF4; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(14,52,51,.8);
}
.explain-panel {
  position: fixed; right: 1rem; bottom: 1rem; width: min(420px, calc(100vw - 2rem)); max-height: 70vh; overflow: auto;
  background: var(--sheet); border: 1.5px solid var(--rule-2); border-radius: 18px; padding: .9rem 1rem; z-index: 50;
  box-shadow: 0 24px 50px -20px rgba(60,45,20,.6);
}
.ep-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.explain-body { font-size: 1.05rem; }
.reader-body blockquote { border-left: 4px solid var(--teal); background: var(--teal-soft); margin: 1rem 0; padding: .6rem 1rem; border-radius: 0 12px 12px 0; }

.class-notes { background: var(--sheet-2); border-radius: 14px; padding: .7rem .9rem; margin: .6rem 0; }
.class-notes p { margin: 0 0 .35rem; }
.cn-list { margin: 0 0 .5rem; padding-left: 1.1rem; }
.cn-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
@media print { .explain-btn, .explain-panel, .rd-audio { display: none !important; } }
.orig-audio { width: 100%; }

/* ============================================================
   MEZCLAR APUNTES: añadir, juntar, compartir
   ============================================================ */
.append-banner {
  background: var(--marker-soft); border-radius: 12px; padding: .6rem .9rem; margin: 0 0 .8rem;
  font-weight: 600;
}
.merge-chk { display: none; width: 1.35rem; height: 1.35rem; accent-color: var(--teal); cursor: pointer; }
body.merge-mode .merge-chk { display: inline-block; }
body.merge-mode .note-card:has(.merge-chk:checked) { outline: 3px solid var(--marker); outline-offset: 2px; }
.merge-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .6rem 1rem; margin-bottom: 1.2rem; }
.merge-bar.is-on { background: var(--marker-soft); }
.merge-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; flex: 1; }
.merge-form input[type=text] { flex: 1; min-width: 12rem; margin: 0; }

.rec-mine { border-top: 1px dashed var(--rule-2); margin-top: 1rem; padding-top: .9rem; }
.rec-mine .card-title { font-size: 1.15rem; margin-bottom: .3rem; }
.rec-notes { min-height: 9rem; margin: .5rem 0 .7rem; }
.rec-app[data-mode="finishing"] .rec-mine { opacity: .55; pointer-events: none; }

.add-upload { margin-bottom: 1.2rem; }
.inbox-card { max-width: 720px; }
.inbox-files { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.inbox-files li { background: var(--sheet-2); border-radius: 12px; padding: .55rem .8rem; }
.upload-list:empty { display: none; }
.rec-pending { background: var(--coral-soft); border-radius: 14px; padding: .8rem 1rem; margin-bottom: 1rem; }
.rec-pending p { margin: 0 0 .5rem; }
.rec-net { background: var(--marker-soft); border-radius: 12px; padding: .5rem .8rem; font-weight: 600; margin: .4rem 0; }
.notices-box:not(:empty) { margin: 0 0 1.2rem; }
.notices-box .card-title { font-size: 1.15rem; margin: 0 0 .2rem; }
.notice-row { background: var(--marker-soft); border-radius: 14px; padding: .7rem .9rem; margin: .6rem 0; }
.notice-said { margin: 0 0 .5rem; font-weight: 600; }
.notice-fields { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.notice-fields input[type=text] { flex: 1; min-width: 12rem; margin: 0; }
.notice-fields select, .notice-fields input[type=date] { margin: 0; width: auto; }
.notice-warn { color: var(--coral); font-weight: 600; margin: .2rem 0; }
.notice-done { background: var(--sage-soft); border-radius: 10px; padding: .5rem .8rem; font-weight: 600; }
@media print { .notices-box { display: none !important; } }

/* Asignaturas en los apuntes: filtro y etiqueta */
.subject-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.4rem 0 1rem; }
.subject-chip {
  --c: var(--ink-3);
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px;
  border: 1.5px solid var(--rule-2); background: var(--sheet); color: var(--ink); font-weight: 600;
  font-size: .88rem; text-decoration: none;
}
.subject-chip::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); }
.subject-chip:hover { border-color: var(--c); color: var(--ink); }
.subject-chip.is-on { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.subject-tag {
  --c: var(--ink-3);
  width: auto; max-width: 13rem; margin: 0; padding: .2rem 1.6rem .2rem .6rem; font-size: .8rem; font-weight: 700;
  border-radius: 999px; border: 1.5px solid var(--c); background-color: var(--sheet); color: var(--ink);
  box-shadow: inset .35rem 0 0 var(--c);
}
.pn-body summary { cursor: pointer; }
.pn-body[open] summary { margin-bottom: .6rem; }
.tr-at { font-family: ui-monospace, monospace; font-size: .8em; color: var(--ink-3); margin-right: .4rem; }