/* Sortivara — el panel de administración.
 *
 * ESTO VIVE EN DOS SITIOS Y ES EL MISMO: la página `panel/index.html`, para
 * administrar desde un navegador con pantalla grande, y una pantalla más dentro
 * del propio juego, para hacerlo desde el teléfono sin salir de la aplicación.
 * Las dos montan el MISMO módulo (`js/panel/panel.js`) — dos copias de un panel
 * es garantizar que un día una de las dos mienta.
 *
 * POR ESO TODO VA COLGADO DE `.panel` Y NADA DE ETIQUETAS SUELTAS. Antes eran
 * reglas sobre `body`, `table`, `button`, `input`… que en su propia página
 * estaban bien, y dentro del juego habrían repintado el juego entero: los
 * botones del pergamino en negro sobre oro, las tablas donde no hay tablas.
 *
 * Los diálogos son la excepción y llevan clase propia: se dibujan en la capa
 * superior del navegador, fuera de donde esté `.panel`, así que un selector
 * descendiente no los alcanzaría. */

.panel {
  --oro: #d9a441;
  --oroClaro: #f6d98a;
  --papel: #e8dcc8;
  --apagado: #a89b86;
  --fondo: #14110f;
  color-scheme: dark;
  color: var(--papel);
  background: var(--fondo);
  font: 15px/1.55 system-ui, -apple-system, sans-serif;
  text-align: left;
}
.panel *, .panel-dialogo * { box-sizing: border-box; }

.panel .caja { max-width: 1060px; margin: 0 auto; padding: 24px 18px 60px; }
.panel h1 { font: 600 26px/1.2 Georgia, serif; color: var(--oroClaro); margin: 0 0 2px; }
.panel .sub { color: var(--apagado); margin: 0 0 22px; }
.panel h2 { font: 600 17px/1.3 Georgia, serif; color: var(--oroClaro); margin: 30px 0 12px; }

.panel .entrar { max-width: 22rem; display: flex; flex-direction: column; gap: 10px; }
.panel input, .panel textarea, .panel select,
.panel-dialogo input, .panel-dialogo textarea, .panel-dialogo select {
  font: inherit; font-size: max(1rem, 16px); color: var(--papel);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(232, 220, 192, .18);
  border-radius: 9px; padding: 11px 13px;
}
.panel input:focus, .panel textarea:focus, .panel select:focus,
.panel-dialogo input:focus, .panel-dialogo textarea:focus, .panel-dialogo select:focus {
  outline: none; border-color: var(--oro);
}
.panel button, .panel-dialogo button {
  font: 600 14px system-ui; background: var(--oro); color: #20180c; border: 0;
  border-radius: 999px; padding: 11px 20px; cursor: pointer;
}
.panel button.llano, .panel-dialogo button.llano {
  background: transparent; color: var(--apagado); border: 1px solid rgba(232, 220, 192, .18);
}
/* UN BOTÓN QUE NO SE PUEDE PULSAR TIENE QUE VERSE ASÍ. «Abrir el nivel» salía
   en oro, entero, con un hechizo de los tres que hacen falta: se tocaba y no
   pasaba nada, sin un mensaje, porque estaba `disabled` y nada lo pintaba
   distinto (13-09-2026). Apagado y sin sombra, para todos los del panel. */
.panel button[disabled], .panel-dialogo button[disabled] {
  opacity: .38; cursor: not-allowed; box-shadow: none; filter: saturate(.4);
}

