/* Estudio de Chino — hoja única.
   Los colores salen todos de tokens; el tema claro sólo redefine los tokens,
   nunca reescribe reglas. Si hardcodeás un fondo oscuro acá, se rompe el claro. */

:root {
  --surface-0: #0d1117;
  --surface-1: #12181f;
  --surface-2: #161b22;
  --surface-3: #1c2430;
  --surface-4: #232c39;

  --ink-1: #e6edf3;
  --ink-2: #b6c2cf;
  --ink-3: #8b949e;

  --line-1: #262d36;
  --line-2: #30363d;

  --accent-500: #4493f8;
  --accent-600: #1f6feb;
  --accent-soft: rgba(68, 147, 248, .14);

  --ok:   #3fb950;
  --warn: #d29922;
  --bad:  #f85149;

  /* Los cinco tonos. El esquema es el de Pleco/Hanping, que es el que ya viste
     en cualquier material de clase: 1 rojo, 2 naranja, 3 verde, 4 azul. */
  --t1: #e05561;
  --t2: #e0a355;
  --t3: #4fb96a;
  --t4: #5b9ded;
  --t5: #8b949e;

  --fs-xs: .72rem;
  --fs-sm: .82rem;
  --fs-md: .94rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.4rem;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.18);
  --topbar-h: 52px;
  --tabbar-h: 60px;
}

html.light {
  --surface-0: #f6f8fa;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f0f3f6;
  --surface-4: #e6ebf1;

  --ink-1: #1f2328;
  --ink-2: #454c54;
  --ink-3: #6b747d;

  --line-1: #d8dee4;
  --line-2: #c7cfd8;

  --accent-500: #1f6feb;
  --accent-600: #1158c7;
  --accent-soft: rgba(31, 111, 235, .1);

  --ok:   #1a7f37;
  --warn: #9a6700;
  --bad:  #cf222e;

  --t1: #c02b3a;
  --t2: #a86400;
  --t3: #1a7f37;
  --t4: #1f6feb;
  --t5: #6b747d;

  --sombra: 0 1px 2px rgba(31,35,40,.06), 0 8px 24px rgba(31,35,40,.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink-1);
  font: var(--fs-md)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Los hanzi con la fuente del sistema salen con formas japonesas en algunos
   caracteres; pedir explícitamente las chinas evita 直/画 raros. */
.hanzi, .fila-hanzi, .tab-icono, .vacio-icono, .tradicional {
  font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* --- estructura --------------------------------------------------------- */

.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-1);
}
.topbar h1 { margin: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: .01em; }
.topbar h1 span { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 500; margin-left: 4px; }

#view {
  padding: calc(var(--topbar-h) + 14px) 14px calc(var(--tabbar-h) + 24px);
  max-width: 720px; margin: 0 auto;
  min-height: 100vh;
}

.tabbar {
  position: fixed; inset: auto 0 0 0; height: var(--tabbar-h); z-index: 20;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface-1);
  border-top: 1px solid var(--line-1);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: var(--fs-xs); font-family: inherit;
}
.tab-icono { font-size: 1.15rem; line-height: 1; }
.tab.activo { color: var(--accent-500); }

/* --- controles ---------------------------------------------------------- */

.btn {
  appearance: none; cursor: pointer;
  background: var(--surface-3); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 14px; font: 500 var(--fs-md)/1.2 inherit;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primario { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-primario:hover { background: var(--accent-500); }
.btn-chico { padding: 6px 10px; font-size: var(--fs-sm); }
.btn-icono { padding: 6px 10px; background: none; border-color: transparent; font-size: var(--fs-lg); }

.input, .select {
  background: var(--surface-2); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 10px; font: var(--fs-md)/1.2 inherit; width: 100%;
}
.input:focus, .select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent-500); }

.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.barra .input { flex: 1 1 200px; width: auto; }
.barra .select { width: auto; flex: 0 0 auto; }
.chips { display: flex; gap: 6px; }
.chip {
  font-size: var(--fs-xs); padding: 3px 9px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line-1); color: var(--ink-2);
}
.chip-vence  { color: var(--accent-500); border-color: var(--accent-500); }
.chip-nueva  { color: var(--warn); border-color: var(--warn); }
.chip-madura { color: var(--ok); border-color: var(--ok); }
.selector-nivel { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); }
.selector-nivel select {
  background: var(--surface-3); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 4px 8px; font: inherit;
}

