/* Capa de revisión del cliente.
   Solo viaja en el paquete que genera `publicar-revision.js`; el .zip que va al LMS no la lleva.

   Los colores NO salen de los tokens de marca a propósito: esta capa no es parte del curso, es
   una herramienta encima. Si se pintara con la marca del cliente, el cliente no distinguiría lo
   que tiene que revisar de lo que le pusimos para revisar. */

:root {
  --rev-tinta: #1c2430;
  --rev-tenue: #6b7684;
  --rev-borde: #dfe3ea;
  --rev-acento: #2f6df6;
  --rev-resuelto: #2E7D32;
  --rev-ancho: 340px;
}

/* El lienzo se corre a la izquierda cuando el panel está abierto. Se mueve `.app` —el
   contenedor de afuera— y no `.motor`, porque a ese el reproductor le escribe el `transform`
   en cada `ajustarEscala()` y cualquier cosa que le pongamos acá se pierde en el próximo
   resize. */
.app { transition: transform .18s ease; }
body.rev-abierto .app { transform: translateX(calc(var(--rev-ancho) / -2)); }

@media (max-width: 900px) {
  body.rev-abierto .app { transform: none; }
}

/* ------------------------------------------------------------------ pestaña */

.rev-pestana {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 8px 0 0 8px;
  background: var(--rev-tinta);
  color: #fff;
  font: 700 13px/1 "Trebuchet MS", system-ui, sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 2px 12px rgba(16, 24, 40, .25);
}
.rev-pestana:hover { background: #2b3646; }
body.rev-abierto .rev-pestana { display: none; }

/* Cuántos comentarios tiene ESTA lámina. Se esconde en 0 en vez de mostrar un cero, que
   invitaría a leer algo que no existe. */
.rev-pestana .rev-cuenta {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--rev-acento);
  font-size: 11.5px;
}
.rev-pestana .rev-cuenta:empty { display: none; }

/* ------------------------------------------------------------------ panel */

.rev-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 901;
  display: flex;
  flex-direction: column;
  width: var(--rev-ancho);
  max-width: 100vw;
  height: 100vh;
  border-left: 1px solid var(--rev-borde);
  background: #fff;
  color: var(--rev-tinta);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-size: 13.5px;
  transform: translateX(100%);
  transition: transform .18s ease;
}
body.rev-abierto .rev-panel { transform: none; }

.rev-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rev-borde);
}
.rev-cabecera h2 { margin: 0; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; }
.rev-cabecera p {
  margin: 3px 0 0;
  color: var(--rev-tenue);
  font-size: 12px;
  line-height: 1.35;
}

.rev-cerrar {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--rev-tenue);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rev-cerrar:hover { color: var(--rev-tinta); }

/* ------------------------------------------------------------------ lista */

.rev-lista { flex: 1; margin: 0; padding: 10px 16px; overflow-y: auto; list-style: none; }
.rev-lista:empty::after {
  content: "Todavía no hay comentarios en esta lámina.";
  display: block;
  padding: 10px 0;
  color: var(--rev-tenue);
}

.rev-item { padding: 10px 0; border-bottom: 1px solid #f0f2f5; }
.rev-item:last-child { border-bottom: 0; }
.rev-item .rev-quien { font-weight: 700; }
.rev-item .rev-cuando { margin-left: 6px; color: var(--rev-tenue); font-size: 11.5px; }
.rev-item .rev-texto { margin: 4px 0 0; line-height: 1.45; white-space: pre-wrap; }

.rev-item.es-resuelto { opacity: .55; }
.rev-item.es-resuelto .rev-texto { text-decoration: line-through; }
.rev-item .rev-sello {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #e3f5e6;
  color: var(--rev-resuelto);
  font-size: 10.5px;
  font-weight: 700;
}

/* Comentario escrito sin conexión: todavía no llegó al servidor. Se muestra igual —el trabajo
   del cliente no se le esconde— pero marcado, para que no crea que ya lo mandó. */
.rev-item.es-pendiente { border-left: 3px solid #B26A00; padding-left: 9px; }

/* Respuestas dentro del hilo. La de producción va marcada con el acento: para el cliente, la
   diferencia entre «otro revisor opinó» y «esto ya lo corrigieron» es la información
   importante de toda la pantalla. */
.rev-respuesta {
  margin: 8px 0 0 16px;
  padding: 6px 10px;
  border-left: 2px solid var(--rev-borde);
  border-radius: 0 4px 4px 0;
  background: #fafbfc;
}
.rev-respuesta.es-produccion { border-left-color: var(--rev-acento); background: #f2f7ff; }
.rev-respuesta .rev-texto { font-size: 13px; }

.rev-responder {
  margin: 8px 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rev-acento);
  font: 700 12px "Trebuchet MS", system-ui, sans-serif;
  cursor: pointer;
}
.rev-responder:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ escribir */

.rev-respondiendo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #eef4ff;
  color: var(--rev-acento);
  font-size: 12px;
  font-weight: 700;
}
/* Quién comenta. Se muestra siempre, en chico: firmar sin darse cuenta con el nombre de otro
   —dos personas revisando desde la misma máquina— es un error caro y silencioso. */
.rev-identidad {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--rev-tenue);
  font-size: 11.5px;
}
.rev-identidad strong { color: var(--rev-tinta); }

.rev-cambiar {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--rev-acento);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Pantalla de presentación: ocupa el lugar del formulario mientras no se sepa quién revisa. */
.rev-presentacion { padding: 14px 16px; border-top: 1px solid var(--rev-borde); background: #fafbfc; }
.rev-presentacion h3 { margin: 0 0 4px; font-size: 14px; }
.rev-presentacion p { margin: 0 0 10px; color: var(--rev-tenue); font-size: 12px; line-height: 1.4; }

.rev-presentacion input {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 11px;
  border: 1px solid var(--rev-borde);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
}
.rev-presentacion input:focus { outline: 2px solid var(--rev-acento); outline-offset: -1px; }

.rev-presentacion button {
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 6px;
  background: var(--rev-acento);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.rev-cancelar {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--rev-tenue);
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  text-decoration: underline;
}

.rev-escribir { padding: 12px 16px; border-top: 1px solid var(--rev-borde); background: #fafbfc; }

.rev-escribir textarea,
.rev-escribir input {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rev-borde);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  resize: vertical;
}
.rev-escribir textarea:focus,
.rev-escribir input:focus { outline: 2px solid var(--rev-acento); outline-offset: -1px; }

.rev-escribir button {
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 6px;
  background: var(--rev-acento);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.rev-escribir button:disabled { opacity: .45; cursor: default; }

.rev-pie { margin: 8px 0 0; color: var(--rev-tenue); font-size: 11.5px; line-height: 1.4; }
.rev-pie.es-error { color: #B26A00; }

@media (prefers-reduced-motion: reduce) {
  .app, .rev-panel { transition: none; }
}