/* ==========================================================
   Generador de Exámenes - Estilos (CSS puro, sin dependencias)
   ========================================================== */

/* ---------- Variables ---------- */
:root {
  --azul: #1a5b8c;              /* azul institucional */
  --azul-hover: #14476d;
  --azul-claro: #d6e4f0;
  --color-panel: #f4f6f8;
  --color-panel-borde: #c9d3dc;
  --color-fondo-previa: #4a4f55;
  --color-texto: #263238;

  /* Medidas de la hoja Carta */
  --hoja-ancho: 8.5in;
  --hoja-alto: 11in;
  --hoja-margen: 1.5cm;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-texto);
}

/* ---------- Layout principal (30% / 70%) ---------- */
.app {
  display: flex;
  height: 100vh;
}

/* ---------- Panel izquierdo ---------- */
.panel-control {
  flex: 0 0 30%;
  background: var(--color-panel);
  border-right: 3px solid var(--azul);
  padding: 24px;
  overflow-y: auto;
}

.panel-control__cabecera {
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--azul);
}

.panel-control__titulo {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--azul);
}

.panel-control__subtitulo {
  margin: 2px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5d7a91;
}

.formulario { display: flex; flex-direction: column; gap: 16px; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 0.85rem; font-weight: 600; color: var(--azul); }

.campo input[type="text"],
.campo input[type="number"],
.campo textarea,
.campo select {
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid var(--azul);
  border-radius: 6px;
  background: #fff;
}
.campo textarea { resize: vertical; font-family: inherit; }

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: 3px solid var(--azul-claro);
  border-color: var(--azul-hover);
}

.acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* ---------- Botones ---------- */
.btn {
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* Primario: azul sólido */
.btn--primario {
  color: #fff;
  background: var(--azul);
  border: 2px solid var(--azul);
}
.btn--primario:hover { background: var(--azul-hover); border-color: var(--azul-hover); }
/* Secundario institucional: contorno azul */
.btn--exito {
  color: var(--azul);
  background: #fff;
  border: 2px solid var(--azul);
}
.btn--exito:hover { background: var(--azul); color: #fff; }

/* ---------- Panel derecho (previsualización) ---------- */
.panel-previa {
  flex: 1 1 70%;
  background: var(--color-fondo-previa);
  overflow: auto;
  padding: 32px 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Contenedor que JS escala (zoom) para que la hoja quepa en el panel */
.hoja-escala { flex: none; }

/* ---------- Hoja tamaño Carta ---------- */
.hoja {
  width: var(--hoja-ancho);
  min-height: var(--hoja-alto);  /* crece si hay muchas preguntas */
  display: flex;                 /* columna: permite anclar el pie al final */
  flex-direction: column;
  padding: var(--hoja-margen);   /* márgenes estrechas: 1.5 cm */
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;              /* nada puede salirse de la hoja */
  font-family: Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.2;
  color: #000;
}

/* ---------- Encabezado institucional (compacto) ---------- */
.encabezado__superior {
  display: flex;
  align-items: center;
  gap: 20px;
}

.encabezado__logo {
  flex: none;
  width: 150px;
  height: auto;
}

/* Textos centrados en el espacio restante, pegados entre sí */
.encabezado__textos {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.encabezado__colegio {
  margin: 0;
  font-weight: bold;
  font-size: 17pt;
  line-height: 1.15;
}

.encabezado__titulo {
  margin: 2px 0 0;
  font-size: 11pt;
  font-weight: bold;
  overflow-wrap: anywhere;       /* evita desbordes con nombres largos */
}

/* Filas de datos del estudiante */
.fila-datos {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: 6px;
  line-height: 1.1;
}

/* Aire entre la fila 1 y la fila 2 para escribir a mano */
.fila-datos:not(:last-of-type) { margin-bottom: 15px; }

.dato {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
  min-width: 0;
}
.dato--crece { flex: 1; }

/* Línea para escribir: borde inferior */
.linea {
  flex: 1;
  min-width: 40px;
  min-height: 1.2em;
  padding: 0 4px;
  border-bottom: 1px solid #000;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valor elegido en el panel (sin línea de escritura) */
.valor { font-weight: bold; }
.linea--nota  { flex: 0 0 55px; }
.linea--fecha { flex: 0 0 110px; }

.encabezado__separador {
  margin: 20px 0;
  border: none;
  border-top: 2px solid #000;
  width: 100%;
}

/* ---------- Formulario de pregunta (panel izquierdo) ---------- */
/* El atributo hidden debe ganar sobre cualquier display definido arriba */
[hidden] { display: none !important; }

.panel-pregunta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--azul);
  border-radius: 8px;
}
/* Mini-editor del enunciado */
.editor { display: flex; flex-direction: column; }
.editor__barra {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--azul-claro);
  border: 1px solid var(--azul);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
/* Botones unificados, estilo pestañas pequeñas */
.editor__btn {
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--azul);
  background: #fff;
  border: 1px solid var(--azul);
  border-radius: 4px;
  cursor: pointer;
}
.editor__btn:hover { background: var(--azul); color: #fff; }
.editor__campo {
  min-height: 90px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 1rem;
  line-height: 1.4;
  background: #fff;
  border: 1px solid var(--azul);
  border-radius: 0 0 6px 6px;
  overflow-wrap: anywhere;
}
.editor__campo:focus {
  outline: 3px solid var(--azul-claro);
  border-color: var(--azul-hover);
}
/* Super/subíndices sin ensanchar el interlineado */
.editor__campo sup, .editor__campo sub,
.pregunta__enunciado sup, .pregunta__enunciado sub { line-height: 0; }

.pregunta__enunciado .centrado { text-align: center; }

.editor__campo:empty::before {
  content: attr(data-placeholder);
  color: #8a99a6;
}

/* Selector Pregunta / Contexto */
.opciones-radio { margin: 0; padding: 0; border: none; }
.opciones-radio legend { padding: 0; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--azul); }
.opciones-radio label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--color-texto); }
.opciones-radio input { accent-color: var(--azul); }

