/* ============================================================
   TUTOR IA · vista de conversación (decisión de Juanma, 2026-09-25).
   Solo tokens de tokens.css — nada de colores hex/rgb/hsl crudos ni
   duraciones en ms/s crudas (npm run test:tutor lo verifica).
   Sin avatar y sin nombre de personaje: solo la etiqueta "Tutor IA".
   ============================================================ */

/* El atributo [hidden] tiene que ganar siempre acá: varias reglas de
   abajo fijan `display`, y un selector de clase le gana al [hidden] del
   navegador — así se quedaba visible el consentimiento después de
   aceptarlo (y el "Entendido, continuar" parecía no hacer nada). */
.tutor-panel [hidden] { display: none !important; }

.tutor-boton {
  margin-top: var(--e5);
  min-height: 44px;
}

.tutor-fondo {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 40;
}

.tutor-panel {
  position: fixed;
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  background: var(--papel);
  color: var(--tinta-cuerpo);
  padding: var(--e4) var(--e4) var(--e3);
  left: 0;
  right: 0;
  bottom: 0;
  height: 90vh;
  height: 90dvh;
  border-top: 1px solid var(--papel-linea);
  border-radius: var(--r-medio) var(--r-medio) 0 0;
}

@media (min-width: 1024px) {
  .tutor-panel {
    left: auto;
    top: 0;
    height: auto;
    width: min(30rem, 92vw);
    padding: var(--e5) var(--e5) var(--e4);
    border-top: none;
    border-left: 1px solid var(--papel-linea);
    border-radius: 0;
  }
}

.tutor-panel-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}

.tutor-panel-titulo,
.tutor-etq-chica {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--web-rotulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0;
}

.tutor-cerrar {
  background: transparent;
  border: none;
  color: var(--tinta-2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.tutor-primera-linea {
  flex: none;
  font-family: var(--lectura);
  font-size: var(--web-foot);
  color: var(--tinta-2);
  margin: 0;
}

.tutor-consentimiento {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.tutor-consentimiento p {
  font-family: var(--lectura);
  font-size: var(--web-p);
  color: var(--tinta-cuerpo);
  margin: 0;
}

.tutor-consentimiento a,
.tutor-consigna a { color: var(--ambar-osc); }

.tutor-consentimiento .btn {
  min-height: 44px;
  align-self: flex-start;
  flex: none;
}

.tutor-aviso-error {
  color: var(--tinta-cuerpo);
  font-style: italic;
}

.tutor-cuerpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

/* Consigna del ejercicio: plegada por defecto — en el teléfono la
   consigna no se alcanza a ver con el panel abierto. */
.tutor-consigna {
  flex: none;
  border: 1px solid var(--papel-linea);
  border-radius: var(--r-chico);
  background: var(--blanco);
}

.tutor-consigna summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--web-foot);
  color: var(--tinta-2);
  padding: var(--e3);
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tutor-consigna-texto {
  padding: 0 var(--e3) var(--e3);
  max-height: 30vh;
  overflow-y: auto;
  font-family: var(--lectura);
  font-size: var(--web-foot);
  color: var(--tinta-cuerpo);
}

.tutor-consigna-texto p { margin: 0 0 var(--e2); }
/* Dentro del panel la consigna usa el cuerpo del sistema (web), no la escala
   en cqw de la guía, que la dejaba enorme (~32px). */
.tutor-panel .tutor-consigna-texto p,
.tutor-panel .tutor-consigna-texto li { font-size: var(--web-p); line-height: 1.5; max-width: none; margin: 0 0 var(--e2); }
.tutor-panel .tutor-consigna-texto .t { font-size: var(--web-rotulo); }

/* La conversación: desplazable, del mensaje más antiguo al más reciente. */
.tutor-conversacion {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e1) 0;
}

.tutor-msg {
  max-width: 85%;
  padding: var(--e3) var(--e4);
  border-radius: var(--r-medio);
  font-family: var(--lectura);
  font-size: var(--web-p);
}

.tutor-msg p { margin: 0; white-space: pre-line; }
/* Los <p> de la conversación heredaban la escala en cqw de la guía y en
   computador salían enormes: cuerpo chico del sistema, igual que la consigna
   del panel, en teléfono y en computador. */
.tutor-panel .tutor-msg p { font-size: var(--web-p); line-height: 1.5; max-width: none; margin: 0; }
.tutor-panel .tutor-msg .tutor-etq-chica { font-size: var(--web-rotulo); } /* el aviso de hilo largo va en párrafo aparte */

/* La persona, a la derecha, sobre una superficie oscura del sistema. */
.tutor-msg-persona {
  align-self: flex-end;
  background: var(--azul-700);
  color: var(--blanco);
  border-bottom-right-radius: var(--r-chico);
}

/* El tutor, a la izquierda, sobre papel con el filete ámbar de siempre. */
.tutor-msg-tutor {
  align-self: flex-start;
  background: var(--blanco);
  color: var(--tinta-cuerpo);
  border: 1px solid var(--papel-linea);
  border-left: 2px solid var(--ambar-osc);
  border-bottom-left-radius: var(--r-chico);
}

.tutor-msg-tutor .tutor-etq-chica { margin-bottom: var(--e1); }

/* Avisos honestos (cupo, falla): color de texto normal, sin rojo ni ícono. */
.tutor-msg-sistema {
  align-self: stretch;
  max-width: none;
  color: var(--tinta-cuerpo);
  background: var(--papel-panel);
}

.tutor-valoracion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e2);
}

