/* estilos.css — Identidad visual Wallpari: fondo profundo, cian brillante. */

:root {
  --fondo: #0A1628;
  --fondo-2: #0f2038;
  --panel: #122a47;
  --borde: #1e3a5f;
  --cian: #00D4FF;
  --azul: #1E90FF;
  --magenta: #C83DE0;
  --purpura: #7B32E0;
  --turquesa: #2AE0C0;
  --texto: #e8f1fa;
  --tenue: #8fa7c0;
  --ok: #2AE0C0;
  --mal: #ff6b8a;
  --alerta: #ffc857;
  --radio: 14px;
  --fuente: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fuente);
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(123, 50, 224, .22), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(0, 212, 255, .14), transparent 55%),
    var(--fondo);
  color: var(--texto);
  min-height: 100vh;
  line-height: 1.55;
}

.envoltura { max-width: 880px; margin: 0 auto; padding: 24px 18px 80px; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }

.marca { font-size: 1.5rem; font-weight: 700; letter-spacing: -.5px; }
.marca .punto { color: var(--cian); }
.marca .sufijo { background: linear-gradient(90deg, var(--azul), var(--cian)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lema { font-size: .78rem; color: var(--tenue); font-weight: 500; }

.estado { font-size: .75rem; color: var(--tenue); display: flex; align-items: center; gap: 7px; }
.punto-estado { width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); }
.punto-estado.vivo { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.punto-estado.error { background: var(--mal); }

/* ── Selector de idioma ─────────────────────────────────────────────────── */
.idiomas { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.idiomas button {
  font-family: inherit; font-size: .84rem; font-weight: 600;
  background: rgba(0,0,0,.22); color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 12px;
  padding: 10px 16px; cursor: pointer; transition: all .18s ease;
}
.idiomas button:hover { color: var(--texto); border-color: var(--turquesa); transform: translateY(-1px); }
.idiomas button.activa {
  color: var(--texto); border-color: var(--turquesa);
  background: linear-gradient(180deg, rgba(42,224,192,.16), rgba(42,224,192,.05));
  box-shadow: 0 0 18px rgba(42,224,192,.14);
}

/* Japonés: tipografía propia y más aire, porque los kana se aprietan mucho. */
.escritura-ja { font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', var(--fuente); letter-spacing: .06em; }

/* ── Pestañas ───────────────────────────────────────────────────────────── */
/* Con ocho modos la barra ya no cabe en una línea: envuelve en vez de recortar.
   El scroll horizontal escondía las últimas pestañas y las hacía indescubribles. */
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; padding-bottom: 4px; }

nav button {
  font-family: inherit; font-size: .82rem; font-weight: 600;
  background: transparent; color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: all .18s ease;
}
nav button:hover { color: var(--texto); border-color: var(--cian); }
nav button.activa { background: linear-gradient(90deg, var(--azul), var(--cian)); color: #04121f; border-color: transparent; }

/* ── Paneles ────────────────────────────────────────────────────────────── */
.panel {
  background: linear-gradient(180deg, rgba(18, 42, 71, .85), rgba(15, 32, 56, .85));
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 26px; margin-bottom: 18px;
}
.panel h2 { font-size: 1.1rem; margin-bottom: 6px; }
.panel .sub { color: var(--tenue); font-size: .85rem; margin-bottom: 20px; }

.vista { display: none; }
.vista.activa { display: block; }

/* ── Tarjeta objetivo ───────────────────────────────────────────────────── */
.objetivo { text-align: center; padding: 26px 16px; }
.objetivo .etiqueta { font-size: .7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--tenue); margin-bottom: 12px; }
.objetivo .frase { font-size: 2rem; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.objetivo .frase.corta { font-size: 3rem; }
.objetivo .trad { color: var(--tenue); font-size: .9rem; font-style: italic; }

/* Lectura auxiliar: kana y romaji en japonés, nada en los demás idiomas. */
.lectura { color: var(--turquesa); font-size: .85rem; letter-spacing: .5px; margin-top: 6px; }

.simbolo { display: inline-block; margin-top: 12px; font-size: .8rem; color: var(--cian); border: 1px solid rgba(0,212,255,.35); border-radius: 999px; padding: 3px 12px; }

/* ── Botones ────────────────────────────────────────────────────────────── */
.acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

button.btn {
  font-family: inherit; font-size: .88rem; font-weight: 600;
  border-radius: 999px; padding: 12px 22px; cursor: pointer;
  border: 1px solid var(--borde); background: rgba(255,255,255,.04); color: var(--texto);
  transition: all .18s ease; display: inline-flex; align-items: center; gap: 8px;
}
button.btn:hover:not(:disabled) { border-color: var(--cian); transform: translateY(-1px); }
button.btn:disabled { opacity: .4; cursor: not-allowed; }
button.btn.principal { background: linear-gradient(90deg, var(--azul), var(--cian)); color: #04121f; border-color: transparent; }
button.btn.grabando { background: linear-gradient(90deg, var(--magenta), var(--mal)); color: #fff; border-color: transparent; animation: latido 1.1s ease-in-out infinite; }

@keyframes latido { 0%,100% { box-shadow: 0 0 0 0 rgba(200,61,224,.55); } 50% { box-shadow: 0 0 0 14px rgba(200,61,224,0); } }

/* ── Transcripción en vivo ──────────────────────────────────────────────── */
.escucha {
  margin-top: 20px; min-height: 62px;
  background: rgba(0,0,0,.28); border: 1px dashed var(--borde); border-radius: var(--radio);
  padding: 16px; text-align: center;
}
.escucha .rotulo { font-size: .68rem; text-transform: uppercase; letter-spacing: 1.6px; color: var(--tenue); margin-bottom: 6px; }
.escucha .texto { font-size: 1.15rem; font-weight: 600; }
.escucha .texto.provisional { color: var(--tenue); font-weight: 500; font-style: italic; }

/* ── Resultado ──────────────────────────────────────────────────────────── */
.resultado { margin-top: 18px; }

.puntaje { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.puntaje .cifra { font-size: 2.2rem; font-weight: 800; }
.puntaje .barra { flex: 1; height: 9px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.puntaje .barra span { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }

.bien  { color: var(--ok); }
.medio { color: var(--alerta); }
.mal   { color: var(--mal); }
.fondo-bien  { background: linear-gradient(90deg, var(--turquesa), var(--cian)); }
.fondo-medio { background: linear-gradient(90deg, var(--alerta), #ff9f43); }
.fondo-mal   { background: linear-gradient(90deg, var(--mal), var(--magenta)); }

.palabras { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.palabras .p { padding: 5px 11px; border-radius: 8px; font-size: .95rem; font-weight: 600; }
.palabras .p.ok     { background: rgba(42,224,192,.14); color: var(--ok); }
.palabras .p.cambio { background: rgba(255,107,138,.14); color: var(--mal); text-decoration: line-through wavy rgba(255,107,138,.5); }
.palabras .p.falta  { background: rgba(255,200,87,.14); color: var(--alerta); border: 1px dashed rgba(255,200,87,.4); }
.palabras .p.sobra  { background: rgba(255,255,255,.06); color: var(--tenue); font-style: italic; }

.nota {
  background: rgba(0,0,0,.25); border-left: 3px solid var(--magenta);
  border-radius: 0 10px 10px 0; padding: 13px 16px; margin-bottom: 10px; font-size: .88rem;
}
.nota .cabecera { font-weight: 700; margin-bottom: 4px; }
.nota .truco { margin-top: 7px; color: var(--cian); font-size: .84rem; }
.nota.buena { border-left-color: var(--ok); }
.nota.neutra { border-left-color: var(--tenue); }

/* ── Pares mínimos ──────────────────────────────────────────────────────── */
.par { display: flex; gap: 14px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.par .lado {
  flex: 1; min-width: 150px; text-align: center; padding: 18px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: rgba(0,0,0,.18);
  transition: all .25s ease;
}
.par .lado.pedido { border-color: var(--cian); background: rgba(0,212,255,.09); box-shadow: 0 0 24px rgba(0,212,255,.12); }
.par .lado.dicho  { border-color: var(--mal); background: rgba(255,107,138,.1); }
.par .lado .w { font-size: 1.5rem; font-weight: 700; }
.par .lado .r { font-size: .8rem; color: var(--turquesa); margin-top: 2px; }
.par .lado .g { font-size: .78rem; color: var(--tenue); }
.par .lado .marca-lado { font-size: .68rem; text-transform: uppercase; letter-spacing: 1.4px; margin-top: 8px; }

/* ── Conversación ───────────────────────────────────────────────────────── */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tema {
  text-align: left; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: rgba(0,0,0,.18); cursor: pointer; font-family: inherit; color: var(--texto);
  transition: all .18s ease;
}
.tema:hover { border-color: var(--cian); transform: translateY(-2px); }
.tema .emo { font-size: 1.5rem; }
.tema .tit { font-weight: 700; margin-top: 6px; }
.tema .niv { font-size: .72rem; color: var(--cian); }

.chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; max-height: 340px; overflow-y: auto; padding-right: 6px; }
.burbuja { padding: 12px 16px; border-radius: 16px; max-width: 85%; font-size: .92rem; }
.burbuja.agente { background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25); align-self: flex-start; border-bottom-left-radius: 4px; }
.burbuja.tuya { background: rgba(123,50,224,.16); border: 1px solid rgba(123,50,224,.3); align-self: flex-end; border-bottom-right-radius: 4px; }
.burbuja .quien { font-size: .68rem; text-transform: uppercase; letter-spacing: 1.3px; color: var(--tenue); margin-bottom: 3px; }
.burbuja .pista { margin-top: 7px; font-size: .78rem; color: var(--tenue); font-style: italic; }

/* ── Progreso ───────────────────────────────────────────────────────────── */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 24px; }
.metrica { background: rgba(0,0,0,.22); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; text-align: center; }
.metrica .n { font-size: 1.8rem; font-weight: 800; color: var(--cian); }
.metrica .l { font-size: .72rem; color: var(--tenue); text-transform: uppercase; letter-spacing: 1.2px; }

.fila-sonido { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; font-size: .85rem; }
.fila-sonido .nom { width: 190px; flex-shrink: 0; }
.fila-sonido .nom b { color: var(--cian); }
.fila-sonido .barra { flex: 1; height: 8px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; }
.fila-sonido .barra span { display: block; height: 100%; border-radius: 999px; }
.fila-sonido .pct { width: 62px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Campo de texto (escritura y búsqueda del diccionario) ──────────────── */
.campo {
  width: 100%; padding: 14px 16px; margin-bottom: 16px;
  background: rgba(0,0,0,.28); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto); font-family: inherit; font-size: 1.05rem; line-height: 1.5;
  resize: vertical; transition: border-color .18s ease;
}
.campo:focus { outline: none; border-color: var(--cian); }
.campo::placeholder { color: var(--tenue); opacity: .7; }

/* Opción elegida en ¿Cómo se dice?: el color es la respuesta, no un adorno. */
.tema.fondo-bien { border-color: var(--ok); background: rgba(42,224,192,.14); }
.tema.fondo-mal  { border-color: var(--mal); background: rgba(255,107,138,.14); }
.tema:disabled { cursor: default; transform: none; }
.tema:disabled:hover { transform: none; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.aviso { background: rgba(255,200,87,.09); border: 1px solid rgba(255,200,87,.3); border-radius: var(--radio); padding: 16px; font-size: .86rem; margin-bottom: 18px; }
.aviso.grave { background: rgba(255,107,138,.09); border-color: rgba(255,107,138,.35); }
.aviso b { color: var(--alerta); }

.vacio { text-align: center; color: var(--tenue); padding: 30px 10px; font-size: .9rem; }

.avance { text-align: center; font-size: .74rem; color: var(--tenue); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 6px; }

footer { text-align: center; color: var(--tenue); font-size: .74rem; margin-top: 30px; }

@media (max-width: 560px) {
  .objetivo .frase { font-size: 1.5rem; }
  .objetivo .frase.corta { font-size: 2.2rem; }
  .fila-sonido .nom { width: 120px; font-size: .78rem; }
}