.panel-pregunta__titulo { margin: 0; font-size: 1.05rem; color: var(--azul); }
.panel-pregunta .campo input[type="file"] { font-size: 0.9rem; }
.panel-pregunta__error { margin: 0; font-size: 0.85rem; color: #b71c1c; }

/* ---------- Preguntas en la hoja ---------- */
#contenedor-preguntas {
  counter-reset: pregunta;       /* numeración automática 1., 2., 3. */
  font-family: Arial, sans-serif;
  font-size: 11pt;
}

/* Contenedor principal de TODO lo que se inserta (pregunta o contexto):
   una sola pieza indivisible. Si no cabe en la página, pasa entera a la
   siguiente y deja el espacio en blanco. */
.bloque-evaluativo {
  position: relative;
  margin-bottom: 25px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pregunta {
  counter-increment: pregunta;
  padding-right: 24px;           /* espacio para el botón Eliminar */
}

.pregunta__enunciado {
  margin: 0;
  text-align: justify;
  overflow-wrap: anywhere;       /* evita desbordes con palabras largas */
  white-space: pre-wrap;         /* respeta saltos de línea del textarea */
}
.pregunta__enunciado::before {
  content: counter(pregunta) ". ";
  font-weight: bold;
}

/* REGLA DE ORO: ninguna imagen puede salirse de las márgenes.
   max-width: 100% + height: auto => una imagen 4K se reduce sola al ancho
   del contenedor (sin desbordarse y conservando su proporción), mientras
   que una imagen pequeña mantiene su tamaño natural: max-width solo limita,
   nunca agranda.
   max-height + object-fit: contain => una imagen muy alta se encoge hasta
   400px de alto sin deformarse, para que no devore la página. */
#contenedor-preguntas img {
  max-width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  break-inside: avoid;           /* la imagen nunca se parte entre páginas */
  page-break-inside: avoid;
  display: block;
  margin: 10px auto;
}

/* Contexto / Lectura: sin numeración (no usa el contador) y con estilo propio */
.contexto {
  padding: 8px 32px 8px 12px;
  background: #fafafa;
  border-left: 4px solid #b0b7bd;
}
.contexto__texto {
  text-align: justify;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.contexto__texto .centrado { text-align: center; }
.contexto__texto sup, .contexto__texto sub { line-height: 0; }
.contexto:hover .pregunta__eliminar { opacity: 1; }

/* Líneas de respuesta (preguntas abiertas) */
.linea-respuesta {
  height: 24px;
  border-bottom: 1px solid #000;
}

/* Opciones (selección múltiple) */
.opciones { margin-top: 6px; padding-left: 20px; }
.opcion {
  margin: 3px 0;
  text-align: justify;
  overflow-wrap: anywhere;
}

/* Botón Eliminar: solo visible al pasar el cursor */
.pregunta__eliminar {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: #b71c1c;
  background: #fff;
  border: 1px solid #b71c1c;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.pregunta:hover .pregunta__eliminar,
.pregunta__eliminar:focus-visible { opacity: 1; }
.pregunta__eliminar:hover { background: #b71c1c; color: #fff; }

/* ---------- Pie del examen (anclado al final de la hoja) ---------- */
#pie-examen {
  margin-top: auto;              /* empuja el pie al fondo de la hoja */
  padding-top: 24px;             /* separación mínima con la última pregunta */
  font-size: 10pt;
  break-inside: avoid;
  page-break-inside: avoid;
}
#pie-examen p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; text-align: justify; }
.observaciones { margin-bottom: 12px; }
.recomendaciones ul { margin: 2px 0 0; padding: 0; list-style: none; }
.recomendaciones li { margin: 1px 0; }

/* ---------- Cierre institucional (versículo) ---------- */
#cierre-institucional {
  margin-top: 16px;
  text-align: center;
  font-style: italic;
  font-weight: normal;
  font-size: 10pt;
  break-inside: avoid;           /* el versículo no se parte entre páginas */
  page-break-inside: avoid;
}

/* ---------- Impresión ---------- */
/* Márgenes de la página en 0 y se devuelven con el padding de .hoja (1.5 cm).
   Con margen 0 el navegador no tiene dónde dibujar la fecha ni la URL. */
@page { size: letter; margin: 0; }

@media print {
  /* Ocultar toda la UI que no sea la hoja del examen */
  .panel-control,
  #panel-pregunta,
  .btn,
  .pregunta__eliminar { display: none !important; }

  /* Quitar los límites de pantalla para que fluya en varias páginas */
  html, body, .app, .panel-previa, .hoja-escala {
    display: block;
    height: auto;
    overflow: visible;
    padding: 0;
    background: #fff;
    zoom: 1 !important;          /* ignora el zoom que aplica JS en pantalla */
  }

  .hoja {
    width: auto;
    min-height: 10.98in;         /* una hoja Carta (con holgura para no generar página en blanco) */
    padding: var(--hoja-margen); /* 1.5 cm */
    box-shadow: none;
    overflow: visible;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone; /* repite el padding en cada página */
  }

  /* El encabezado va una sola vez, al inicio, y no se parte */
  .encabezado {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Nunca cortar una pregunta por la mitad */
  .pregunta {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Conservar los colores y bordes tal cual */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}