.aviso {
  background: var(--accent-soft); border: 1px solid var(--accent-500);
  color: var(--ink-2); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: var(--fs-sm); margin-bottom: 14px;
}

/* --- tarjeta ------------------------------------------------------------ */

.tarjeta {
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); box-shadow: var(--sombra);
  padding: 26px 18px 18px; text-align: center;
}
.hanzi { font-size: clamp(3.6rem, 17vw, 5.6rem); line-height: 1.12; letter-spacing: .04em; }
.hanzi-chico { font-size: clamp(2.6rem, 12vw, 3.6rem); }
.tradicional { font-size: var(--fs-md); color: var(--ink-3); margin-top: -2px; }
.pinyin { font-size: var(--fs-xl); margin-top: 10px; letter-spacing: .01em; }
.pinyin span + span { margin-left: 2px; }
.glosa { color: var(--ink-2); margin-top: 6px; font-size: var(--fs-lg); }
.glosa-en { color: var(--ink-3); font-size: var(--fs-sm); margin: 4px 0 0; font-style: italic; }
.pista { color: var(--ink-3); font-size: var(--fs-sm); margin: 10px 0 0; }
.tarjeta-pie { margin-top: 22px; }

.meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.tag {
  font-size: var(--fs-xs); color: var(--ink-3);
  background: var(--surface-3); border: 1px solid var(--line-1);
  border-radius: var(--r-sm); padding: 2px 8px;
}
.tarjeta-acciones { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

.t1 { color: var(--t1); }
.t2 { color: var(--t2); }
.t3 { color: var(--t3); }
.t4 { color: var(--t4); }
.t5 { color: var(--t5); }

/* --- panel de tono ------------------------------------------------------ */

.tono-panel { margin-top: 18px; border-top: 1px solid var(--line-1); padding-top: 16px; }
.tono-curvas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tono-curva { flex: 1 1 150px; max-width: 240px; min-width: 0; }
.tono-curva-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); margin-bottom: 4px; padding: 0 2px;
}
.tono-canvas {
  width: 100%; height: 108px; display: block;
  background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-sm);
}
.tono-badge {
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: var(--surface-3);
  border-radius: 999px; padding: 1px 8px; min-width: 32px; text-align: center;
}
.tono-badge.ok    { color: var(--ok);   background: color-mix(in srgb, var(--ok) 16%, transparent); }
.tono-badge.medio { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.tono-badge.mal   { color: var(--bad);  background: color-mix(in srgb, var(--bad) 16%, transparent); }

.tono-acciones { margin-top: 14px; }
.btn-grabar { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; }
.btn-grabar .punto {
  width: 10px; height: 10px; border-radius: 50%; background: var(--bad);
  transition: transform .08s;
}
.btn-grabar.grabando { border-color: var(--bad); }
.btn-grabar.grabando .punto {
  transform: scale(calc(1 + var(--eco, 0) * .9));
  box-shadow: 0 0 0 calc(var(--eco, 0) * 6px) color-mix(in srgb, var(--bad) 25%, transparent);
}

.tono-info { margin: 12px 0 0; font-size: var(--fs-md); color: var(--ink-2); }
.tono-info.ok { color: var(--ok); } .tono-info.medio { color: var(--warn); } .tono-info.mal { color: var(--bad); }
.tono-consejo { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.45; }

/* --- calificación ------------------------------------------------------- */

.grados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.grados > .btn-primario { grid-column: 1 / -1; }
.grado { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; }
.grado kbd {
  font-size: var(--fs-xs); color: var(--ink-3);
  background: var(--surface-0); border: 1px solid var(--line-2);
  border-radius: 4px; padding: 0 5px; font-family: ui-monospace, monospace;
}
.grado.g1 { border-color: color-mix(in srgb, var(--bad) 50%, var(--line-2)); }
.grado.g2 { border-color: color-mix(in srgb, var(--warn) 50%, var(--line-2)); }
.grado.g3 { border-color: color-mix(in srgb, var(--ok) 50%, var(--line-2)); }
.grado.g4 { border-color: color-mix(in srgb, var(--accent-500) 50%, var(--line-2)); }

/* --- drill -------------------------------------------------------------- */

.tarjeta-drill { padding-top: 20px; }
.drill-objetivo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.drill-silaba { font-size: clamp(2.6rem, 13vw, 4rem); line-height: 1.1; }
.drill-tono { font-size: var(--fs-sm); color: var(--ink-3); }
.drill-pares { margin-top: 16px; text-align: left; }
.drill-pares summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-3); }
.pares { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.pares li { padding: 5px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); }
.pares li.activo { background: var(--accent-soft); }

