/* La consola de gestión de AutoContratos.
 *
 * Paleta y tipografía de KriteriusMX (DD-20 de la Enmienda 05): la consola es
 * la herramienta del despacho y de quien administra la plataforma, y tiene
 * que verse de la misma casa que el resto de KriteriusMX. Arranca en tema
 * oscuro con interruptor a claro, recordado en `localStorage`.
 *
 * Sin tipografías remotas y sin CDN: Palatino para títulos y Avenir para
 * cuerpo son pilas del sistema, igual que en `pantalla.css`, y la misma CSP
 * sin `'unsafe-inline'` que sirve `app/api/rutas/consola.py` impide que
 * cualquiera añada mañana una fuente o un script ajeno.
 */

:root {
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", serif;
  --sans: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --r-chico: .35rem;
  --r: .55rem;
  --r-grande: .9rem;
  --lateral: 15.5rem;

  /* Tema oscuro: el predeterminado. */
  --fondo: #101A0C;
  --sup: #182312;
  --sup-2: #1F2C18;
  --borde: #2C3A24;
  --borde-control: #839473;
  --borde-accion: #D2882C;
  --borde-suave: #24301C;
  --texto: #E7E3D6;
  --texto-tenue: #9AA18E;
  --verde: #3D6B33;
  --verde-cl: #5C8C50;
  --verde-hondo: #20351A;
  --ambar: #D2882C;
  --ambar-cl: #EBA345;
  --link: #EBA345;
  --link-hover: #F2BD57;
  --foco-visible: #5C8C50;
  --dorado: #9A8A5A;
  --peligro: #E0796B;
  --peligro-fondo: #2A1A16;
  --sombra: 0 1px 3px rgba(0, 0, 0, .4);
}

:root[data-tema="claro"] {
  --fondo: #F7F4EC;
  --sup: #FFFFFF;
  --sup-2: #EFEADC;
  --borde: #DCD5C3;
  --borde-control: #77836D;
  --borde-accion: #805010;
  --borde-suave: #E8E2D3;
  --texto: #1B2416;
  --texto-tenue: #626B57;
  --verde: #3D6B33;
  --verde-cl: #2E5326;
  --verde-hondo: #E4EADD;
  --ambar: #805010;
  --ambar-cl: #6F460F;
  --link: #805010;
  --link-hover: #6F460F;
  --foco-visible: #2E5326;
  --dorado: #7A6B3F;
  --peligro: #A33B28;
  --peligro-fondo: #FBEEEB;
  --sombra: 0 1px 3px rgba(27, 36, 22, .08);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.3; margin: 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
}
a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 3px solid var(--foco-visible);
  outline-offset: 3px;
  border-radius: 4px;
}

.salto {
  position: absolute; left: -9999px; top: 0;
  background: var(--sup); color: var(--texto);
  padding: .7rem 1rem; z-index: 50; border-radius: var(--r);
}
.salto:focus { left: .5rem; top: .5rem; }

[hidden] { display: none !important; }

/* ── Marca e isotipo ──────────────────────────────────────────────────
 * El isotipo de KriteriusMX (app-web/web/index.html) se incrusta como un
 * único <symbol> reusado con <use>. Ni el trazo ni el punto llevan un
 * atributo `fill`/`stroke` con un color: los dos se pintan por clase, en
 * esta hoja, para que "sin estilo inline" sea literal y no sólo evite la
 * palabra `style=`. */
.isotipo-trazo { stroke: currentColor; }
.isotipo-punto { fill: var(--ambar); }

.marca { display: flex; align-items: center; gap: .6rem; color: var(--texto); }
.marca h1 { font-size: 1.05rem; }
.marca .firma { font-size: .72rem; color: var(--texto-tenue); letter-spacing: .04em; }

/* ── Controles ──────────────────────────────────────────────────────── */

button, select, input, textarea { font: inherit; color: inherit; }

button {
  min-height: 2.75rem;
  padding: .5rem .9rem;
  background: var(--sup);
  border: 1px solid var(--borde-control);
  border-radius: var(--r);
  cursor: pointer;
  font-weight: 600;
}

button:hover:not(:disabled) { border-color: var(--verde-cl); }

