/* ============================================================
   IMPULSA T — HOJA DE ESTILOS
   Aquí se controla la apariencia de la web: colores, espacios,
   tipografía, tarjetas, botones, formulario y diseño móvil.

   GUÍA DE CAMBIOS RÁPIDOS
   1. :root          → colores principales y sombras.
   2. .hero          → bloque de bienvenida.
   3. .btn           → botones.
   4. .tool / .field → formulario.
   5. .tabs          → pestañas de resultados.
   6. @media         → ajustes para pantallas pequeñas.
   ============================================================ */

:root {
  --blue:#2459cf;
  --dark:#142e62;
  --ink:#22314a;
  --muted:#5d6b80;
  --bg:#f6f9ff;
  --soft:#eaf1ff;
  --white:#fff;
  --line:#dfe7f5;
  --violet:#735acb;
  --mint:#e6f8f0;
  --shadow:0 12px 40px rgba(32,65,123,.08)
}


    * {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55
}

button,input,select {
  font:inherit
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #8eabff;
  outline-offset:3px
}

 .container {
  width:min(1100px,calc(100% - 40px));
  margin:auto
}

.skip {
  position:absolute;
  left:-9999px;
  top:10px;
  background:#fff;
  padding:10px;
  z-index:99
}

.skip:focus {
  left:10px
}


    header {
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10
}

.nav {
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:850;
  font-size:1.35rem;
  color:var(--dark)
}

.logo {
  display:grid;
  place-items:center;
  background:var(--blue);
  color:white;
  width:38px;
  height:38px;
  border-radius:13px;
  font-weight:850
}

.nav-links {
  display:flex;
  align-items:center;
  gap:25px;
  font-weight:650;
  font-size:.91rem
}

.nav-links a:hover {
  color:var(--blue)
}

.nav-cta {
  padding:11px 17px;
  color:#fff!important;
  background:var(--blue);
  border-radius:12px
}

.menu {
  display:none;
  background:transparent;
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 12px
}


    .hero {
  background:linear-gradient(130deg,#eef5ff 0%,#f8faff 63%,#f4efff 100%);
  padding:92px 0 85px
}

.hero-inner {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:50px
}

.eyebrow {
  display:inline-flex;
  border-radius:999px;
  background:#dfeaff;
  padding:7px 14px;
  font-size:.84rem;
  font-weight:700;
  color:#2854b5
}

.hero h1 {
  font-size:clamp(2.6rem,5.2vw,4.5rem);
  line-height:1.12;
  color:var(--dark);
  letter-spacing:-.045em;
  margin:21px 0
}

.hero p {
  font-size:1.1rem;
  color:#52657f;
  max-width:570px;
  margin-bottom:25px
}

/* Mantiene los botones del inicio alineados a la IZQUIERDA con el texto. */
.actions {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}

/* Centra el texto DENTRO de cada botón, sin centrar el grupo de botones. */
.hero .actions .btn { text-align:center; }

.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--blue);
  color:white;
  padding:13px 20px;
  font-weight:700;
  transition:transform .14s,background .14s
}

.btn:hover {
  transform:translateY(-1px);
  background:#1648b8
}

.btn.secondary {
  background:white;
  color:var(--blue);
  border-color:#cbd9f2
}

.btn.secondary:hover {
  background:#f0f6ff
}

.btn.small {
  padding:10px 14px;
  font-size:.91rem
}

.btn:disabled {
  opacity:.48;
  cursor:not-allowed;
  transform:none
}

.fine {
  font-size:.86rem;
  color:#67778e;
  margin-top:18px
}

.hero-art {
  background:linear-gradient(145deg,#d8e7ff,#e3dcfb);
  border-radius:32px;
  min-height:360px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow)
}

.hero-art:before {
  content:"";
  background:rgba(255,255,255,.35);
  width:330px;
  height:330px;
  border-radius:50%;
  position:absolute;
  left:-100px;
  top:-130px
}

.hero-art:after {
  content:"";
  background:rgba(255,255,255,.28);
  width:190px;
  height:190px;
  border-radius:50%;
  position:absolute;
  right:-45px;
  bottom:-85px
}

.art-panel {
  background:#fff;
  box-shadow:0 18px 40px rgba(40,74,140,.14);
  width:74%;
  border-radius:22px;
  padding:22px;
  position:relative;
  z-index:1;
  transform:rotate(-4deg)
}

.art-top {
  display:flex;
  gap:8px;
  margin-bottom:22px
}

.dot {
  width:10px;
  height:10px;
  border-radius:100%;
  background:#dfe5f2
}

.art-line {
  height:13px;
  border-radius:10px;
  background:#e9effb;
  margin:12px 0
}

.art-line:nth-child(3) {
  width:68%;
  background:#cbdfff
}

.art-chart {
  height:88px;
  border-radius:16px;
  background:linear-gradient(110deg,#dceaff,#eee6ff);
  display:flex;
  align-items:end;
  gap:12px;
  padding:17px
}

.art-chart span {
  display:block;
  flex:1;
  background:#6896ed;
  border-radius:6px 6px 2px 2px
}

.art-chart span:nth-child(1) {
  height:50%
}

.art-chart span:nth-child(2) {
  height:80%
}

.art-chart span:nth-child(3) {
  height:63%
}

.art-chart span:nth-child(4) {
  height:95%
}


    section {
  padding:76px 0
}

.section-head {
  text-align:center;
  max-width:740px;
  margin:0 auto 32px
}

.section-head h2 {
  font-size:clamp(1.7rem,3vw,2.55rem);
  letter-spacing:-.03em;
  color:var(--dark);
  margin:0 0 11px
}

.section-head p {
  color:var(--muted);
  margin:0
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.card {
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  padding:25px;
  box-shadow:var(--shadow)
}

.card h3 {
  color:var(--dark);
  margin:13px 0 8px;
  font-size:1.1rem
}

.card p {
  color:var(--muted);
  margin:0
}

.icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#e9f0ff;
  color:var(--blue);
  font-size:1.45rem;
  flex-shrink:0;
  line-height:1
}

/* Los íconos SVG tienen tamaño fijo y quedan centrados en su recuadro. */
.icon svg {
  display:block;
  width:25px;
  height:25px;
  flex-shrink:0;
}

.how {
  background:#f8faff
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.step {
  padding:23px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line)
}

.num {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:white;
  background:var(--blue);
  font-weight:800
}

.step h3 {
  margin:16px 0 6px;
  color:var(--dark)
}

.step p {
  margin:0;
  color:var(--muted)
}

.mission {
  background:var(--dark);
  color:white;
  border-radius:26px;
  padding:36px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center
}

.mission h2 {
  font-size:2rem;
  line-height:1.2;
  margin:0
}

.mission p {
  color:#dbe5fa;
  margin:0
}

.mission .highlight {
  color:#bed0ff;
  font-weight:700
}


    .tool {
  background:var(--bg)
}

.tool-shell {
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:clamp(20px,4vw,40px);
  max-width:900px;
  margin:auto
}

.tool-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}

.tool-header h2 {
  color:var(--dark);
  margin:0;
  font-size:1.5rem
}

.tool-header p {
  margin:4px 0 0;
  color:var(--muted)
}

.tag {
  background:var(--soft);
  color:var(--blue);
  border-radius:100px;
  padding:6px 12px;
  font-weight:700;
  font-size:.8rem
}

.progress {
  display:flex;
  gap:8px;
  margin:27px 0 23px
}

.progress span {
  height:7px;
  flex:1;
  border-radius:999px;
  background:#e5ebf6
}

.progress span.active {
  background:var(--blue)
}

.field {
  margin:20px 0
}

.field>label,.field>legend {
  display:block;
  font-weight:750;
  margin-bottom:8px;
  color:var(--dark)
}

.field input,.field select {
  width:100%;
  padding:12px 13px;
  border-radius:11px;
  border:1px solid #c8d3e5;
  background:white;
  color:var(--ink)
}

.field small {
  display:block;
  color:var(--muted);
  margin-top:6px
}

.field .error {
  color:#a92f43
}

.radio-list {
  display:grid;
  gap:9px
}

.radio-option {
  border:1px solid #d4deed;
  border-radius:12px;
  padding:11px 12px;
  display:flex;
  gap:11px;
  align-items:center;
  font-weight:550
}

.radio-option:has(input:checked) {
  border-color:var(--blue);
  background:#f3f7ff
}

.radio-option input {
  width:auto;
  accent-color:var(--blue)
}

.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:28px
}

.hidden {
  display:none!important
}

.result-head {
  background:#edf6ff;
  border-radius:17px;
  padding:20px;
  margin:20px 0
}