.cal-barra { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.cal-fill { height: 100%; width: 0; background: var(--accent-500); transition: width .1s linear; }
.cal-estado { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }

/* --- listas ------------------------------------------------------------- */

.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.fila {
  /* La columna del hanzi va fija y no en `auto`: si no, 我们 empuja el pinyin y
     la glosa un carácter a la derecha respecto de 我 y la lista tiembla al
     scrollear. 4 × fs-lg entra la palabra más larga del mazo (4 caracteres). */
  display: grid;
  grid-template-columns: 8px calc(4 * var(--fs-lg)) minmax(0, 1fr) minmax(0, 1.4fr) 22px;
  align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-sm);
}
.fila:hover { background: var(--surface-2); border-color: var(--line-2); }
.fila-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.fila-punto.nueva { background: var(--warn); }
.fila-punto.aprendiendo { background: var(--accent-500); }
.fila-punto.joven { background: color-mix(in srgb, var(--ok) 60%, var(--surface-0)); }
.fila-punto.madura { background: var(--ok); }
.fila-hanzi { font-size: var(--fs-lg); }
.fila-pinyin { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-glosa { font-size: var(--fs-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-lvl { font-size: var(--fs-xs); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.fila-mas { grid-template-columns: 1fr; justify-items: center; color: var(--accent-500); }
.lista-chica .fila { padding: 7px 10px; }
.contador { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 10px; }

/* --- progreso ----------------------------------------------------------- */

.tarjetas-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.stat {
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: 12px 6px; text-align: center;
}
.stat-num { display: block; font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-lbl { display: block; font-size: var(--fs-xs); color: var(--ink-3); }

.panel {
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: 16px; margin-bottom: 14px;
}
.panel h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.panel .sub { margin: 2px 0 14px; font-size: var(--fs-sm); color: var(--ink-3); }

.matriz { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.matriz th, .matriz td { padding: 7px 4px; text-align: center; font-variant-numeric: tabular-nums; }
.matriz thead th { color: var(--ink-3); font-weight: 500; font-size: var(--fs-xs); }
.matriz tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.matriz td { border: 1px solid var(--line-1); border-radius: 4px; }
.matriz td.diagonal { background: color-mix(in srgb, var(--ok) calc(var(--peso, 0) * 40%), transparent); color: var(--ink-1); }
.matriz td.confusion { background: color-mix(in srgb, var(--bad) calc(var(--peso, 0) * 55%), transparent); }
.col-acierto { color: var(--ink-2); border: 0 !important; }
.matriz-nota { font-size: var(--fs-sm); color: var(--ink-2); margin: 12px 0 0; line-height: 1.5; }

.barras { display: grid; gap: 8px; }
.barra-item { display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.barra-track { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.barra-fill { height: 100%; background: var(--accent-500); border-radius: 999px; }
.barra-val { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --- vacíos, modal, toast ----------------------------------------------- */

.vacio { text-align: center; padding: 48px 16px; }
.vacio-icono { font-size: 3.4rem; color: var(--ok); }
.vacio h2 { margin: 10px 0 4px; font-size: var(--fs-xl); }
.vacio p { color: var(--ink-3); margin: 0 0 18px; }
.vacio-chico { color: var(--ink-3); font-size: var(--fs-sm); margin: 0; }

.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(1, 4, 9, .62);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--surface-1); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--sombra); padding: 18px;
  width: min(520px, 100%); max-height: 86vh; overflow-y: auto;
}
.modal-titulo { margin: 0 0 12px; font-size: var(--fs-lg); text-align: center; }
.modal-acciones { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.detalle { text-align: center; }

.trazos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.trazo-box { background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-sm); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px); z-index: 50;
  transform: translate(-50%, 12px);
  background: var(--surface-4); color: var(--ink-1);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 9px 16px; font-size: var(--fs-sm); box-shadow: var(--sombra);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-color: var(--ok); }
.toast.error { border-color: var(--bad); }

@media (min-width: 640px) {
  .tabbar { justify-content: center; gap: 8px; }
  .tab { flex-direction: row; gap: 8px; font-size: var(--fs-md); }
}

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