button.primario { background: #D2882C; border-color: var(--borde-accion); color: #101A0C; }
button.primario:hover:not(:disabled) { background: #EBA345; border-color: var(--borde-accion); }

button.accion { background: #D2882C; border-color: var(--borde-accion); color: #101A0C; }
button.accion:hover:not(:disabled) { background: #EBA345; border-color: var(--borde-accion); }

button.peligro { background: transparent; border-color: var(--peligro); color: var(--peligro); }
button.peligro:hover:not(:disabled) { background: var(--peligro-fondo); }

button.plano {
  background: transparent;
  border: 1px solid var(--borde-control);
  color: var(--texto);
  min-height: 2.75rem;
  padding: .6rem .9rem;
}
button.plano:hover:not(:disabled) { background: var(--sup-2); color: var(--texto); }
button:disabled,
button.primario:disabled,
button.accion:disabled,
button.plano:disabled {
  opacity: .58;
  background: var(--sup-2);
  color: var(--texto-tenue);
  border-color: var(--borde-control);
  cursor: not-allowed;
}
button:disabled:hover,
button.primario:disabled:hover,
button.accion:disabled:hover,
button.plano:disabled:hover {
  background: var(--sup-2);
  border-color: var(--borde-control);
}

select,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
  width: 100%;
  padding: .55rem .7rem;
  min-height: 2.75rem;
  background: var(--sup);
  color: var(--texto);
  border: 1px solid var(--borde-control);
  border-radius: var(--r);
}
select:focus, input:focus, textarea:focus {
  outline: 3px solid var(--foco-visible);
  outline-offset: 3px;
  border-color: var(--foco-visible);
}

input[type="file"]::file-selector-button {
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 1px solid var(--borde-control);
  border-radius: var(--r);
  background: var(--sup-2);
  color: var(--texto);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--verde-cl); }
input[type="file"]::-webkit-file-upload-button {
  min-height: 2.75rem;
  padding: .55rem .75rem;
}

label { display: block; font-size: .8rem; color: var(--texto-tenue); margin: 0 0 .3rem; }
.campo { margin-bottom: .8rem; }

/* ── Interruptor de tema ────────────────────────────────────────────── */

.interruptor {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 0; min-height: 2.75rem; padding: .45rem .65rem;
  color: var(--texto-tenue); font-size: .78rem; font-weight: 500;
}
.interruptor:hover:not(:disabled) { background: transparent; color: var(--texto); }
.riel {
  position: relative; flex: 0 0 auto;
  width: 2.8rem; height: 1.45rem;
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: 1rem;
}
.perilla {
  position: absolute; top: 50%; left: .16rem;
  width: .95rem; height: .95rem; margin-top: -.475rem;
  border-radius: 50%; background: var(--dorado);
  transition: transform .15s, background .15s;
}
.interruptor[aria-checked="true"] .riel { background: var(--verde-hondo); border-color: var(--verde); }
.interruptor[aria-checked="true"] .perilla { transform: translateX(1.25rem); background: var(--ambar); }

/* ── Acceso ─────────────────────────────────────────────────────────── */

.acceso {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
}
.tarjeta {
  width: 100%; max-width: 24rem;
  background: var(--sup);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  padding: 2rem;
  box-shadow: var(--sombra);
}
.tarjeta .marca { justify-content: center; margin-bottom: .3rem; }
.tarjeta h1 { font-size: 1.5rem; text-align: center; }
.tarjeta .apunte { text-align: center; color: var(--texto-tenue); font-size: .85rem; margin: .3rem 0 1.6rem; }
.tarjeta .tema-linea { text-align: center; margin-top: 1.2rem; }

.error {
  color: var(--peligro); background: var(--peligro-fondo);
  border: 1px solid var(--peligro); border-radius: var(--r);
  padding: .6rem .8rem; font-size: .85rem; margin-top: .8rem;
}

/* ── Estructura de la aplicación ───────────────────────────────────── */

.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100%; }

.lateral {
  background: var(--sup); border-right: 1px solid var(--borde);
  display: flex; flex-direction: column; min-width: 0;
}
.lateral-cabeza { padding: 1rem; border-bottom: 1px solid var(--borde-suave); }
.nav { padding: .6rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.nav a {
  display: block; padding: .55rem .7rem; border-radius: var(--r-chico);
  color: var(--texto); font-weight: 500; font-size: .9rem;
  border: 1px solid transparent;
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
}
.nav a:hover { background: var(--sup-2); color: var(--texto); text-decoration: underline; }
.nav a[aria-current="true"] {
  background: var(--sup-2);
  color: var(--texto);
  border-color: var(--borde-control);
  font-weight: 700;
}
.lateral-pie { padding: .8rem 1rem 1rem; border-top: 1px solid var(--borde-suave); }
.quien { display: block; font-size: .75rem; color: var(--texto-tenue); margin-bottom: .6rem; overflow-wrap: anywhere; }

.principal { padding: 1.6rem 1.8rem; overflow-x: auto; }
.principal h2 { font-size: 1.35rem; margin-bottom: 1.1rem; }

/* ── Avisos ─────────────────────────────────────────────────────────── */

.avisos { position: fixed; right: 1rem; top: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; max-width: 24rem; }
.nota {
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r);
  padding: .7rem .9rem; box-shadow: var(--sombra); font-size: .85rem;
}
.nota.error { border-color: var(--peligro); color: var(--peligro); background: var(--peligro-fondo); }

.aviso-pendiente {
  border: 1px dashed var(--borde);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  color: var(--texto-tenue);
  font-size: .88rem;
  background: var(--sup-2);
}
.aviso-pendiente.compacto { padding: .5rem .7rem; font-size: .78rem; margin-top: .3rem; }

/* ── Cuota propia (tablero y solicitudes) ─────────────────────────────── */

.cuota-indicador {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  border: 1px solid var(--borde); border-radius: var(--r);
  padding: .5rem .8rem; margin-bottom: 1rem; font-size: .85rem;
  background: var(--sup);
}
.cuota-indicador.agotada { border-color: var(--peligro); color: var(--peligro); background: var(--peligro-fondo); }

/* ── Enlace del portal ─────────────────────────────────────────────────── */

.enlace-generado { margin-top: .8rem; }
.enlace-generado input { width: auto; flex: 1; min-width: 14rem; }

/* Nodo fuera de pantalla usado sólo para copiar texto con `execCommand`
 * cuando `navigator.clipboard` no está disponible (Safari en http, algún
 * navegador embebido). Nunca se ve: existe un instante, en cada copia. */
.textarea-oculto { position: absolute; left: -9999px; top: 0; }

/* ── Cifras del tablero ────────────────────────────────────────────── */

.cifras { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.4rem; }
.cifra {
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r);
  padding: .8rem 1.1rem; min-width: 9rem;
}
.cifra .valor { font-family: var(--serif); font-size: 1.6rem; color: var(--ambar); }
.cifra .rotulo { font-size: .76rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; }