.tutor-pulgar {
  background: transparent;
  border: 1px solid var(--papel-linea);
  border-radius: var(--r-pill);
  min-width: 44px;
  min-height: 44px;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--tinta-cuerpo);
}

.tutor-pulgar[aria-pressed="true"] { border-color: var(--ambar-osc); }
.tutor-pulgar[disabled] { cursor: default; }

/* Los motivos del 👎 se despliegan en línea, dentro del mensaje. */
.tutor-motivos {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  width: 100%;
  margin-top: var(--e2);
  padding: var(--e3);
  background: var(--papel-panel);
  border-radius: var(--r-chico);
}

.tutor-motivos label {
  font-family: var(--lectura);
  font-size: var(--web-foot);
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.tutor-motivos-etiqueta { margin-top: var(--e1); font-weight: 600; }

.tutor-motivos textarea {
  font-family: var(--lectura);
  font-size: var(--web-foot);
  border: 1px solid var(--papel-linea);
  border-radius: var(--r-chico);
  padding: var(--e2);
}

.tutor-motivos .btn { min-height: 44px; align-self: flex-start; }

.tutor-gracias {
  font-family: var(--lectura);
  font-size: var(--web-foot);
  color: var(--tinta-2);
  margin: 0;
}

.tutor-leyendo {
  flex: none;
  margin: 0;
  font-family: var(--lectura);
  font-size: var(--web-foot);
  font-style: italic;
  color: var(--tinta-2);
}

/* Sin animación ni barra (los mensajes de espera cambian de texto, nada más); con
   "reducir movimiento" tampoco hay transiciones. */
@media (prefers-reduced-motion: reduce) {
  .tutor-leyendo { animation: none; }
}

/* El campo de escritura va fijo abajo. */
.tutor-entrada {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--papel-linea);
}

.tutor-textarea {
  flex: 1;
  min-height: 44px;
  resize: none;
  font-family: var(--lectura);
  font-size: var(--web-p);
  color: var(--tinta-cuerpo);
  background: var(--blanco);
  border: 1px solid var(--papel-linea);
  border-radius: var(--r-chico);
  padding: var(--e3);
}

.tutor-enviar {
  flex: none;
  min-height: 44px;
  padding: var(--e3) var(--e5);
}

.tutor-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tutor-msg-sistema .tutor-reintentar { margin-top: var(--e2); min-height: 44px; }