/* ── Variables ── */
:root {
  --red:   #951424;
  --navy:  #182447;
  --rl:    #f5e0e3;
  --nl:    #e5e8ef;
  --green: #1a6b36;
  --gl:    #e8f5ec;
  --amber: #f59e0b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #f5f5f3; min-height: 100vh; zoom: var(--text-scale, 100%); }

/* ── Accesibilidad: foco de teclado siempre visible ── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .f-inp:focus-visible, .fill-inp:focus-visible, .w-textarea:focus-visible {
  outline: 2.5px solid var(--navy);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Accesibilidad: control de tamaño de texto ── */
.textsize-ctrl { display: flex; align-items: center; gap: 10px; background: #fff; border: .5px solid #e0e0e0; border-radius: 12px; padding: .8rem 1rem; margin-top: .6rem; }
.textsize-lbl { font-size: 13px; font-weight: 700; color: var(--navy); flex: 1; }
.textsize-btn { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--nl); background: #fff; color: var(--navy); font-weight: 800; font-size: 15px; cursor: pointer; }
.textsize-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Layout ── */
.screen { display: none; max-width: 430px; margin: 0 auto; padding-bottom: 5rem; }
.screen.show { display: block; }

/* ── Toolbar ── */
.tb { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; background: #fff; border-bottom: .5px solid #e0e0e0; position: sticky; top: 0; z-index: 10; }
.tb-back { font-size: 13px; color: var(--navy); border: none; background: none; cursor: pointer; padding: 0; }
.tb-title { font-size: 13px; font-weight: 700; color: var(--navy); }

/* ── Onboarding ── */
.ob { padding: 2rem 1.5rem; }
.ob-t { font-size: 22px; font-weight: 800; color: var(--navy); text-align: center; margin-bottom: 6px; }
.ob-s { font-size: 14px; color: #666; text-align: center; margin-bottom: 1.2rem; line-height: 1.5; }
.msg { background: var(--navy); border-radius: 14px; padding: 1.2rem; margin-bottom: 1.5rem; color: #fff; }
.msg-tag { font-size: 10px; opacity: .6; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.msg-body { font-size: 14px; line-height: 1.6; opacity: .95; }

/* ── Inputs ── */
.f-wrap { margin-bottom: .9rem; }
.f-label { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; display: block; }
.f-inp { width: 100%; padding: 13px 14px; border: 1.5px solid var(--nl); border-radius: 10px; font-size: 15px; font-family: sans-serif; color: var(--navy); outline: none; transition: border-color .2s; background: #fff; }
.f-inp:focus { border-color: var(--navy); }
.f-inp.err { border-color: var(--red); }
.err-txt { font-size: 12px; color: var(--red); text-align: center; margin-bottom: .75rem; min-height: 18px; }

/* ── Chips ── */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 1.2rem; }
.chip { padding: 10px 16px; background: #fff; border: 1.5px solid #ddd; border-radius: 25px; font-size: 13px; cursor: pointer; transition: all .15s; user-select: none; }
.chip.sel { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Botones ── */
.btn-p { width: 100%; padding: 14px; background: var(--red); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .1s; margin-top: .4rem; }
.btn-p:active { transform: scale(.98); }
.btn-p:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-s { width: 100%; padding: 12px; background: none; color: var(--navy); border: 1.5px solid var(--nl); border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: .6rem; }

/* ── Loading ── */
.load-ov { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.9); z-index: 2000; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.load-ov.open { display: flex; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--nl); border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite; }
.load-txt { font-size: 13px; color: #777; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Badge modal ── */
.badge-ov { display: none; position: fixed; inset: 0; background: rgba(24,36,71,.7); z-index: 1000; align-items: center; justify-content: center; padding: 2rem; backdrop-filter: blur(4px); }
.badge-ov.open { display: flex; }
.badge-modal { background: #fff; border-radius: 24px; padding: 2rem; width: 100%; max-width: 340px; text-align: center; animation: popIn .4s cubic-bezier(.17,.89,.32,1.27); }
.badge-close { width: 100%; padding: 13px; background: var(--navy); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 1rem; }
@keyframes popIn { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ── Logo ── */
.logo { text-align: center; padding: 2.5rem 1rem 1.5rem; }
.logo-vg { font-size: 32px; font-weight: 900; color: var(--navy); letter-spacing: -1px; }
.logo-sub { font-size: 11px; color: #aaa; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }

/* ── Progress bar ── */
.prog-wrap { padding: .75rem 1rem .2rem; }
.prog-hdr { display: flex; justify-content: space-between; margin-bottom: 5px; }
.prog-lbl { font-size: 12px; font-weight: 600; color: #555; }
.prog-pct { font-size: 12px; font-weight: 800; color: var(--navy); }
.prog-bg { height: 6px; background: #e0e0e0; border-radius: 20px; overflow: hidden; }
.prog-fill { height: 6px; background: var(--navy); border-radius: 20px; transition: width .5s ease; }

/* ── Calendario semanal de racha ── */
.week-strip { display: flex; justify-content: space-between; gap: 6px; padding: .9rem 1rem 1.1rem; }
.week-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 0; border-radius: 12px; }
.week-day-lbl { font-size: 10px; font-weight: 700; color: #bbb; text-transform: uppercase; letter-spacing: .02em; }
.week-day-ico { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: #ececea; color: transparent; }
.week-day.done .week-day-ico { background: var(--green); color: #fff; }
.week-day.done .week-day-lbl { color: var(--green); }
.week-day.planned .week-day-ico { background: #fff; border: 1.5px dashed #ccc; color: #ccc; }
.week-day.today { background: var(--nl); }
.week-day.today .week-day-lbl { color: var(--navy); }

/* ── Aviso cálido de hábito ── */
.habit-nudge { margin: 0 1rem 1rem; background: #fff8ec; border: 1px solid #f3e2bf; border-radius: 14px; padding: 1rem; position: relative; }
.habit-nudge-close { position: absolute; top: 8px; right: 10px; border: none; background: none; color: #b8a06a; font-size: 16px; cursor: pointer; line-height: 1; padding: 4px; }
.habit-nudge-t { font-size: 13px; font-weight: 700; color: #7a5c1e; margin-bottom: 4px; padding-right: 1.2rem; }
.habit-nudge-s { font-size: 12.5px; color: #8a7346; line-height: 1.5; margin-bottom: .7rem; }
.habit-nudge-btn { display: inline-flex; align-items: center; gap: 6px; background: #25D366; color: #fff; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; text-decoration: none; }

/* ── Selector de nivel (header de Home) ── */
.home-level-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; color: var(--navy); background: none; border: none; padding: 0; cursor: pointer; }
.home-level-caret { font-size: 12px; opacity: .5; }

/* ── Pantalla: elegir nivel ── */
.niveles-wrap { padding: 1rem; display: flex; flex-direction: column; gap: 12px; }
.nivel-card { background: #fff; border-radius: 16px; border: 1.5px solid #e0e0e0; padding: 1.1rem; cursor: pointer; transition: all .2s; }
.nivel-card.active { border-color: var(--navy); }
.nivel-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: .7rem; }
.nivel-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.nivel-info { flex: 1; min-width: 0; }
.nivel-name { font-size: 15px; font-weight: 800; color: var(--navy); }
.nivel-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #999; margin-top: 2px; }
.nivel-tag.free { color: var(--green); }
.nivel-prog-bg { height: 6px; background: #e0e0e0; border-radius: 20px; overflow: hidden; margin-bottom: 8px; }
.nivel-prog-fill { height: 6px; background: var(--navy); border-radius: 20px; }
.nivel-card.locked { cursor: default; opacity: .55; background: #f7f7f7; }
.nivel-card.locked .nivel-ico { opacity: .7; }
.nivel-tag.locked { color: #999; }

.home-rank-btn { font-size: 15px; color: var(--navy); cursor: pointer; border: .5px solid var(--nl); background: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }

.rank-wrap { padding: 1rem; }
.rank-intro { font-size: 13px; color: #666; margin-bottom: 1rem; line-height: 1.5; }
.rank-loading, .rank-empty { text-align: center; font-size: 13px; color: #999; padding: 2.5rem 1rem; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: .8rem 1rem; border: 1.5px solid var(--nl); border-radius: 12px; margin-bottom: .5rem; background: #fff; }
.rank-row.me { border-color: var(--navy); background: var(--nl); }
.rank-pos { font-size: 16px; font-weight: 800; width: 30px; text-align: center; flex-shrink: 0; color: var(--navy); }
.rank-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--navy); }
.rank-streak { font-size: 13px; font-weight: 700; color: var(--red); flex-shrink: 0; }
.nivel-pct { font-size: 12px; color: #888; }

/* ── Continue card ("Seguir donde quedé") ── */
.continue-card { margin: 0 1rem 1rem; background: var(--navy); border-radius: 16px; padding: 1rem 1.1rem; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: transform .15s; }
.continue-card:active { transform: scale(.98); }
.continue-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cc-ico { font-size: 26px; flex-shrink: 0; }
.cc-body { flex: 1; min-width: 0; }
.cc-lbl { font-size: 10px; color: #b9c0d6; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.cc-title { font-size: 14px; color: #fff; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-arrow { font-size: 20px; color: #fff; flex-shrink: 0; }

/* ── Buscador de unidades ── */
.unit-search-wrap { margin: 0 1rem 1rem; }
.unit-search-inp { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--nl); font-size: 14px; background: #fff; color: var(--navy); }
.unit-search-inp:focus { outline: none; border-color: var(--navy); }
.unit-search-empty { font-size: 13px; color: #999; text-align: center; padding: 1.5rem 1rem; }

/* ── Unit grid ── */
.unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 1rem; }
.unit-card { background: #fff; border-radius: 16px; border: .5px solid #e0e0e0; padding: 1rem; cursor: pointer; transition: all .2s; }
.unit-card.prog-u { border: 1.5px solid var(--navy); }
.unit-card.done-u { border-color: var(--green); background: var(--gl); }
.un { font-size: 10px; color: #999; font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
.ut { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 4px; }
.u-dots { display: flex; gap: 3px; margin-top: 6px; }
.u-dot { flex: 1; height: 3px; border-radius: 2px; background: #e8e8e8; }
.u-dot.on { background: var(--navy); }
.unit-card.done-u .u-dot { background: rgba(26,107,54,.2); }
.unit-card.done-u .u-dot.on { background: var(--green); }
.u-sec-lbl { font-size: 10px; color: #bbb; margin-top: 4px; }
.unit-card.done-u .u-sec-lbl { color: #1a6b36; }
.unit-card.prog-u .u-dot.on { background: var(--navy); }
.unit-card.prog-u .u-sec-lbl { color: var(--navy); }
.unit-card.locked-u { opacity: .45; cursor: not-allowed; background: #fafaf8; }
.unit-card.locked-u:hover { transform: none; }
.unit-card.locked-u .u-sec-lbl { color: #aaa; }

/* ── Perfil ── */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1rem 0; }
.stat-card { background: #fff; border-radius: 14px; padding: 1rem; border: .5px solid #e0e0e0; text-align: center; }
.stat-n { font-size: 24px; font-weight: 800; color: var(--navy); }
.stat-l { font-size: 12px; color: #888; }
.badges-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 1rem; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bdg-ico { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.bdg-on { background: var(--rl); box-shadow: 0 3px 8px rgba(149,20,36,.12); }
.bdg-off { background: #f0f0ee; opacity: .3; filter: grayscale(1); }
.bdg-nm { font-size: 10px; font-weight: 600; color: #666; text-align: center; line-height: 1.2; }
.habit-card { background: #fff; border: .5px solid #e0e0e0; border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.habit-t { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #999; margin-bottom: .6rem; }
.habit-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; margin-bottom: .3rem; }
.habit-val { font-weight: 700; color: var(--navy); }

/* ── Unit detail ── */
.hero { background: var(--navy); padding: 1.2rem 1rem 1.1rem; }
.hero-tag { font-size: 10px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.hero-t { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.hero-prog-bg { background: rgba(255,255,255,.15); border-radius: 20px; height: 5px; margin-bottom: 5px; }
.hero-prog-fill { height: 5px; border-radius: 20px; background: #fff; transition: width .4s ease; }
.hero-prog-lbl { font-size: 11px; color: rgba(255,255,255,.55); }
.btn-clase { width: 100%; padding: 12px; background: var(--red); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: .9rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sec-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #aaa; letter-spacing: .06em; padding: .9rem 1rem .4rem; }
.skills { display: flex; flex-direction: column; gap: 8px; padding: 0 .8rem .8rem; }
.sk { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; border: .5px solid #e0e0e0; padding: .8rem 1rem; cursor: pointer; }
.sk.done { border-color: var(--green); background: var(--gl); }
.sk.locked { opacity: .4; cursor: not-allowed; }
.sk.active { border-color: var(--navy); border-width: 1.5px; }
.sk-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.sk-info { flex: 1; }
.sk-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.sk-desc { font-size: 11px; color: #999; margin-top: 2px; }
.sk-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.b-done { background: var(--gl); color: var(--green); }
.b-pend { background: #f0f0ee; color: #aaa; }
.b-lock { background: #f0f0ee; color: #ccc; }
.b-prog { background: #e8f0fe; color: #1a56b0; }

/* ── Exercises (shared) ── */
.gram-ref { background: var(--navy); border-radius: 14px; margin: 1rem; padding: 1rem 1.2rem; color: #fff; }
.gram-ref-t { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: .85; letter-spacing: .06em; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.gram-ref-chevron { font-size: 13px; opacity: .7; transition: transform .2s ease; }
.gram-ref-t.open .gram-ref-chevron { transform: rotate(180deg); }
.gram-slide { display: none; margin-top: .7rem; }
.gram-slide.open { display: block; }
.gram-slide-viewport { overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.06); touch-action: pan-y; }
.gram-slide-track { display: flex; transition: transform .25s ease; }
.gram-slide-item { flex: 0 0 100%; box-sizing: border-box; padding: 20px 16px; text-align: center; }
.gram-slide-pron { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.gram-slide-conj { font-size: 16px; font-weight: 700; line-height: 1.5; }
.gram-slide-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.gram-slide-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gram-slide-arrow:active { background: rgba(255,255,255,.2); }
.gram-slide-count { font-size: 12px; opacity: .7; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.gram-slide-conj-row { display: flex; align-items: center; justify-content: center; gap: 10px; }

.spk-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.spk-btn:active { transform: scale(.93); }
.spk-btn.playing { background: var(--green); border-color: var(--green); }

.fc-word-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.fc-word-row .fc-word { margin-bottom: 0; }
.ex-wrap { padding: 0 1rem; }
.ex-counter { font-size: 11px; color: #aaa; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.ex-card { background: #fff; border-radius: 14px; border: .5px solid #e0e0e0; padding: 1.1rem 1.2rem; margin-bottom: .8rem; }
.ex-type { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--red); letter-spacing: .06em; margin-bottom: .5rem; }
.ex-q { font-size: 15px; color: var(--navy); line-height: 1.5; margin-bottom: .9rem; font-weight: 500; }
.ex-blank { display: inline-block; min-width: 48px; border-bottom: 2px solid var(--navy); color: var(--navy); font-weight: 700; text-align: center; padding: 0 4px; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { padding: 11px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all .15s; color: var(--navy); background: #fff; text-align: left; width: 100%; }
.opt:hover { border-color: var(--navy); background: #f5f7ff; }
.opt.correct { border-color: var(--green); background: var(--gl); color: var(--green); font-weight: 700; }
.opt.wrong { border-color: var(--red); background: var(--rl); color: var(--red); }
.fill-wrap { display: flex; gap: 8px; align-items: center; }
.fill-inp { flex: 1; padding: 11px 14px; border: 1.5px solid var(--nl); border-radius: 10px; font-size: 15px; font-family: sans-serif; color: var(--navy); outline: none; transition: border-color .2s; }
.fill-inp:focus { border-color: var(--navy); }
.fill-inp.correct { border-color: var(--green); background: var(--gl); }
.fill-inp.wrong { border-color: var(--red); background: var(--rl); }
.fill-btn { padding: 11px 18px; background: var(--navy); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ── Writing: textarea de producción libre ── */
.w-tip { font-size: 12px; color: #888; background: #f5f5f3; padding: .6rem .8rem; border-radius: 8px; margin-bottom: .8rem; line-height: 1.4; }
.w-textarea { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--nl); border-radius: 10px; font-size: 15px; font-family: sans-serif; color: var(--navy); outline: none; resize: vertical; transition: border-color .2s; }
.w-textarea:focus { border-color: var(--navy); }
.ai-fb { margin-top: .8rem; border-radius: 10px; padding: .9rem 1rem; font-size: 13px; line-height: 1.6; display: none; }
.ai-fb.show { display: block; }
.ai-fb.correct { background: var(--gl); color: #1a6b36; }
.ai-fb.wrong { background: var(--rl); color: #7a1a1a; }
.ai-fb.loading { background: #f5f5f3; color: #888; }
.ai-fb-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; opacity: .7; }
.nav-btn { width: 100%; padding: 13px; background: var(--red); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 1rem; display: none; }
.nav-btn.show { display: block; }
.result-card { background: #fff; border-radius: 16px; border: .5px solid #e0e0e0; padding: 1.5rem; text-align: center; margin: 1rem; }
.score-bar-bg { height: 10px; background: #e0e0e0; border-radius: 20px; overflow: hidden; margin: .8rem 0; }
.score-bar-fill { height: 10px; border-radius: 20px; background: var(--green); transition: width .8s ease; }
.spin-sm { width: 14px; height: 14px; border: 2px solid rgba(0,0,0,.15); border-top-color: currentColor; border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; vertical-align: middle; margin-right: 5px; }

/* ── Vocabulary ── */
.fc-wrap { padding: 1rem; }
.fc-counter { font-size: 11px; color: #aaa; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .8rem; }
.flashcard { perspective: 1000px; height: 180px; cursor: pointer; margin-bottom: 1rem; }
.fc-inner { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.flashcard.flipped .fc-inner { transform: rotateY(180deg); }
.fc-front, .fc-back { position: absolute; inset: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fc-front { background: var(--navy); color: #fff; }
.fc-back { background: #fff; border: 1.5px solid var(--navy); transform: rotateY(180deg); }
.fc-word { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.fc-hint { font-size: 12px; opacity: .5; }
.fc-translation { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.fc-pron { font-size: 12px; color: #888; }
.fc-tap { font-size: 11px; opacity: .4; margin-top: 8px; }
.fc-actions { display: flex; gap: 10px; margin-bottom: 1rem; }
.fc-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.fc-btn-ok { background: var(--gl); color: var(--green); }
.fc-btn-rep { background: var(--rl); color: var(--red); }
.phase-hdr { background: var(--navy); color: #fff; margin: 0 1rem 1rem; border-radius: 12px; padding: .8rem 1rem; }
.phase-tag { font-size: 10px; opacity: .5; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.phase-t { font-size: 14px; font-weight: 700; }

/* ── Listening ── */
.lis-player { background: var(--navy); margin: 1rem; border-radius: 16px; padding: 1.1rem 1.2rem; color: #fff; }
.lis-player-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .5; margin-bottom: 4px; }
.lis-player-t { font-size: 17px; font-weight: 800; line-height: 1.3; margin-bottom: .9rem; }
.lis-audio { width: 100%; height: 40px; display: block; border-radius: 10px; }
.lis-player-hint { font-size: 11px; opacity: .6; margin-top: .7rem; line-height: 1.4; }
.lis-player-err { font-size: 12px; color: #ffd5d5; margin-top: .6rem; font-weight: 600; }

/* ── Reproductor de video (Grammar / Vocabulary) ── */
.vid-player { margin: 1rem; }
.vid-video { width: 100%; border-radius: 14px; display: block; background: #000; }
.vid-err { font-size: 12px; color: var(--red); margin-top: .5rem; font-weight: 600; display: none; }

/* ── Speaking ── */
.spk-prompt { background: var(--navy); color: #fff; margin: 1rem 1rem 0; border-radius: 16px 16px 0 0; padding: 1.1rem 1.2rem; }
.spk-prompt-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .5; margin-bottom: 4px; }
.spk-prompt-t { font-size: 16px; font-weight: 700; line-height: 1.4; }
.spk-body { padding: 1.1rem 1rem 2rem; }
.spk-sec-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #aaa; margin: 0 0 .5rem; }
.spk-model { background: #fff; border: 1.5px solid var(--nl); border-radius: 14px; padding: 1.2rem; text-align: center; margin-bottom: 1rem; }
.spk-model-phrase { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.5; margin-bottom: 1rem; }
.spk-listen-btn { background: var(--navy); color: #fff; border: none; border-radius: 25px; padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .1s; }
.spk-listen-btn:active { transform: scale(.97); }
.spk-listen-btn.playing { background: var(--green); }
.spk-tip { background: #fff8e6; border-radius: 12px; padding: .85rem 1rem; font-size: 13px; color: #7a5b00; line-height: 1.55; margin-bottom: 1.2rem; }
.spk-tip-tag { margin-right: 4px; }
.spk-rec { background: #fafaf8; border: 1px solid #eee; border-radius: 14px; padding: 1.1rem; text-align: center; }
.spk-rec-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; border: none; border-radius: 30px; padding: 13px 28px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .1s; }
.spk-rec-btn:active { transform: scale(.97); }
.spk-rec-btn.recording { background: #c0182b; animation: spkpulse 1.1s ease-in-out infinite; }
@keyframes spkpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,24,43,.5); } 50% { box-shadow: 0 0 0 12px rgba(192,24,43,0); } }
.spk-rec-hint { font-size: 12px; color: #999; margin-top: .7rem; line-height: 1.4; }
.spk-playback { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid #eee; }
.spk-compare { display: flex; gap: 10px; }
.spk-cmp-btn { flex: 1; background: #fff; border: 1.5px solid var(--nl); border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer; }
.spk-cmp-btn:active { transform: scale(.97); }
.spk-foot { font-size: 11px; color: #bbb; text-align: center; margin-top: .7rem; line-height: 1.4; }
.spk-closing { margin: 1rem 1rem 0; background: linear-gradient(135deg, var(--red), #c0182b); color: #fff; border-radius: 16px; padding: 1.4rem 1.2rem; text-align: center; }
.spk-closing-ico { font-size: 40px; margin-bottom: 6px; }
.spk-closing-t { font-size: 20px; font-weight: 800; margin-bottom: 5px; }
.spk-closing-s { font-size: 13px; line-height: 1.5; opacity: .92; }

/* ── Panel de administración ── */
.adm-loading { text-align: center; padding: 2.5rem 1rem; color: #999; font-size: 13px; }

.adm-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1.3rem; }
.adm-kpi { background: #fff; border-radius: 14px; padding: 1rem .6rem; text-align: center; box-shadow: 0 2px 10px rgba(24,36,71,.06); }
.adm-kpi-ico { width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 50%; background: var(--nl); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.adm-kpi.ok .adm-kpi-ico { background: var(--gl); color: var(--green); }
.adm-kpi.warn .adm-kpi-ico { background: #fdecd2; color: #92610a; }
.adm-kpi-v { font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1; }
.adm-kpi.ok .adm-kpi-v { color: var(--green); }
.adm-kpi.warn .adm-kpi-v { color: var(--amber); }
.adm-kpi-l { font-size: 10px; color: #999; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

.adm-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.adm-add-plus { font-size: 15px; line-height: 1; }

.adm-section-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #999; margin-bottom: .7rem; }

.adm-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--rl); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }

.adm-pill { font-size: 10.5px; font-weight: 700; padding: 5px 11px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.adm-pill.ok { background: var(--gl); color: var(--green); }
.adm-pill.warn { background: #fdecd2; color: #92610a; }
.adm-pill.muted { background: var(--nl); color: #888; }

/* Lista compacta — una fila por alumno, tocás y entrás al detalle */
.adm-list { background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(24,36,71,.06); overflow: hidden; }
.adm-row { display: flex; align-items: center; gap: 10px; padding: .8rem .9rem; border-bottom: 1px solid var(--nl); border-left: 3px solid var(--nl); cursor: pointer; }
.adm-row:last-child { border-bottom: none; }
.adm-row:active { background: #f7f7f6; }
.adm-row-ok { border-left-color: var(--green); }
.adm-row-warn { border-left-color: var(--amber); }
.adm-row-muted { border-left-color: #ccc; }
.adm-row-info { flex: 1; min-width: 0; }
.adm-row-name { font-size: 13.5px; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row-mail { font-size: 11px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row-chevron { font-size: 18px; color: #ccc; flex-shrink: 0; }

/* Detalle de alumno */
.adm-detail-hero { background: var(--navy); color: #fff; text-align: center; padding: 1.6rem 1rem; margin-bottom: 1.2rem; }
.adm-avatar-lg { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; margin: 0 auto 10px; }
.adm-detail-name { font-size: 17px; font-weight: 800; }
.adm-detail-mail { font-size: 12px; opacity: .65; margin-top: 2px; }

.adm-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.adm-stat { background: #fff; border-radius: 12px; padding: .8rem; text-align: center; box-shadow: 0 2px 10px rgba(24,36,71,.06); }
.adm-stat-v { font-size: 17px; font-weight: 800; color: var(--navy); }
.adm-stat-l { font-size: 10.5px; color: #999; margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }

.adm-detail-card { background: #fff; border-radius: 16px; padding: 1.1rem; margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(24,36,71,.06); }

.adm-niv-row { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-niv-chip { font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 20px; border: 1.5px solid var(--nl); background: #fff; color: #aaa; cursor: pointer; transition: all .15s; }
.adm-niv-chip:active { transform: scale(.96); }
.adm-niv-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.adm-form { background: #fff; border-radius: 16px; padding: 1.2rem; margin-bottom: 1.3rem; box-shadow: 0 2px 10px rgba(24,36,71,.06); }
.adm-form-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: 14px; font-weight: 700; color: var(--navy); }
.adm-form-close { border: none; background: var(--nl); color: #888; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0; }
.adm-form .f-wrap { margin-bottom: .8rem; }
.adm-form select.f-inp { appearance: none; background: #fff; }

/* ── Inglés para Viajeros ── */
.viajeros-card { border-color: #b8c4e8; background: linear-gradient(135deg, #fff 60%, #f0f4ff); }
.viajeros-card:hover { border-color: var(--navy); }

.vj-tab { font-size: 12px; padding: 8px 13px; white-space: nowrap; }

.vj-pair-chip { width: 100%; text-align: center; min-height: 46px; display: flex; align-items: center; justify-content: center; }
.vj-pair-chip.sel { background: var(--navy); color: #fff; border-color: var(--navy); }
.vj-pair-correct { background: var(--gl) !important; border-color: var(--green) !important; color: var(--green) !important; pointer-events: none; }
.vj-pair-wrong { background: var(--rl) !important; border-color: var(--red) !important; color: var(--red) !important; }

.vj-chat-box { background: #fff; border: .5px solid #e0e0e0; border-radius: 14px; min-height: 280px; max-height: 420px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 10px; }
.vj-msg { display: flex; }
.vj-msg.user { justify-content: flex-end; }
.vj-bubble { max-width: 80%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.vj-bubble.ai { background: var(--nl); color: var(--navy); border-radius: 4px 14px 14px 14px; }
.vj-bubble.user { background: var(--red); color: #fff; border-radius: 14px 4px 14px 14px; }