/* ==========================================================================
   Gadget 01 — Generador de evaluaciones
   ========================================================================== */

:root {
  /* Las fija el JS segun el tipo de hoja y los margenes elegidos en Opciones */
  --hoja-ancho:  794px;   /* A4: 210 mm a 96 dpi */
  --hoja-alto:  1123px;   /* A4: 297 mm a 96 dpi */
  --hoja-margen:  76px;   /* 2 cm */
  --alt-columnas: 1;

  --carril: 306px;
  --topbar:  74px;

  /* Ancho de la columna de etiquetas del formulario de creacion: las de arriba
     y las de abajo lo comparten para que los dos puntos queden alineados. */
  --etiqueta: 124px;
}

body { background: var(--fondo); }

/* La cinta de maqueta vive en assets/base.css: es la misma en todos. */

/* --- Pantalla 1: crear --------------------------------------------------- */
.pantalla { display: block; }

/* La altura no se fuerza: arriba viven la cinta de maqueta, la cabecera de
   WebClass y las migas, y calcular su alto a mano solo produce una barra de
   scroll de sobra. */
#pantalla-crear { padding: 26px 30px 60px; }

/* El titulo del gadget va FUERA de la tarjeta, como los titulos de pantalla
   del producto. Dentro quedaba compitiendo con el nombre del recurso. */
.crear-gadget {
  display: flex; align-items: center; gap: 12px;
  font-size: 25px; margin: 0 0 18px; letter-spacing: -.015em;
}
.icono-doc { color: var(--azul-icono); display: flex; }

.crear-caja {
  width: 100%;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra);
  padding: 26px 30px 30px;
}

/* «Nombre:» comparte columna con las etiquetas de abajo: los dos puntos
   quedan alineados, como en el formulario del producto. */
.crear-titulo {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
}
.crear-titulo > label {
  flex: 0 0 var(--etiqueta); text-align: right;
  font-size: 13.5px; color: var(--texto-medio); cursor: text;
}
.crear-nombre {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 21px; font-weight: 700; color: var(--texto);
  border: none; border-bottom: 2px solid #e3e8ef;
  padding: 2px 4px; background: none;
}
.crear-nombre:hover { border-bottom-color: var(--borde-fuerte); }
.crear-nombre:focus { outline: none; border-bottom-color: var(--azul); }
.crear-nombre::placeholder { color: #9aa4b2; font-weight: 400; }

/* Los selectores van en UNA fila, con la etiqueta a la izquierda de cada uno,
   igual que en «Crear evaluación» del producto. */
.crear-contexto {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px 26px; margin-bottom: 26px;
  padding-bottom: 22px; border-bottom: 1px solid var(--borde);
}
.crear-contexto .campo { flex-direction: row; align-items: center; gap: 12px; }
.crear-contexto .campo > span {
  flex: 0 0 auto; max-width: var(--etiqueta); text-align: right;
  font-weight: 400; font-size: 13.5px; color: var(--texto-medio);
}
.crear-contexto .campo > select,
.crear-contexto .campo > input { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .crear-contexto { grid-template-columns: 1fr; }
  :root { --etiqueta: 86px; }
  #pantalla-crear { padding: 20px 16px 50px; }
}

/* Campos en capsula, como los de «Crear evaluación» del producto. El textarea
   es la excepcion: una caja de varias lineas con esquinas redondas completas
   se ve rara, y en WebClass tampoco la tiene. */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--texto-medio); }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 14px; color: var(--texto);
  padding: 9px 18px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-capsula);
  background: #fff; width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave);
}
.campo textarea { resize: vertical; border-radius: var(--r); padding: 10px 14px; }
.campo-ancho { grid-column: 1 / -1; }

/* --- Cargar desde PDF o imagen ------------------------------------------- */
.rec-reja { display: grid; grid-template-columns: 1fr 250px; gap: 18px; }
@media (max-width: 760px) { .rec-reja { grid-template-columns: 1fr; } }

.rec-soltar {
  padding: 34px 20px; text-align: center;
  border: 2px dashed var(--borde-fuerte); border-radius: var(--r);
  background: var(--fondo); color: var(--texto-medio); font-size: 13.5px;
}
.rec-soltar.encima { border-color: var(--naranja); background: var(--naranja-suave); }
.rec-soltar b { display: block; font-size: 15px; color: var(--texto); margin-bottom: 4px; }

.rec-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 8px; font-size: 13px; color: var(--texto-medio);
}
.rec-nav .btn { padding: 5px 10px; font-size: 13px; }

.rec-doc {
  position: relative; display: inline-block; line-height: 0;
  max-height: none; overflow: auto;
  /* Antes eran 62vh fijos. Ahora el modal ocupa el 90% de la pantalla y el
     documento se lleva el alto que sobra: es el trabajo, no un detalle. */
  flex: 1; min-height: 0; align-self: stretch;
  border: 1px solid var(--borde); border-radius: var(--r-chico);
  background: #fff; cursor: crosshair;
  user-select: none; touch-action: none;
}
.rec-doc img { display: block; max-width: 100%; }
.rec-marco {
  position: absolute; border: 2px solid var(--naranja);
  background: rgba(244,121,78,.16); border-radius: 2px; pointer-events: none;
}
.rec-marco span {
  position: absolute; top: -9px; left: -9px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--naranja); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 19px; text-align: center;
}
.rec-banda { position: absolute; border: 2px dashed var(--naranja); background: rgba(244,121,78,.1); pointer-events: none; }

.rec-panel h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave); margin: 0 0 8px; }
.rec-lista { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; }
.rec-item {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid var(--borde); border-radius: var(--r-chico); padding: 7px;
}
.rec-item img { width: 74px; border: 1px solid var(--borde); border-radius: 3px; }
.rec-item div { flex: 1; font-size: 11.5px; color: var(--texto-suave); }
.rec-item b { display: block; font-size: 12.5px; color: var(--texto); }
.rec-quitar { background: none; border: none; cursor: pointer; color: var(--texto-suave); font-size: 15px; padding: 0 3px; }
.rec-quitar:hover { color: var(--rojo); }
.rec-vacio { font-size: 12.5px; color: var(--texto-suave); padding: 14px 0; }
.rec-progreso { padding: 16px 0; font-size: 13px; color: var(--texto-medio); }
.rec-progreso b { display: block; margin-bottom: 9px; color: var(--texto); font-size: 13.5px; }
.rec-ayuda { font-size: 12.5px; color: var(--texto-medio); margin: 0 0 10px; }
.rec-ayuda b { color: var(--texto); }