/* ── Filtros ────────────────────────────────────────────────────────── */

.filtros { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; margin-bottom: 1rem; }
.filtros .campo { margin-bottom: 0; min-width: 10rem; }
.filtros label.casilla { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--texto); }
.filtros input[type="checkbox"] { width: auto; }

/* ── Tablas ─────────────────────────────────────────────────────────── */

.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--sup); }
table.tabla th, table.tabla td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--borde-suave); white-space: nowrap; }
table.tabla th { color: var(--texto-tenue); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; background: var(--sup-2); }
table.tabla tbody tr.clicable { cursor: pointer; }
table.tabla tbody tr.clicable:hover { background: var(--sup-2); }
table.tabla td.vacio { text-align: center; color: var(--texto-tenue); padding: 1.4rem; white-space: normal; }

/* ── Chips de estado ────────────────────────────────────────────────── */

.chip {
  display: inline-block; padding: .2rem .55rem; border-radius: 1rem;
  font-size: .74rem; font-weight: 600; border: 1px solid var(--borde);
  color: var(--texto-tenue); background: var(--sup-2);
}
.chip.chip-avance { color: var(--texto); border-color: var(--verde); background: var(--verde-hondo); }
.chip.chip-validacion { color: var(--ambar); border-color: var(--ambar); background: var(--peligro-fondo); }
.chip.chip-terminal { color: var(--texto); border-color: var(--borde); }
.chip.chip-cancelada { color: var(--peligro); border-color: var(--peligro); background: var(--peligro-fondo); }
.chip.chip-alerta { color: var(--peligro); border-color: var(--peligro); }

