/* Interfaz del Generador de TH.
   Paleta tomada de las propias plantillas: navy #0E2E4F, dorado #FFAB00. */
:root {
  --navy: #0e2e4f;
  --navy-hondo: #081d33;
  --dorado: #ffab00;
  --papel: #f4f6f8;
  --linea: #d8dee5;
  --tinta: #16222e;
  --apagado: #6b7a89;
  --alarma: #c62828;
  --aviso: #b26a00;
  --ok: #2e7d32;
  --radio: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font:
    15px/1.45 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  background: var(--papel);
  color: var(--tinta);
}

/* ── Encabezado ───────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  background: var(--navy);
  color: #fff;
}
header h1 {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0.2px;
}
header .quien {
  margin-left: auto;
  font-size: 13px;
  color: #b7c8d8;
}
header button {
  background: transparent;
  border: 1px solid #3d5f80;
  color: #cfe0ee;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
header button:hover {
  background: #16456d;
}

/* ── Rejilla principal ────────────────────────────────────────────────── */
main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
  gap: 18px;
  padding: 18px 22px 40px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: start;
}
/* En pantalla angosta las tarjetas se ordenan como se trabaja, no como están
   puestas en el escritorio.
   
   En el celular las dos columnas se apilan, y con el orden del HTML lo primero
   que aparecía era la vista previa y lo último el campo del titular: había que
   pasar de largo toda la pantalla para llegar al primer paso. `display:
   contents` saca a las dos columnas del medio y deja que cada tarjeta ocupe su
   lugar en la secuencia real: titular, ganchos, lo que salió, editar, foto. */
@media (max-width: 1000px) {
  main {
    grid-template-columns: 1fr;
  }
  main > section {
    display: contents;
  }
  #tarjeta-titular {
    order: 1;
  }
  #tarjeta-ganchos {
    order: 2;
  }
  #tarjeta-th {
    order: 3;
  }
  #tarjeta-editor {
    order: 4;
  }
  #tarjeta-imagen {
    order: 5;
  }
  #tarjeta-metadatos {
    order: 6;
  }
  #tarjeta-historial {
    order: 7;
  }
}

/* Con el dedo, arrastrar sobre la vista previa tiene que mover la foto y no
   desplazar la página. Sin esto el navegador se queda con el gesto y encuadrar
   en un celular es imposible. Solo cuando hay foto: sin ella, que la página se
   desplace normalmente es lo correcto. */
#marco.con-foto {
  touch-action: none;
}

.tarjeta {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 18px;
}
.tarjeta > h2 {
  margin: 0;
  padding: 11px 15px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--apagado);
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tarjeta > h2 .derecha {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.cuerpo {
  padding: 15px;
}

/* ── Vista previa ─────────────────────────────────────────────────────── */
#marco {
  position: relative;
  background: #0b1118 repeating-conic-gradient(#1a2430 0% 25%, #131b25 0% 50%) 0 / 22px 22px;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  user-select: none;
}
#marco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* La capa de encuadre reemplaza a la vista previa mientras se arrastra.

   Reparte las capas igual que el render: el contenedor lleva el recorte y la
   máscara —que son del diseño de la plantilla y no se mueven— y la imagen de
   adentro lleva la transformación. Por eso lo que se ve arrastrando es lo que
   sale al soltar. El recorte y la máscara los pone panel.js, que los recibe del
   servidor junto con el resto de la plantilla. */
#encuadre {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  /* Sin fondo propio a propósito: donde la foto no llega, se ve la vista previa
     compuesta que está debajo, que ahí tiene el fondo de la plantilla. Con un
     fondo opaco esa zona salía negra mientras se arrastraba y dorada al soltar,
     que es exactamente el tipo de sorpresa que esta capa existe para evitar. */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#encuadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}
#velo-encuadre {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.encuadrando #encuadre {
  display: block;
}
#marco.con-foto {
  cursor: grab;
}
#marco.con-foto:active {
  cursor: grabbing;
}
#pista {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
body.encuadrando #pista {
  opacity: 1;
}
#cargando {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 20px;
  display: none;
}
#cargando.visible {
  display: block;
}

/* ── Editor de líneas ─────────────────────────────────────────────────── */
.linea-editor {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.linea-editor input[type='text'] {
  flex: 1;
}
.linea-editor select {
  width: 118px;
}
.linea-editor button.quitar {
  border: 1px solid var(--linea);
  background: #fff;
  color: var(--apagado);
  width: 30px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  flex: none;
}
.linea-editor button.quitar:hover {
  color: var(--alarma);
  border-color: var(--alarma);
}

input[type='text'],
input[type='password'],
textarea,
select {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  width: 100%;
}
textarea {
  resize: vertical;
  min-height: 92px;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--dorado);
  outline-offset: -1px;
  border-color: var(--dorado);
}
label.campo {
  display: block;
  margin-bottom: 12px;
}
label.campo span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--apagado);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fila {
  display: flex;
  gap: 10px;
}
.fila > * {
  flex: 1;
}

button.accion {
  font: inherit;
  font-weight: 600;
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: 7px;
  cursor: pointer;
}
button.accion:hover {
  background: #16456d;
}
button.accion:disabled {
  background: #9fb0bf;
  cursor: not-allowed;
}
button.suave {
  font: inherit;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--linea);
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
}
button.suave:hover {
  border-color: var(--navy);
}
button.dorado {
  background: var(--dorado);
  color: #241a00;
}
button.dorado:hover {
  background: #ffc23f;
}

