/* ─────────────────────────────────────────────────────────────────────────────
 * formatos.css — un solo diseño para las pantallas de Formatos y listados.
 *
 * Formulario a la izquierda, resultado a la derecha y acciones en la barra
 * superior (ver formatos-comun.js). Se carga después de rotulos.css y
 * entregas.css: lo de allí queda para la hoja impresa (el facsímil del rótulo,
 * del libro, la tabla de asistencia) y lo de aquí manda en el armazón.
 *
 * Sin tarjetas: la pantalla es la superficie, los grupos se separan con líneas
 * y lo único con fondo propio es la "mesa" donde se apoya la hoja, que es lo
 * que hay que mirar.
 * ────────────────────────────────────────────────────────────────────────── */

.fx-pantalla {
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}
.fx-form {
  min-width: 0;
  padding: 0 24px 24px 0;
  border-right: 1px solid var(--border);
}
.fx-hoja {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-left: 24px;
}

/* Escritorio: las dos columnas llenan el alto libre y se desplazan cada una
   por su lado, así la hoja no se va de la vista al bajar por el formulario. */
@media (min-width: 1000px) {
  .fx-pantalla { height: var(--fx-alto, calc(100vh - 140px)); }
  .fx-form,
  .fx-hoja { overflow-y: auto; overscroll-behavior: contain; }
  .fx-hoja { min-height: 0; }
}