.panel .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; }
.panel .dato { background: #1e1a17; border-radius: 11px; padding: 14px 16px; }
.panel .dato b { display: block; font: 600 27px/1.1 Georgia, serif; color: var(--oroClaro); }
.panel .dato span { color: var(--apagado); font-size: 13px; }
/* La línea de detalle de un número: lo que lo explica («7 han jugado algo · desde 3 direcciones»). */
.panel .dato small { display: block; margin-top: 4px; color: var(--apagado); font-size: 11.5px; line-height: 1.35; opacity: .85; }

/* EL PIE DE CADA LISTA: anteriores · «1–10 de 43» · siguientes. Vacío cuando
   la lista cabe en una página. */
.panel .paginas { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 4px; flex-wrap: wrap; }
.panel .paginas:empty { display: none; }
.panel .paginas button[disabled] { cursor: default; }

/* Lo plegado del embudo: los hechizos de después del décimo. */
.panel .pa-resto > summary { cursor: pointer; color: var(--oroClaro); font-size: 13px; padding: 10px 4px; list-style: none; }
.panel .pa-resto > summary::-webkit-details-marker { display: none; }
.panel .pa-resto > summary::after { content: " ▾"; }
.panel .pa-resto[open] > summary::after { content: " ▴"; }

.panel table { width: 100%; border-collapse: collapse; font-size: 14px; }
.panel th, .panel td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #2a2420; }
.panel th {
  color: var(--apagado); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .06em;
}
.panel td.num, .panel th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── LA FICHA ────────────────────────────────────────────────────────────────

   Lo que sustituyó a las tablas donde no hacían falta. Un hechizo, un nivel,
   una petición o un mago son OBJETOS con nombre, estado y acciones — no filas
   de números comparables—, y en columnas eso no cabe en un teléfono: se veía
   la primera columna y media, y para llegar al botón había que desplazarse
   hasta el infinito hacia la derecha.

   Arriba lo que identifica, a la derecha el estado, debajo la línea de apoyo y
   al pie los botones, donde el pulgar llega. */
.panel .ficha {
  background: #1e1a17;
  border: 1px solid rgba(232, 220, 192, .08);
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 9px;
}
.panel .ficha-alto {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.panel .ficha-quien { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.panel .ficha-titulo {
  font: 600 15.5px/1.3 Georgia, serif; color: var(--papel);
  /* Un correo largo parte por donde sea antes que desbordar la ficha. */
  overflow-wrap: anywhere;
}
.panel .ficha-meta { color: var(--apagado); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.panel .ficha-detalle { color: var(--apagado); font-size: 12.5px; margin: 9px 0 0; }
/* ── CONTESTAR UNA PETICIÓN, DONDE SE LEE ────────────────────────────────────
   La caja de respuesta va dentro de la propia ficha y no en un diálogo aparte:
   lo que hay que contestar está justo encima, y sacarlo a otra ventana obliga a
   recordarlo. */
.panel .responder { margin-top: 11px; }
/* Los 16 px son de la regla de arriba y no se bajan: por debajo, iOS hace zoom
   al tocar el campo y saca la ficha de la pantalla. Lo que se ajusta es el
   interlineado, para que quepan cinco renglones de respuesta y no dos. */
.panel .responder textarea {
  width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.45;
}
.panel .ficha-respuesta {
  margin: 9px 0 0; padding: 9px 12px; border-radius: 0 9px 9px 0;
  border-left: 2px solid rgba(217, 164, 65, .55); background: #1e1a17;
  color: var(--apagado); font-size: 13px; white-space: pre-wrap;
}
.panel .ficha-aviso { margin: 8px 0 0; font-size: 12.5px; color: #ffb0a6; }
/* Lo que ya se hizo no va en rojo: el rojo es para lo que hay que mirar. */
.panel .ficha-aviso.hecho { color: var(--apagado); }
/* Un botón que destruye no puede parecerse a los demás. */
.panel button.peligro, .panel-dialogo button.peligro {
  background: #a8384a; color: #fdeceb;
}
.panel .urge-texto { color: #ffb0a6; }

.panel .ficha-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
/* Los botones de una ficha son más pequeños que los de cabecera: son acciones
   sobre una cosa, no sobre la pantalla. Sin bajar de los 44 px que hacen falta
   para acertarles con el dedo. */
.panel .ficha-acciones button { font-size: 13px; padding: 9px 15px; min-height: 44px; }

/* La pastilla: un estado se lee de un vistazo cuando tiene forma, no cuando
   hay que leer la palabra en medio de una fila. */
.panel .pastilla {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; min-height: 1.9rem; padding: 0 .55rem;
  border-radius: 999px; background: rgba(232, 220, 192, .07);
  color: var(--apagado); font: 600 11.5px/1 system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.panel .pastilla.bien { background: rgba(63, 154, 114, .16); color: #7fd3ab; }
.panel .pastilla.ojo { background: rgba(217, 164, 65, .16); color: var(--oroClaro); }
.panel .pastilla.urge { background: rgba(192, 68, 86, .2); color: #ffb0a6; }
.panel .pastilla.admin { background: rgba(217, 164, 65, .16); color: var(--oroClaro); }
/* LA PASTILLA DE ESTADO DE UNA FICHA, TODAS IGUALES. Es la de la esquina —
   «Admin», «Sin cuenta», «pendiente», «vale»— y cada una salía del tamaño de
   su palabra: la corta redonda y alta, la larga ancha y baja, y en una lista
   se veían como cosas distintas siendo lo mismo (13-09-2026). Misma altura,
   mismo ancho mínimo, mismo tamaño de letra; y `flex: none`, para que el
   título largo no la aplaste. Las de dentro del texto —el número de fase, los
   días— siguen a su aire, que ésas sí miden lo que dicen. */
.panel .ficha-alto > .pastilla {
  flex: none; height: 1.65rem; min-width: 6.4rem; padding: 0 .75rem;
  font-size: 11px; letter-spacing: .07em;
}

/* Un código se dicta y se teclea, así que se enseña como lo que es: en
   monoespaciado y separado, para no confundir un 8 con una B al leerlo. */
.panel .pa-codigo {
  font: 600 15px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em; color: var(--oroClaro);
}

/* ── LOS FILTROS Y LOS GRUPOS DEL CATÁLOGO ───────────────────────────────────
   Con cien hechizos una lista seguida es inmanejable. Se agrupa por nivel y se
   pliega —la jerarquía que el juego ya tiene— y se filtra por lo que se está
   buscando, que trabajando suele ser "lo que falta por publicar". */
.panel .pa-filtros {
  display: flex; gap: 7px; margin: 0 0 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.panel .pa-filtros::-webkit-scrollbar { height: 0; }
.panel .pa-filtro {
  flex: none; background: transparent; color: var(--apagado);
  border: 1px solid rgba(232, 220, 192, .18); border-radius: 999px;
  padding: 9px 15px; font: 600 12.5px system-ui, sans-serif;
  white-space: nowrap; min-height: 44px;
}
.panel .pa-filtro.activa {
  background: rgba(217, 164, 65, .16); color: var(--oroClaro);
  border-color: rgba(217, 164, 65, .45);
}

.panel .pa-grupo-nivel { margin-bottom: 10px; }
.panel .pa-grupo-nivel > summary {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(232, 220, 192, .045);
  border: 1px solid rgba(232, 220, 192, .10);
  cursor: pointer; min-height: 44px; list-style: none;
}
.panel .pa-grupo-nivel > summary::-webkit-details-marker { display: none; }
/* Una flecha propia: la del navegador no se puede colocar y en iOS se pinta
   fuera del sitio cuando el resumen tiene varias líneas. */
.panel .pa-grupo-nivel > summary::after {
  content: "›"; margin-left: auto; color: var(--apagado);
  font-size: 20px; line-height: 1; transition: transform .18s;
}
.panel .pa-grupo-nivel[open] > summary::after { transform: rotate(90deg); }
.panel .pa-grupo-nombre { font: 600 14.5px Georgia, serif; color: var(--papel); }
.panel .pa-grupo-nivel > .ficha { margin: 8px 0 0 0; }
.panel .pa-grupo-nivel > .ficha:first-of-type { margin-top: 10px; }

/* ── EL RENGLÓN ──────────────────────────────────────────────────────────────
   Para lo que SÍ son números comparables —el embudo, la nota de cada hechizo—.
   Sigue siendo una lista de medidas, pero puesta en dos líneas en vez de en
   seis columnas: el nombre y la cifra arriba, la barra, y el detalle al pie. */
.panel .renglon { padding: 11px 2px; border-bottom: 1px solid #2a2420; }
.panel .renglon-alto {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.panel .renglon-nombre { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.panel .renglon-cifra {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--oroClaro);
}
.panel .renglon-cifra.flojo { color: #ffb0a6; }
.panel .renglon-pie { color: var(--apagado); font-size: 12px; margin-top: 6px; }

/* ── LA CABECERA Y LAS SECCIONES ────────────────────────────────────────── */
.panel .panel-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.panel .panel-marca {
  font: 600 11.5px/1 system-ui, sans-serif; color: var(--apagado);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px;
}
/* EL TÍTULO, DESHACIENDO LO QUE EL JUEGO LE HACE A LOS h1. En el juego un h1 es
   "SORTIVARA" en la portada: un degradado recortado al texto con
   `-webkit-text-fill-color: transparent`. Compartiendo documento, esa regla
   caía también aquí — y `color` no la deshace, porque el relleno lo manda
   `-webkit-text-fill-color`. El resultado era "Resumen" en marrón oscuro con
   un filo claro, ilegible sobre el fondo del panel (07-09-2026).

   Se apagan las tres piezas del efecto, no solo el color: el recorte, el
   relleno y el brillo. Y vale para todos los títulos del panel, que es donde
   esto puede repetirse. */
.panel h1, .panel h2, .panel h3,
.panel-dialogo h1, .panel-dialogo h2, .panel-dialogo h3 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  filter: none;
  letter-spacing: normal;
}
.panel .panel-cabecera h1 { font: 600 24px/1.2 Georgia, serif; color: var(--oroClaro); margin: 0; }
.panel .panel-seccion h2:first-child { margin-top: 18px; }

/* Las pestañas de arriba son para pantalla grande. En el teléfono la sección se
   elige con la barra de abajo —la que sustituye a la del juego— y tener las dos
   sería decir dos veces lo mismo, ocupando lo que hace falta para el contenido. */
.panel .panel-pestanas {
  display: flex; gap: 7px; margin: 16px 0 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.panel .panel-pestanas::-webkit-scrollbar { height: 0; }
.panel .panel-pestana {
  flex: none; background: transparent; color: var(--apagado);
  border: 1px solid rgba(232, 220, 192, .18); border-radius: 999px;
  padding: 9px 16px; font: 600 13px system-ui, sans-serif;
  white-space: nowrap; min-height: 44px;
}
.panel .panel-pestana.activa {
  background: rgba(217, 164, 65, .16); color: var(--oroClaro);
  border-color: rgba(217, 164, 65, .45);
}
@media (max-width: 720px) {
  .panel .panel-pestanas { display: none; }
}

/* La subnavegación de una sección con varios paneles. SE VE IGUAL EN EL
   TELÉFONO Y EN LA PANTALLA GRANDE, a propósito: es el mismo nivel de decisión
   en los dos, y dos aspectos distintos para lo mismo obligan a aprenderlo dos
   veces. Se desliza en horizontal cuando no cabe. */
.panel .panel-subnav {
  display: flex; gap: 7px; margin: 0 0 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.panel .panel-subnav::-webkit-scrollbar { height: 0; }
/* En el juego, estilos.css ya hace que [hidden] mande sobre cualquier display;
   la página suelta del panel no lo carga, y `display: flex` le ganaba al
   atributo: salían las pestañas de Magos debajo de Hechizos (14-09-2026). */
.panel .panel-subnav[hidden] { display: none; }
.panel .panel-subpestana {
  flex: none; background: rgba(232, 220, 192, .05); color: var(--apagado);
  border: 1px solid rgba(232, 220, 192, .14); border-radius: 999px;
  padding: 9px 16px; font: 600 13px system-ui, sans-serif;
  white-space: nowrap; min-height: 44px;
}
.panel .panel-subpestana.activa {
  background: rgba(217, 164, 65, .16); color: var(--oroClaro);
  border-color: rgba(217, 164, 65, .45);
}
.panel .tenue { color: var(--apagado); }

/* La barra del embudo: se ve de un vistazo dónde se cae la gente, que es para
   lo que sirve la tabla. Un número solo no lo cuenta igual. */
.panel .barra { height: 8px; background: #2a2420; border-radius: 99px; overflow: hidden; min-width: 80px; }
.panel .barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--oro), var(--oroClaro)); }

/* LOS DIÁLOGOS. Sin las etiquetas en bloque, los tres primeros campos acaban
   uno al lado del otro con la pista a media pantalla: no es un formulario, es
   una frase con cajas dentro. */
.panel-dialogo {
  --oro: #d9a441; --oroClaro: #f6d98a; --papel: #e8dcc8; --apagado: #a89b86;
  color-scheme: dark;
  background: #151210; color: var(--papel); border: 1px solid rgba(232, 220, 192, .18);
  border-radius: 16px; padding: 22px 24px; max-width: min(560px, 92vw);
  font: 15px/1.55 system-ui, -apple-system, sans-serif;
}
.panel-dialogo::backdrop { background: rgba(0, 0, 0, .6); }
.panel-dialogo h3 { margin: 0 0 16px; font: 600 20px Georgia, serif; color: var(--oroClaro); }
.panel-dialogo label { display: block; margin-bottom: 12px; color: var(--apagado); font-size: 13px; }
.panel-dialogo label input, .panel-dialogo label textarea, .panel-dialogo label select {
  display: block; width: 100%; margin-top: 5px;
}
.panel-dialogo textarea { resize: vertical; }
/* La letra pequeña de cada campo: qué es y dónde se ve. Un formulario de
   creación sin esto obliga a adivinar — "la ayuda qué es, ¿dónde se muestra?" */
.panel-dialogo label small {
  display: block; margin-top: 5px; color: var(--apagado);
  font-size: 12px; line-height: 1.45; text-transform: none; letter-spacing: normal;
}
.panel-dialogo .pa-grupo {
  border: 1px solid rgba(232, 220, 192, .14); border-radius: 12px;
  padding: 14px 15px 4px; margin: 0 0 14px;
}
.panel-dialogo .pa-grupo legend {
  padding: 0 7px; color: var(--oroClaro); font: 600 13px Georgia, serif;
}
.panel-dialogo .pa-grupo > .tenue { margin: 0 0 11px; font-size: 12.5px; }

/* Los objetos de la escena: pastillas que se encienden al escogerlas. Una
   lista de quince con casillas ocuparía la pantalla entera de un teléfono. */
.panel-dialogo .pa-fichas-elegir {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px;
}
.panel-dialogo .pa-elegir {
  background: transparent; color: var(--apagado);
  border: 1px solid rgba(232, 220, 192, .18); border-radius: 999px;
  padding: 9px 14px; font: 600 12.5px system-ui, sans-serif; min-height: 44px;
}
.panel-dialogo .pa-elegir.puesto {
  background: rgba(217, 164, 65, .18); color: var(--oroClaro);
  border-color: rgba(217, 164, 65, .5);
}
/* Lo escogido, dicho en una frase: la forma más corta de comprobar que lo que
   se eligió dice lo que se quería decir, antes de guardarlo. */
/* La previsualización: la escena grande y el trazo al lado. En un teléfono se
   ponen una debajo de otra, que es lo único que cabe. */
.panel-dialogo .pa-vista {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start;
  margin: 12px 0;
}
.panel-dialogo .pa-vista canvas {
  border-radius: 12px; border: 1px solid rgba(232, 220, 192, .14);
  max-width: 100%; height: auto;
}
.panel-dialogo #pa-vs-escena { flex: 1 1 260px; }
.panel-dialogo #pa-vs-trazo { flex: 0 0 auto; width: 140px; }
.panel-dialogo #pa-vs-titulo { margin-bottom: 4px; }
.panel-dialogo #pa-vs-efecto { margin: 0 0 4px; font-size: 14px; color: var(--papel); }

.panel-dialogo .pa-frase {
  margin: 6px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(217, 164, 65, .09); color: var(--oroClaro);
  font: italic 13.5px/1.45 Georgia, serif;
}

/* DENTRO DEL JUEGO, `.aviso` ES EL LETRERO FLOTANTE de estilos.css: absoluto,
   con opacidad 0 hasta que se le pone `.visible`. El panel y el Taller usan
   la misma clase para un párrafo de error normal, y dentro del juego ese
   párrafo salía invisible: «Dibuja el trazo…» no se veía y parecía que
   Guardar no hacía nada (16-09-2026). Aquí se deshace todo lo del letrero. */
.panel .aviso, .panel-dialogo .aviso {
  position: static; opacity: 1; transform: none; pointer-events: auto; z-index: auto;
  text-align: left; font: 500 14px/1.45 var(--sans, system-ui, sans-serif); letter-spacing: 0; text-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: inherit;
  background: rgba(142, 43, 58, .25); border-radius: 9px; padding: 11px 14px; margin: 14px 0;
}
.panel .aviso::before, .panel .aviso::after, .panel-dialogo .aviso::before, .panel-dialogo .aviso::after { content: none; }
.panel .oculto, .panel-dialogo .oculto { display: none !important; }
.panel .barra-sup, .panel-dialogo .barra-sup {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px;
}

/* DENTRO DEL JUEGO OCUPA LA PANTALLA ENTERA y se desplaza sola. El juego pinta
   sus pantallas centradas y sin scroll —son tarjetas— y el panel es lo
   contrario: una lista larga que se recorre.

   CON `.activa`, no a secas: `.pantalla` está oculta hasta que `mostrar()` la
   enciende, y una regla sin esa clase la dejaría encendida siempre — el panel
   pintado detrás del juego desde el primer arranque. */
.pantalla.panel.activa {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Sin el hueco de arriba, las primeras filas quedan debajo del notch. A los
     lados, CERO: `.pantalla` mete veinte píxeles pensando en tarjetas
     centradas, y sumados a los de `.caja` dejaban la rejilla en 299 px — justo
     por debajo de lo que hacen falta para dos columnas, así que los indicadores
     salían de uno en uno, ocupando media pantalla cada uno. */
  padding: var(--arriba, 0) 0 0;
}
/* Y abajo, sitio para la barra de navegación del juego, que va flotando encima:
   sin esto los botones de paginación —lo último de la lista— quedan justo
   debajo de ella y no se pueden tocar. */
.pantalla.panel.activa .caja { padding-bottom: calc(var(--abajo, 0px) + 6rem); }

/* ── Los idiomas: el editor de traducciones ────────────────────────────────
   El original a la izquierda y la traducción a la derecha, fila a fila; en un
   teléfono, uno encima del otro. */
.panel .pa-casilla { display: inline-flex; align-items: center; gap: 8px; color: var(--apagado); font-size: 13px; }
.panel .pa-casilla input { width: auto; margin: 0; }
.panel .pa-trad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.panel .pa-trad-original { font-size: 14px; line-height: 1.4; color: var(--pergamino, #e8dcc0); }
.panel .pa-trad-original small { display: block; font-size: 11px; color: var(--apagado); margin-bottom: 2px; }
.panel .pa-trad textarea { width: 100%; box-sizing: border-box; resize: vertical; font-size: 14px; }
.panel .pa-trad-bloque h3 { margin: 18px 0 4px; font: 600 15px Georgia, serif; color: var(--oroClaro); }
@media (max-width: 640px) { .panel .pa-trad { grid-template-columns: 1fr; gap: 6px; } }

/* El código de un hechizo compartido por enlace, para dictarlo (el Taller). */
.panel-dialogo .codigo-grande {
  margin: 0 0 14px; font: 700 30px/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .18em; color: var(--oroClaro); user-select: all;
}

/* ── EN UNA PANTALLA ANCHA, TODO EL ANCHO (14-10-2026) ────────────────────────
   «En la web deberíamos aprovechar el ancho de la pantalla para todo». El
   panel se quedaba en una columna de 1060 px en medio de un monitor; ahora la
   caja se abre y las listas de fichas —magos, peticiones, comunidad, el
   catálogo, el taller— van en columnas. Lo que no es una ficha dentro de esas
   listas (un rótulo, la paginación) ocupa la fila entera. Y el editor de un
   hechizo, que es un formulario largo con su vista, se ensancha. */
@media (min-width: 1200px) {
  .panel .caja { max-width: min(1680px, 100%); padding-left: 32px; padding-right: 32px; }
  /* Sin `:is(a, b)`: probar-panel.mjs separa los selectores por comas para
     comprobar que todos cuelgan de `.panel`. */
  .panel div:has(> .ficha + .ficha) {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 12px; align-items: start;
  }
  .panel div:has(> .ficha + .ficha) > .ficha { margin-bottom: 0; }
  .panel div:has(> .ficha + .ficha) > :not(.ficha) { grid-column: 1 / -1; }
  .panel-dialogo:has(#pa-nh-guardar), .panel-dialogo:has(#tl-nh-guardar) { max-width: min(880px, 94vw); }
}

/* Hechizos → Comunidad, solo con la comunidad encendida en el servidor
   (`Funciones:Comunidad`). La misma regla que en estilos.css, aquí también
   porque la página suelta del panel no carga aquella hoja. */
html:not([data-comunidad="si"]) .panel .solo-comunidad { display: none !important; }