.result-head h3 {
  color:var(--dark);
  margin:0 0 5px
}

.result-head p {
  margin:0;
  color:var(--muted)
}

.tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding:0 0 12px;
  margin:20px 0
}

.tab {
  border:1px solid #dce5f4;
  background:#fff;
  color:var(--dark);
  padding:10px 15px;
  border-radius:10px;
  font-weight:700
}

.tab[aria-selected="true"] {
  background:var(--blue);
  color:#fff;
  border-color:var(--blue)
}

.tab-pane h3 {
  margin:16px 0;
  color:var(--dark)
}

.prompt-output {
  white-space:pre-wrap;
  background:#f5f8ff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  line-height:1.65;
  font-size:.94rem;
  overflow-wrap:anywhere
}

.panel-note {
  background:#fff8e8;
  color:#755b20;
  border-radius:12px;
  padding:12px 15px;
  font-size:.9rem;
  margin:16px 0
}

.plan-list {
  list-style:none;
  margin:15px 0;
  padding:0
}

.plan-list li {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:15px;
  padding:13px 4px
}

.plan-list strong {
  color:var(--blue);
  white-space:nowrap
}

.resource-list {
  display:grid;
  gap:12px
}

.resource {
  border:1px solid var(--line);
  border-radius:13px;
  padding:17px
}

.resource h4 {
  margin:0;
  color:var(--dark)
}

.resource p {
  margin:5px 0 8px;
  color:var(--muted);
  font-size:.92rem
}

.resource a {
  color:var(--blue);
  font-weight:700;
  text-decoration:underline
}

.result-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px
}

.status {
  font-size:.89rem;
  color:#236c49;
  margin-top:10px;
  min-height:22px
}

.foot {
  background:#102851;
  color:#dce6fa;
  padding:37px 0
}

.foot-inner {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}

.foot strong {
  color:white
}

.foot p {
  margin:6px 0 0;
  max-width:540px;
  font-size:.91rem
}

.foot a {
  text-decoration:underline
}


    @media(max-width:780px) {
  .menu {
  display:block
}

.nav-links {
  display:none;
  position:absolute;
  top:73px;
  left:0;
  right:0;
  background:white;
  box-shadow:var(--shadow);
  padding:18px 24px;
  flex-direction:column;
  align-items:stretch;
  gap:17px
}

.nav-links.open {
  display:flex
}

.hero {
  padding:56px 0
}

.hero-inner {
  grid-template-columns:1fr
}

.hero-art {
  min-height:260px
}

.cards,.steps {
  grid-template-columns:1fr
}

.mission {
  grid-template-columns:1fr
}

.field-grid {
  grid-template-columns:1fr;
  gap:0
}

section {
  padding:53px 0
}

.tool-shell {
  padding:18px
}

.tool-header {
  align-items:flex-start
}
}


    @media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

* {
  transition:none!important
}
}


/* Texto aclaratorio de los campos opcionales. */
.optional-hint { font-weight: 400; color: var(--muted); }

/* =============================================================
   SECCIÓN TÉCNICAS DE ESTUDIO — v1.3
   .technique-grid: distribución de las tarjetas
   .technique-card: estilo de cada técnica
   details/summary: desplegable nativo, funciona sin JavaScript
   .technique-cta: invitación a utilizar el formulario
   ============================================================= */