/* Tablet y teléfono: una sola columna y el desplazamiento de la página. */
@media (max-width: 999.98px) {
  .fx-pantalla { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fx-form { padding: 0; border-right: 0; }
  .fx-hoja { padding-left: 0; }
}

/* ── Grupos del formulario ─────────────────────────────────────────────── */
.fx-grupo { padding: 16px 0; border-top: 1px solid var(--border); }
.fx-grupo:first-of-type { border-top: 0; padding-top: 4px; }
.fx-grupo-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fx-grupo-titulo button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 1.25rem;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
}
.fx-grupo-titulo button:hover { color: var(--danger, #b42318); }

.fx-campo { display: grid; gap: 5px; min-width: 0; margin-bottom: 12px; }
.fx-campo:last-child { margin-bottom: 0; }
.fx-campo > label,
.fx-campo > .fx-etiqueta { color: var(--text-main); font-size: .75rem; font-weight: 600; }
.fx-opcional { color: var(--text-muted); font-weight: 400; }
.fx-fila { display: grid; grid-template-columns: repeat(var(--fx-cols, 2), minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.fx-fila:last-child { margin-bottom: 0; }
.fx-fila > .fx-campo { margin-bottom: 0; }
.fx-fila.tres { --fx-cols: 3; }
.fx-ayuda { margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.fx-enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-texto, var(--primary));
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.fx-enlace[hidden] { display: none; }

/* Mensajes del proceso ("Generando PDF…", errores): arriba, donde se ven. */
.fx-estado { margin: 0 0 4px; color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.fx-estado:empty { display: none; }
.fx-estado a { color: var(--primary-texto, var(--primary)); }

/* ── Campos ──────────────────────────────────────────────────────────────
   Mandan sobre las reglas viejas de rotulos.css (44 px de alto, textareas de
   92 px), que además alcanzaban a las casillas y las dejaban como cuadros de
   44 px con el texto partido en "Nom-bre". :is() toma la especificidad del id. */
:is(#rotulos-module-container, #entregas-module-container) .fx-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px;
  min-height: 40px !important;
  padding: 8px 11px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  outline: 0 !important;
  background: var(--input-bg) !important;
  color: var(--text-main) !important;
  -webkit-text-fill-color: var(--text-main) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: .875rem!important;
}
:is(#rotulos-module-container, #entregas-module-container) .fx-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) { height: 40px !important; }
/* Los de varias líneas crecen con su texto (antes quedaban en 40 px y el
   segundo renglón, p. ej. el nombre largo del centro en Libro de registro,
   salía cortado a la mitad). Con !important: la regla de arriba pesa más por
   el :not() de su :is() y fijaba 40 px también a los textarea. */
:is(#rotulos-module-container, #entregas-module-container) .fx-form :is(textarea, textarea.rotulo-auto-grow) {
  height: auto !important;
  min-height: 64px !important;
  line-height: 1.4 !important;
  resize: vertical !important;
}
:is(#rotulos-module-container, #entregas-module-container) .fx-form textarea.rotulo-auto-grow:not(.is-description) { min-height: 40px !important; }
:is(#rotulos-module-container, #entregas-module-container) .fx-form :is(input, select, textarea):focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
:is(#rotulos-module-container, #entregas-module-container) .fx-form input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

/* Casillas en una sola línea (columnas de la lista de asistencia). */
.fx-casillas { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-casilla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-main);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.fx-casilla:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: var(--primary-soft); }
.fx-casilla.es-fija { cursor: default; opacity: .65; }

/* Opciones excluyentes en fila (tipo de entrega). */
.fx-segmentos { display: grid; grid-template-columns: repeat(var(--fx-cols, 4), minmax(0, 1fr)); gap: 6px; }
.fx-segmentos button {
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.fx-segmentos button.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-texto, var(--primary)); }

/* Zona para subir los PDF de SACE. */
.fx-subir {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.fx-subir:hover { background: var(--primary-soft); }
.fx-subir svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-subir span { display: grid; gap: 2px; min-width: 0; }
.fx-subir strong { color: var(--text-main); font-size: .8125rem; }
.fx-subir small { color: var(--text-muted); font-size: .75rem; }

/* Cifras cortas en una fila. */
.fx-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fx-cifras div { display: grid; gap: 2px; }
.fx-cifras small { color: var(--text-muted); font-size: .75rem; }
.fx-cifras strong { color: var(--text-main); font-size: 1.25rem; line-height: 1.2; }

/* Filas de una lista (secciones detectadas). */
.fx-lista { display: grid; }
.fx-lista > * { padding: 10px 0; border-top: 1px solid var(--border); }
.fx-lista > *:first-child { border-top: 0; padding-top: 0; }
.fx-item-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fx-item-cabeza strong { display: block; color: var(--text-main); font-size: .8125rem; }
.fx-item-cabeza small { display: block; margin-top: 2px; color: var(--text-muted); font-size: .75rem; }
.fx-item-cabeza button { padding: 0 2px; border: 0; background: none; color: var(--text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.fx-item-cabeza button:hover { color: var(--danger, #b42318); }

/* Guía plegable ("Cómo llenar cada cuadro"): una línea hasta que se abre. */
.fx-form .rotulos-guide { margin: 12px 0 0; border: 0; border-radius: 0; background: none; }
.fx-form .rotulos-guide summary { display: inline-flex; gap: 6px; padding: 0; color: var(--primary-texto, var(--primary)); font-size: .75rem; font-weight: 600; }
.fx-form .rotulos-guide summary > span,
.fx-form .rotulos-guide summary small { display: none; }
.fx-form .rotulos-guide summary strong { font-size: inherit; }
.fx-form .rotulos-guide[open] summary { border: 0; }
.fx-form .rotulos-guide-body { padding: 10px 0 0; }

/* Cada rótulo de la hoja es un grupo más, no una tarjeta dentro de otra. */
.fx-form .rotulo-form { padding: 16px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.fx-form .rotulo-form h4 { margin: 0 0 12px; }

/* ── Columna del resultado ─────────────────────────────────────────────── */
.fx-hoja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.fx-hoja-cabeza strong { color: var(--text-main); font-size: .82rem; }
.fx-hoja-cabeza span,
.fx-nota { margin: 0; color: var(--text-muted); font-size: .74rem; }
.fx-mesa {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  overflow: auto;
}
.fx-mesa.es-pdf { padding: 0; overflow: hidden; }
.fx-mesa iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: var(--radius-md); background: #fff; }
@media (max-width: 999.98px) {
  .fx-mesa { flex: none; }
  .fx-mesa.es-pdf { height: 72vh; }
}

/* Lo que se ve antes de subir los documentos. */
.fx-vacio {
  display: grid;
  place-content: center;
  gap: 8px;
  max-width: 420px;
  margin: auto;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: center;
}
.fx-vacio strong { color: var(--text-main); font-size: 1rem; }

/* ── Acciones en la barra superior ─────────────────────────────────────── */
.fx-accion { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fx-accion svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fx-accion:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 700px) {
  /* En el teléfono queda el icono; el nombre sigue en title y aria-label. */
  .fx-accion span { display: none; }
  .fx-accion { padding-inline: 10px; }
}

/* ── Menú de formatos ──────────────────────────────────────────────────── */
.fx-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 1180px; }
.fx-menu button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.fx-menu button:hover,
.fx-menu button:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: 0; }
.fx-menu button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-texto, var(--primary)); }
.fx-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-menu strong { font-size: .875rem; }
.fx-menu small { color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
@media (max-width: 1100px) { .fx-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .fx-menu { grid-template-columns: minmax(0, 1fr); }
  .fx-fila.tres { --fx-cols: 1; }
  .fx-segmentos { --fx-cols: 2; }
}

/* ── Restos de los diseños anteriores ──────────────────────────────────── */
.fx-mesa.rotulos-paper-wrap,
.fx-mesa.la-preview-wrap { border: 0; }
.fx-form .la-code { margin-top: 4px; }
.fx-form .ea-section { background: none; border-bottom: 0; }
.fx-form .ea-section-teacher { display: grid; gap: 6px; margin-top: 10px; }
.fx-form .ea-students { margin-top: 10px; padding: 8px 10px; background: transparent; }
.fx-form .ea-date span { font-size: .75rem; font-weight: 600; }
.mx-fx .mx-confirm { margin: 0; padding: 12px; }
.mx-fx .mx-review-list { max-height: none; padding: 0; overflow: visible; }
.mx-fx .mx-review-list label { grid-template-columns: minmax(0, 1fr) 150px; padding: 6px 0; font-size: .8125rem; }
.mx-fx .mx-review-list select { height: 34px; padding: 4px 10px; }
.mx-fx .mx-review-group-head { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 0; background: var(--bg-main); }
.fx-hoja-cabeza .la-att-summary { display: inline; margin: 0; padding: 0; border: 0; background: none; }
.fx-form .rotulo-form h4.fx-grupo-titulo { color: var(--text-muted); }