/* ── Ganchos ──────────────────────────────────────────────────────────── */
.gancho {
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: #fff;
}
.gancho:hover {
  border-color: var(--navy);
}
.gancho.elegido {
  border-color: var(--dorado);
  box-shadow: inset 0 0 0 1px var(--dorado);
}
.gancho .numero {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.gancho .texto {
  flex: 1;
}
.gancho .lineas {
  font-weight: 600;
}
.gancho .lineas em {
  font-style: normal;
  font-weight: 400;
  color: var(--apagado);
}
.gancho .meta {
  font-size: 12px;
  color: var(--apagado);
  margin-top: 3px;
}

.marca {
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  gap: 6px;
}
.marca .etiqueta {
  flex: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 4px;
  height: fit-content;
}
.marca.bloquea .etiqueta {
  background: #fdecea;
  color: var(--alarma);
}
.marca.revisar .etiqueta {
  background: #fff4e0;
  color: var(--aviso);
}

.vacio {
  color: var(--apagado);
  font-size: 13px;
  padding: 6px 0;
}

/* ── Metadatos ────────────────────────────────────────────────────────── */
.opcion-titulo {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 9px;
  font-size: 14px;
}
.opcion-titulo input {
  width: auto;
  margin-top: 3px;
  flex: none;
}
.opcion-titulo .largo {
  color: var(--apagado);
  font-size: 12px;
}
.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ficha {
  background: #eef2f6;
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 12px;
}

/* ── Avisos ───────────────────────────────────────────────────────────── */
#aviso {
  display: none;
  margin: 0 22px 4px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
}
#aviso.visible {
  display: block;
}
#aviso.error {
  background: #fdecea;
  color: var(--alarma);
  border: 1px solid #f5c6c2;
}
#aviso.bien {
  background: #e8f5e9;
  color: var(--ok);
  border: 1px solid #c3e6c5;
}

.nota {
  font-size: 12px;
  color: var(--apagado);
  border-left: 3px solid var(--dorado);
  padding-left: 10px;
  margin-top: 12px;
}

/* ── Pantalla de ingreso ──────────────────────────────────────────────── */
body.ingreso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--navy-hondo);
}
.caja-ingreso {
  background: #fff;
  padding: 30px 32px;
  border-radius: 14px;
  width: min(370px, 90vw);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.caja-ingreso h1 {
  margin: 0 0 4px;
  font-size: 21px;
  color: var(--navy);
}
.caja-ingreso p.sub {
  margin: 0 0 20px;
  color: var(--apagado);
  font-size: 13px;
}
.caja-ingreso button {
  width: 100%;
  margin-top: 6px;
}
.caja-ingreso .error {
  color: var(--alarma);
  font-size: 13px;
  margin-top: 12px;
  min-height: 18px;
}

/* ── Revisión ortográfica ─────────────────────────────────────────────── */
/* Aparece entre la vista previa y el resto, al pulsar Descargar. Ocupa lugar
   a propósito: es un paso del trabajo, no un aviso al pie. */
#revision:empty {
  display: none;
}
#revision {
  margin-top: 14px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
}
#revision h3 {
  margin: 0;
  padding: 9px 13px;
  font-size: 13px;
  background: #fff4e0;
  color: var(--aviso);
  border-bottom: 1px solid #f0dcb8;
}
#revision h3.limpio {
  background: #e8f5e9;
  color: var(--ok);
  border-bottom-color: #c3e6c5;
}
.corregida {
  padding: 9px 13px;
  font-size: 13px;
  border-bottom: 1px solid var(--linea);
  color: var(--apagado);
}
.corregida b {
  color: var(--tinta);
}
.por-resolver {
  padding: 11px 13px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.por-resolver:last-child {
  border-bottom: 0;
}
.por-resolver .cual {
  font-weight: 700;
  background: #fdecea;
  padding: 1px 7px;
  border-radius: 4px;
}
.por-resolver .porque {
  color: var(--apagado);
  font-size: 13px;
  flex: 1;
  min-width: 160px;
}
.por-resolver button {
  font: inherit;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--linea);
  background: #fff;
}
.por-resolver button.usar {
  border-color: var(--navy);
  color: var(--navy);
  font-weight: 600;
}
.por-resolver button.usar:hover {
  background: var(--navy);
  color: #fff;
}
.por-resolver button.dejar:hover {
  border-color: var(--apagado);
}

/* Control editorial sobre lo que está escrito ahora, debajo del editor. */
#marcas-gancho:empty {
  display: none;
}
#marcas-gancho {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
}
#marcas-gancho .cuenta {
  font-size: 12px;
  color: var(--apagado);
  margin-bottom: 6px;
}
#marcas-gancho .cuenta.pasado {
  color: var(--alarma);
  font-weight: 600;
}

/* Titular deducido de una transcripción, un guion o una descripción.
   Editable a propósito: el resumen puede elegir mal el hecho principal, y eso
   se corrige acá y no en la miniatura publicada. */
#titular-deducido {
  border: 1px solid var(--dorado);
  background: #fffaf0;
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 14px;
}
#titular-deducido .explica {
  font-size: 12px;
  color: var(--aviso);
  margin-bottom: 2px;
}
#titular-deducido input {
  font-weight: 600;
}
#titular-deducido button {
  flex: none;
}