.technique-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.technique-card { background:#fff; border:1px solid #dbe5f7; border-radius:22px; padding:24px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.technique-card h3, .technique-card p { margin:0; }
.technique-icon { width:52px; height:52px; border-radius:16px; background:#e8efff; color:#174cc3; display:grid; place-items:center; font-size:26px; line-height:1; }
.technique-tag { display:inline-block; align-self:flex-start; background:#edf4ff; color:#244a8c; border-radius:99px; padding:6px 11px; font-size:.82rem; font-weight:600; }
.technique-card details { margin-top:auto; border-top:1px solid #e5ebf5; padding-top:12px; }
.technique-card summary { color:#1753c5; font-weight:700; cursor:pointer; padding:4px 0; }
.technique-card summary:focus-visible { outline:3px solid #7fa9ff; outline-offset:3px; border-radius:4px; }
.technique-card details[open] summary { margin-bottom:12px; }
.technique-card ol { margin:0 0 12px; padding-left:22px; }
.technique-card li { margin-bottom:7px; }
.technique-example { background:#f3f7ff; border-radius:12px; padding:12px; font-size:.91rem; }
.technique-cta { display:flex; justify-content:space-between; align-items:center; gap:20px; background:#f0f5ff; border:1px solid #d9e5fa; border-radius:20px; padding:23px; margin-top:22px; }
.technique-cta h3,.technique-cta p { margin:0 0 6px; }
.technique-cta .btn { flex-shrink:0; }
.technique-disclaimer { color:var(--muted); font-size:.9rem; margin-top:16px; }
@media(max-width:960px) { .technique-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .technique-grid { grid-template-columns:1fr; } .technique-cta { align-items:flex-start; flex-direction:column; } }


/* =============================================================
   MI ESPACIO DE ESTUDIO — v1.4
   study-layout: herramientas (izquierda) + avance (derecha).
   study-choice: selector de herramienta; .active indica selección.
   study-progress: registro de actividades, NO nota académica.
   ============================================================= */
.study-space { background:#f4f7ff; }
.study-space .section-head { max-width:730px; }
.study-intro { display:flex; justify-content:space-between; align-items:center; gap:18px; background:#e8f0ff; border:1px solid #cfddf7; padding:22px; border-radius:20px; margin-bottom:22px; }
.study-intro h3, .study-intro p { margin:0 0 7px; }
.study-intro .btn { flex-shrink:0; }
.study-layout { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(270px,1fr); align-items:start; gap:22px; }
.study-main, .study-progress { background:white; border:1px solid #dce5f4; border-radius:22px; padding:24px; min-width:0; }
.study-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:23px; }
.study-choice { border:1px solid #d5e1f7; background:#fff; color:#19427e; padding:10px 13px; border-radius:12px; cursor:pointer; font:inherit; font-size:.88rem; font-weight:650; }
.study-choice.active { background:#2358cf; color:#fff; border-color:#2358cf; }
.study-choice:focus-visible, .study-tool button:focus-visible { outline:3px solid #8fb4ff; outline-offset:2px; }
.study-tool h3 { margin:0 0 7px; } .study-tool>p { margin:0 0 18px; }
.study-tool .field { margin-bottom:15px; }
.study-tool textarea { width:100%; box-sizing:border-box; resize:vertical; padding:13px; border:1px solid #cddaf0; border-radius:12px; font:inherit; }
.study-tool textarea:focus { outline:2px solid #92b3fa; }
.timer-panel { padding:28px 12px; text-align:center; border:1px solid #dce5f7; background:#f7faff; border-radius:20px; margin:12px 0; }
.timer-mode { color:#2955a1; font-weight:700; }
.timer-display { font-size:clamp(3rem,7vw,5rem); font-variant-numeric:tabular-nums; font-weight:750; color:#173b82; margin:12px 0; }
.timer-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.timer-panel .timer-actions { justify-content:center; }
.study-hint { color:var(--muted); font-size:.88rem; margin:10px 0 0; }
.card-area { display:grid; place-items:center; min-height:130px; padding:24px; background:#f5f8ff; border:1px dashed #b8cbea; border-radius:16px; text-align:center; white-space:pre-wrap; overflow-wrap:anywhere; }
.card-area strong { font-size:1.08rem; } .card-area p { margin:0; }
.mix-tasks { margin-top:20px; display:grid; gap:11px; }
.mix-tasks label, .study-checklist label { display:flex; gap:9px; align-items:flex-start; cursor:pointer; padding:8px 0; }
.mix-tasks input, .study-checklist input { accent-color:#265bd2; margin-top:5px; }
.study-progress h3 { margin:0 0 5px; } .study-progress>p { color:var(--muted); }
.study-progress h4 { margin:25px 0 8px; }
.stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.stat { padding:13px; border:1px solid #e0e8f7; border-radius:14px; display:flex; flex-direction:column; gap:3px; }
.stat strong { color:#1c4bbc; font-size:1.8rem; line-height:1.2; }
.stat span { font-size:.81rem; color:var(--muted); }
.study-progress-track { height:10px; border-radius:99px; overflow:hidden; background:#e4eaf5; }
.study-progress-track span { display:block; width:0%; height:100%; background:#2a61d9; transition:width .2s; }
.divider-line { height:1px; background:#e0e8f7; margin:20px 0; }
.workspace-invite { display:flex; justify-content:space-between; align-items:center; gap:15px; background:#ecf3ff; border:1px solid #d4e4ff; padding:18px; border-radius:16px; margin-top:22px; }
.workspace-invite p { margin:6px 0 0; } .workspace-invite .btn { flex-shrink:0; }
@media(max-width:950px) { .study-layout { grid-template-columns:1fr; } }
@media(max-width:640px) { .study-intro,.workspace-invite { flex-direction:column; align-items:flex-start; } .study-main,.study-progress { padding:16px; } .study-nav { flex-direction:column; } .study-choice { text-align:left; } }

/* v1.5: El espacio de estudio ahora es una página independiente. */
.study-entry { padding: 54px 0 14px; }
.quiz-progress-summary { margin-top: 20px; padding: 15px; background: #f4f7ff; border-radius: 14px; }
.quiz-progress-summary h4 { margin-top:0; }
.quiz-question { border: 1px solid #dce5f4; border-radius: 15px; padding: 18px; margin: 14px 0; }
.quiz-question legend { font-weight: 750; padding:0 5px; }
.quiz-option { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; cursor:pointer; }
.quiz-option input { accent-color:#2358cf; margin-top: 6px; }
.quiz-feedback { margin-top: 15px; }
.quiz-feedback .answer-explanation { border-left:3px solid #517cda; margin:10px 0; padding:6px 12px; background: #f4f7ff; }
@media (max-width:640px) {.study-entry { padding-top:28px; }}

/* ===========================================================
   AJUSTES v1.6 — limpieza del espacio de estudio.
   IMPORTANTE: la regla general `section { padding: ... }`
   generaba un hueco dentro de las pestañas. Lo anulamos
   solamente en las herramientas, conservando el resto del sitio.
   =========================================================== */
.study-main .study-tool { padding:0; margin:0; }
.study-main .study-nav { margin-bottom:18px; }
/* El reloj es editable: input grande para minutos + segundos legibles. */
.timer-face { display:flex; justify-content:center; align-items:center; gap:0; margin:12px auto 0; width:fit-content; max-width:100%; color:#173b82; font-size:clamp(3rem, 7vw, 5rem); font-weight:750; font-variant-numeric:tabular-nums; line-height:1.2; }
.timer-minutes { width:2.6ch; min-width:2.6ch; max-width:3ch; box-sizing:content-box; padding:4px 4px; border:2px solid transparent; border-radius:10px; background:transparent; color:inherit; font:inherit; line-height:inherit; text-align:right; -moz-appearance:textfield; appearance:textfield; }
.timer-minutes::-webkit-inner-spin-button, .timer-minutes::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.timer-minutes:hover { background:#e8f0ff; }
.timer-minutes:focus { outline:3px solid #85a9ef; background:#fff; border-color:#2960d2; }
.timer-minutes:disabled { opacity:1; cursor:not-allowed; }
.timer-colon { line-height:1; padding:0 1px; }
.timer-seconds { min-width:2ch; text-align:left; }
.timer-edit-tip { margin:4px 0 10px!important; color:#52678c; font-size:.85rem; }
.sr-only { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
/* Separar visualmente la acción destructiva de la tarjeta anterior. */
.progress-danger-zone { margin-top:22px; padding-top:20px; border-top:1px solid #e0e8f7; }
/* Inicio: solo tres técnicas concisas, sin desplegables largos. */
.techniques-preview .technique-card { min-height:0; }
.techniques-link { margin-top:24px; text-align:center; }
@media(max-width:480px) { .timer-face { font-size:3.25rem; } }

/* ===============================================
   V1.7 — Elección entre aprendizaje guiado y libre
   Las herramientas originales viven en #freeTools.
   =============================================== */
.mode-picker {background:#fff;border:1px solid #dce5f4;border-radius:22px;padding:22px;margin:0 0 22px}
.mode-picker h3 {margin:0 0 14px;color:#102d68}
.mode-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mode-choice {background:#f9fbff;border:1px solid #cbdaf6;border-radius:15px;padding:17px;text-align:left;cursor:pointer;color:#103574;font:inherit;display:flex;flex-direction:column;gap:6px;transition:background .15s,border-color .15s}
.mode-choice strong{font-size:1.05rem}.mode-choice span{font-size:.91rem;color:#536781;line-height:1.5}
.mode-choice.active {background:#e8f0ff;border-color:#2159d6;box-shadow:inset 0 0 0 1px #2159d6}
.mode-choice:focus-visible,.mission-steps button:focus-visible {outline:3px solid #83afff;outline-offset:3px}
.guided-panel h3{margin:8px 0;color:#102d68}.guided-panel>p{line-height:1.6}
.mission-track{height:10px;border-radius:99px;background:#e2eaf8;overflow:hidden;margin:17px 0 6px}
.mission-track>div{height:100%;background:#245bd4;width:0;transition:width .2s}
.mission-steps{display:grid;gap:9px;margin:19px 0}
.mission-steps button{display:flex;align-items:center;gap:11px;text-align:left;background:#fff;border:1px solid #d8e3f6;border-radius:13px;padding:12px;color:#173c7d;font:inherit;cursor:pointer}
.mission-steps button.active{background:#eff5ff;border-color:#245bd4}
.mission-steps button .step-mark{background:#e6edfc;padding:6px 10px;border-radius:9px;flex-shrink:0}
.mission-activity{background:#f8faff;border:1px solid #e1e9f8;border-radius:15px;padding:19px;margin-bottom:14px}
.mission-activity h4{margin:0 0 10px}.mission-activity p{line-height:1.6}
.mission-activity .mission-answer{display:block;padding:10px 0}
.mission-activity .mission-answer input{margin-right:9px}
.mission-activity button{margin-top:10px}
.mission-feedback{margin-top:12px;padding:12px;border-radius:10px;background:#eaf1ff}
.guided-progress-summary{margin-top:20px;border-top:1px solid #e1e8f4;padding-top:8px}
@media(max-width:650px){.mode-options{grid-template-columns:1fr}.mode-picker{padding:15px}.mission-activity{padding:14px}}


/* ============================================================
   IMPULSA T v1.8 · IDENTIDAD Y EXPERIENCIA
   Si quieres cambiar el estilo de la nueva portada, modifica esta sección.
   ============================================================ */
body,button,input,select,textarea {font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;}
:root{--blue:#3349d8;--dark:#14225e;--ink:#192749;--soft:#edf3ff;--line:#dde5f5;--shadow:0 18px 45px rgba(32,49,118,.08)}
.brand{letter-spacing:-.06em;font-weight:800;white-space:nowrap}
.brand-mascot{width:45px;height:45px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(28,41,118,.12))}
.nav{min-height:76px;position:relative}
.nav-links{display:flex;align-items:center;flex:1;justify-content:flex-end;gap:20px}
.nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:24px;align-items:center;white-space:nowrap}
.nav-cta{border-radius:100px;padding:12px 20px;white-space:nowrap}
.hero{background:radial-gradient(ellipse at 90% 10%,#e9e5ff 0,transparent 55%),linear-gradient(130deg,#f4f7ff,#fcfdff);padding:84px 0 78px}
.hero h1{font-weight:800;letter-spacing:-.06em}
.hero-showcase{display:flex;align-items:center;justify-content:center;min-width:0}
.showcase-card{position:relative;text-align:center;width:min(390px,100%);border:1px solid #e2e7fd;border-radius:34px;background:#fff;padding:24px 22px 26px;box-shadow:0 35px 70px rgba(48,61,145,.12);transform:rotate(2deg);animation:showcaseFloat 5s ease-in-out infinite}
.showcase-head{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:.79rem;color:#5766a8}
.showcase-dot{color:#42c6aa}
.showcase-mascot{display:block;margin:0 auto;max-width:250px;width:83%;max-height:250px;object-fit:contain}
.showcase-card strong{font-size:1.3rem;color:var(--dark)}
.showcase-card p{font-size:.88rem;line-height:1.5;margin:9px auto 18px;color:#65718f}
.showcase-preview{text-align:left;background:#f4f6ff;padding:16px;border-radius:18px;display:flex;flex-wrap:wrap;gap:9px;justify-content:space-between;font-size:.8rem}
.showcase-preview b{color:#4356bf}.showcase-track{width:100%;background:#dce5ff;border-radius:99px;height:8px;overflow:hidden}.showcase-track span{display:block;width:12%;height:100%;background:#5d73f5;border-radius:99px}
@keyframes showcaseFloat{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-9px) rotate(1deg)}}
.discovery-section{background:#fff;padding:78px 0 84px}.discovery-section .section-head{text-align:center;margin-bottom:30px}
.discovery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;align-items:stretch;margin-bottom:23px}
.discovery-option{border:2px solid transparent;min-height:192px;border-radius:26px;padding:24px 16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;gap:12px;transition:transform .24s cubic-bezier(.2,.9,.2,1),box-shadow .2s,border-color .2s;box-shadow:0 5px 18px rgba(28,39,90,.06);color:#101c4c}
.discovery-option:nth-child(1){background:#a8e3ff}.discovery-option:nth-child(2){background:#d1c8ff}.discovery-option:nth-child(3){background:#ffde79}.discovery-option:nth-child(4){background:#ffd0d3}
.discovery-option strong{font-size:1.35rem;letter-spacing:-.04em}.discovery-option>span:last-child{font-size:.85rem;font-weight:600}
.discovery-option .discovery-emoji{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:rgba(255,255,255,.6);font-size:1.8rem}
.discovery-option:hover,.discovery-option.active{transform:translateY(-9px) scale(1.02);box-shadow:0 22px 34px rgba(24,38,90,.14);border-color:#3d55d7}
.discovery-detail{border:1px solid #e1e7f5;background:linear-gradient(110deg,#f7f9ff,#fff);border-radius:26px;padding:26px 33px;display:flex;justify-content:space-between;align-items:center;gap:26px}
.discovery-label{font-size:.75rem;color:#4358bb;font-weight:800;letter-spacing:.07em}.discovery-detail h3{font-size:1.45rem;margin:7px 0}.discovery-detail p{margin:0 0 18px;max-width:620px;color:#5d6b80}.discovery-visual{width:108px;height:108px;display:grid;place-items:center;border-radius:25px;background:#dee8ff;font-size:3rem;flex-shrink:0;transition:transform .3s}
.discovery-detail.change .discovery-visual{transform:scale(1.12) rotate(-8deg)}
.player-bar{background:linear-gradient(120deg,#f3f5ff,#eef9ff);border:1px solid #e1e7fa;border-radius:25px;padding:22px 26px;margin:5px 0 24px}
.player-heading{display:flex;align-items:center;gap:14px}.avatar-bubble{display:grid;place-items:center;width:65px;height:65px;border-radius:21px;background:#fff;box-shadow:0 7px 18px rgba(24,50,128,.08);font-size:2.3rem;flex-shrink:0}.player-heading h3{margin:3px 0;font-size:1.18rem}.player-heading p{margin:0;color:#5f6b84;font-size:.85rem}.player-eyebrow{font-size:.7rem;letter-spacing:.08em;color:#4457bc;font-weight:800}
.player-stats{display:flex;gap:10px;margin:17px 0 12px;flex-wrap:wrap}.xp-pill,.level-pill{font-size:.81rem;font-weight:800;padding:7px 12px;border-radius:100px;background:#fff;color:#344bc0}.level-pill{background:#e3e9ff}.avatar-choices{display:flex;gap:9px;margin:12px 0}.avatar-choice{border:2px solid #dce5fa;background:#fff;border-radius:13px;padding:6px 10px;font-size:1.35rem;transition:transform .15s,border-color .15s}.avatar-choice:hover{transform:translateY(-3px)}.avatar-choice[aria-pressed=true]{border-color:#3349d8;background:#eaf0ff}.xp-track{height:9px;border-radius:40px;background:#d7e2fa;overflow:hidden}.xp-track span{height:100%;width:0;display:block;border-radius:40px;background:#3e6adf;transition:width .4s}.player-feedback{font-size:.78rem;margin:8px 0 0;color:#536080}
@media(max-width:950px){.nav-center{position:static;transform:none;gap:13px}.nav-links{gap:10px}.nav-center a{font-size:.78rem}}
@media(max-width:760px){.nav-center{display:flex;flex-direction:column;align-items:stretch;gap:2px}.nav-links{align-items:stretch}.discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.discovery-option{min-height:155px}.hero{padding:55px 0}.showcase-card{margin:15px 0}}
@media(max-width:500px){.discovery-detail{padding:20px;flex-direction:column;align-items:flex-start}.discovery-visual{height:70px;width:70px}.discovery-option{padding:15px;min-height:154px}.discovery-option strong{font-size:1.1rem}.player-bar{padding:18px}}
@media(prefers-reduced-motion:reduce){.showcase-card{animation:none}.discovery-option,.btn,.avatar-choice{transition:none!important}.discovery-option:hover,.discovery-option.active{transform:none}}


/* ==========================================================
   V1.9 — Barra superior más atractiva + Modo estudio visual.
   ========================================================== */
.nav-links{gap:18px}
.nav-rail{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  padding:8px;background:rgba(19,35,91,.06);
  border:1px solid rgba(39,72,170,.10);
  border-radius:999px;box-shadow:0 10px 24px rgba(26,48,112,.05);
}
.nav-pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border-radius:999px;
  color:#182857;font-weight:750;font-size:.96rem;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav-pill:hover{background:rgba(255,255,255,.8);transform:translateY(-1px)}
.nav-pill.active{
  background:linear-gradient(135deg,#12224f,#243aa8 85%);
  color:#fff !important; box-shadow:0 12px 24px rgba(33,64,169,.22);
}
.nav-pill.active::after{
  content:""; position:absolute; inset:auto 16px 8px; height:3px; border-radius:999px;
  background:rgba(255,255,255,.68);
}
.nav-cta{box-shadow:0 15px 28px rgba(51,73,216,.18)}

.study-space{
  background:radial-gradient(circle at top right,#ebedff 0,#f5f8ff 22%,#f7f9ff 52%,#eef5ff 100%);
}
.section-head-hidden{display:none}
.study-hero{
  margin:10px 0 26px; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:center;
  padding:30px 32px; border-radius:30px;
  background:linear-gradient(135deg,#16306e 0%, #2b46c4 45%, #52b7ef 120%);
  color:#fff; box-shadow:0 30px 60px rgba(34,65,156,.18);
}
.study-hero::before,.study-hero::after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.12)}
.study-hero::before{width:240px;height:240px;right:-60px;top:-80px}
.study-hero::after{width:160px;height:160px;left:-30px;bottom:-70px}
.study-kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;color:#d8e8ff}
.study-hero h3{margin:10px 0 10px;font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.08;letter-spacing:-.05em}
.study-hero p{margin:0;max-width:660px;color:rgba(255,255,255,.86);font-size:1rem}
.study-hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.study-hero-chips span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:.88rem;font-weight:700}
.study-hero-visual{position:relative;display:grid;place-items:center;min-height:220px}
.study-hero-visual img{width:min(220px,90%);position:relative;z-index:2;filter:drop-shadow(0 20px 32px rgba(8,26,87,.26));animation:studyFloat 5s ease-in-out infinite}
.study-orbit{position:absolute;border-radius:999px;border:1px solid rgba(255,255,255,.28)}
.study-orbit-one{width:200px;height:200px}
.study-orbit-two{width:260px;height:260px;border-style:dashed;animation:spinSoft 14s linear infinite}
@keyframes studyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spinSoft{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.player-bar{
  background:linear-gradient(140deg,#ffffff 0%,#eef4ff 100%);
  border:1px solid #dce6fa; border-radius:28px; padding:24px 26px;
  box-shadow:0 18px 35px rgba(27,54,128,.08)
}
.study-intro{background:linear-gradient(120deg,#eef4ff,#ffffff);border-color:#dce6fb;box-shadow:0 12px 28px rgba(26,46,111,.06)}
.mode-picker{
  margin-bottom:22px; padding:22px; border-radius:28px; background:#fff;
  border:1px solid #dfe7f7; box-shadow:0 15px 34px rgba(27,47,119,.06)
}
.mode-picker h3{margin:0 0 16px;font-size:1.3rem;color:#132a66;letter-spacing:-.03em}
.mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mode-choice{
  position:relative;overflow:hidden;background:linear-gradient(180deg,#f8fbff,#eef4ff);border:1px solid #d9e5fb;
  border-radius:22px;padding:20px 18px;text-align:left;cursor:pointer;color:#103574;font:inherit;
  display:flex;flex-direction:column;gap:7px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease
}
.mode-choice::before{content:"";position:absolute;inset:auto 16px 0;height:4px;border-radius:999px;background:transparent;transition:background .18s ease}
.mode-choice strong{font-size:1.1rem;letter-spacing:-.03em}.mode-choice span{font-size:.92rem;color:#536781;line-height:1.55}
.mode-choice:hover{transform:translateY(-3px);box-shadow:0 16px 26px rgba(37,74,185,.10)}
.mode-choice.active{background:linear-gradient(135deg,#17307a,#3350dd 75%,#4ebbf4 140%);border-color:#274ad2;box-shadow:0 20px 35px rgba(33,65,169,.18)}
.mode-choice.active strong,.mode-choice.active span{color:#fff}.mode-choice.active::before{background:#fff}

.study-main,.study-progress{box-shadow:0 18px 40px rgba(31,53,118,.08)}
.guided-panel{padding:2px 0}
.guided-panel .eyebrow{background:#e6eeff;color:#2147b6}
.guided-panel h3{font-size:1.65rem;letter-spacing:-.045em}
.mission-track{height:12px;background:#dfe8fa;margin:18px 0 7px}
.mission-track>div{background:linear-gradient(90deg,#3254df,#51b7f1)}
.mission-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mission-steps button{
  background:linear-gradient(180deg,#ffffff,#f7faff); border:1px solid #dce6fb; border-radius:18px; padding:14px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.mission-steps button:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(28,51,124,.08)}
.mission-steps button.active{background:#eef4ff;border-color:#2a55d1;box-shadow:0 12px 24px rgba(42,85,209,.10)}
.mission-steps button .step-mark{background:#e7efff;color:#1f4ac0;font-weight:800}
.mission-activity{
  background:linear-gradient(180deg,#fbfcff 0%,#f3f7ff 100%);
  border:1px solid #dfe7fb;border-radius:22px;padding:22px;margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 25px rgba(30,53,122,.05)
}
.mission-activity h4{font-size:1.22rem;color:#102f6b;margin-bottom:12px}
.mission-feedback{border:1px solid #d8e6ff;background:#ecf4ff;color:#1a407e}
.mission-answer{display:flex !important;align-items:center;gap:10px;border:1px solid #dbe5f8;background:#fff;padding:12px 14px !important;border-radius:14px;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.mission-answer:hover{border-color:#92b1ff;transform:translateY(-1px);box-shadow:0 10px 20px rgba(36,89,207,.08)}
.mission-answer input{accent-color:#2b53dd;margin:0 !important}

.study-nav{
  background:#f2f6ff;border:1px solid #dce5f7;border-radius:24px;padding:10px;gap:10px;
}
.study-choice{
  border:1px solid transparent;background:transparent;color:#19427e;padding:12px 15px;border-radius:16px;
  font-size:.92rem;font-weight:750;transition:transform .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease
}
.study-choice:hover{background:#fff;transform:translateY(-1px)}
.study-choice.active{background:linear-gradient(135deg,#2249cc,#3854e0);color:#fff;border-color:#2358cf;box-shadow:0 14px 26px rgba(35,88,207,.16)}
.study-tool{animation:fadeInUp .28s ease}
@keyframes fadeInUp{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.field textarea,
.study-tool textarea,
.mission-activity textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:120px; padding:15px 16px;
  border:1px solid #cfdbf2; border-radius:16px; font:inherit; color:#23324a;
  background:linear-gradient(180deg,#ffffff,#fbfdff); box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.field textarea::placeholder,.mission-activity textarea::placeholder{color:#7e8ba3}
.field textarea:hover,.study-tool textarea:hover,.mission-activity textarea:hover{border-color:#a6bdf2}
.field textarea:focus,.study-tool textarea:focus,.mission-activity textarea:focus{
  outline:none; border-color:#3460de; transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(52,96,222,.12), 0 10px 20px rgba(35,88,207,.08)
}
.progress-danger-zone{margin-top:26px;padding-top:22px}

@media(max-width:1050px){
  .nav{gap:14px}.nav-links{justify-content:flex-end}.nav-rail{position:static;transform:none;order:3;width:100%;justify-content:center;margin-top:8px}
  .nav{flex-wrap:wrap;padding:10px 0}
  .study-hero{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-rail{padding:6px;gap:6px;overflow:auto;justify-content:flex-start}
  .nav-pill{min-height:42px;padding:0 14px;font-size:.9rem}
  .mode-options{grid-template-columns:1fr}
  .mission-steps{grid-template-columns:1fr}
}
@media(max-width:560px){
  .study-hero{padding:22px 20px;border-radius:24px}.study-hero h3{font-size:1.7rem}
  .study-hero-chips{gap:8px}.study-hero-chips span{font-size:.82rem}
  .study-nav{padding:8px}.study-choice{width:100%;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .study-hero-visual img,.study-orbit-two,.study-tool,.mode-choice,.study-choice,.nav-pill{animation:none !important;transition:none !important}
}


/* ===============================================================
   V1.10 — PALETA EQUILIBRADA, NAVEGACIÓN LIMPIA Y MENOS AZUL
   Edita estos colores para cambiar la personalidad del proyecto.
   Verde = progreso · Coral = invitación · Violeta = creatividad.
   El azul índigo se conserva solo en elementos de identidad.
   =============================================================== */
:root {
  --blue:#4c5ac8;
  --dark:#24315a;
  --ink:#26324b;
  --muted:#667181;
  --bg:#faf9f7;
  --soft:#f3f1fa;
  --line:#e7e6ee;
  --mint:#e5f7ee;
  --violet:#8063b9;
  --coral:#e58b70;
  --teal:#268e80;
  --yellow:#f3cf81;
}
body{background:#fffefa;color:var(--ink)}
header{border-bottom:1px solid #e8e7ed;background:rgba(255,254,251,.97)}
.nav-rail{
  background:#f5f4f1;border:1px solid #e7e4e3;
  box-shadow:none;gap:4px;padding:6px;
}
.nav-pill{min-height:43px;padding:0 17px;color:#32384a;border:1px solid transparent}
.nav-pill:hover{background:#fff;color:#303a50;transform:none}
.nav-pill.active{
  color:#223b39 !important;background:#fff;
  border-color:#d8e7df;box-shadow:0 2px 7px rgba(29,59,56,.06);
}
.nav-pill.active::after{display:none}
.nav-cta{
  background:#334052;color:#fff!important;
  border-radius:999px;box-shadow:none;
}
.nav-cta:hover{background:#263444;color:#fff!important}
.hero{background:radial-gradient(circle at 80% 12%,#fcefdc 0,transparent 46%),linear-gradient(125deg,#fcfbf9,#edf8f1 68%,#f8f3fb)}
.eyebrow{background:#e6f4ea;color:#2b745c}
.btn{background:#354956;color:#fff;border-color:#354956}
.btn:hover{background:#253a47;color:#fff}
.btn.secondary{background:#fffefa;color:#35564e;border-color:#d2e3d9}
.btn.secondary:hover{background:#eef8f0;color:#2c554b}
.progress span.active{background:#2b9a80}
.tag{background:#ebf6ef;color:#2e7058}
.tool{background:linear-gradient(125deg,#fafbf8,#f7f4fb)}
.tool-shell,.step,.card,.technique-card{border-color:#e5e6eb}
.step .num{background:#e6f5ec;color:#2b806b}
.technique-icon{background:#f2eafb;color:#7956a6}
.study-entry{background:#fffefa}
.study-intro{background:linear-gradient(115deg,#edf7f0,#fdfbf5);border-color:#d8e9dd}
.study-space{background:radial-gradient(circle at top right,#f8f0fa 0,#fafcf9 35%,#f3f8f5 95%)}
.study-hero{background:linear-gradient(120deg,#244f54 0%,#317a70 52%,#83b7a4 130%);box-shadow:0 28px 48px rgba(34,93,85,.15)}
.study-kicker{color:#dbf4e7}
.study-hero-chips span{background:rgba(255,255,255,.17)}
.player-bar{background:linear-gradient(135deg,#fffefa,#f2f6ed 62%,#f5eff9);border-color:#e3e8df}
.avatar-choice[aria-pressed=true]{border-color:#4d9885;background:#e8f7ee}
.xp-track{background:#dce9e2}.xp-track span{background:#39a58b}
.xp-pill{color:#326a59}.level-pill{color:#78559c;background:#f1eafb}
.mode-picker{border-color:#e5e9df}
.mode-choice{background:linear-gradient(180deg,#fffefa,#f5faf5);border-color:#e1e8df}
.mode-choice.active{background:linear-gradient(120deg,#2b665d,#429181);border-color:#308574;box-shadow:0 14px 30px rgba(47,135,116,.14)}
.mode-choice:hover{box-shadow:0 10px 20px rgba(40,110,92,.10)}
.study-nav{background:#f6f7f2;border-color:#e5e8de}
.study-choice.active{background:#3e7569;border-color:#3e7569;box-shadow:none}
.mission-track>div{background:linear-gradient(90deg,#3c9b80,#80b4a0)}
.mission-steps button.active{background:#eaf7ee;border-color:#6fb49e;box-shadow:none}
.mission-activity{background:linear-gradient(180deg,#fffefa,#f7faf5);border-color:#e2e9e1}
.mission-answer:hover{border-color:#9fcfb9;box-shadow:0 7px 18px rgba(41,122,95,.08)}
.mission-answer input{accent-color:#319d7e}
.timer-panel{background:#f7f8f2;border-color:#e2e9d8}
.timer-mode,.timer-face{color:#2c665d}
.study-progress-track span{background:#3fa387}
.stat strong{color:#347e6d}
.field textarea:focus,.study-tool textarea:focus,.mission-activity textarea:focus,
input:focus-visible,select:focus-visible{outline:2px solid #72b7a0;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.nav-pill{transition:none!important}}

/* ============================================================
   IMPULSA T v1.11 — Progreso, racha, recompensas y preguntas.
   El verde jade anterior se suavizó; se usa más menta y salvia.
   ============================================================ */
:root{--jade:#56bba8;--jade-light:#e7f8f1;--sage:#9bd6b9}
.streak-pill{font-size:.81rem;font-weight:800;padding:7px 12px;border-radius:999px;background:#fff0df;color:#96551a}
.avatar-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 8px}
.avatar-head h4{margin:0;color:var(--dark)}.avatar-head span{font-size:.81rem;color:var(--muted)}
.avatar-choices{display:flex;flex-wrap:wrap;gap:10px}
.avatar-choice{min-width:68px;min-height:79px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#fff;border:1px solid #dce7e5;border-radius:16px;transition:transform .18s,box-shadow .18s}
.avatar-choice span{font-size:1.5rem}.avatar-choice small{font-size:.72rem;font-weight:700}
.avatar-choice:not(:disabled):hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(33,91,86,.11)}
.avatar-choice:disabled{opacity:.65;cursor:not-allowed;background:#f2f5f7;color:#657181}
.avatar-choice[aria-pressed=true]{border-color:#56bba8;background:#e7f8f1;box-shadow:0 0 0 2px rgba(86,187,168,.16)}
.reward-meter{background:#fff;border:1px solid #dcece6;border-radius:20px;padding:17px 18px;margin:16px 0 8px}
.reward-meter-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.9rem}
.reward-meter-head span{color:#58716a;font-size:.83rem;font-weight:750}
.reward-track{height:12px;border-radius:999px;background:#e3f3ec;overflow:hidden;margin:12px 0 8px}
.reward-track span{height:100%;display:block;background:linear-gradient(90deg,#6fcdb0,#e9c66c);border-radius:999px;transition:width .35s ease}
.reward-meter p{color:#56736b;font-size:.84rem;margin:0}
.custom-question-panel{margin:16px 0 22px;border:1px solid #d9ebe3;background:#f6fbf8;border-radius:20px;padding:18px}
.custom-question-panel summary{font-weight:800;color:#206c60;cursor:pointer}
.custom-question-panel[open] summary{margin-bottom:15px}
.custom-options-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.custom-question-list{display:grid;gap:8px;margin-top:16px}
.custom-question-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #e1eae6;border-radius:13px;padding:11px 13px}
.custom-question-row span{font-weight:650;font-size:.9rem;overflow-wrap:anywhere}
.custom-question-row .btn{flex-shrink:0}
.quiz-personal-note{background:#fff5e6;border-left:4px solid #e0ad57;border-radius:10px;padding:12px;color:#7c5424}
.study-space .player-bar{background:linear-gradient(135deg,#fffdf9,#f1fbf6 70%,#f0f4ff);border-color:#dcece7}
.study-space .study-hero{background:linear-gradient(135deg,#263b69,#537db7 56%,#83c9b9 135%)}
.study-space .mode-choice.active{background:linear-gradient(135deg,#2d6a75,#65b6a9);border-color:#55b5a6}
.study-space .study-choice.active{background:#64b7a9;border-color:#64b7a9;color:#102f35;box-shadow:0 12px 24px rgba(50,132,110,.12)}
.study-space .mission-track>div,.study-space .study-progress-track span{background:linear-gradient(90deg,#6cc9b0,#efd388)}
@media(max-width:720px){.custom-options-grid{grid-template-columns:1fr}.reward-meter-head,.avatar-head{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.avatar-choice,.reward-track span{transition:none!important}}


/* ===== v1.13 · personajes ilustrados y compañero visible ===== */
.avatar-bubble-graphic{padding:0;overflow:hidden;background:linear-gradient(180deg,#fff,#f5f8ff)}
.player-utility{margin:8px 0 0;color:#61708d;font-size:.82rem;max-width:520px}
.avatar-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.avatar-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:10px 8px;min-height:116px}
.avatar-choice small{font-size:.74rem;color:#5f6d87;font-weight:700;text-align:center;line-height:1.2}
.avatar-choice .avatar-name{color:#20345f;font-size:.8rem;font-weight:800}
.avatar-thumb{width:58px;height:58px;display:grid;place-items:center}
.avatar-thumb svg{width:58px;height:58px;display:block}
.avatar-choice[disabled]{opacity:.58;filter:saturate(.7)}
.avatar-choice[disabled] .avatar-thumb{position:relative}
.avatar-choice[disabled] .avatar-thumb::after{content:"🔒";position:absolute;right:-4px;bottom:-5px;background:#fff;border:1px solid #d8e2f8;border-radius:999px;padding:2px 5px;font-size:.8rem;box-shadow:0 4px 10px rgba(22,44,100,.08)}

.companion-card{margin:0 0 18px;border:1px solid #dce6fb;border-radius:24px;background:linear-gradient(180deg,#fff,#f5f9ff);padding:18px 16px;box-shadow:0 14px 28px rgba(28,51,119,.07)}
.companion-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.companion-kicker{font-size:.72rem;font-weight:800;letter-spacing:.09em;color:#4b63c4}.companion-level{font-size:.76rem;font-weight:800;color:#3150cf;background:#eef3ff;padding:7px 10px;border-radius:999px}
.companion-stage{min-height:196px;border-radius:22px;background:radial-gradient(circle at top right,#eef1ff 0,#ffffff 52%,#f8fbff 100%);display:grid;place-items:center;overflow:hidden;padding:8px;margin-bottom:12px;position:relative}
.companion-stage svg{width:min(250px,100%);height:auto;display:block}
.companion-card[data-tier="2"] .companion-stage{box-shadow:inset 0 0 0 2px rgba(102,196,154,.25)}
.companion-card[data-tier="3"] .companion-stage{box-shadow:inset 0 0 0 2px rgba(248,189,73,.35)}
.companion-card[data-tier="4"] .companion-stage{box-shadow:inset 0 0 0 2px rgba(114,118,255,.35)}
.companion-copy h4{margin:0 0 4px;font-size:1.08rem;color:#1a2b5a}.companion-copy p{margin:0;color:#5e6c87;line-height:1.5;font-size:.92rem}
.companion-stage .char-head{transform-origin:50% 46%;animation:headNod 4.8s ease-in-out infinite}
.companion-stage .char-book{animation:bookPulse 4.8s ease-in-out infinite}
@keyframes headNod{0%,100%{transform:rotate(0deg) translateY(0)}20%{transform:rotate(-1.6deg) translateY(-1px)}40%{transform:rotate(1.2deg) translateY(0)}60%{transform:rotate(-1deg) translateY(1px)}80%{transform:rotate(.8deg) translateY(0)}}
@keyframes bookPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
.next-step-card{margin-top:16px;border:1px solid #dfe7fb;border-radius:20px;background:linear-gradient(180deg,#ffffff,#f9fbff);padding:16px 16px 8px;box-shadow:0 12px 24px rgba(28,49,114,.05)}
.next-step-card h4{margin:0 0 8px;color:#16306d}.next-step-card p{margin:0 0 10px;color:#5c6984;line-height:1.5}
.next-step-list{margin:0;padding-left:18px;color:#374869;font-size:.9rem;display:grid;gap:7px}
@media(max-width:900px){.avatar-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.companion-stage .char-head,.companion-stage .char-book{animation:none !important}}


/* ===== v1.14 · personajes secretos premium + progreso flashcards ===== */
.flashcards-progress-panel{margin-top:18px;padding:18px 18px 14px;border:1px solid #dfe6fb;border-radius:22px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 12px 24px rgba(30,53,122,.05)}
.flashcards-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.flashcards-panel-head h4{margin:0 0 4px;color:#18326e}.flashcards-panel-head p{margin:0;color:#5b6986;line-height:1.5}
.flashcards-day-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#edf3ff;color:#284ebf;font-weight:800;font-size:.84rem}
.flashcards-streak-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:12px}
.flash-day{border:1px solid #dde6fa;border-radius:18px;padding:12px 8px;background:#fff;text-align:center;min-height:88px;display:flex;flex-direction:column;justify-content:center;gap:6px;box-shadow:0 8px 18px rgba(27,48,113,.04)}
.flash-day strong{font-size:.9rem;color:#17306d}.flash-day span{font-size:.8rem;color:#627089}.flash-day .flash-count{font-weight:800;color:#1f4cc6}
.flash-day.done{background:linear-gradient(180deg,#f0fbf5,#ffffff);border-color:#cfe9d9}.flash-day.done .flash-count{color:#29935a}
.flash-day.today{box-shadow:0 0 0 3px rgba(58,100,217,.10),0 12px 22px rgba(27,48,113,.06)}
.flash-day.empty{opacity:.72}
.avatar-choice.secret-locked{background:linear-gradient(180deg,#f8f7ff,#f2f0ff);border-color:#ddd7ff}
.avatar-choice.secret-locked .avatar-name{letter-spacing:.05em;color:#6d61b3}
.avatar-choice.secret-revealed{background:linear-gradient(180deg,#fffaf0,#ffffff);border-color:#f0dfab;box-shadow:0 12px 22px rgba(235,185,74,.12)}
.avatar-choice.secret-revealed .avatar-name{color:#8b5d00}
.avatar-choice.secret-revealed .avatar-thumb svg{filter:drop-shadow(0 8px 14px rgba(245,184,65,.2))}
@media(max-width:720px){.flashcards-streak-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* v1.15: Flashcards legibles en siete columnas y estado visible junto al título. */
.flashcards-tool-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.flashcards-tool-heading h3 {margin:0}
.flashcards-top-status {display:inline-flex;align-items:center;border-radius:999px;padding:8px 12px;background:#f2f5fc;color:#4b5c7b;font-size:.8rem;font-weight:750}
.flashcards-top-status.complete {background:#e3f6ed;color:#237d56}
.flashcards-streak-grid {grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;min-width:0}
.flash-day {min-width:0;max-width:100%;padding:10px 3px;gap:3px;min-height:100px;border-radius:13px}
.flash-day strong {font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flash-day .flash-count {font-size:1.2rem;line-height:1.15}
.flash-day .flash-count-label {font-size:.64rem;color:#66758c}
.flash-day span:last-child {font-size:.65rem;line-height:1.2;overflow-wrap:anywhere}
.flash-day.done {background:#edf9f1}
.flashcards-progress-panel {min-width:0;overflow:hidden}
@media(max-width:540px){
  .flashcards-streak-grid {grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .flash-day {padding:8px 1px;border-radius:9px;min-height:87px}
  .flash-day strong{font-size:.66rem}
  .flash-day .flash-count{font-size:1rem}
  .flash-day .flash-count-label,.flash-day span:last-child{font-size:.55rem}
  .flashcards-progress-panel{padding:14px 10px}
}
/* v1.15: silueta uniforme: no filtra el diseño de los personajes secretos. */
.avatar-choice.secret-locked {background:#ebedf5;border-color:#d6dbed;opacity:1;filter:none}
.avatar-choice.secret-locked .avatar-thumb{filter:drop-shadow(0 5px 5px rgba(12,18,38,.16))}
.avatar-choice.secret-locked .avatar-thumb::after{display:none}
.avatar-choice.secret-locked .avatar-name{color:#49516a}
.avatar-choice.secret-locked small{color:#656d81}
/* Movimiento de cabeza suave, continuo y discreto. SVG ya no se reinicia cada segundo. */
.companion-stage .char-head {
  transform-box:fill-box;
  transform-origin:50% 62%;
  animation:headNodSmooth 9s cubic-bezier(.45,0,.55,1) infinite;
}
.companion-stage .char-book {animation:bookBreathe 9s ease-in-out infinite}
@keyframes headNodSmooth {
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(.5px) rotate(-.65deg)}
  50%{transform:translateY(1px) rotate(.35deg)}
  75%{transform:translateY(.5px) rotate(-.25deg)}
}
@keyframes bookBreathe {0%,100%{transform:translateY(0)}50%{transform:translateY(.5px)}}
@media(prefers-reduced-motion:reduce){
  .companion-stage .char-head,.companion-stage .char-book{animation:none!important}
}

/* v1.16 · Espacios, sesión terminada y registros reutilizables */
#cardForm{margin-bottom:23px}
#cardArea{margin-top:6px}
#cardArea.card-finished{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(140deg,#eefaf3,#f6f9ff);border:1px solid #bfe1ce;text-align:center}
#cardArea.card-finished strong{font-size:1.4rem;color:#257753}
#cardArea.card-finished p{color:#425e51;font-size:.93rem;max-width:380px}
.saved-work{margin-top:22px;padding:18px;border:1px solid #e1e8f6;border-radius:19px;background:#fbfcff}
.saved-work h4{margin:0 0 12px;color:#183268}
.saved-entry{padding:12px 14px;border-radius:13px;border:1px solid #e0e8f5;background:white;margin:8px 0}
.saved-entry summary{font-weight:700;cursor:pointer;overflow-wrap:anywhere}
.saved-entry p{overflow-wrap:anywhere;margin:12px 0}
.saved-entry small{color:#526788}
#mixStatus{margin-top:14px}

/* v1.17 — validación visible al lado del botón que se pulsa. */
.form-feedback {display:block;margin:12px 0 18px;padding:11px 14px;background:#f3f6fb;color:#3d536e;border:1px solid #dce4f1;border-radius:12px;font-size:.89rem;line-height:1.55;max-width:100%;overflow-wrap:anywhere}
.form-feedback[data-kind="error"],#customQuestionStatus[data-kind="error"] {background:#fff5ed;border-color:#f4d8bb;color:#8c4b25}
.form-feedback[data-kind="success"],#customQuestionStatus[data-kind="success"] {background:#e9f9f0;border-color:#c6ead6;color:#206a45}
#customQuestionStatus{margin-top:12px;min-height:1.6em}
/* Movimiento sutil pero perceptible del acompañante, sin saltos o reinicios. */
.companion-stage .char-head {transform-box:fill-box;transform-origin:50% 60%;animation:studyHeadFlow 7.5s ease-in-out infinite !important}
.companion-stage .char-book {animation:studyBookFlow 7.5s ease-in-out infinite !important}
@keyframes studyHeadFlow{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(1px) rotate(-1.8deg)}50%{transform:translateY(2px) rotate(.8deg)}75%{transform:translateY(.5px) rotate(-.8deg)}}
@keyframes studyBookFlow{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){.companion-stage .char-head,.companion-stage .char-book{animation:none !important}}


/* ============================================================
   v1.18 — ajustes para la primera versión pública
   ============================================================ */
/* Tiempo activo: ocupa ambos espacios de la cuadrícula de estadísticas. */
.study-progress .stat-grid > .stat-active-time {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(110deg,#f3f9f6,#f9fbff);
  border-color:#cfe9df;
}
.study-progress .stat-active-time strong {
  flex-shrink: 0;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: -.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #246f5a;
}
.study-progress .stat-active-time span {text-align: right; max-width: 170px; font-size: .84rem;}
@media(max-width:390px) {
  .study-progress .stat-active-time {padding: 15px 12px;}
  .study-progress .stat-active-time strong{font-size:1.15rem;}
}
/* Fondo y decoraciones cambian de forma coherente con el personaje elegido. */
.companion-stage {transition: background .35s ease, box-shadow .35s ease;}
.companion-card[data-scene="desk"] .companion-stage {background: radial-gradient(circle at 30% 10%,#fff 0,#edf4ff 95%);}
.companion-card[data-scene="garden"] .companion-stage {background: linear-gradient(170deg,#f1fff6,#dcefe2);}
.companion-card[data-scene="library"] .companion-stage {background: linear-gradient(170deg,#f9f2ff,#e9e1f6);}
.companion-card[data-scene="studio"] .companion-stage {background: linear-gradient(170deg,#fff6f9,#fce8ef);}
.companion-card[data-scene="sunny"] .companion-stage {background: linear-gradient(170deg,#fff8e7,#fcebd2);}
.companion-card[data-scene="night"] .companion-stage {background: linear-gradient(170deg,#e5efff,#d3ddf7);}
.companion-card[data-scene="cosmos"] .companion-stage {background: linear-gradient(170deg,#f7f1ff,#e4d9fb);}
/* Respeta el ajuste de accesibilidad anterior. */
@media(prefers-reduced-motion:reduce){.companion-stage{transition:none}}


/* =============================================================
   v1.19 — Adaptación responsive (390, 430, 768, 1024 y desktop)
   No cambia la identidad visual aprobada; corrige desbordes.
   ============================================================= */
:root{color-scheme:light}
html{scroll-padding-top:110px}
body{max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{max-width:100%}
.container{width:min(1100px,calc(100% - 36px))}
.hero-inner>*,.study-layout>*,.field-grid>*,.stat-grid>*,.discovery-grid>*{min-width:0}
.study-main,.study-progress,.tool-shell{min-width:0}
.section-head h2,.study-hero h3,.hero h1{overflow-wrap:break-word}
.study-space,.tool,.hero{overflow-x:clip}
/* Mobile: menú compacto no superpuesto, sin desbordar la ventana. */
@media (max-width:780px){
  .nav{min-height:68px;flex-wrap:nowrap;padding:8px 0;gap:10px}
  .brand{font-size:1.1rem;min-width:0}
  .brand-mascot{width:39px;height:39px;flex:0 0 auto}
  .menu{display:block;flex:0 0 auto;margin-left:auto;z-index:3}
  .nav-links{position:absolute;top:calc(100% + 1px);left:0;right:0;display:none;
      padding:16px;background:#fff;border:1px solid #e0e8ec;border-radius:0 0 18px 18px;
      box-shadow:0 16px 32px rgba(29,46,75,.12);z-index:2;max-height:calc(100dvh - 70px);overflow-y:auto}
  .nav-links.open{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .nav-rail{position:static;transform:none;order:0;width:100%;display:flex;flex-direction:column;
      align-items:stretch;gap:5px;padding:7px;overflow:visible;white-space:normal}
  .nav-pill{width:100%;min-height:44px;justify-content:flex-start;padding:10px 15px;font-size:.94rem}
  .nav-cta{width:100%;text-align:center;justify-content:center}
  .hero-inner{grid-template-columns:1fr;gap:22px}
  .hero{padding:55px 0 44px}
  .hero h1{font-size:clamp(2.2rem,8vw,3.65rem);line-height:1.13}
  .showcase-card{max-width:390px}
  .study-hero{grid-template-columns:1fr;gap:12px;padding:24px 20px}
  .study-hero-visual{min-height:165px}
  .study-hero-visual img{width:min(160px,55%)}
  .study-orbit-one{width:145px;height:145px}.study-orbit-two{width:185px;height:185px}
  .player-heading{align-items:flex-start}
  .study-layout{grid-template-columns:1fr}
  .study-main,.study-progress{padding:18px}
  .study-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .study-choice{width:100%;text-align:center;min-height:47px;white-space:normal;font-size:.83rem;padding:10px}
  .technique-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .custom-options-grid{grid-template-columns:1fr}
  .card-area,.mission-activity,.timer-panel{min-width:0;overflow-wrap:anywhere}
  .timer-face{max-width:100%;font-size:clamp(2.55rem,12vw,4.5rem)}
  .flashcards-streak-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .flash-day{min-width:0;padding:9px 2px}
}
@media(max-width:520px){
  .container{width:calc(100% - 24px)}
  .hero{padding:38px 0 36px}
  .hero p{font-size:1rem}
  .actions{gap:9px}.actions .btn{padding:12px 13px;font-size:.88rem}
  .discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .discovery-option{min-height:150px;padding:15px 12px;border-radius:18px}
  .discovery-option strong{font-size:1.05rem}
  .discovery-detail{padding:18px;flex-direction:column;align-items:flex-start}
  .technique-grid,.steps,.cards,.mode-options{grid-template-columns:1fr}
  .study-hero h3{font-size:1.65rem}
  .study-hero-chips span{font-size:.76rem;padding:8px 10px}
  .player-bar{padding:16px}
  .player-heading{gap:10px}
  .avatar-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .avatar-choice{padding:8px 3px;min-height:111px}
  .avatar-choice .avatar-name{font-size:.72rem}
  .study-main,.study-progress{padding:13px;border-radius:18px}
  .study-nav{padding:7px;gap:6px}
  .study-choice{font-size:.77rem;padding:10px 6px}
  .timer-actions{display:flex;gap:8px;flex-wrap:wrap}
  .timer-actions .btn{flex:1 1 auto;min-width:0;padding:10px 12px;font-size:.85rem}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{padding:11px}.stat strong{font-size:1.42rem}
  .study-progress .stat-active-time{flex-wrap:wrap;align-items:flex-start}
  .study-progress .stat-active-time strong{font-size:1.3rem}
  .study-progress .stat-active-time span{text-align:left;max-width:unset}
  .flashcards-panel-head{gap:8px}
  .flashcards-progress-panel{padding:12px 8px}
  .flashcards-streak-grid{gap:3px}
  .flash-day{min-height:79px;padding:8px 1px;border-radius:9px}
  .flash-day strong{font-size:.64rem}.flash-day .flash-count{font-size:.95rem}
  .flash-day .flash-count-label,.flash-day span:last-child{font-size:.51rem}
  .workspace-invite,.study-intro,.technique-cta{flex-direction:column;align-items:flex-start}
  .workspace-invite .btn,.study-intro .btn,.technique-cta .btn{max-width:100%;white-space:normal}
  .result-actions .btn{flex:1 1 auto}
}
@media(max-width:360px){
  .avatar-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .study-nav{grid-template-columns:1fr}
  .flash-day .flash-count-label{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* v1.20: Respaldo de avance y aviso de privacidad (sin cambiar el diseño principal). */
.backup-panel{border:1px solid #dce8e7;background:linear-gradient(145deg,#f8fffb,#f7faff);border-radius:18px;padding:17px;margin:20px 0}
.backup-heading{display:flex;align-items:center;gap:9px;margin-bottom:8px}.backup-heading h4{margin:0}.backup-heading span{font-size:1.35rem;color:#318d6b}
.backup-panel .study-hint{margin:8px 0 13px}.backup-import{margin-top:16px;padding-top:14px;border-top:1px solid #d9e6e4;display:flex;align-items:flex-start;gap:10px;flex-direction:column}
.backup-import label{font-weight:700;font-size:.93rem}.backup-import input{width:100%;max-width:100%;font-size:.9rem;min-width:0}
.backup-status{font-size:.86rem;line-height:1.5;color:#3b6358;margin:12px 0 0}.backup-status.error{color:#a33230}
.backup-panel button:disabled{opacity:.52;cursor:not-allowed}
.privacy-page{max-width:890px;padding-top:58px;padding-bottom:75px}.privacy-page h1{font-size:clamp(2rem,5vw,3rem);margin:14px 0 22px}.privacy-page>p{line-height:1.8}
.privacy-page section{padding:22px 0;border-bottom:1px solid #e5e9f0}.privacy-page h2{font-size:1.25rem;margin:0 0 10px}.privacy-page section p{line-height:1.85;margin:8px 0;color:#45536b}.privacy-page code{background:#e8eff8;padding:2px 5px;border-radius:5px}
.privacy-last{font-size:.82rem;color:#68748d;margin-top:25px}.foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){.backup-panel{padding:15px}.privacy-page{padding-top:36px;padding-bottom:45px}.privacy-page section{padding:18px 0}}

/* v1.20.6 · administración de contenido guardado */
.saved-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.saved-actions .btn{padding:8px 13px;min-height:36px;font-size:.88rem}
.saved-actions .danger-action{color:#a53944;border:1px solid #f0c9ce;background:#fff8f8}
.saved-actions .danger-action:hover{background:#ffeff1}
.saved-card-item{border:1px solid #e0e8f5;background:white;border-radius:14px;padding:14px;margin-top:10px;min-width:0}
.saved-card-item strong,.saved-card-item p{overflow-wrap:anywhere}
.saved-card-item p{margin:7px 0;color:#53627d;line-height:1.5}
.saved-edit-form{display:grid;gap:11px;margin-top:12px}
.saved-edit-form textarea{width:100%;min-height:90px;resize:vertical}
.saved-edit-form input,.saved-edit-form textarea{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid #c8d5eb;background:white;color:#1c2f4d;box-sizing:border-box}
.saved-edit-form label{display:grid;gap:5px;font-weight:650;font-size:.9rem}
.saved-work .study-hint{margin-top:0}
#cardsManager{margin-top:20px}
#feynmanHistoryList .saved-entry summary{line-height:1.5}
@media(max-width:540px){.saved-actions .btn{flex:1 1 120px}.saved-card-item{padding:12px}}