/* ── Tarjetas y fichas de expediente ───────────────────────────────── */

.tarjeta-plana {
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-grande);
  padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
}
.expediente-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; justify-content: space-between; }
.expediente-titulo { font-size: 1.15rem; }
.destinos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* DD-28: cada transición es una acción con verbo y una línea de ayuda debajo
 * del botón. La que el sistema hace normalmente lleva además la clase
 * `automatica`, que la atenúa: es una corrección manual, no el camino. */
.accion-transicion { display: flex; flex-direction: column; gap: .25rem; max-width: 18rem; }
.accion-transicion .apunte { font-size: .76rem; line-height: 1.3; }
.accion-transicion.automatica button { border-style: dashed; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li {
  padding: .6rem 0 .6rem .9rem; border-left: 2px solid var(--borde);
  margin-left: .3rem; position: relative;
}
.linea-tiempo li::before {
  content: ""; position: absolute; left: -.4rem; top: .9rem;
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--verde-cl);
}
.linea-tiempo .accion { font-weight: 600; }
.linea-tiempo .cuando, .linea-tiempo .quien-evento { font-size: .78rem; color: var(--texto-tenue); }

.documentos-lista, .artefactos-lista { list-style: none; margin: 0; padding: 0; }
.documentos-lista li, .artefactos-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--borde-suave);
}
.documentos-lista li:last-child, .artefactos-lista li:last-child { border-bottom: 0; }
.item-nombre { font-weight: 500; }
.item-apunte { font-size: .78rem; color: var(--texto-tenue); }

/* ── Pestañas de administración ────────────────────────────────────── */

.pestanas {
  display: flex; gap: .25rem; margin-bottom: 1.1rem; background: var(--sup-2);
  padding: .25rem; border-radius: var(--r); border: 1px solid var(--borde-suave); flex-wrap: wrap;
}
.pestanas button {
  flex: 1; background: transparent; border: 1px solid var(--borde-control);
  color: var(--texto); padding: .55rem .6rem; font-size: .85rem; min-height: 2.75rem;
}
.pestanas button[aria-selected="true"] { background: var(--fondo); color: var(--texto); border-color: var(--borde-control); font-weight: 700; }

/* ── Diálogos ───────────────────────────────────────────────────────── */

dialog {
  border: 1px solid var(--borde); border-radius: var(--r-grande);
  background: var(--sup); color: var(--texto);
  padding: 1.6rem; max-width: 30rem; width: calc(100% - 2rem);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog h2 { margin: 0 0 1rem; font-size: 1.2rem; }
dialog .acciones { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* ── Bloque plegable (DD-30: la escritura constitutiva es opcional) ──── */

.plegable {
  border: 1px solid var(--borde); border-radius: var(--r);
  padding: .6rem .8rem; margin: 0 0 .8rem; background: var(--sup-2);
}
.plegable > summary {
  cursor: pointer; font-size: .85rem; color: var(--texto);
  padding: .45rem .55rem; border: 1px solid transparent;
  border-radius: var(--r-chico);
  display: list-item;
  list-style-position: inside;
}
.plegable > summary:hover { background: var(--sup-2); border-color: var(--borde-control); }
.plegable[open] > summary { margin-bottom: .7rem; }
.plegable .apunte { margin: 0 0 .7rem; }
.plegable .campo:last-child { margin-bottom: 0; }

/* ── Utilidades de disposición ──────────────────────────────────────── */

.fila { display: flex; gap: .8rem; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 10rem; }
.apunte { font-size: .82rem; color: var(--texto-tenue); }

/* ── Utilidades de disposición (en vez de `style="..."` suelto) ──────── */

.ancho-medio { max-width: 22rem; }
.fila-compacta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fila-compacta > * { flex: 0 0 auto; }
.espacio-superior { margin-top: 1rem; }

@media (max-width: 900px) {
  #vista-expediente .redaccion-disposicion, #vista-expediente .redaccion-columnas { grid-template-columns: minmax(0, 1fr); }
  /* La navegación conserva su scroll sin ensanchar la columna del expediente. */
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; border-right: 0; border-bottom: 1px solid var(--borde); }
  .lateral-cabeza { padding: .7rem 1rem; }
  /* La barra lateral se acuesta: `.nav` pasa de columna a fila. Sin
   * `align-items: flex-start` los enlaces son items de un flex-container en
   * fila, que por herencia se estiran a la altura del más alto (el valor
   * inicial de `align-items` es `stretch`) — la pestaña activa, con su
   * fondo de `aria-current`, se veía como una franja vertical entera en vez
   * de una etiqueta del tamaño de su texto. `flex: 0 0 auto` hace lo mismo
   * en el eje horizontal, para que ninguna crezca a costa de las demás. */
  .nav { flex-direction: row; overflow-x: auto; align-items: flex-start; gap: .3rem; }
  .nav a { flex: 0 0 auto; }
  .principal { padding: 1.1rem; }
}

/* ── Ajustes de captura del expediente (DD-37) ──────────────────────────── */

/* Una casilla por campo y por documento: marcada significa "no se le pide".
   Lo obligatorio se enseña deshabilitado y rotulado, para que se vea que no
   es un olvido sino una regla. */
.casilla-ajuste {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .28rem 0;
  font-size: .85rem;
  color: var(--texto);
}

/* El armazón da `width: 100%` a todo `input`, que en una casilla la estira
   hasta empujar su etiqueta al otro extremo de la tarjeta. */
.casilla-ajuste > input { width: auto; flex: 0 0 auto; margin: 0; }

.casilla-ajuste input[disabled] + span { color: var(--texto-tenue); }

.marca-obligatorio {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-tenue);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .05rem .45rem;
}

