/* ==========================================================================
   editor.css — los estilos de la maquinaria que comparten los gadgets
   ==========================================================================
   Va junto con `assets/editor.js`. Igual que ahi: es el mismo codigo en un solo
   lugar, no una libreria. Depende de los tokens de `base.css` (--azul,
   --r-capsula, --texto...).

   Se carga DESPUES de base.css y ANTES del app.css del gadget, para que el
   gadget pueda ajustar lo que necesite sin pelear con !important.
   ========================================================================== */

/* --- 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; }
.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); }
.rec-mal { color: var(--rojo); font-weight: 600; }

/* 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 */
.ggb-nota { font-size: 12.5px; color: var(--texto-suave); margin-top: 12px; }
.ggb-nota b { color: var(--texto-medio); }

.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;
}

/* --- Piezas que el editor usa y que los dos gadgets necesitan -------------- */
/* La imagen subida por 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; }

/* Los dos modales se apilan: el de tabla o imagen se abre DESDE el de texto. */
#editor-fondo { z-index: 88; }
#modal-fondo  { z-index: 92; }

/* El borrador es una tranquilidad, no una accion: discreto a proposito. */
.dato-borrador { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; }
@media (max-width: 1400px) { .dato-borrador { display: none; } }

/* Campos que ya no se escriben en su sitio sino en el modal del editor.
   Siguen viendose como se imprimen, 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; } }

.btn-peligro { background: var(--rojo); color: #fff; border: 1px solid var(--rojo); }
.btn-peligro:hover { filter: brightness(.93); }

/* --- Generador de imagenes con IA (compartido) ---------------------------- */

.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; }


/* --- Rejilla para elegir el tamano de una tabla ---------------------------- */

.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); }


/* --- Acciones de la tarjeta lateral (duplicar / eliminar) ------------------ */
/* Aparecen al acercarse a la tarjeta: estan siempre, pero no compiten con los
   datos cuando uno solo esta leyendo. */
.carril-acciones { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.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); }

/* Cabecera de una 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; }

/* La imagen generada, ya puesta en el texto */
.img-bloque { margin: 8px 0; }
.img-ia { position: relative; display: inline-block; vertical-align: top; max-width: min(330px, 100%); height: auto; }