/* --- Digitalizar un PDF completo: progreso y revision -------------------- */
.pdfc-progreso {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 40px 20px; font-size: 13px; color: var(--texto-medio);
}
.pdfc-progreso b { font-size: 14.5px; color: var(--texto); }
.pdfc-progreso .giro { border-color: var(--azul); border-top-color: transparent; width: 22px; height: 22px; }
.pdfc-barra { width: 260px; max-width: 100%; height: 5px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.pdfc-barra i { display: block; height: 100%; background: var(--azul); transition: width .25s; }

.pdfc-alerta {
  border: 1px solid var(--naranja); background: var(--naranja-suave);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px;
  font-size: 13px; color: var(--naranja-oscuro);
}
.pdfc-alerta b { color: var(--texto); font-size: 13.5px; }
.pdfc-alerta p { margin: 6px 0 0; }
.pdfc-caminos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pdfc-nota { font-size: 12px; line-height: 1.55; margin-top: 12px !important; }
/* Avance del reconocimiento. Sin barra, treinta paginas se sienten colgadas. */
.ocr-barra { height: 6px; border-radius: 999px; background: rgba(0,0,0,.09); margin-top: 10px; overflow: hidden; }
.ocr-barra > i { display: block; height: 100%; background: var(--naranja); transition: width .3s; }
.pdfc-alerta .btn { margin-top: 12px; }
.pdfc-clave { border-color: #e2c3cd; background: var(--rojo-suave); color: var(--rojo); }

.pdfc-resumen {
  display: flex; flex-wrap: wrap; gap: 26px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--borde);
}

.pdfc-acciones { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pdfc-acciones .btn { padding: 4px 9px; font-size: 12.5px; }
.pdfc-cuenta { margin-left: auto; font-size: 12.5px; color: var(--texto-suave); font-weight: 700; }

.pdfc-lista { display: flex; flex-direction: column; gap: 9px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.pdfc-item {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--borde); border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--r-chico); background: #fbfcfe; padding: 11px 13px;
  transition: background .15s, border-color .15s;
}
.pdfc-item.elegida { background: #fff; border-left-color: var(--azul); }
.pdfc-item:hover { border-color: var(--borde-fuerte); }
.pdfc-item > input { margin-top: 3px; flex: 0 0 auto; }
.pdfc-cuerpo { flex: 1; min-width: 0; }
.pdfc-cab { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.pdfc-cab b { font-size: 13.5px; }
.pdfc-enunciado { font-size: 13px; color: var(--texto-medio); line-height: 1.5; }
.pdfc-fig {
  display: block; max-width: 210px; margin: 7px 0;
  border: 1px solid var(--borde); border-radius: 3px; background: #fff;
}
.pdfc-alts { margin: 7px 0 0; padding-left: 2px; list-style: none; font-size: 12.5px; color: var(--texto-medio); }
.pdfc-alts li { margin-bottom: 2px; }
.pdfc-alts b { color: var(--azul-oscuro); margin-right: 3px; }
.pdfc-avisos {
  margin: 8px 0 0; font-size: 11.5px; color: var(--naranja-oscuro);
  background: var(--naranja-suave); border-radius: 4px; padding: 4px 8px; display: inline-block;
}
.pdfc-avisos b { color: var(--naranja-oscuro); }

/* El recorte que queda dentro del enunciado. Va en linea por lo mismo que la
   imagen generada: para que la alineacion del bloque la mueva. */
.recorte-img {
  display: inline-block; vertical-align: top; max-width: 100%;
  border: 1px solid #c9d2de; border-radius: 3px;
}
/* La que sube el profesor. Sin borde: puede ser una foto, y el marco la
   ensuciaria en el papel. */
.img-subida { display: inline-block; vertical-align: top; max-width: 100%; height: auto; }

/* Fila de la clave: no se imprime, porque las alternativas ya van en la imagen */
.clave {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 2px; padding: 5px 9px;
  background: #f4f7fb; border: 1px dashed #c3cddb; border-radius: 5px;
}
.clave-rotulo { font-size: 11px; font-weight: 700; color: #5b6676; }
.clave-letras {
  display: flex; gap: 7px; margin: 0; padding: 0;
  column-count: 1 !important;
}
.clave-letras .alt { padding: 0; }
.clave-letras .alt:hover { background: none; }
/* La clave se ve siempre marcada, aunque «marcar respuesta correcta» este
   apagado: es el unico lugar donde se define y no se imprime igual. */
.clave-letras .alt.correcta .alt-letra {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
.clave-n {
  font-family: inherit; font-size: 11px; color: #4a5563;
  border: 1px solid #c3cddb; border-radius: 4px; background: #fff;
  padding: 2px 4px; margin-left: auto;
}
.clave-btn {
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--azul-oscuro);
  border: 1px solid #c3cddb; border-radius: 4px; background: #fff;
  padding: 2px 7px; cursor: pointer;
}
.clave-btn:hover { background: var(--azul-suave); border-color: var(--azul); }


/* ==========================================================================
   Tipos de pregunta: varias correctas, pareados, respuesta corta, V/F + just.
   ========================================================================== */

/* --- Seleccion multiple con varias correctas ----------------------------- */
/* El cuadrado en vez del circulo avisa, antes de leer nada, que se puede
   marcar mas de una. */
.alternativas.multi .alt-letra { border-radius: 4px; }
.alt-pct { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; flex: 0 0 auto; }
.alt-pct input {
  width: 46px; font-family: inherit; font-size: 11px; text-align: right;
  border: 1px solid #c3cddb; border-radius: 4px; background: #fff; padding: 1px 3px; color: #3b4655;
}
.alt-pct input:focus { outline: none; border-color: var(--azul); background: #fffbe9; }
.alt-pct i { font-style: normal; font-size: 10px; color: #8d99a8; }
.alt-suma {
  font-size: 11px; color: #5b6676; margin: 4px 0 0; padding-left: 14px;
}
.alt-suma.mal { color: var(--rojo); font-weight: 700; }
.alt-suma b { color: inherit; }

/* --- Terminos pareados ---------------------------------------------------- */
.pareados { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; margin: 10px 0 0; }
.par-col { min-width: 0; }
.par-cab {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #5b6676; border-bottom: 1px solid #d7dee8; padding-bottom: 3px; margin-bottom: 6px;
}
.par-fila { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.par-fila > .asa { opacity: 0; flex: 0 0 auto; }
.par-fila:hover > .asa { opacity: .55; }
/* La casilla donde el alumno escribe la letra de la columna B */
.par-caja {
  flex: 0 0 26px; height: 17px; align-self: center;
  border: 1px solid #8d99a8; border-radius: 3px;
}
.par-n, .par-letra { flex: 0 0 auto; font-weight: 700; color: #3b4655; }
.par-texto { flex: 1; min-width: 0; outline: none; border-radius: 3px; padding: 0 2px; }
.par-texto:focus { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }
.par-texto:empty::before { content: attr(data-vacio); color: #aab3bf; font-style: italic; }
.par-quitar {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: #c3cddb; font-size: 14px; line-height: 1; padding: 0 2px;
}
.par-fila:hover .par-quitar { color: #8d99a8; }
.par-quitar:hover { color: var(--rojo); }
.par-clave { font-size: 11.5px; font-weight: 700; color: #3b4655; letter-spacing: .04em; }
.par-clave-sueltos { font-style: normal; font-weight: 600; color: #8d99a8; }
/* El distractor se marca SOLO en pantalla: en el papel es una opcion mas de la
   columna B, indistinguible del resto. Por eso lleva `no-imprimir` en el HTML. */
.par-suelto {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #9a7b18; background: #fdf3d4;
  border-radius: var(--r-capsula); padding: 1px 7px; align-self: center;
}
.par-fila-suelta .par-texto:empty::before { color: #c0ab72; }

/* --- Rubrica de las preguntas de desarrollo -------------------------------
   No vive en la hoja: la hoja es lo que se imprime. Se edita en un modal que
   se abre desde el carril lateral, y solo baja al papel en la pauta. */
.rubrica-modal { font-size: 13px; }
.rubrica-suma { margin: 0 0 10px; font-size: 12.5px; color: #3b4655; }
.rubrica-suma.mal { color: var(--rojo); }
.rub-sin { font-size: 13.5px; line-height: 1.6; color: var(--texto-medio); }

/* Con cuatro o cinco niveles la tabla no cabe: se desplaza sola, sin arrastrar
   el modal entero con ella. */
.rubrica-marco { overflow-x: auto; }
.rubrica-tabla { width: 100%; border-collapse: collapse; font-size: 11px; }
.rubrica-tabla th, .rubrica-tabla td {
  border: 1px solid #d7dee7; padding: 4px 6px; vertical-align: top; text-align: left;
  background: #fff;
}
.rub-th-crit { width: 21%; }
.rub-th-pts  { width: 42px; text-align: center; }
/* Va calificado con .rubrica-tabla a proposito: el `border` de la regla de
   arriba tiene mas especificidad y le ganaba al grosor de la franja. */
.rubrica-tabla .rub-th-nivel {
  border-top-width: 3px; border-top-style: solid; min-width: 118px; position: relative;
}
.rub-nivel-nombre { display: block; font-weight: 700; color: #2b3442; outline: none; border-radius: 3px; }
.rub-nivel-pct { display: inline-flex; align-items: center; gap: 2px; font-weight: 400; color: var(--texto-suave); }
.rub-nivel-pct input {
  width: 42px; border: 1px solid transparent; background: none; border-radius: 3px;
  font: inherit; color: inherit; text-align: right; padding: 0 2px;
}
.rub-nivel-pct input:hover { border-color: var(--borde); background: #fff; }
.rub-nivel-pct input:focus { outline: none; border-color: var(--azul); background: #fffbe9; }
.rub-crit { position: relative; }
.rub-crit-texto { display: block; outline: none; border-radius: 3px; font-weight: 700; color: #2b3442; }
.rub-pts { text-align: center; }
.rub-pts input {
  width: 34px; border: 1px solid transparent; background: none; border-radius: 3px;
  font: inherit; text-align: center; padding: 1px;
}
.rub-pts input:hover { border-color: var(--borde); background: #fff; }
.rub-pts input:focus { outline: none; border-color: var(--azul); background: #fffbe9; }
.rub-celda > span { display: block; outline: none; border-radius: 3px; color: #47535f; }
.rub-celda > span:focus, .rub-crit-texto:focus, .rub-nivel-nombre:focus { background: #fffbe9; }
.rub-celda > span:empty::before, .rub-crit-texto:empty::before, .rub-nivel-nombre:empty::before {
  content: attr(data-vacio); color: #aab3bf; font-style: italic; font-weight: 400;
}
.rub-celda-pts { display: block; margin-top: 2px; font-size: 9.5px; color: #93a0af; font-weight: 700; }
.rub-quitar {
  position: absolute; top: 2px; right: 2px;
  background: none; border: none; cursor: pointer; opacity: 0;
  color: #8d99a8; font-size: 13px; line-height: 1; padding: 0 2px;
}
.rubrica-tabla th:hover .rub-quitar { opacity: 1; }
.rub-quitar:hover { color: var(--rojo); }
.rubrica-pie { margin: 8px 0 0; font-size: 11.5px; color: var(--texto-suave); }

/* La version que baja al papel de la pauta: sin campos ni botones. */
.rubrica-impresa { margin: 10px 0 0; break-inside: avoid; page-break-inside: avoid; }
.rubrica-impresa-rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #5b6676; margin-bottom: 3px;
}
.rubrica-impresa .rub-th-nivel i { font-style: normal; font-weight: 400; color: #6b7684; }
.rubrica-impresa .rub-celda-pts { color: #6b7684; }

/* --- Respuesta corta ------------------------------------------------------ */
.corta-raya { margin: 10px 0 0; padding-left: 14px; }
.corta-raya i { display: block; height: 21px; border-bottom: 1px solid #ccd4de; max-width: 320px; }
.corta-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.corta-item {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fff; border: 1px solid #c3cddb; border-radius: 4px; padding: 1px 4px 1px 7px;
}
.corta-texto { min-width: 74px; font-size: 11.5px; outline: none; }
.corta-texto:focus { background: #fffbe9; }
.corta-texto:empty::before { content: attr(data-vacio); color: #aab3bf; font-style: italic; }
.corta-pct {
  width: 42px; font-family: inherit; font-size: 10.5px; text-align: right;
  border: none; border-left: 1px solid #e3e8ef; background: none; color: #5b6676; padding: 1px 2px;
}
.corta-pct:focus { outline: none; background: #fffbe9; }
.corta-item > i { font-style: normal; font-size: 10px; color: #8d99a8; }
.corta-quitar { background: none; border: none; cursor: pointer; color: #c3cddb; font-size: 13px; padding: 0 1px; }
.corta-quitar:hover { color: var(--rojo); }
.corta-mas {
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--azul-oscuro);
  border: 1px dashed #c3cddb; border-radius: 4px; background: none; padding: 2px 8px; cursor: pointer;
}
.corta-mas:hover { background: var(--azul-suave); border-style: solid; }

/* --- V/F con justificacion ------------------------------------------------ */
.justificacion { margin-top: 8px; }
.just-rotulo { font-size: 11px; font-weight: 700; color: #5b6676; }

@media (max-width: 620px) {
  .pareados { grid-template-columns: 1fr; }
}

.crear-pregunta { font-size: 15px; color: var(--texto-medio); margin: 0 0 16px; }

/* --- Los caminos de creacion, en FILAS agrupadas -------------------------
   Eran cuatro tarjetas de colores en una fila. Gerencia las rechazo por la
   diagramacion, y tenian ademas un problema de fondo: presentaban como
   equivalentes cosas que no lo son —dos parten de una hoja en blanco o de un
   archivo que el profesor ya tiene, y dos parten del curriculo— con un color
   por tarjeta que no significaba nada.

   Ahora son filas a lo ancho, en dos grupos con su rotulo, sin iconos y sin
   fondo de color. El unico color es el azul de accion del producto, y aparece
   al pasar por encima. */
.crear-opciones { display: grid; gap: 22px; }
.crear-grupo-rotulo {
  margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave);
}
/* Las filas comparten un solo recuadro: la linea entre ellas las separa sin
   convertir cada una en una caja suelta. */
.crear-filas {
  border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; background: #fff;
}
.opcion {
  position: relative;
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 15px 18px; text-align: left;
  border: none; border-top: 1px solid var(--borde); background: none;
  font-family: inherit; cursor: pointer;
  transition: background .13s;
}
.crear-filas .opcion:first-child { border-top: none; }
.opcion:hover, .opcion:focus-visible { background: var(--azul-suave); outline: none; }
.opcion-cuerpo { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.opcion-titulo { font-size: 14.5px; font-weight: 700; color: var(--texto); }
.opcion-texto  { font-size: 13px; line-height: 1.5; color: var(--texto-suave); }
.opcion:hover .opcion-titulo, .opcion:focus-visible .opcion-titulo { color: var(--azul-oscuro); }
.opcion-costo {
  flex: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 9px; border-radius: var(--r-capsula);
  background: var(--naranja-suave); color: var(--naranja-oscuro);
}
/* «Comenzar →» dice que la fila ES la accion: sin eso, una fila con un titulo y
   una bajada se lee como un parrafo y nadie le hace clic. */
.opcion-ir {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--azul);
}
.opcion-ir i { font-style: normal; transition: transform .13s; }
.opcion:hover .opcion-ir i { transform: translateX(3px); }
/* El camino elegido queda marcado mientras su panel esta abierto abajo. */
.opcion.elegida { background: var(--azul-suave); }
.opcion.elegida .opcion-titulo { color: var(--azul-oscuro); }
.opcion.elegida::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--azul);
}

/* En pantalla angosta la fila se apila: el texto completo manda sobre tenerlo
   todo en una linea. */
@media (max-width: 680px) {
  .opcion { flex-wrap: wrap; }
  .opcion-cuerpo { flex: 1 1 100%; }
}

.crear-detalle {
  margin-top: 22px; padding: 18px 20px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--r);
  font-size: 14px; color: var(--texto-medio);
}
.crear-detalle h4 { font-size: 14.5px; color: var(--texto); margin-bottom: 8px; }
.crear-detalle ul { margin: 8px 0 0; padding-left: 20px; }
.crear-detalle li { margin-bottom: 4px; }
.zona-soltar {
  margin-top: 12px; padding: 26px; text-align: center;
  border: 2px dashed var(--borde-fuerte); border-radius: var(--r);
  background: #fff; color: var(--texto-suave); font-size: 13.5px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.zona-soltar:hover, .zona-soltar.encima { border-color: var(--azul); background: var(--azul-suave); }
.zona-soltar.cargada { border-style: solid; border-color: var(--verde); background: var(--verde-suave); color: #1f9b76; }
.zona-soltar.cargada b { color: #17805f; font-size: 14.5px; }


@media (max-width: 560px) { .crear-caja { padding: 22px 18px; } }


/* --- Topbar del editor --------------------------------------------------- */
/* Una sola fila: nombre a la izquierda, pestañas y acciones al centro,
   guardar a la derecha. No hay segunda linea de menu. */
.topbar {
  position: sticky; top: 34px; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 22px;
  background: #fff; border-bottom: 1px solid var(--borde);
  min-height: var(--topbar);
}
/* El nombre de la evaluacion ya NO va en la barra: se edita sobre la hoja
   (.he-titulo contentEditable). La barra izquierda solo lleva el icono del doc. */
.topbar-izq { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; min-width: 0; }

/* Pestañas y acciones comparten linea. El separador marca la diferencia:
   a la izquierda se cambia de vista, a la derecha se abre un cajon. */
/* Ocupa el centro: sin el nombre a la izquierda, la barra tiene espacio de sobra. */
.barra-central { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.barra-sep { width: 1px; height: 20px; background: var(--borde); margin: 0 5px; flex: 0 0 auto; }

.menu-item {
  font-family: inherit; font-size: 13px; color: var(--texto-medio);
  background: none; border: none; cursor: pointer; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px;
}
.menu-item:hover { background: #eef1f6; color: var(--texto); }
.menu-item.activo { background: #eef1f6; color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde-fuerte); }
/* La IA no existe en WebClass hoy, asi que no hereda su azul: se distingue con
   un violeta propio para que no se confunda con una pestaña seleccionada. */
.menu-ia { color: #6f5bd0; font-weight: 600; background: #f1eefc; }
.menu-ia:hover { background: #e7e2fa; color: #5b48b8; }
.menu-ia.activo { background: #6f5bd0; color: #fff; }

.pestanas { display: flex; gap: 3px; }
.pestana {
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--texto-medio);
  background: none; border: none; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
}
.pestana:hover { background: #eef1f6; }
/* Activa: capsula azul llena y blanco encima, como el item activo del menu
   lateral de WebClass. */
.pestana.activa { background: var(--azul); color: #fff; }
.pestana.activa:hover { background: var(--azul-oscuro); }

.topbar-der { display: flex; align-items: center; gap: 11px; }
.resumen { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; }

.marcador { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.marcador-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--borde); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.marcador.completo { color: #1f9b76; }
.marcador.completo .marcador-check { background: var(--verde); }

.icono-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: none; cursor: pointer;
  color: var(--texto-suave); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icono-btn:hover { background: #eef1f6; color: var(--texto); }

.btn-guardar, .btn-descargar { border-radius: 999px; padding: 8px 18px; }

/* Descargar apagado hasta que la prueba este guardada. No se usa `disabled`:
   un boton muerto no explica por que no funciona, y este si lo explica. */
.btn-descargar.sin-guardar { color: var(--texto-suave); border-color: var(--borde); }
.btn-descargar.sin-guardar:hover { background: #eef1f6; }

/* Punto en Guardar mientras haya cambios sin guardar */
.btn-guardar.sucio::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; opacity: .9; margin-left: 2px;
}

/* El resumen es lo primero que sobra cuando falta ancho: el menu del documento
   no debe partirse en dos lineas, porque le come alto a la hoja. */
/* El ancho disponible NO es el de la ventana: el menu lateral se lleva 296px.
   Por eso cada umbral viene en dos versiones, con el lateral abierto y sin el.
   Es menos elegante que una container query, pero no obliga a poner
   `contain` sobre la columna principal, que romperia el posicionamiento de
   los cajones y los modales que viven adentro. */
@media (max-width: 1620px) { .resumen { display: none; } }
.wc-app:not(.plegado) .resumen { display: none; }
@media (min-width: 1900px) { .wc-app:not(.plegado) .resumen { display: inline; } }

/* Cuando ya no caben en una linea, pestañas y acciones bajan JUNTAS: separarlas
   volveria a inventar la segunda fila de menu que se acaba de eliminar. */
/* Sacado el nombre de la barra, lo que queda cabe en una linea hasta bastante
   angosto. Los umbrales bajaron en consecuencia: antes partian la barra en dos
   filas cuando ya no hacia falta. */
@media (max-width: 1000px) {
  .topbar { flex-wrap: wrap; }
  .barra-central { order: 3; width: 100%; flex: none; }
}
@media (max-width: 1290px) {
  .wc-app:not(.plegado) .topbar { flex-wrap: wrap; }
  .wc-app:not(.plegado) .barra-central { order: 3; width: 100%; flex: none; }
}


/* --- Zona hojas + carriles ----------------------------------------------- */
.panel-tab { padding: 28px 0 90px; }

.area { display: flex; justify-content: center; gap: 24px; padding: 0 22px; }
.hojas-envoltorio { flex: 0 0 auto; min-width: 0; }
.carriles { position: relative; flex: 0 0 var(--carril); }

.ficha-envoltorio { max-width: 900px; margin: 0 auto; padding: 0 22px; }

@media (max-width: 1240px) {
  .area { flex-direction: column; align-items: center; }
  .carriles { display: none; }
}
/* Con el lateral abierto la hoja y los carriles ya no caben juntos: se ocultan
   los carriles antes de que queden cortados por el borde. */
@media (max-width: 1540px) {
  .wc-app:not(.plegado) .carriles { display: none; }
}


/* --- LAS HOJAS (replica de impresion) ------------------------------------ */
#hojas { display: flex; flex-direction: column; align-items: center; gap: 28px; }

.hoja {
  position: relative;
  width: var(--hoja-ancho);
  min-height: var(--hoja-alto);
  max-width: 100%;
  padding: var(--hoja-margen);
  background: var(--papel);
  border-radius: 2px;
  box-shadow: var(--sombra-papel);
  /* Tipografia y cuerpo los fija Opciones; el pt es la unidad de la impresion */
  font-family: var(--hoja-fuente, var(--fuente-papel));
  font-size: var(--hoja-texto, 10pt);
  color: #1f2733;
  line-height: 1.5;
}

/* Numero de pagina: va impreso, asi que no lleva .no-imprimir */
.hoja-numero {
  position: absolute;
  left: var(--hoja-margen); right: var(--hoja-margen);
  bottom: calc(var(--hoja-margen) / 2.4);
  text-align: center;
  font-size: 10px; color: #8d99a8;
}

/* Rotulo entre hojas: refuerza que son papeles distintos */
.rotulo-hoja {
  display: flex; align-items: center; gap: 10px;
  width: var(--hoja-ancho); max-width: 100%;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #e08a67;
}
.rotulo-hoja::before, .rotulo-hoja::after {
  content: ''; flex: 1; height: 1px; background: #f2c3b0;
}

.hoja-encabezado { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 12px; }
/* Los dos lados miden lo mismo para que el titulo quede centrado en la hoja,
   no entre la insignia y el borde. El derecho va vacio a proposito. */
.he-lado { display: flex; align-items: flex-start; gap: 9px; flex: 0 0 46px; }
.he-lado-der { justify-content: flex-end; }
.logo-colegio { display: flex; align-items: center; }
.he-centro { flex: 1; text-align: center; padding-top: 6px; }
.he-titulo { font-size: 15.5px; font-weight: 700; margin: 0; letter-spacing: -.005em; }
/* Editable en la hoja: se retoca viendo la tipografia con que se va a imprimir,
   que es justo lo que el campo de la barra no mostraba. */
.he-titulo[contenteditable] { border-radius: 5px; padding: 1px 6px; cursor: text; outline: none; transition: background .12s; }
.he-titulo[contenteditable]:hover { background: #f4f7fb; }
.he-titulo[contenteditable]:focus { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }
.he-titulo:empty::before { content: attr(data-vacio); color: #aab3bf; font-style: italic; font-weight: 400; }
@media print {
  .he-titulo[contenteditable]:hover, .he-titulo[contenteditable]:focus { background: none; box-shadow: none; }
  .he-titulo:empty::before { content: ''; }
}

/* Linea de datos bajo el titulo, opcional. Va mas chica y en gris: es
   informacion de contexto, no compite con el titulo ni con el puntaje de cada
   pregunta, que es el que el alumno si necesita ver. */
.he-datos { margin: 3px 0 0; font-size: 10px; color: #5b6673; letter-spacing: .01em; }

/* Ficha del alumno. En una fila, el rotulo va arriba de la casilla. */
.hoja-identificacion { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 18px; }
.hi-campo { display: flex; flex-direction: column; gap: 2px; }
.hi-campo > span { font-size: 10.5px; color: #4a5563; }
.hi-campo > i { display: block; height: 23px; border: 1px solid #8d99a8; border-radius: 3px; }
.hi-ancho { flex: 1; }
.hi-corto { flex: 0 0 100px; }
.hi-fila  { flex: 0 0 100%; }

/* La ficha se configura haciendo clic en ella: se marca como tocable en el
   editor, y en el papel no queda ni rastro de eso. */
.hoja-identificacion { border-radius: 5px; outline: none; }
.hoja-identificacion:hover,
.hoja-identificacion:focus-visible {
  box-shadow: 0 0 0 6px var(--azul-suave); background: var(--azul-suave); cursor: pointer;
}
.hi-vacio { font-size: 11.5px; color: var(--texto-suave); font-style: italic; }
@media print {
  .hoja-identificacion:hover { box-shadow: none; background: none; }
}

/* Con la casilla de fecha son cuatro campos: pasan a dos filas y el rotulo se
   va al costado izquierdo, que es como se llena una ficha en papel. */
.hi-dos-filas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.hi-dos-filas .hi-campo { flex-direction: row; align-items: center; gap: 7px; }
.hi-dos-filas .hi-campo > span { flex: 0 0 52px; text-align: right; }
.hi-dos-filas .hi-campo > i { flex: 1; }

.hoja-instrucciones {
  font-size: 12px; color: #3b4655;
  background: #f4f6f9; border-left: 3px solid #c3cddb;
  padding: 8px 12px; margin: 0 0 20px; border-radius: 0 4px 4px 0;
  outline: none;
}
.hoja-instrucciones:focus { background: #fffbe9; border-left-color: var(--naranja); }
.hoja-instrucciones[data-editar]:hover { background: #fffbe9; border-left-color: var(--naranja); }
/* Vacias no se imprimen, pero en el editor hay que poder volver a entrar:
   por eso el marcador de agua en vez de ocultarlas del todo. */
.hoja-instrucciones:empty::before {
  content: attr(data-vacio); color: #9aa5b4; font-style: italic;
}
@media print { .hoja-instrucciones:empty { display: none; } }

.preguntas { list-style: none; margin: 0; padding: 0; }

/* --- Recurso compartido por varias preguntas ------------------------------
   Es parte del documento impreso, no un adorno del editor: se calca lo que hace
   un ensayo SIMCE o PAES —el texto encuadrado, con su rotulo arriba— y despues
   vienen las preguntas numeradas como siempre. La barra de acciones no se
   imprime; el recuadro si. */
.recurso {
  margin: 4px 0 10px; padding: 11px 13px;
  border: 1px solid #ccd6e2; border-radius: 6px; background: #fbfcfe;
  break-inside: avoid; page-break-inside: avoid;
}
.rec-rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #47566a; margin-bottom: 7px;
}
.rec-texto {
  font-size: inherit; color: var(--texto); line-height: 1.6;
  border-radius: 4px; padding: 3px 5px; margin: 0 -5px; outline: none;
}
.rec-texto[data-editar] { cursor: text; transition: background .12s; }
.rec-texto[data-editar]:hover { background: #fffbe9; }
.rec-texto:focus { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }
.rec-texto:empty::before { content: attr(data-vacio); color: #9aa5b4; font-style: italic; }
.rec-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #dbe3ec;
}
.rec-nota { font-size: 10.5px; color: var(--texto-suave); line-height: 1.5; flex: 1 1 260px; }
.rec-acciones { display: flex; gap: 6px; flex: none; }
.rec-acciones button {
  border: 1px solid var(--borde-fuerte); background: #fff; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--texto-medio);
  padding: 3px 10px; border-radius: var(--r-capsula);
}
.rec-acciones button:hover { border-color: var(--azul); color: var(--azul-oscuro); background: var(--azul-suave); }
@media print { .recurso { background: none; } }

/* En el carril: a que texto pertenece la pregunta. */
.carril-recurso {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 11px; color: var(--texto-suave);
}
.carril-recurso select {
  flex: 1; min-width: 0; font: inherit; font-size: 11px; color: var(--texto-medio);
  border: 1px solid var(--borde); border-radius: var(--r-chico);
  padding: 3px 5px; background: #fff;
}
.carril-recurso.con-recurso { color: var(--azul-oscuro); }
.carril-recurso.con-recurso select { border-color: #bcd9ef; background: var(--azul-suave); color: var(--azul-oscuro); }

/* --- Una pregunta -------------------------------------------------------- */
.pregunta {
  position: relative;
  display: flex; gap: 9px;
  padding: 9px 6px 9px 0;
  margin: 0 0 6px;
  border-radius: 6px;
  transition: background .15s;
}
.pregunta:hover { background: #f8fafc; }
.pregunta.seleccionada { background: #f1f7fd; box-shadow: inset 0 0 0 1px #cfe3f6; }

.asa {
  flex: 0 0 18px; align-self: flex-start; margin-top: 1px;
  color: #c4ccd8; font-size: 14px; line-height: 1;
  cursor: grab; user-select: none; text-align: center;
  opacity: 0; transition: opacity .15s, color .15s;
}
.pregunta:hover > .asa, .alt:hover > .asa { opacity: 1; }
.asa:hover { color: var(--azul); }
.asa:active { cursor: grabbing; }

.preg-num { flex: 0 0 22px; text-align: right; font-weight: 700; font-size: 13.4px; }
.preg-cuerpo { flex: 1; min-width: 0; }

.enunciado { text-align: justify; outline: none; border-radius: 4px; padding: 1px 3px; }
.enunciado:focus { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }

/* Campos que ya no se escriben sobre la hoja sino en el modal del editor.
   Siguen viendose exactamente como se imprimen —esa es la gracia de la hoja—
   pero el cursor y el realce avisan que son clickeables. */
[data-editar] { cursor: text; }
[data-editar]:hover { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }
[data-editar]:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
[data-editar]:empty::before { content: attr(data-vacio); color: #aab3bf; font-style: italic; }
@media print { [data-editar]:hover { background: none; box-shadow: none; } }

.preg-puntaje {
  float: right; margin-left: 10px;
  font-size: 10.5px; font-weight: 700; color: #5b6676;
  border: 1px solid #c9d2de; border-radius: 3px;
  padding: 0 6px; line-height: 17px;
}

/* Alternativas */
.alternativas {
  list-style: none; margin: 7px 0 0; padding: 0 0 0 14px;
  column-count: var(--alt-columnas);
  column-gap: 26px;
}
.alt {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 3px 4px; border-radius: 5px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  transition: background .12s;
}
.alt:hover { background: #f2f6fa; }

.alt-letra {
  flex: 0 0 19px; height: 19px; margin-top: 1px;
  border: 1.3px solid #8d99a8; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #4a5563;
  cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.alt-letra:hover { border-color: var(--verde); color: #1f9b76; }
.mostrar-correcta .alt.correcta .alt-letra { background: var(--verde); border-color: var(--verde); color: #fff; }

.alt-texto { flex: 1; outline: none; border-radius: 4px; padding: 0 3px; }
.alt-texto:focus { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }

.alt-nota {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: #cbd3de; font-size: 13px; padding: 0 3px; line-height: 1;
}
.alt-nota:hover, .alt-nota.con-nota { color: var(--azul); }

/* Desarrollo: lineas para responder */
.lineas { margin: 10px 0 0; padding-left: 14px; }
.lineas i { display: block; height: 21px; border-bottom: 1px solid #ccd4de; }

/* Arrastre */
.hueco { border: 1.5px dashed var(--azul); background: var(--azul-suave); border-radius: 6px; margin: 0 0 6px; }
.arrastrando {
  box-shadow: 0 12px 28px rgba(60,72,88,.22) !important;
  background: #fff !important; opacity: .96; cursor: grabbing;
}

.hoja-vacia { text-align: center; color: var(--texto-suave); padding: 50px 20px 30px; }
.hoja-vacia p { margin: 0 0 4px; }
.hv-chico { font-size: 12.5px; }


/* --- Agregar pregunta (flotante, estilo Google Forms) -------------------- */
/* Encima de la barra fija (50): el alto del menú lo acota topeMenuAgregar()
   para que no llegue a ella, pero en una ventana muy baja es mejor que tape
   la barra a que la barra le tape los primeros tipos. Debajo de la cinta. */
.agregar-flotante {
  position: fixed; right: 26px; bottom: 26px; z-index: 55;
}
.agregar-boton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px 11px 12px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--azul); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(35,166,223,.42);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.agregar-boton:hover { background: var(--azul-oscuro); box-shadow: 0 9px 26px rgba(35,166,223,.52); transform: translateY(-1px); }
.agregar-boton:focus-visible { outline: 3px solid var(--azul-borde); outline-offset: 2px; }

.agregar-mas {
  width: 27px; height: 27px; flex: 0 0 27px;
  border-radius: 50%; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  transition: transform .2s;
}
.agregar-flotante.abierto .agregar-mas { transform: rotate(45deg); }
.agregar-texto { white-space: nowrap; }

.menu-flotante {
  position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 45;
  width: 340px; max-width: calc(100vw - 52px);
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: 0 12px 34px rgba(60,72,88,.24);
  padding: 7px;
  /* Los once items entran completos en una pantalla normal; el tope solo actua
     en ventanas muy bajas. Se descuenta el alto del boton flotante y su
     separacion, que es lo que el menu no puede invadir. */
  max-height: min(calc(100vh - 130px), 780px); overflow-y: auto;
}

/* En pantalla angosta el rotulo estorba: queda solo el circulo */
@media (max-width: 620px) {
  .agregar-flotante { right: 16px; bottom: 16px; }
  .agregar-texto { display: none; }
  .agregar-boton { padding: 11px; }
}
.mf-item {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  font-family: inherit; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 9px 10px; border-radius: var(--r-chico);
  color: var(--texto);
}
.mf-item:hover { background: var(--azul-suave); }
.mf-icono { font-size: 17px; line-height: 1.3; color: var(--azul); flex: 0 0 20px; }
/* Solo el <b> del titulo va en su propia linea. Sin el `>`, un <b> usado para
   destacar una palabra DENTRO del <small> heredaba display:block y partia la
   frase en tres lineas. */
.mf-item > span > b { display: block; font-size: 13.5px; }
.mf-item small { display: block; font-size: 11.5px; color: var(--texto-suave); }
.mf-item small b { color: var(--texto); }
.mf-separador { height: 1px; background: var(--borde); margin: 6px 8px; }
.mf-rotulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-suave); padding: 6px 10px 4px;
}



/* --- Carriles (tarjetas por pregunta) ------------------------------------ */
.carril {
  position: absolute; left: 0; right: 0;
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra);
  padding: 10px 12px;
  transition: top .18s ease;
}
.carril-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.marca {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--texto-suave);
  background: none; border: none; cursor: pointer; padding: 2px 0;
  font-family: inherit;
}
.marca:hover { color: var(--azul); }
.marca-punto {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--borde-fuerte);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
}
.marca.lista { color: var(--azul); font-weight: 600; }
.marca.lista .marca-punto { background: var(--azul); border-color: var(--azul); }

.carril-acciones { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.carril-bandera { background: none; border: none; cursor: pointer; color: #cbd3de; font-size: 14px; }
.carril-bandera:hover, .carril-bandera.activa { color: var(--naranja); }
/* Duplicar y eliminar aparecen al acercarse a la tarjeta: estan siempre, pero
   no compiten con los datos de la pregunta cuando uno solo esta leyendo. */
.carril-icono {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  color: #cbd3de; font-size: 13px; opacity: 0; transition: opacity .12s;
}
.carril:hover .carril-icono, .carril-icono:focus-visible { opacity: 1; }
.carril-icono:hover { color: var(--azul); }
.carril-borrar:hover { color: var(--rojo); }
.btn-peligro { background: var(--rojo); color: #fff; border: 1px solid var(--rojo); }
.btn-peligro:hover { filter: brightness(.93); }
/* Discreto a proposito: es una tranquilidad, no una accion. */
.dato-borrador { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; }
@media (max-width: 1400px) { .dato-borrador { display: none; } }

.carril-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.etiqueta {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--azul-suave); color: var(--azul-oscuro);
}
.etiqueta-gris { background: #eef1f6; color: var(--texto-suave); }
.etiqueta-azul { background: var(--azul-suave); color: #0d6d95; }
.etiqueta-ajena { background: #fdf3d4; color: #8a6d1e; }
/* Objetivo propio del colegio, fuera del catálogo. */
.etiqueta-propia { background: var(--c-verde); color: var(--c-verde-txt); }
/* «Trae su texto»: la pregunta del banco viene con su recurso compartido. */
.etiqueta-texto { background: #e7eef6; color: #3d5a7a; }

/* --- Generador de preguntas desde un OA ----------------------------------- */
.gp-fila { display: flex; gap: 10px; }
.gp-fila .gi-campo { flex: 1; }
.gp-ayuda { margin: -6px 0 12px; font-size: 12px; color: var(--texto-suave); line-height: 1.45; }
.gp-eje { margin: -6px 0 12px; font-size: 12px; color: var(--texto-medio); }
.gp-aviso {
  margin-top: 4px; font-size: 12.5px; line-height: 1.5;
  background: #f2f6fa; border-radius: var(--r-chico); padding: 8px 11px; color: var(--texto-medio);
}
.gp-aviso.mal { color: #9c2a1c; background: #fdecea; }

/* Cabecera de la ficha, con su accion a la derecha */
.ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ficha-cab h2 { margin: 0; }

/* --- Banco de items ------------------------------------------------------- */
.bk-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.bk-campo { flex: 1 1 150px; }
.bk-campo > span { display: block; font-size: 11.5px; font-weight: 700; color: #3b4655; margin-bottom: 3px; }
.bk-campo input, .bk-campo select {
  width: 100%; font: inherit; font-size: 13px;
  border: 1px solid var(--borde); border-radius: var(--r-capsula);
  padding: 6px 12px; background: #fff; color: var(--texto);
}
.bk-campo input:focus, .bk-campo select:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave);
}
/* El objetivo y el indicador son textos largos y son los filtros que de verdad
   se usan: se les da el ancho, y los cortos se aprietan. */
.bk-ancho { flex: 3 1 260px; }
.bk-medio { flex: 2 1 180px; }
.bk-corto { flex: 0 1 130px; }
.bk-limpiar {
  align-self: flex-end; margin-bottom: 1px;
  background: none; border: none; padding: 6px 4px;
  font: inherit; font-size: 12.5px; color: var(--azul);
  text-decoration: underline; cursor: pointer;
}
.bk-cuenta { font-size: 12px; color: var(--texto-suave); margin: 0 0 8px; }
.bk-lista { max-height: 46vh; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--r-chico); }
.bk-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-bottom: 1px solid var(--borde); cursor: pointer;
}
.bk-item:last-child { border-bottom: none; }
.bk-item:hover { background: #f7f9fb; }
.bk-item.elegido { background: var(--azul-suave); }
.bk-item input { margin-top: 2px; flex: 0 0 auto; }
.bk-cuerpo { flex: 1; min-width: 0; }
.bk-enunciado { display: block; font-size: 13px; color: var(--texto); line-height: 1.45; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* El dato que un banco tiene y una pregunta nueva no puede tener. */
.bk-uso { display: block; margin-top: 4px; font-size: 11px; color: var(--texto-suave); }
.bk-facil   { color: #2e9e6b; }
.bk-media   { color: #b8860b; }
.bk-dificil { color: var(--rojo); }
.etiqueta-falta { background: var(--rojo-suave); color: var(--rojo); }
.etiqueta-borrador {
  background: var(--c-rosa); color: var(--c-rosa-txt);
  border: none; cursor: pointer; font-family: inherit;
}
.etiqueta-borrador:hover { background: #fbdde3; }


/* --- Fichas (General / Especificaciones / Formas) ------------------------ */
.ficha {
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--r-grande); padding: 26px 30px 30px;
  box-shadow: var(--sombra);
}
.ficha h2 { font-size: 19px; }
.ficha-ayuda { color: var(--texto-medio); font-size: 13.5px; margin: 0 0 20px; }
.dato { display: flex; flex-direction: column; }
.dato b { font-size: 22px; line-height: 1.1; }
.dato span { font-size: 12px; color: var(--texto-suave); }

@media (max-width: 620px) { .ficha-grilla { grid-template-columns: 1fr; } }

table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); padding: 8px 10px; border-bottom: 2px solid var(--borde);
}
table.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.tabla tr:last-child td { border-bottom: none; }
table.tabla .num { text-align: right; white-space: nowrap; }
table.tabla tbody tr:hover { background: #fbfcfe; }
.fila-oa td { background: #f6f9fd; font-weight: 700; }
.fila-total td { border-top: 2px solid var(--borde); font-weight: 800; background: #fbfcfe; }
.fila-sin td { color: var(--naranja-oscuro); background: var(--naranja-suave); }

.barra-pct { height: 6px; border-radius: 3px; background: #eef1f6; overflow: hidden; min-width: 70px; }
.barra-pct i { display: block; height: 100%; background: var(--azul); }

.interruptor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--texto-medio); font-size: 13px; }
.interruptor input { accent-color: var(--azul); width: 15px; height: 15px; }



/* --- Cajones laterales --------------------------------------------------- */
.cajon-fondo { position: fixed; inset: 0; z-index: 70; background: rgba(31, 39, 51, .32); }
.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: 430px; max-width: 92vw;
  background: #fff; box-shadow: -6px 0 26px rgba(60,72,88,.18);
  display: flex; flex-direction: column;
}
.cajon-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--borde);
}
.cajon-rotulo { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.cajon-cab h3 { font-size: 18px; margin: 2px 0 0; }
.cajon-tabs { display: flex; gap: 2px; padding: 10px 16px 0; border-bottom: 1px solid var(--borde); }
.cajon-tab {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--texto-medio);
  background: none; border: none; border-bottom: 2.5px solid transparent;
  padding: 8px 12px; cursor: pointer;
}
.cajon-tab:hover { color: var(--texto); }
.cajon-tab.activa { color: var(--azul); border-bottom-color: var(--azul); }
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 20px; }
.cajon-cuerpo .campo { margin-bottom: 15px; }
.cajon-cita {
  font-size: 13px; color: var(--texto-medio);
  background: var(--fondo); border-left: 3px solid var(--borde-fuerte);
  padding: 9px 12px; border-radius: 0 5px 5px 0; margin-bottom: 18px;
}

/* Opciones */
.op-grupo {
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-suave); margin: 4px 0 10px;
}
.op-grupo + .op-fila, .op-grupo + .campo { margin-top: 0; }
h4.op-grupo:not(:first-child) { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--borde); }
.op-fila {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--borde); border-radius: var(--r-chico);
  cursor: pointer;
}
.op-fila:hover { background: #fbfcfe; }
.op-fila input { accent-color: var(--azul); width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px; }
/* Mismo caso que en el menu flotante: block solo para el <b> del titulo. */
.op-fila > span > b { display: block; font-size: 13.5px; color: var(--texto); }
.op-fila small { display: block; font-size: 11.5px; color: var(--texto-suave); line-height: 1.45; }
.op-fila small b { color: var(--texto-medio); }
.op-nota {
  margin-top: 20px; padding: 12px 14px;
  background: var(--azul-suave); border-radius: var(--r-chico);
  font-size: 12.5px; color: var(--azul-oscuro);
}


/* Elegir, al descargar, si el archivo lleva la clave */
.desc-opciones { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 16px; }
.desc-opcion {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--borde); border-radius: var(--r-chico);
  padding: 12px 14px; transition: border-color .15s, background .15s;
}
.desc-opcion:hover { border-color: var(--borde-fuerte); background: #fbfcfe; }
.desc-opcion:has(input:checked) { border-color: var(--azul); background: var(--azul-suave); }
.desc-opcion input { accent-color: var(--azul); width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px; }
.desc-opcion b { display: block; font-size: 14px; color: var(--texto); }
.desc-opcion small { display: block; font-size: 12.5px; color: var(--texto-medio); margin-top: 2px; }

/* Retroalimentacion por alternativa, dentro de la pestaña Retroalimentacion */
.retro-alt { border: 1px solid var(--borde); border-radius: var(--r-chico); padding: 11px 13px; margin-bottom: 10px; }
.retro-alt-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 13.5px; }
.retro-alt-letra {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  border: 1.5px solid var(--borde-fuerte); color: var(--texto-medio);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.retro-alt.es-correcta { background: var(--verde-suave); border-color: #bfe8d8; }
.retro-alt.es-correcta .retro-alt-letra { background: var(--verde); border-color: var(--verde); color: #fff; }
.retro-alt textarea { font-size: 13px; }

/* Cajon de IA */
.tokens-caja { padding: 16px 20px; border-bottom: 1px solid var(--borde); background: var(--azul-suave); }
.tokens-fila { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--azul-oscuro); }
.tokens-fila b { font-size: 22px; }
.tokens-barra { height: 6px; border-radius: 3px; background: #d3e4f5; margin: 8px 0 6px; overflow: hidden; }
.tokens-barra i { display: block; height: 100%; background: var(--azul); transition: width .3s; }
.tokens-nota { font-size: 11.5px; color: var(--azul-oscuro); margin: 0; opacity: .85; }
/* Sin creditos la caja deja de ser informativa y pasa a ser un aviso: el
   naranja es justamente para lo que reclama atencion. */
.tokens-caja.sin-credito { background: #fff4e8; border-bottom-color: #f0d3ad; }
.tokens-caja.sin-credito .tokens-fila,
.tokens-caja.sin-credito .tokens-nota { color: #8a4b08; opacity: 1; }
.tokens-caja.sin-credito .tokens-barra { background: #f3ddc2; }

.herramienta {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--borde); border-radius: var(--r);
  padding: 13px 14px; margin-bottom: 11px;
}
.herramienta-icono { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.herramienta-texto { flex: 1; min-width: 0; }
.herramienta-texto h4 { font-size: 14px; margin: 0 0 2px; }
.herramienta-texto p { font-size: 12.5px; color: var(--texto-medio); margin: 0; }
.herramienta-costo { font-size: 11.5px; font-weight: 800; color: var(--azul); white-space: nowrap; margin-top: 3px; display: block; }
.herramienta .btn { flex: 0 0 auto; align-self: center; }

.giro { display: inline-block; width: 13px; height: 13px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.consumo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde); }
.consumo h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave); }
.consumo ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; }
.consumo li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--borde); color: var(--texto-medio); }
.consumo li b { color: var(--texto); }


/* --- Modal --------------------------------------------------------------- */
.modal-fondo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(31,39,51,.38);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: #fff; border-radius: var(--r-grande);
  width: 100%; max-width: 520px; max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(60,72,88,.28);
}
.modal-ancho { max-width: 1000px; }
/* El de formula/tabla/grafico se abre DESDE el editor de texto: va encima. */
#editor-fondo { z-index: 88; }
#modal-fondo  { z-index: 92; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; }
.modal-cab h3 { font-size: 18px; margin: 0; }
.modal-cuerpo { padding: 0 22px 6px; overflow-y: auto; font-size: 14px; color: var(--texto-medio); }
.modal-cuerpo p { margin: 0 0 12px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }


/* --- Nivel, asignatura y tipo dentro de Opciones -------------------------- */
.op-campo { display: block; margin-bottom: 12px; }
.op-campo > span { display: block; font-size: 12.5px; font-weight: 700; color: #3b4655; margin-bottom: 4px; }
.op-campo select { width: 100%; }
/* Aviso de lo que quedo descalzado al cambiar el nivel o la asignatura. Naranja
   porque reclama atencion, no porque este malo: nada se rompio. */
.op-aviso {
  font-size: 12px; line-height: 1.5; color: var(--naranja-oscuro);
  background: var(--naranja-suave); border-radius: var(--r-chico);
  padding: 8px 11px; margin: -2px 0 14px;
}
/* De dónde salió la prueba: es un dato, no una advertencia. Gris, no naranjo. */
.op-origen {
  font-size: 12px; line-height: 1.5; color: var(--texto-suave);
  background: #f2f6fa; border-radius: var(--r-chico);
  padding: 8px 11px; margin: -2px 0 14px;
}

/* --- Generador de imagenes con IA ---------------------------------------- */
.gi { display: block; }
.gi-campo { display: block; margin-bottom: 10px; }
.gi-campo > span { display: block; font-size: 12.5px; font-weight: 700; color: #3b4655; margin-bottom: 4px; }
.gi-campo textarea, .gi-campo select {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-chico);
  padding: 8px 10px; background: #fff; resize: vertical;
}
.gi-campo textarea:focus, .gi-campo select:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave);
}
.gi-fila { display: flex; gap: 10px; }
.gi-fila .gi-campo { flex: 1; }
.gi-corto { max-width: 160px; }
.gi-estilo-desc { margin: -6px 0 10px; font-size: 12px; color: var(--texto-suave); }

/* El limite se declara ANTES de generar, no despues de rechazar: es lo que
   evita que el profesor gaste tokens en algo que no va a salir. */
.gi-limite {
  font-size: 12px; line-height: 1.5; color: #7a5d16;
  background: #fdf3d4; border: 1px solid #ecd9a0; border-radius: var(--r-chico);
  padding: 8px 11px; margin-bottom: 12px;
}
.gi-lienzo {
  display: flex; align-items: center; justify-content: center;
  min-height: 210px; padding: 12px;
  background: #f7f9fb; border: 1px solid var(--borde); border-radius: var(--r-chico);
}
.gi-lienzo svg { max-width: 100%; height: auto; }
.gi-vacio { font-size: 12.5px; color: var(--texto-suave); font-style: italic; }
.gi-aviso {
  margin-top: 10px; font-size: 12.5px; line-height: 1.5;
  color: var(--texto-medio); background: #f2f6fa;
  border-radius: var(--r-chico); padding: 8px 11px;
}
.gi-aviso.mal { color: #9c2a1c; background: #fdecea; }

/* La imagen ya puesta en el enunciado */
/* Acotada a 330 px: a ancho completo una figura generada se come media hoja y
   deja la pregunta en la pagina siguiente. Se mantiene la proporcion. */
/* `inline-block` y no `block`: asi la alineacion del bloque que la envuelve
   —izquierda, centro, derecha— la mueve de verdad. Con `block` + `margin:auto`
   quedaba siempre centrada y los botones de alineacion no hacian nada. */
.img-bloque { margin: 8px 0; }
.img-ia { position: relative; display: inline-block; vertical-align: top; max-width: min(330px, 100%); }
.img-ia svg { max-width: 100%; height: auto; display: block; }
/* La marca vive en el editor, no en el papel: en la hoja del alumno una
   estampa «IA» no aporta nada. Lo que queda registrado es la peticion, en
   `data-peticion`, que es lo que permite auditar despues. */
.img-ia-marca {
  position: absolute; top: 4px; right: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  background: #6f5bd0; color: #fff; border-radius: var(--r-capsula);
  padding: 1px 6px; cursor: help;
}

/* --- Editor de texto (modal con la barra WYSIWYG fija) -------------------- */
/* La barra era flotante y se posicionaba sobre el campo. Tres problemas: se
   corria con el scroll, tapaba justo la linea que se estaba escribiendo, y
   obligaba a apuntarle a un blanco que cambiaba de lugar en cada campo. Ahora
   el texto se escribe en un modal y la barra esta SIEMPRE en el mismo sitio. */
.editor-texto {
  background: #fff; border-radius: var(--r-grande);
  width: 100%; max-width: 780px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 50px rgba(60,72,88,.28);
}
.editor-texto .modal-cab { padding: 16px 20px 10px; }
.editor-texto .modal-pie { padding: 12px 20px 16px; align-items: center; }
.et-ayuda { flex: 1; font-size: 12px; color: var(--texto-suave); line-height: 1.4; }
.et-lienzo {
  flex: 1; min-height: 190px; max-height: 52vh; overflow-y: auto;
  padding: 16px 20px; outline: none;
  font-size: 14.5px; line-height: 1.6; color: var(--texto);
  background: #fff;
}
.et-lienzo:empty::before { content: attr(data-vacio); color: #aab3bf; font-style: italic; }
.et-lienzo .tabla-preg { width: 100%; }

.barra-texto {
  display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
  padding: 6px 14px;
  background: #007ca4; color: #fff;
}
/* El boton hundido dice como esta lo que hay bajo el cursor. Sin esto los
   cuatro botones de alineacion se ven iguales y no hay forma de saber
   como esta alineado el parrafo. */
.bt-btn.activo { background: var(--azul); color: #fff; }
.bt-btn.activo:hover { background: var(--azul); }
.bt-btn:disabled { opacity: .35; cursor: default; }
.bt-btn:disabled:hover { background: none; color: #fff; }
.bt-btn svg { fill: currentColor; display: block; }

/* --- Redimensionar una imagen del texto ----------------------------------- */
/* El marco va posicionado sobre la imagen pero FUERA del lienzo: dentro, sus
   tiradores entrarian en el HTML que se guarda en el enunciado. */
.ri-marco {
  position: fixed; z-index: 90; pointer-events: none;
  outline: 1.5px solid var(--azul); outline-offset: 1px;
}
.ri-asa {
  position: absolute; width: 11px; height: 11px; pointer-events: auto;
  background: #fff; border: 1.5px solid var(--azul); border-radius: 2px;
  touch-action: none; padding: 0;
}
.ri-asa:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* El asa de arrastre tambien se puede enfocar: mueve con las flechas. */
.asa:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 3px; opacity: 1 !important; }
.ri-asa[data-esquina="ni"] { left: -6px;  top: -6px;    cursor: nwse-resize; }
.ri-asa[data-esquina="nd"] { right: -6px; top: -6px;    cursor: nesw-resize; }
.ri-asa[data-esquina="si"] { left: -6px;  bottom: -6px; cursor: nesw-resize; }
.ri-asa[data-esquina="sd"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.ri-medida {
  position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%);
  background: #2f3a4b; color: #fff; border-radius: var(--r-capsula);
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; white-space: nowrap;
  opacity: 0; transition: opacity .12s;
}
.ri-marco.ri-tirando .ri-medida { opacity: 1; }
/* Recortar: arriba a la derecha del marco, fuera de la imagen para no taparla.
   `pointer-events` explicito porque el marco entero los tiene apagados salvo en
   las asas: sin esto el boton se ve y no se puede apretar. */
.ri-recortar {
  position: absolute; right: -2px; top: -28px;
  border: none; background: #2f3a4b; color: #fff; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-capsula); white-space: nowrap;
  pointer-events: auto;
}
.ri-recortar:hover { background: var(--azul); }
.ri-marco.ri-tirando .ri-recortar { opacity: 0; }

/* El dialogo de recorte: la imagen y el rectangulo encima. */
.ci-zona {
  position: relative; display: flex; justify-content: center;
  background: #eef1f5; border: 1px solid var(--borde); border-radius: var(--r);
  padding: 12px; margin: 4px 0 10px; cursor: crosshair; touch-action: none;
  user-select: none;
  /* El velo de afuera se dibuja con un `inset` enorme: sin recortarlo, el modal
     aparece con barra de desplazamiento horizontal. */
  overflow: hidden;
}
.ci-zona img { max-width: 100%; max-height: 52vh; display: block; -webkit-user-drag: none; }
.ci-sel {
  position: absolute; border: 2px solid var(--azul); background: rgba(35,166,223,.16);
  pointer-events: none;
}
/* El afuera del recorte se apaga, que es lo que hace ver QUE se va a ver. */
.ci-sel::before {
  content: ''; position: absolute; inset: -4000px; background: rgba(20,30,45,.38);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    4000px 4000px, 4000px calc(100% - 4000px), calc(100% - 4000px) calc(100% - 4000px),
    calc(100% - 4000px) 4000px, 4000px 4000px);
}
.ci-dato { font-size: 12.5px; color: var(--texto-suave); margin: 0; }
.et-lienzo .img-ia, .et-lienzo .recorte-img, .et-lienzo .img-subida { cursor: pointer; }
/* El de IA se distingue del de subir: son dos caminos distintos, no dos iconos
   del mismo. Violeta, que es el color de la IA en todo el gadget. */
.bt-btn.bt-ia { color: #c9bdf5; }
.bt-btn.bt-ia:hover { background: rgba(111,91,208,.45); color: #fff; }
.et-lienzo .ri-elegida { outline: 1.5px solid transparent; }   /* el marco ya lo dibuja */
.bt-btn {
  min-width: 28px; height: 28px; padding: 0 7px;
  font-family: inherit; font-size: 13px; color: #dbe3ee;
  background: none; border: none; border-radius: 5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bt-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.bt-btn sup, .bt-btn sub { font-size: 9px; }
.bt-formula { color: #9ecbf5; font-weight: 700; }
.bt-sep { width: 1px; height: 17px; background: rgba(255,255,255,.22); margin: 0 4px; }

.bt-sel {
  height: 26px; max-width: 132px;
  font-family: inherit; font-size: 12px; color: #dbe3ee;
  background: rgba(255,255,255,.1); border: none; border-radius: 5px;
  padding: 0 4px; cursor: pointer;
}
.bt-sel:hover { background: rgba(255,255,255,.2); }
.bt-sel-corto { max-width: 62px; }
.bt-sel option { color: #1f2733; background: #fff; }

/* --- Formulas ------------------------------------------------------------ */
/* En el editor se marcan como objeto: se editan enteras, no por dentro. */
.formula {
  font-family: var(--fuente-mate);
  white-space: nowrap;
  border-radius: 3px;
  padding: 0 1px;
  cursor: pointer;
}
.hoja .formula:hover { background: #fff3d6; box-shadow: 0 0 0 1px #e8d9a0; }
.formula i { font-style: italic; }
.formula sup, .formula sub { font-size: .68em; }
.formula .op { margin: 0 .2em; }
.formula .esp-fina { display: inline-block; width: .18em; }
.formula .txt { font-family: var(--fuente-papel); font-size: .93em; }
.formula .lx-malo { color: #c9435f; font-family: ui-monospace, Consolas, monospace; font-size: .82em; }

.frac {
  display: inline-flex; flex-direction: column; align-items: center;
  /* `middle` la centra en la altura de la x; con un desplazamiento fijo queda
     hundida bajo la linea base y la alternativa se ve descolgada. */
  vertical-align: middle; margin: 0 .2em;
  font-size: .88em; line-height: 1.12;
}
.frac > .num { padding: 0 .28em; }
.frac > .den { padding: 0 .28em; border-top: 1px solid currentColor; }

.raiz { display: inline-flex; align-items: flex-start; }
.raiz > .idx { font-size: .62em; margin-right: -.34em; margin-top: -.18em; }
.raiz > .rad { font-size: 1.08em; }
.raiz > .bajo { border-top: 1px solid currentColor; padding: .06em .12em 0; margin-left: -.06em; }

/* --- Tablas dentro de una pregunta --------------------------------------- */
.tabla-preg {
  border-collapse: collapse;
  margin: 9px 0 4px;
  font-size: .96em;
  min-width: 55%;
}
.tabla-preg th, .tabla-preg td {
  border: 1px solid #8d99a8;
  padding: 4px 8px;
  min-width: 46px;
  vertical-align: top;
}
.tabla-preg th { background: #eef1f6; font-weight: 700; text-align: left; }
.hoja .tabla-preg td:focus, .hoja .tabla-preg th:focus {
  outline: none; background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0;
}

/* Selector de tamano tipo Word/Docs */
.rejilla { display: grid; grid-template-columns: repeat(8, 22px); gap: 3px; margin: 4px 0 10px; }
.rejilla i {
  width: 22px; height: 19px; display: block;
  border: 1px solid var(--borde-fuerte); border-radius: 2px;
  background: #fff; cursor: pointer;
}
.rejilla i.marcada { background: var(--azul-suave); border-color: var(--azul); }
.rejilla-medida { font-size: 13px; font-weight: 700; color: var(--texto-medio); }

/* --- Bloque GeoGebra ----------------------------------------------------- */
.ggb-bloque {
  display: block; margin: 10px 0;
  border: 1px solid #c9d2de; border-radius: 5px;
  background: #fbfcfe;
  overflow: hidden;
}
.ggb-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; background: #eef2f7;
  border-bottom: 1px solid #d8e0ea;
  font-size: 10.5px; color: #5b6676;
}
.ggb-cab b { color: #2f3a4b; }
.ggb-cab code {
  font-family: ui-monospace, Consolas, monospace; font-size: 10px;
  background: #fff; border: 1px solid #d8e0ea; border-radius: 3px; padding: 0 4px;
}
.ggb-lienzo { display: block; margin: 0 auto; }
.ggb-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 9px; border-top: 1px solid #e4e9f0;
  font-size: 10.5px; color: var(--texto-suave);
}
.ggb-cargar {
  font-family: inherit; font-size: 11px; font-weight: 700;
  background: var(--azul-suave); color: var(--azul-oscuro);
  border: 1px solid #cfe3f6; border-radius: 5px; padding: 3px 9px; cursor: pointer;
}
.ggb-cargar:hover { background: #dceaf8; }
.ggb-vivo { min-height: 320px; }
.hoja .ggb-bloque:hover { border-color: var(--azul); }

/* --- Importar tabla de especificaciones ---------------------------------- */
.imp-pegar {
  width: 100%; min-height: 96px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: var(--r-chico);
  resize: vertical; background: #fff;
}
.imp-pegar:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.imp-o {
  display: flex; align-items: center; gap: 10px; margin: 12px 0;
  font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em;
}
.imp-o::before, .imp-o::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.imp-acciones { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.imp-vista { margin-top: 16px; }
.imp-vista table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.imp-vista th, .imp-vista td { border: 1px solid var(--borde); padding: 5px 8px; text-align: left; }
.imp-vista thead th { background: var(--fondo); }
.imp-vista select {
  width: 100%; font-family: inherit; font-size: 11.5px; padding: 3px 4px;
  border: 1px solid var(--borde-fuerte); border-radius: 4px; background: #fff;
}
.imp-vista .col-ignorada { opacity: .45; }
.imp-aviso { margin-top: 12px; font-size: 13px; }
.imp-ok  { color: #1f9b76; font-weight: 700; }
.imp-mal { color: #c9435f; font-weight: 700; }

/* Editor de formula dentro del modal */
.formula-editor textarea {
  width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px;
  padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: var(--r-chico);
  resize: vertical; color: var(--texto);
}
.formula-editor textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.formula-vista {
  margin-top: 12px; padding: 18px 14px; min-height: 62px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-chico);
  text-align: center; font-size: 17px; color: var(--texto);
}
.formula-atajos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.fa-btn {
  font-family: var(--fuente-mate); font-size: 14px;
  min-width: 32px; padding: 4px 8px;
  background: #fff; border: 1px solid var(--borde); border-radius: 6px;
  cursor: pointer; color: var(--texto);
}
.fa-btn:hover { border-color: var(--azul); background: var(--azul-suave); }
.fa-titulo { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin: 16px 0 0; }

/* --- Avisos -------------------------------------------------------------- */
.avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.aviso {
  background: #2f3a4b; color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(31,39,51,.28);
  animation: subir .25s ease;
}
.aviso-ok { background: #1f9b76; }
.aviso-mal { background: #c9435f; }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }


/* --- Impresion ----------------------------------------------------------- */
/* El tamano de pagina lo escribe el JS en #estilo-pagina segun Opciones.
   Cada .hoja es una pagina fisica: asi lo que se ve en el editor y lo que
   sale impreso no pueden separarse. */
@media print {
  body { background: #fff; }
  .cinta-maqueta, .topbar, .carriles, .agregar-flotante, .barra-texto,
  .cajon, .cajon-fondo, .modal-fondo, .avisos, .rotulo-hoja { display: none !important; }
  .formula { cursor: auto; }

  .panel-tab { padding: 0; }
  .area { display: block; padding: 0; }
  .hojas-envoltorio { flex: none; }
  #hojas { display: block; gap: 0; }

  .hoja {
    width: auto; max-width: none; min-height: 0;
    box-shadow: none; border-radius: 0;
    margin: 0;
    page-break-after: always; break-after: page;
  }
  #hojas .hoja:last-of-type { page-break-after: auto; break-after: auto; }

  .asa, .alt-nota { display: none !important; }
  .pregunta { break-inside: avoid; page-break-inside: avoid; }
  .pregunta:hover { background: none; }
  .mostrar-correcta .alt.correcta .alt-letra { background: none; border-color: #8d99a8; color: #4a5563; }

  /* La rubrica no esta en la hoja mientras se edita: el JS la inserta solo
     cuando lo que se genera es la pauta de correccion (estado.imprimiendoPauta).
     Aca basta con que la tabla se imprima entera y no se parta. */
  .rubrica-impresa { display: block !important; }
  .rubrica-impresa table { break-inside: avoid; page-break-inside: avoid; }
}

/* --- Retroalimentacion (cajon de la pregunta) ---------------------------- */
/* Cuatro textos por pregunta mas uno por opcion: hay que poder distinguirlos
   de un vistazo, si no parecen el mismo campo repetido. */
.campo-retro { margin-bottom: 14px; }
.campo-retro > span { display: flex; align-items: center; gap: 6px; }
.retro-ayuda {
  font-size: 11.5px; color: var(--texto-suave); line-height: 1.45;
  margin: -2px 0 3px;
}
.retro-pie {
  margin-top: 16px; padding: 10px 13px;
  background: var(--azul-suave); border-radius: var(--r-chico);
  font-size: 12.5px; color: var(--azul-oscuro);
}
.retro-pie b { color: var(--azul-oscuro); }
/* Preguntas pegadas como imagen: el PDF no trae su texto. Es un aviso, no un
   error — la prueba entra igual, como imagen. */
.pdfc-pegadas { border-left-color: var(--naranja); }
.dato-ojo b { color: var(--naranja-oscuro); }
.dato-ojo span { color: var(--naranja-oscuro); }

.rec-mal { color: var(--rojo); font-weight: 600; }
.rec-img { color: var(--azul); font-weight: 600; }

/* Texto o imagen, por recorte. Va en el panel de revision porque la decision se
   toma MIRANDO el recorte, y se tiene que poder cambiar antes de importar. */
.rec-modo { display: inline-flex; margin-top: 5px; border: 1px solid var(--borde); border-radius: var(--r-capsula); overflow: hidden; }
.rec-op {
  padding: 3px 10px; border: none; background: #fff; color: var(--texto-suave);
  font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.rec-op + .rec-op { border-left: 1px solid var(--borde); }
.rec-op:hover:not(.activa) { background: #f5f7fa; }
.rec-op.activa { background: var(--azul); color: #fff; }

/* Ayuda bajo un campo de la categorizacion */
.cat-ayuda {
  display: block; font-size: 11.5px; color: var(--texto-suave);
  line-height: 1.45; margin: -6px 0 14px;
}
.cat-ayuda b { color: var(--texto-medio); }
/* Cuando la pregunta mide un objetivo de otro nivel, se dice fuerte */
.cat-ajeno {
  color: var(--naranja-oscuro); background: var(--naranja-suave);
  border-radius: var(--r-chico); padding: 8px 11px; margin: -4px 0 14px;
}
.cat-ajeno b { color: var(--naranja-oscuro); }
.cat-sincat {
  color: var(--azul-oscuro); background: var(--azul-suave);
  border-radius: var(--r-chico); padding: 8px 11px; margin: -4px 0 14px;
}
.cat-sincat b { color: var(--azul-oscuro); }

/* Nota de licencia bajo el editor de gráficos */
/* La ayuda del campo de comandos. `display:block` en el textarea saca el hueco
   del baseline —un textarea es inline y deja debajo el espacio del descendente,
   que es lo que antes se «arreglaba» con un margen negativo y terminaba tapando
   la primera linea de esta ayuda. */
#ggb-cmd { display: block; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
/* Con `.ggb-ayuda` a secas no basta: `.modal-cuerpo p` pesa mas y le pone
   `margin: 0 0 12px`, asi que la ayuda quedaba pegada al borde del campo. */
.modal-cuerpo .ggb-ayuda {
  font-size: 12px; color: var(--texto-suave); line-height: 1.5;
  margin: 9px 0 0;
}
.ggb-ayuda code {
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  background: #f2f5f9; border-radius: 3px; padding: 1px 4px;
}
.ggb-error { color: var(--naranja-oscuro); }
.ggb-nota { font-size: 12.5px; color: var(--texto-suave); margin-top: 12px; }
.ggb-nota b { color: var(--texto-medio); }

/* --- Reconocer el texto de un recorte sin capa de texto -------------------- */
/* Recortar de una foto o de un escaneo es el caso mas comun en un colegio y era
   el que quedaba afuera: sin capa de texto, el recorte entero entraba como
   imagen con las alternativas en blanco. */
.rec-ocr-caja {
  border: 1px solid var(--naranja); background: var(--naranja-suave);
  border-radius: var(--r); padding: 12px 14px; margin-top: 12px;
  font-size: 12.5px; color: var(--naranja-oscuro);
}
.rec-ocr-caja b { color: var(--texto); }
.rec-ocr-caja p { margin: 6px 0 0; line-height: 1.5; }
.rec-ocr-caja .btn { margin-top: 10px; }
.rec-ocr-nota { font-size: 11.5px; line-height: 1.5; }
/* El recorte que ya paso por el reconocimiento se distingue del que traia
   capa de texto: uno hay que revisarlo, el otro no. */
.rec-ocr {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #7a5d16; background: #fdf3d4;
  border-radius: var(--r-capsula); padding: 1px 7px;
}

/* --- El recortador ocupa el 90% de la pantalla ----------------------------- */
/* En un notebook de 13" la pagina entraba tan chica que el texto no se leia, y
   recortar «la pregunta completa» a ojo era imposible. */
.modal.modal-gigante {
  max-width: 90vw; width: 90vw;
  max-height: 90vh; height: 90vh;
}
.modal-gigante .modal-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal-gigante .rec-reja { flex: 1; min-height: 0; }
/* La reja pasa a dos columnas de alto completo: el documento a la izquierda con
   todo el alto, la lista de recortes a la derecha. */
.modal-gigante .rec-reja { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.modal-gigante #rec-izq { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.modal-gigante .rec-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.modal-gigante .rec-lista { max-height: none; }
.modal-gigante .rec-soltar { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }

/* Barra sobre el documento: navegacion de paginas a la izquierda, zoom a la derecha */
.rec-barra { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.rec-barra .rec-nav { margin: 0; }
.rec-zoom {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texto-medio); white-space: nowrap;
}
.rec-zoom select {
  font: inherit; font-size: 12.5px; color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-capsula);
  padding: 4px 10px; background: #fff;
}
.rec-zoom select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }

/* En pantallas angostas la lista baja debajo del documento. */
@media (max-width: 900px) {
  .modal.modal-gigante { max-width: 96vw; width: 96vw; }
  .modal-gigante .rec-reja { grid-template-columns: 1fr; }
}

/* --- Categorizacion con varios objetivos ---------------------------------- */
/* Cada objetivo es una tarjeta: sin el marco, seis selects seguidos se leen
   como un solo formulario y no se ve donde termina uno y empieza el otro. */
.cat-objetivo {
  border: 1px solid var(--borde); border-radius: var(--r-chico);
  padding: 12px 13px 4px; margin-bottom: 12px; background: #fbfcfe;
}
.cat-obj-cab {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave);
}
.cat-obj-cab b { color: var(--texto-medio); font-weight: 800; }
.cat-quitar {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: #c3cddb; font-size: 16px; line-height: 1; padding: 0 2px;
}
.cat-objetivo:hover .cat-quitar { color: #8d99a8; }
.cat-quitar:hover { color: var(--rojo); }
.cat-mas { width: 100%; margin-bottom: 10px; }
.cat-mas-fila { display: flex; gap: 8px; margin-bottom: 10px; }
.cat-mas-fila .cat-mas { flex: 1; width: auto; margin-bottom: 0; }
/* El objetivo propio: la misma tarjeta, con el verde de lo propio. */
.cat-propio { background: #f8fcfa; border-color: #d3e9df; }
.cat-propios-usados { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.cat-propios-usados small { width: 100%; font-size: 11.5px; color: var(--texto-suave); }
.cat-propio-chip {
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
  padding: 3px 11px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-capsula);
  background: #fff; color: var(--texto-medio);
}
.cat-propio-chip:hover { border-color: var(--azul); color: var(--azul-oscuro); }
.esp-propias-tit { margin: 22px 0 4px; font-size: 13px; color: var(--texto-medio); }
.esp-propias-nota { margin: 0 0 8px; font-size: 12px; color: var(--texto-suave); }
/* Lo que es de la PREGUNTA y no del objetivo va separado, al final. */
.cat-pregunta { border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 6px; }

/* --- Plan del generador con IA -------------------------------------------- */
/* Tres secciones en orden: sobre que, de que tipos, y los extras. El orden no
   es decorativo: lo primero que decide un profesor es SOBRE QUE. */
.pia-seccion { border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 14px; }
.pia-seccion:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.pia-cab { margin-bottom: 10px; }
.pia-cab b { display: block; font-size: 13.5px; color: var(--texto); }
.pia-cab span { font-size: 12.5px; color: var(--texto-suave); }

.pia-fila {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid var(--borde); border-radius: var(--r-chico);
  padding: 10px 12px; margin-bottom: 8px; background: #fbfcfe;
}
.pia-campos { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 10px; }
.pia-campos label { display: block; min-width: 0; }
.pia-campos label > span { display: block; font-size: 11.5px; font-weight: 700; color: #3b4655; margin-bottom: 3px; }
.pia-campos select, .pia-campos input {
  width: 100%; font: inherit; font-size: 13px; color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-capsula);
  padding: 5px 11px; background: #fff;
}
.pia-campos select:focus, .pia-campos input:focus, .pia-total input:focus, .pia-total select:focus,
.pia-tipo input:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave);
}
.pia-ancho { grid-column: span 2; }
.pia-corto { max-width: 110px; }
.pia-quitar {
  background: none; border: none; cursor: pointer; color: #c3cddb;
  font-size: 16px; line-height: 1; padding: 2px 4px;
}
.pia-fila:hover .pia-quitar { color: #8d99a8; }
.pia-quitar:hover { color: var(--rojo); }
.pia-mas { width: 100%; }

.pia-total { display: block; max-width: 260px; margin: 10px 0; }
.pia-total > span { display: block; font-size: 11.5px; font-weight: 700; color: #3b4655; margin-bottom: 3px; }
.pia-total input, .pia-total select {
  width: 100%; font: inherit; font-size: 13px;
  border: 1px solid var(--borde); border-radius: var(--r-capsula); padding: 6px 12px; background: #fff;
}

.pia-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
.pia-tipo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-medio); }
.pia-tipo span { flex: 1; }
.pia-tipo input {
  width: 62px; font: inherit; font-size: 13px; text-align: center;
  border: 1px solid var(--borde); border-radius: var(--r-capsula); padding: 4px 6px; background: #fff;
}

.pia-aviso {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--texto-medio);
  background: #f2f6fa; border-radius: var(--r-chico); padding: 9px 12px;
}
/* El caso «sin atributos» no es un error: es una decision del profesor que hay
   que advertir. Naranja de aviso, no rojo de bloqueo. */
.pia-sin { color: var(--naranja-oscuro); background: var(--naranja-suave); }
.pia-mal { color: #9c2a1c; background: #fdecea; }
.pia-repartir {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--azul); font: inherit; font-size: 12.5px; text-decoration: underline;
}

.pia-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 16px;
}
.pia-cuenta { font-size: 13px; color: var(--texto-medio); }
.pia-falta { color: var(--rojo); }


/* ==========================================================================
   Crear a partir de la situacion del curso
   ==========================================================================
   La tabla es el argumento de la pantalla, asi que manda: la fila se lee de un
   vistazo y el estado se distingue por color Y por texto, porque el color solo
   no le sirve a quien no lo distingue.                                       */
/* --- La pantalla propia --------------------------------------------------- */
#pantalla-curso { padding: 22px 30px 40px; }
.sit-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sit-titulo { margin: 0; }
.sit-volver {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: var(--r-capsula);
  border: 1px solid var(--borde); background: #fff; color: var(--texto-medio);
  font: inherit; font-size: 13px; cursor: pointer;
}
.sit-volver:hover { border-color: var(--borde-fuerte); color: var(--texto); }

.sit-panel {
  display: block; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--r-grande); padding: 20px 22px; margin-bottom: 16px;
}

/* Los pasos numerados: la pantalla se lee en orden —curso, qué falta, cuántas— y
   sin los números los tres bloques parecen independientes. */
.sit-paso { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.sit-paso-n {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul-suave); color: var(--azul);
  font-size: 13px; font-weight: 700;
}
.sit-paso b { display: block; font-size: 15px; color: var(--texto); }
.sit-paso small { display: block; font-size: 12.5px; color: var(--texto-suave); margin-top: 1px; }

/* --- El curso, en tarjetas ------------------------------------------------
   Son cuatro o cinco y se eligen una sola vez: en tarjetas se ven todas de una
   y el curso elegido queda a la vista mientras se lee la tabla, que es
   justamente el contexto de todo lo que viene abajo. */
.sit-cursos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.sit-tarjeta {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 18px; min-width: 132px;
  border: 1.5px solid var(--borde); border-radius: var(--r);
  background: #fff; font: inherit; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.sit-tarjeta b { font-size: 14px; color: var(--texto); }
.sit-tarjeta span { font-size: 12px; color: var(--texto-suave); }
.sit-tarjeta:hover { border-color: var(--borde-fuerte); }
.sit-tarjeta.elegida { border-color: var(--azul); background: var(--azul-suave); }
.sit-tarjeta.elegida b { color: var(--azul); }

/* --- Alumnos: un campo de fichas, como el «Para:» de un correo ------------
   Un curso tiene 34 alumnos y puede tener 45. En botones en fila ocupaban cinco
   renglones y no se encontraba a nadie; acá se escribe para filtrar y lo
   elegido queda a la vista en una línea. */
.sa { position: relative; margin: 12px 0 14px; }
.sa-campo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 42px; padding: 6px 10px; cursor: text;
  border: 1px solid var(--borde); border-radius: var(--r); background: #fff;
}
.sa-campo:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.sa-rotulo { font-size: 12px; color: var(--texto-suave); flex: none; }
.sa-ficha {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 5px 3px 11px; border-radius: var(--r-capsula);
  background: var(--azul-suave); color: var(--azul-oscuro); font-size: 12.5px; white-space: nowrap;
}
.sa-ficha button {
  border: none; background: none; cursor: pointer; padding: 0 2px;
  color: inherit; opacity: .55; font-size: 14px; line-height: 1;
}
.sa-ficha button:hover { opacity: 1; }
#sa-entrada {
  flex: 1 1 180px; min-width: 140px; border: none; outline: none;
  font: inherit; font-size: 13px; color: var(--texto); background: none; padding: 4px 2px;
}
.sa-limpiar {
  flex: none; border: none; background: none; cursor: pointer; padding: 2px 6px;
  font: inherit; font-size: 12px; color: var(--azul); text-decoration: underline;
}

/* La lista cuelga del campo, como el autocompletado de un correo. */
.sa-lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px;
  max-height: 230px; overflow-y: auto;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-media); padding: 5px;
}
.sa-lista.cerrada { display: none; }
.sa-op {
  display: block; width: 100%; text-align: left;
  padding: 7px 11px; border: none; background: none; border-radius: var(--r-chico);
  font: inherit; font-size: 13px; color: var(--texto); cursor: pointer;
}
.sa-op { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-op:hover, .sa-op:focus-visible { background: var(--azul-suave); color: var(--azul-oscuro); outline: none; }
.sa-mas { display: block; padding: 7px 11px; font-size: 12px; color: var(--texto-suave); }

/* --- Alumnos del PIE -----------------------------------------------------
   La insignia es naranja porque el naranja es el color de lo que reclama
   atencion, no de lo que esta mal: el dato no es un error, es algo que hay que
   tener presente mientras se escribe la prueba. */
.sa-marca {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: var(--r-capsula); white-space: nowrap;
  background: var(--naranja-suave); color: var(--naranja-oscuro);
}
.sa-op-pie { background: #fffaf4; }
.sa-op-pie:hover, .sa-op-pie:focus-visible { background: var(--naranja-suave); color: var(--naranja-oscuro); }
.sa-ficha.sa-pie { background: var(--naranja-suave); color: var(--naranja-oscuro); }
.sa-ficha.sa-pie .sa-marca { background: #fff; }

.sit-nee {
  margin: 12px 0 0; padding: 12px 14px;
  background: #fffaf4; border: 1px solid #f0d3ad; border-radius: var(--r);
}
.sit-nee-cab { margin: 0; font-size: 13px; line-height: 1.55; color: var(--naranja-oscuro); }
.sit-nee-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sit-nee-lista li { display: flex; align-items: flex-start; gap: 9px; }
.sit-nee-lista b { font-size: 12.5px; color: var(--texto); }
.sit-nee-lista small { display: block; font-size: 11.5px; color: var(--texto-suave); line-height: 1.5; }
.sit-nee-pill {
  flex: none; min-width: 42px; text-align: center; margin-top: 1px;
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-capsula);
}
.sit-nee-permanente { background: #f6ddd8; color: #9c3a2a; }
.sit-nee-transitoria { background: #fdeccd; color: #8a5b08; }
.sit-nee-pie { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--texto-suave); }
.sit-nee-pie .sa-marca { font-size: 9.5px; }
.sit-nee-tenue { color: var(--texto-suave); }
.sit-nee-sin {
  margin: 12px 0 0; font-size: 12.5px; color: var(--texto-suave);
}

/* El nivel y la asignatura de la tabla: se pueden cambiar para traer filas de
   otro nivel sin perder lo ya pedido. */
.sit-contexto-sel { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.sit-campo { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.sit-campo > span { font-size: 12px; color: var(--texto-suave); }
.sit-campo select {
  font: inherit; font-size: 13px; padding: 6px 12px; background: #fff; color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-capsula);
}

/* --- Lo pedido, junto ----------------------------------------------------
   Con varios niveles y dos pestañas, la tabla en pantalla muestra una fraccion
   de lo decidido; sin este resumen, lo pedido en otro nivel es invisible. */
.sit-resumen-panel { padding-bottom: 16px; }
.sit-pedidos { display: flex; flex-wrap: wrap; gap: 7px; }
.sit-pedido {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px; border-radius: var(--r-capsula);
  background: var(--azul-suave); color: var(--azul-oscuro); font-size: 12.5px;
}
.sit-pedido b { font-weight: 700; }
.sit-pedido small { color: var(--texto-suave); font-size: 11px; }
.sit-pedido.ajeno { background: var(--naranja-suave); color: var(--naranja-oscuro); }
.sit-pedido.ajeno small { color: var(--naranja-oscuro); }
.sit-pedido button {
  border: none; background: none; cursor: pointer; padding: 0 3px;
  color: inherit; opacity: .55; font-size: 14px; line-height: 1;
}
.sit-pedido button:hover { opacity: 1; }

.sit-contexto { font-size: 12.5px; line-height: 1.6; color: var(--texto-suave); margin: 0; }
.sit-ojo { display: block; margin-top: 6px; color: var(--naranja-oscuro); }
.sit-enlace {
  background: none; border: none; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--azul); text-decoration: underline; cursor: pointer;
}

/* --- Objetivos o habilidades ---------------------------------------------
   Las dos miradas del mismo curriculo. La marca dice cuantas preguntas hay
   pedidas en la pestaña que NO se esta mirando: sin eso, lo decidido alla es
   invisible y se vuelve a pedir. */
.sit-pestanas { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--borde); }
.sit-pestana {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: 13.5px; color: var(--texto-suave); cursor: pointer;
}
.sit-pestana:hover { color: var(--texto-medio); }
.sit-pestana.activa { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }
.sit-marca {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul-suave); color: var(--azul); font-size: 11px; font-weight: 700;
}
.sit-pestana.activa .sit-marca { background: var(--azul); color: #fff; }

/* ==========================================================================
   Qué le pareció la pregunta al profesor
   ==========================================================================
   Va en el carril, discreto: es una pregunta que se hace al pasar, no una
   tarea. Se destaca sólo cuando ya hay respuesta.                           */
.carril-valorar {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde);
}
.val-rotulo { flex: 1; font-size: 11.5px; color: var(--texto-suave); }
.val-btn {
  border: 1px solid transparent; background: none; cursor: pointer;
  padding: 2px 7px; border-radius: var(--r-capsula);
  font-size: 14px; line-height: 1.2; filter: grayscale(1); opacity: .5;
  transition: opacity .12s, filter .12s;
}
.val-btn:hover { opacity: 1; filter: none; background: #f2f6fa; }
/* Lo elegido se ve de lejos: amarillo el pulgar arriba, rojo el pulgar abajo.
   Sin color, los dos pulgares quedan iguales y hay que acordarse de cual se
   apreto. El que NO se eligio se apaga del todo, para que en el carril haya una
   sola respuesta a la vista. */
.val-btn.elegida {
  opacity: 1; filter: none; font-weight: 700;
  box-shadow: 0 0 0 2px rgba(0,0,0,.03);
}
.val-btn.val-buena { background: #ffe9a8; border-color: #d9a520; }
.val-btn.val-mala  { background: #f8ccc6; border-color: #cf4436; }
.carril-valorar.respondida .val-btn:not(.elegida) { opacity: .28; }
.carril-valorar.respondida .val-btn:not(.elegida):hover { opacity: .8; }
/* Y el rotulo dice en palabras lo mismo que dice el color. */
.carril-valorar.es-buena .val-rotulo { color: #8a6a08; font-weight: 600; }
.carril-valorar.es-mala  .val-rotulo { color: #b3261e; font-weight: 600; }
.val-nota {
  font-size: 13px; line-height: 1.6; color: var(--texto-suave);
  background: #f2f6fa; border-radius: var(--r-chico); padding: 10px 12px; margin: 12px 0 0;
}

/* ==========================================================================
   Los campos que llena el alumno
   ========================================================================== */
.ce-ayuda { font-size: 13px; line-height: 1.6; color: var(--texto-medio); margin: 0 0 14px; }
.ce-lista { list-style: none; margin: 0 0 14px; padding: 0; }
.ce-campo {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--r-chico);
  margin-bottom: 7px; background: #fff;
}
.ce-campo.oculto { background: #f7f9fb; }
.ce-campo.oculto .ce-etiqueta { color: var(--texto-suave); text-decoration: line-through; }
.ce-campo .asa { cursor: grab; color: #c3cddb; font-size: 15px; line-height: 1; }
.ce-ver { display: flex; align-items: center; }
.ce-etiqueta { flex: 1; font-size: 13px; color: var(--texto); min-width: 0; }
input.ce-etiqueta {
  font: inherit; font-size: 13px; padding: 5px 11px;
  border: 1px solid var(--borde); border-radius: var(--r-capsula); background: #fff;
}
input.ce-etiqueta:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.ce-fija small {
  margin-left: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--azul); background: var(--azul-suave); border-radius: var(--r-capsula); padding: 1px 7px;
}
.ce-ancho {
  font: inherit; font-size: 12.5px; padding: 5px 10px; background: #fff; color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-capsula); flex: 0 0 auto;
}
.ce-quitar {
  border: none; background: none; cursor: pointer; color: #c3cddb;
  font-size: 16px; line-height: 1; padding: 2px 4px;
}
.ce-quitar:hover { color: var(--rojo); }
.ce-quitar-hueco { display: inline-block; width: 16px; }
.ce-agregar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
#ce-fabrica {
  font: inherit; font-size: 13px; padding: 7px 14px; background: #fff; color: var(--texto-medio);
  border: 1px solid var(--borde); border-radius: var(--r-capsula);
}
.ce-nota {
  font-size: 12.5px; line-height: 1.6; color: var(--texto-suave);
  background: #f2f6fa; border-radius: var(--r-chico); padding: 10px 12px; margin: 14px 0 0;
}
.op-nota-campos {
  font-size: 12.5px; line-height: 1.6; color: var(--texto-suave);
  margin: -2px 0 14px;
}

.sit-tipos-nota { margin-bottom: 10px; }
.sit-imagenes { margin-top: 12px; }
/* En la pantalla ancha, los seis tipos estirados a todo el ancho dejaban el
   rotulo y su casilla a treinta centimetros: se acotan y se pegan. */
#pantalla-curso .pia-tipos {
  grid-template-columns: repeat(auto-fit, minmax(190px, 230px));
  justify-content: start; gap: 8px 22px;
}

/* --- El resumen, en números grandes --------------------------------------- */
/* Los cuatro estados en fila, con el mismo color que despues lleva cada fila de
   la tabla: se leen como una escala y no como cuatro cifras sueltas. */
.sit-datos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sit-dato {
  flex: 1 1 120px; max-width: 220px;
  padding: 10px 14px; border-radius: var(--r);
  background: #f2f6fa; border: 1px solid var(--borde);
}
.sit-dato b { display: block; font-size: 24px; line-height: 1.15; color: var(--texto); }
.sit-dato span { font-size: 12px; color: var(--texto-suave); }
.sit-dato-sin  { background: var(--naranja-suave); border-color: #f6d9c9; }
.sit-dato-sin b, .sit-dato-sin span { color: var(--naranja-oscuro); }
.sit-dato-bajo { background: #fdecea; border-color: #f6cfc9; }
.sit-dato-bajo b, .sit-dato-bajo span { color: #9c2a1c; }
.sit-dato-medio { background: #fdf9e8; border-color: #f0e4bf; }
.sit-dato-medio b, .sit-dato-medio span { color: #8a6414; }
.sit-dato-logrado { background: #e8f6ef; border-color: #cce8dc; }
.sit-dato-logrado b, .sit-dato-logrado span { color: #1c7a53; }
/* Un estado en cero no tiene nada que destacar: se apaga para que los que si
   tienen algo salten a la vista. */
.sit-dato.vacio { background: #f7f9fb; border-color: var(--borde); }
.sit-dato.vacio b, .sit-dato.vacio span { color: var(--borde-fuerte); }

.sit-hallazgo {
  margin: 0 0 14px; font-size: 13px; line-height: 1.6;
  color: var(--naranja-oscuro); background: var(--naranja-suave);
  border-radius: var(--r-chico); padding: 10px 13px;
}
.sit-hallazgo-ok { color: #1c7a53; background: #e8f6ef; }

.sit-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sit-tabla th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--texto-suave); font-weight: 600;
  border-bottom: 1px solid var(--borde); padding: 6px 8px; white-space: nowrap;
}
.sit-tabla td { border-bottom: 1px solid var(--borde); padding: 9px 8px; vertical-align: middle; }
.sit-th-n { text-align: center; }

/* --- El contador, con botones --------------------------------------------
   Las flechitas nativas de un <input type=number> miden ocho pixeles y aca se
   usan una vez por fila. Con dos botones se aprieta sin apuntar. */
.sit-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--borde); border-radius: var(--r-capsula);
  background: #fff; overflow: hidden;
}
.sit-stepper.con-valor { border-color: var(--azul); }
.sit-paso-btn {
  width: 28px; border: none; background: #f5f7fa; color: var(--texto-medio);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.sit-paso-btn:hover:not(:disabled) { background: var(--azul-suave); color: var(--azul); }
.sit-paso-btn:disabled { color: var(--borde-fuerte); cursor: default; }
.sit-stepper input[type=number] {
  width: 40px; text-align: center; border: none; background: none;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--texto);
  -moz-appearance: textfield; padding: 5px 0;
}
.sit-stepper input::-webkit-outer-spin-button,
.sit-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sit-stepper input:focus { outline: none; }

/* --- Banco o IA, a la vista ----------------------------------------------
   Son dos opciones y la cuenta del banco es el dato con el que se elige; dentro
   de un <select> hay que abrirlo para verla. */
.sit-ops { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--r-capsula); overflow: hidden; }
.sit-op {
  padding: 6px 12px; border: none; background: #fff; color: var(--texto-medio);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.sit-op + .sit-op { border-left: 1px solid var(--borde); }
.sit-op b { font-weight: 700; }
.sit-op:hover:not(:disabled):not(.activa) { background: #f5f7fa; }
.sit-op.activa { background: var(--azul); color: #fff; }
.sit-op:disabled { color: var(--borde-fuerte); cursor: default; background: #fafbfc; }
.sit-op.activa:disabled { background: var(--borde-fuerte); color: #fff; }

.sit-oa b { display: block; font-size: 12.5px; color: var(--texto); }
.sit-oa span { display: block; color: var(--texto-medio); }
.sit-oa small { display: block; color: var(--texto-suave); font-size: 11px; margin-top: 2px; }
.sit-evaluado { color: var(--texto-medio); white-space: nowrap; }
.sit-evaluado small { display: block; color: var(--texto-suave); font-size: 11px; }
.sit-nada { color: var(--naranja-oscuro); font-weight: 600; }

.sit-logro { white-space: nowrap; }
.sit-barra {
  display: inline-block; width: 68px; height: 7px; border-radius: 4px;
  background: var(--borde); margin-right: 7px; overflow: hidden; vertical-align: middle;
}
.sit-barra i { display: block; height: 100%; background: var(--verde); }
.sit-bajo  .sit-barra i { background: var(--rojo); }
.sit-medio .sit-barra i { background: var(--naranja); }

.sit-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
/* «Sin evaluar» no es un logro bajo: es que no se sabe. Va en naranja de aviso,
   no en rojo, porque no hay nada que reprochar todavia. */
.sit-pill-sin     { background: var(--naranja-suave); color: var(--naranja-oscuro); }
.sit-pill-bajo    { background: #fdecea; color: #9c2a1c; }
.sit-pill-medio   { background: #fdf9e8; color: #8a6414; }
.sit-pill-logrado { background: #e8f6ef; color: #1c7a53; }

.sit-fila.sit-sin  td { background: #fffaf6; }
.sit-fila.sit-pedida td { background: #eef7fd; }
/* La fila comodin se separa de las del curriculo con una linea gruesa abajo:
   no es un objetivo mas de la lista, es la alternativa a la lista. */
.sit-fila.sit-libre td { background: #f7f9fb; border-bottom: 2px solid var(--borde); }
.sit-fila.sit-libre.sit-pedida td { background: #eef7fd; }
.sit-fila.sit-libre .sit-oa b { color: var(--azul-oscuro); }
.sit-pedido.libre { background: #eef1f5; color: var(--texto); }

/* Los objetivos propios del colegio: verde del producto, ni el azul de acción
   ni el naranja de aviso. Van después del currículo, separados por una raya. */
.sit-fila.sit-propia td { background: #fbfdfc; }
.sit-fila.sit-propia.sit-pedida td { background: var(--c-verde); }
.sit-tabla tr.sit-fila:not(.sit-propia) + tr.sit-propia td { border-top: 2px solid var(--borde); }
.sit-propio-marca {
  font-style: normal; font-size: 10.5px; font-weight: 700; vertical-align: 1px;
  padding: 1px 7px; margin-right: 4px; border-radius: var(--r-capsula);
  background: var(--c-verde); color: var(--c-verde-txt);
}
.sit-agregar-propio { display: flex; gap: 8px; margin-top: 12px; }
.sit-agregar-propio input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--texto);
  padding: 7px 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-capsula); background: #fff;
}
.sit-agregar-propio input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.sit-corto { display: block; margin-top: 3px; color: var(--naranja-oscuro); font-size: 11px; line-height: 1.4; }

/* El pie se queda pegado abajo: la tabla es larga y el total —y el boton de
   crear— tienen que estar a la vista mientras se reparten las preguntas, no
   despues de volver a bajar. */
.sit-pie {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 13px 22px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-grande);
  box-shadow: var(--sombra-media);
}
.sit-cuenta { font-size: 13.5px; color: var(--texto-medio); flex: 1 1 200px; }

@media (max-width: 1100px) {
  #pantalla-curso { padding: 18px 16px 30px; }
  .sit-panel { padding: 16px 14px; }
  .sit-evaluado small { white-space: normal; }
}

/* Alternativas que son DIBUJOS: cuatro figuras rotuladas A) B) C) D) que el
   importador separo en una imagen por alternativa. Se acotan en alto para que
   una fila no se coma media hoja. */
.alt-img { max-height: 92px; max-width: 100%; vertical-align: middle; }
.pdfc-alts .alt-img { max-height: 58px; }