/* ── Constructor de captura (Enmienda 09, DD-42) ────────────────────────── */

/* Una tarjeta por campo, como un formulario que se edita a sí mismo. Nada
   aquí es JSON a la vista: los controles son los del vocabulario cerrado del
   contrato, y el código pegable va en monoespaciada porque se copia y se
   pega en un Word. */
.constructor-seccion { margin-top: 1.2rem; }
.constructor-seccion > h4 { margin: 0 0 .15rem; }
.constructor-seccion > .apunte { margin: 0 0 .7rem; }

.tarjeta-campo {
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: var(--sup);
  padding: .8rem;
  margin-bottom: .7rem;
}
.tarjeta-campo.con-error { border-color: var(--peligro); }
.tarjeta-campo .rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
}
.tarjeta-campo .campo { margin-bottom: 0; }
.tarjeta-campo .cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
}
.tarjeta-campo .cabeza .codigo { flex: 1 1 12rem; }

.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  color: var(--dorado);
  word-break: break-all;
}

.acciones-campo { display: flex; gap: .35rem; flex-wrap: wrap; }
.acciones-campo button { min-height: auto; padding: .25rem .55rem; font-size: .78rem; }

/* El cruce con la plantilla (DD-40): avisos, nunca bloqueo. Por eso es una
   franja de aviso y no un error. */
.franja-avisos {
  border: 1px solid var(--ambar);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--peligro-fondo);
  padding: .7rem .9rem;
  margin: .8rem 0;
}
.franja-titulo { margin: 0; font-size: .85rem; color: var(--texto); }
.franja-lista { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--texto-tenue); }
.franja-lista li { margin-bottom: .2rem; }

/* ── La propuesta de Opus (DD-43, DD-44) ────────────────────────────────── */

/* Cada campo con su cita literal, su página y su confianza. Lo que no ancló
   se ve distinto —sin cita y con el motivo— para que nadie lo confunda con
   un dato leído. */
.dialogo-ancho { max-width: 58rem; width: calc(100vw - 3rem); }

.bloque {
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: .9rem;
  margin: 0 0 1rem;
}
.bloque > legend { font-size: .8rem; color: var(--texto-tenue); padding: 0 .35rem; }

.propuesta { margin: .6rem 0 1rem; }
.propuesta-fila {
  border-top: 1px solid var(--borde-suave);
  padding: .5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
}
.propuesta-fila:first-child { border-top: 0; }
.propuesta-campo { flex: 1 1 11rem; font-size: .85rem; }
.propuesta-valor { flex: 1 1 11rem; font-size: .85rem; color: var(--texto); }
.propuesta-cita { flex: 1 1 100%; font-size: .78rem; color: var(--texto-tenue); font-style: italic; }
.propuesta-fila.sin-anclar .propuesta-valor { color: var(--texto-tenue); }
.propuesta-fila button { min-height: auto; padding: .2rem .55rem; font-size: .76rem; }

