/* Rocka — layout y componentes.
   Registro de producto: la herramienta desaparece en la tarea. */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.contenedor {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--e-6) var(--e-4) var(--e-12);
}

/* --- encabezado --- */
.barra {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.marca {
  font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em;
  color: var(--texto); margin: 0;
}
.marca b { color: var(--acento-texto); font-weight: 600; }
.barra nav { margin-left: auto; display: flex; gap: var(--e-1); }

.enlace {
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-sm);
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: var(--t-sm);
  transition: color 160ms var(--salida), background-color 160ms var(--salida);
}
.enlace:hover { color: var(--texto); background: var(--superficie-2); }
.enlace[aria-current="page"] { color: var(--acento-texto); background: var(--acento-suave); }

/* --- el botón de grabar: EL elemento de la app --- */
.escenario {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e-4); padding: var(--e-8) 0 var(--e-6);
}

.grabar {
  width: 104px; height: 104px;
  border: none; border-radius: var(--r-full);
  background: var(--acento);
  color: var(--sobre-acento);          /* casi negro: el naranja vivo no pasa AA con blanco */
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--sombra-2);
  /* Se anima SOLO el feedback de presión. El cambio listo->grabando no se anima
     nunca: Fernando lo dispara por atajo decenas de veces al día, y una animación
     ahí hace que la app se sienta lenta. */
  transition: transform 140ms var(--salida), background-color 160ms var(--salida);
}
.grabar:hover { background: var(--acento-hover); }
.grabar:active { transform: scale(0.97); }
/* cuando el disparo vino del teclado no hay feedback de presión que animar */
.grabar[data-origen="teclado"] { transition: background-color 160ms var(--salida); }
.grabar[disabled] { opacity: 0.5; cursor: default; }
.grabar svg { width: 40px; height: 40px; }

.escenario[data-estado="grabando"] .grabar { background: var(--peligro); }
.escenario[data-estado="procesando"] .grabar { background: var(--proceso); }

.pista { font-size: var(--t-sm); color: var(--texto-tenue); text-align: center; min-height: 1.5em; }
.pista kbd {
  font-family: var(--fuente-mono); font-size: 0.8em;
  padding: 1px 5px; border: 1px solid var(--borde-fuerte);
  border-bottom-width: 2px; border-radius: 4px; background: var(--superficie);
}

/* --- medidor de nivel --- */
.medidor {
  display: flex; align-items: flex-end; gap: 3px;
  height: 40px; width: min(320px, 80vw);
}
.medidor span {
  flex: 1; min-height: 3px; border-radius: 2px;
  background: var(--medidor-pista);
  transform-origin: bottom;
  /* linear: es movimiento constante ligado al audio, no una entrada */
  transition: height 60ms linear, background-color 120ms linear;
}
.medidor span[data-activo="1"] { background: var(--medidor); }

/* --- tarjeta de resultado --- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  padding: var(--e-6);
  margin-top: var(--e-6);
}

.tarjeta-cabecera {
  display: flex; align-items: center; gap: var(--e-3);
  margin-bottom: var(--e-4); flex-wrap: wrap;
}

/* El contador que encarna la tesis del producto: hace visible en cada dictado
   el modo de falla de Typeless. */
.contador {
  font-family: var(--fuente-mono); font-size: var(--t-sm);
  color: var(--texto-tenue);
}
.contador b { color: var(--texto); font-weight: 500; }

.insignia {
  font-size: var(--t-xs); font-weight: 500;
  padding: 2px var(--e-2); border-radius: var(--r-full);
  border: 1px solid transparent;
}
.insignia[data-guarda="ok"]        { color: var(--exito); background: var(--exito-fondo); }
.insignia[data-guarda="reparado"]  { color: var(--proceso-texto); background: var(--proceso-suave); }
.insignia[data-guarda="degradado"] { color: var(--peligro); background: var(--peligro-fondo); }

.texto-dictado {
  font-size: var(--t-lectura);
  line-height: var(--interlineado-lectura);
  max-width: var(--medida);
  white-space: pre-wrap;
  margin: 0;
}
.texto-dictado b, .texto-dictado strong { font-weight: 600; }

.aviso {
  margin-top: var(--e-4); padding: var(--e-3);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  background: var(--peligro-fondo); color: var(--peligro);
  border: 1px solid currentColor;
}
.aviso[data-tono="info"] { background: var(--proceso-suave); color: var(--proceso-texto); }

.acciones { display: flex; gap: var(--e-2); margin-top: var(--e-4); flex-wrap: wrap; }

.boton {
  font: inherit; font-size: var(--t-sm); font-weight: 500;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-md);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  transition: transform 140ms var(--salida), background-color 160ms var(--salida);
}
.boton:hover { background: var(--superficie-2); }
.boton:active { transform: scale(0.97); }
.boton[data-tipo="primario"] {
  background: var(--acento); color: var(--sobre-acento); border-color: transparent;
}
.boton[data-tipo="primario"]:hover { background: var(--acento-hover); }

/* el crudo se muestra bajo pedido: "ver lo que dije" */
details.crudo { margin-top: var(--e-4); }
details.crudo summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--texto-tenue);
  padding: var(--e-1) 0;
}
details.crudo summary:hover { color: var(--texto); }
details.crudo[data-resaltado="1"] summary { color: var(--peligro); font-weight: 500; }
details.crudo p {
  font-family: var(--fuente-mono); font-size: var(--t-sm);
  line-height: 1.6; color: var(--texto-tenue);
  background: var(--superficie-2); padding: var(--e-3);
  border-radius: var(--r-md); white-space: pre-wrap; margin: var(--e-2) 0 0;
}

/* --- historial --- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.lista li {
  padding: var(--e-3); border: 1px solid var(--borde);
  border-radius: var(--r-md); background: var(--superficie);
  display: flex; gap: var(--e-3); align-items: baseline;
}
.lista time { font-size: var(--t-xs); color: var(--texto-tenue); font-family: var(--fuente-mono); white-space: nowrap; }
.lista p { margin: 0; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- entrar --- */
.entrar { max-width: 22rem; margin: var(--e-12) auto; }
.campo { display: grid; gap: var(--e-1); margin-bottom: var(--e-4); }
.campo label { font-size: var(--t-sm); font-weight: 500; }
.campo input {
  font: inherit; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  background: var(--superficie); color: var(--texto);
}

.oculto { display: none !important; }

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