/* Las casillas del catálogo cerrado de facultades. La sugerencia de Opus se
   marca como sugerencia: viene preseleccionada y se puede quitar. */
.facultades { display: flex; flex-direction: column; gap: .1rem; }
.marca-sugerida {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ambar);
  border: 1px solid var(--ambar);
  border-radius: 999px;
  padding: .05rem .45rem;
}

/* Los códigos que trae un formato recién subido (DD-46). El desconocido no se
   distingue sólo por el color: lleva su motivo escrito al lado
   (`L.MOTIVO_CODIGO_DESCONOCIDO`), porque un rojo sin texto no dice nada a
   quien no distingue ese rojo. */
.codigos-lista {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.codigos-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .3rem .5rem;
  border: 1px solid var(--borde);
  border-radius: .3rem;
}
.codigos-lista li.codigo-desconocido {
  border-color: var(--peligro);
  background: var(--peligro-fondo);
}
.codigos-lista li.codigo-desconocido .codigo { color: var(--peligro); }
.codigo-motivo { font-size: .78rem; color: var(--peligro); }

/* Constructor de modelos: las columnas se adaptan sin desbordar el móvil. */
.a2-pasos { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.a2-pasos [aria-selected="true"] { font-weight: 700; text-decoration: underline; }
.a2-tarjeta, .a2-pregunta, .a2-seccion { padding: 1rem; margin-block: 1rem; border: 1px solid var(--borde); min-width: 0; overflow-wrap: anywhere; }
#a2-editor input, #a2-editor select, #a2-editor textarea, #a2-dialogo input, #a2-dialogo select { max-width: 100%; min-width: 0; box-sizing: border-box; }
#a2-editor .campo, #a2-dialogo .campo { display: flex; flex-direction: column; gap: .4rem; margin-block: .75rem; }
#a2-dialogo { max-width: min(42rem, 90vw); max-height: 85vh; overflow: auto; }
#a2-editor button, #a2-dialogo button, #a2-controles button { white-space: normal; }
#a2-editor :focus-visible, #a2-dialogo :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

#a2-biblioteca > section { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
#a2-biblioteca > section > h3 { grid-column: 1 / -1; }
.a2-tarjeta { margin: 0; border-radius: var(--r); background: var(--sup); }
.a2-tarjeta > a { display: block; margin-top: .75rem; }
#a2-controles > label { min-width: 0; max-width: 100%; }
#a2-controles select, #a2-controles input { width: 100%; min-width: 0; }
#a2-editor fieldset { max-width: 100%; min-width: 0; box-sizing: border-box; }
#a2-editor [hidden] { display: none; }

/* Redacción limitada a párrafos y referencias protegidas. */
.redaccion-disposicion { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); gap: 1.5rem; }
.redaccion-disposicion > *, .redaccion-columnas > * { min-width: 0; }
.redaccion-editor { min-height: 14rem; border: 1px solid currentColor; padding: 1rem; border-radius: .5rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.redaccion-campo, .redaccion-marca { display: inline-block; border: 1px solid currentColor; border-radius: .3rem; padding: .1rem .3rem; cursor: pointer; }
.redaccion-campo { background: #e4f1ff; color: #143f67; }
.redaccion-marca { background: #fff0ca; color: #654400; border-style: dashed; }
.redaccion-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; overflow-wrap: anywhere; }
#redaccion-indice { padding-left: 1.2rem; }
#redaccion-indice button { text-align: left; white-space: normal; }
#redaccion-indice [aria-current="true"] { font-weight: bold; border: 2px solid currentColor; }
#redaccion-previa, #redaccion-historial, #redaccion-dialogo-contenido { overflow-wrap: anywhere; }
#redaccion-dialogo { max-width: min(48rem, 92vw); }
.redaccion-editor:focus-visible, .redaccion-campo:focus-visible, .redaccion-marca:focus-visible { outline: 3px solid #237bb5; outline-offset: 3px; }
#redaccion-comparacion ins { background: #d7f4dd; color: #174522; }
#redaccion-comparacion del { background: #ffe1df; color: #732020; }

/* El cuerpo no desplaza en horizontal: lo ancho se acomoda dentro de su caja.
   A 375 px las filas del constructor —dos campos por opción, las casillas de
   formato— eran `flex: 0 0 auto` y empujaban la página entera; aquí encogen. */
#vista-modelos, #a2-biblioteca, #a2-editor, #a2-controles { max-width: 100%; min-width: 0; }
#a2-editor .fila-compacta > *, #a2-dialogo-contenido .fila-compacta > * {
  flex: 1 1 11rem; min-width: 0; max-width: 100%;
}
#a2-editor .codigo, #a2-editor p, #a2-editor legend, #a2-editor label,
#redaccion-acciones button, #redaccion-historial button {
  max-width: 100%; overflow-wrap: anywhere; white-space: normal;
}
#a2-editor pre, #a2-editor table { max-width: 100%; overflow-x: auto; display: block; }

/* La captura mantiene folios y acciones excepcionales fuera del recorrido principal. */
.expediente-detalles, .sesion-detalles {font-size:.8rem;color:var(--texto-tenue);margin-top:.4rem;max-width:100%;overflow-wrap:anywhere}
details > summary {
  cursor: pointer;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
  padding: .25rem 0;
}
.expediente-detalles summary, .sesion-detalles summary, .otras-acciones summary, details.tarjeta-plana > summary {cursor:pointer}
.sesion-detalles {max-width:18rem}
.otras-acciones {width:100%;font-size:.9rem;color:var(--texto-tenue)}
.otras-acciones .accion-transicion {margin-top:.6rem}
#expediente-titulo {overflow-wrap:anywhere;font-size:1.35rem}
#vista-expediente .expediente-cabecera > div {min-width:0}
#vista-expediente .tarjeta-plana {min-width:0}
@media(max-width:640px){.sesion-detalles{max-width:100%}.flex-campo,.flex-asignacion{max-width:100%}.flex-campo input,.flex-campo select{min-width:0}.flex-fragmento{overflow-wrap:anywhere}}

/* Estado de sesión sin modal ni pérdida de la captura actual. */
.renovacion-aviso { padding: .75rem 1rem; margin: .5rem 1rem; border: 1px solid currentColor; border-radius: .5rem; }
.renovacion-aviso p { margin: .3rem 0; overflow-wrap: anywhere; }

/* La lectura se actualiza dentro de cada tarjeta, sin rehacer la captura. */
.documentos-lista li.lectura-documento { display: block; overflow-wrap: anywhere; }
.lectura-documento h4, .lectura-documento p { margin: .4rem 0; }
.lectura-estado { font-weight: 600; }
.lectura-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.lectura-aviso { border-left: 3px solid currentColor; padding-left: .6rem; }
.lectura-confirmacion { border: 1px solid var(--borde-suave); padding: .8rem; margin-top: .8rem; }
.lectura-confirmacion label { display: block; margin: .5rem 0; }
.lectura-confirmacion textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Selección y decisiones del asistente manual de Word. */
.importacion-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 1rem; align-items: start; }
.importacion-columnas > *, .importacion-asistente { min-width: 0; }
.importacion-bloques { max-height: 38rem; overflow: auto; border: 1px solid var(--borde); padding: 1rem; border-radius: .5rem; }
.importacion-bloque { margin-block: .5rem 1rem; overflow-wrap: anywhere; }
.importacion-bloque p { white-space: pre-wrap; }
.importacion-encabezado { font-weight: 700; font-size: 1.1rem; }
.importacion-aparicion { padding-block: .5rem; border-bottom: 1px solid var(--borde); }
.importacion-asistente blockquote { margin-inline: 0; padding: .5rem; border-inline-start: .2rem solid var(--borde); white-space: pre-wrap; overflow-wrap: anywhere; }
.importacion-asistente input, .importacion-asistente select, .importacion-asistente textarea { max-width: 100%; box-sizing: border-box; }
.importacion-cabecera { margin-block-end: 1rem; }
@media (max-width: 850px) { .importacion-columnas { grid-template-columns: minmax(0, 1fr); } .importacion-bloques { max-height: 28rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  button,
  .nav a,
  .interruptor,
  .pestanas button,
  .plegable > summary,
  :focus-visible {
    border-color: ButtonText;
  }
}