/* Formularios generales y campañas */
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4); }
.formulario-ancho { max-width: 40rem; margin-top: var(--e5); }
.intro { color: var(--tinta-suave); margin-top: var(--e2); }
.acciones { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); }
.acciones--fin { margin: 0 0 var(--e4); }
.formulario-nueva { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--acento); border-radius: var(--radio-g); padding: var(--e5); margin-bottom: var(--e5); }
.formulario-nueva h2 { font-size: var(--t-m); margin-bottom: var(--e4); }
.archivadas { margin-top: var(--e6); color: var(--tinta-suave); }
.archivadas summary { cursor: pointer; font-weight: 500; padding: var(--e2) 0; }
.archivadas ul { list-style: none; padding: 0; margin: var(--e2) 0 0; }
.archivadas li { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: var(--e2) 0; border-top: 1px solid var(--linea); }

.campana__cliente { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); margin: 0 0 var(--e1); font-weight: 500; }
.campana__nombre { font-size: var(--t-l); }
.campana__nombre a { color: var(--tinta); text-decoration: none; }
.campana__nombre a::after { content: ""; position: absolute; inset: 0; }
.campana__desc { color: var(--tinta-suave); font-size: var(--t-s); margin: var(--e2) 0 0; }
.campana__datos { margin: 0; display: grid; gap: var(--e2); font-size: var(--t-s); }
.campana__datos div { display: flex; gap: var(--e3); }
.campana__datos dt { width: 7.5rem; color: var(--tinta-suave); flex: none; }
.campana__datos dd { margin: 0; }
.campana__cuenta { margin: 0; text-align: right; font-size: var(--t-s); color: var(--tinta-suave); }
.campana__cuenta strong { display: block; font-family: var(--fuente-titulo); font-size: var(--t-xl); color: var(--tinta); line-height: 1.1; }
.campana--lista .campana__cuenta strong { color: var(--e-aprobado-t); }
.fila__accion { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .rejilla-2 { grid-template-columns: 1fr; }
}

/* Cabecera de la landing */
.titulo-landing { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.ficha-cabecera { margin-bottom: var(--e4); }
.ficha-avance { font-weight: 500; font-size: var(--t-s); }

.ficha-layout { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--e6); align-items: start; padding-bottom: var(--e6); }
.indice { position: sticky; top: var(--e5); }
.indice ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linea); }
.indice button {
  width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; padding: var(--e2) var(--e3);
  display: grid; gap: 1px; color: var(--tinta); margin-left: -2px; border-left: 2px solid transparent;
}
.indice button:hover { background: var(--acento-fondo); border-left-color: var(--acento); }
.indice__cuenta { font-size: var(--t-xs); color: var(--e-pendiente-t); font-weight: 500; }
.indice__cuenta.completo { color: var(--e-aprobado-t); }

.bloque { background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-g); padding: var(--e4) var(--e5) var(--e2); margin-bottom: var(--e4); scroll-margin-top: 4.5rem; }
.bloque > h2 { margin: calc(var(--e1) * -1) 0 var(--e2); padding-bottom: var(--e2); border-bottom: 1px solid var(--linea); font-size: var(--t-l); outline-offset: 4px; }
.bloque__paso { margin: 0 0 var(--e2); color: var(--tinta-suave); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bloque__ayuda { color: var(--tinta-suave); font-size: var(--t-s); margin-bottom: var(--e5); }
.por-confirmar { font-size: var(--t-xs); font-weight: 500; color: var(--e-pendiente-t); background: var(--e-pendiente-f); padding: 0.1em 0.6em; border-radius: 999px; }

.elemento { border-top: 1px solid var(--linea); padding: var(--e4) 0 var(--e2); margin-bottom: var(--e2); display: grid; gap: var(--e2); }
.elemento__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e3); flex-wrap: wrap; }
.elemento__cab > label, .etiqueta-grupo { font-weight: 500; font-size: var(--t-s); }
.elemento .campo__ayuda { margin-top: calc(var(--e1) * -1); }
.campo--notas label { font-weight: 400; font-size: var(--t-xs); color: var(--tinta-suave); }
.notas { min-height: 2.5rem; font-size: var(--t-s); }

.selector-caja { display: flex; align-items: center; gap: var(--e2); }
.selector-caja label { font-size: var(--t-xs); color: var(--tinta-suave); }
.selector { width: auto; min-height: 1.75rem; padding: 0.1rem 0.5rem; font-size: var(--t-xs); font-weight: 500; border-radius: 999px; border-color: transparent; cursor: pointer; }
.selector.estado--pendiente { color: var(--e-pendiente-t); background: var(--e-pendiente-f); }
.selector.estado--recibido { color: var(--e-recibido-t); background: var(--e-recibido-f); }
.selector.estado--en_revision { color: var(--e-revision-t); background: var(--e-revision-f); }
.selector.estado--aprobado { color: var(--e-aprobado-t); background: var(--e-aprobado-f); }
.selector::before { content: none; }

.grupo { border-top: 1px solid var(--linea); padding: var(--e4) 0 var(--e3); }
.grupo__titulo { font-size: var(--t-s); font-family: var(--fuente-texto); margin-bottom: var(--e3); }
.fila-edit { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4) var(--e4) var(--e2); margin-bottom: var(--e3); }
.fila-edit__pie { display: flex; justify-content: space-between; align-items: center; margin: var(--e2) 0 var(--e3); gap: var(--e3); }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 var(--e4); }
.casillas legend { grid-column: 1 / -1; }
.campo--en-linea { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e3); margin-top: var(--e3); }
.publicar { border-top: 1px solid var(--linea); padding: var(--e4) 0 var(--e4); }
.resultado-publicar { margin: var(--e3) 0 0; font-weight: 500; font-size: var(--t-s); }

/* Guardar: botón flotante abajo a la derecha. Solo se ve con cambios sin guardar, guardando, fallo o «guardado» unos segundos (barraGuardar.js). */
.barra-guardar {
  position: fixed; right: var(--e5); bottom: var(--e5); z-index: 30; max-width: min(34rem, calc(100vw - 2 * var(--e4)));
  display: flex; align-items: center; gap: var(--e4); padding: var(--e2) var(--e2) var(--e2) var(--e4);
  background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-g); box-shadow: 0 8px 28px rgb(37 42 93 / 0.22);
  transition: opacity 180ms var(--curva), transform 180ms var(--curva);
}
.barra-guardar[data-estado="reposo"] { opacity: 0; transform: translateY(10px); pointer-events: none; }
.barra-guardar[data-estado="sucio"] { border-color: var(--e-pendiente-b); }
.barra-guardar[data-estado="fallo"] { border-color: var(--error-b); background: var(--error-f); }
.barra-guardar[data-estado="guardado"] { border-color: var(--verde); }
.barra-guardar:not(:has(button)) { padding-right: var(--e4); }
.barra__estado { margin: 0; font-size: var(--t-s); color: var(--tinta-suave); }
.barra__estado--sucio { color: var(--e-pendiente-t); font-weight: 500; }
.barra__estado--sucio::before { content: "● "; }
.barra__estado--fallo { color: var(--error-t); font-weight: 500; }
.barra-guardar[data-estado="guardado"] .barra__estado { color: var(--verde); font-weight: 500; }
.barra-guardar[data-estado="guardado"] .boton, .barra-guardar[data-estado="guardando"] .boton { display: none; }
@media (prefers-reduced-motion: reduce) { .barra-guardar { transition: opacity 0.01ms; transform: none !important; } }

@media (max-width: 900px) {
  .ficha-layout { grid-template-columns: 1fr; gap: var(--e3); }
  .indice { position: static; overflow-x: auto; }
  .indice ul { display: flex; border-left: 0; border-bottom: 1px solid var(--linea); }
  .indice button { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; margin: 0; }
  .indice button:hover { border-bottom-color: var(--acento); }
  .bloque { padding: var(--e4) var(--e4) var(--e2); }
  .campo--en-linea { grid-template-columns: 1fr; }
  .barra-guardar { right: var(--e3); bottom: var(--e3); }
}

.conflicto { background: var(--e-pendiente-f); border: 1px solid var(--e-pendiente-b); border-left: 4px solid var(--e-pendiente-b); color: #252A5D; border-radius: var(--radio); padding: var(--e4); margin-bottom: var(--e4); }
.conflicto p { margin: 0 0 var(--e2); }
.aviso-lectura { background: var(--e-recibido-f); color: var(--e-recibido-t); padding: var(--e3) var(--e4); border-radius: var(--radio); font-weight: 500; font-size: var(--t-s); }

/* Selector de idioma de la ficha: solo existe cuando la landing tiene más de un idioma */
.idiomas-ficha { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.idiomas-ficha .idioma-activo { background: var(--acento-fondo); border-color: var(--acento); }
.aviso-idioma { padding: var(--e3); margin-bottom: var(--e4); border: 1px solid var(--linea); border-radius: 0.5rem; background: var(--acento-fondo); }
.aviso-idioma p { margin: 0 0 var(--e2); }

/* Botón «i» de ayuda y su explicación: la pantalla se ve limpia y la ayuda aparece solo si se pide */
.ficha-form .campo__ayuda:not(.campo__ayuda--visible) { display: none; }
/* Mensajes de aviso o de error de un campo (p. ej. enlaces no válidos) y estado de una lista vacía: siempre a la vista, nunca en la «i» */
.ficha-form .campo__aviso { margin: var(--e1) 0 0; font-size: var(--t-s); color: var(--error-t); }
.ficha-form .campo__aviso:empty { display: none; }
.ficha-form .lista-vacia { margin: 0 0 var(--e2); font-size: var(--t-s); color: var(--tinta-suave); }

/* Estado de los cuadros de texto de la ficha (colores en tokens.css; lo pone estadoCampo.js y cada campo).
   Sin color = vacío y opcional: neutro, no el crema de antes (que se confundiría con el amarillo de «falta»). */
.ficha-form :is(input[type="text"], input[type="date"], input[type="number"], input[type="url"], input[type="email"], input[type="tel"], input[type="search"], input[type="time"], textarea, select) {
  background: var(--superficie); border-color: var(--linea-fuerte);
}
.ficha-form :is(input, textarea)[data-estado="lleno"] { background: var(--campo-lleno-f); border-color: var(--campo-lleno-b); color: var(--tinta); }
.ficha-form :is(input, textarea)[data-estado="falta"] { background: var(--campo-falta-f); border-color: var(--campo-falta-b); color: var(--tinta); }
.ficha-form :is(input, textarea)[data-estado]:disabled { color: var(--tinta-suave); }
.ficha-form :is(input, textarea)[data-estado]:hover:not(:disabled) { border-color: var(--tinta-suave); }

/* Identidad: medida que se pide, aviso de archivo mal subido (asterisco rojo) e información en gris */
.archivo-unico { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linea); }
.medida-pedida { display: grid; gap: var(--e1); margin: 0; }
.medida-pedida__texto { margin: 0; font-size: var(--t-s); color: var(--tinta); }
.aviso-info { margin: 0; font-size: var(--t-xs); color: var(--tinta-suave); }
.aviso-medida { display: flex; gap: var(--e2); align-items: flex-start; margin: var(--e1) 0 0; font-size: var(--t-s); font-weight: 500; color: var(--error-t); }
.asterisco-rojo { flex: none; color: var(--punto-rojo); font-weight: 700; font-size: 1.25em; line-height: 1; }
.aviso-medida .asterisco-rojo { margin-top: 0.05em; }
.archivo__nombre .asterisco-rojo { margin-left: 0.15em; }
.subida-ficha__actual[data-medida="mal"] { border-color: var(--punto-rojo); }
.etq { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.etq > label, .etq > .etiqueta-grupo, .etq > .grupo__titulo { margin: 0; }
.ayuda-boton { position: relative; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--rosa-claro); background: #fff; color: var(--rosa-claro); cursor: pointer; display: inline-grid; place-items: center; padding: 0; transition: background-color var(--duracion), border-color var(--duracion), color var(--duracion), transform var(--duracion) var(--curva); }
.ayuda-boton svg { width: 0.95rem; height: 0.95rem; fill: currentColor; pointer-events: none; }
.ayuda-boton::after { content: ""; position: absolute; inset: -0.55rem; border-radius: 50%; } /* zona de pulsación de 2,35 rem sin agrandar el botón */
.ayuda-boton:active { transform: scale(0.92); }
.ayuda-boton:focus-visible { outline: 3px solid var(--rosa-oscuro); outline-offset: 3px; }
.ayuda-boton[aria-expanded="true"] { background: var(--rosa-fondo); border-color: var(--rosa); color: var(--rosa); }
@media (hover: hover) and (pointer: fine) { .ayuda-boton:hover { border-color: var(--rosa); color: var(--rosa); background: var(--rosa-fondo); } }
.ayuda-pop { background: var(--acento-fondo); border-left: 4px solid var(--cobalto); border-radius: var(--radio); padding: var(--e3) var(--e4); margin: var(--e2) 0 var(--e3); font-size: var(--t-s); color: var(--tinta); }
.ayuda-pop p { margin: 0 0 var(--e2); }
.ayuda-pop ul { margin: var(--e1) 0 0; padding-left: var(--e5); }
.ayuda-pop strong { color: var(--marino); }
@media (prefers-reduced-motion: no-preference) { .ayuda-pop:not([hidden]) { animation: ayuda-entra 160ms var(--curva); } }
@keyframes ayuda-entra { from { opacity: 0; transform: translateY(-4px); } }

/* Índice: apartado actual y pendientes en naranja (el naranja es solo el aviso «Pendiente») */
.indice button[aria-current="true"] { background: var(--acento-fondo); border-left-color: var(--marino); font-weight: 500; }
.indice__cuenta:empty { display: none; }
.alerta-pendiente--s { font-size: var(--t-xs); padding: 0.3em 0.7em; width: fit-content; }
.alerta-pendiente--s::before { content: none; }
.indice__cuenta.alerta-pendiente { color: var(--pendiente-t); }

/* Paso 3: generar la landing (solo administración) */
.generar { background: var(--superficie); border: 1px solid var(--linea); border-left: 5px solid var(--marino); border-radius: var(--radio-g); padding: var(--e5); margin-bottom: var(--e5); }
.generar--hecha { border-left-color: var(--cobalto); }
.generar h2 { font-size: var(--t-l); margin-bottom: var(--e2); }
.generar__resultado { margin: var(--e3) 0 0; font-weight: 500; font-size: var(--t-s); }
.medios { display: grid; gap: var(--e3); margin-top: var(--e3); }
@media (max-width: 62rem) { .indice { top: 4.5rem; } }
.generar__resumen { margin-top: var(--e4); border-top: 1px solid var(--linea); padding-top: var(--e4); }
.generar__resumen h3 { font-size: var(--t-m); margin-bottom: var(--e2); }
.generar__resumen h4 { font: 500 var(--t-s)/1.3 var(--fuente-texto); color: var(--marino); margin: var(--e3) 0 var(--e1); }
.generar__resumen ul { margin: 0; padding-left: var(--e5); font-size: var(--t-s); max-height: 16rem; overflow: auto; }
.generar__legal { margin-top: var(--e3); background: var(--acento-fondo); border-left: 4px solid var(--marino); border-radius: var(--radio); padding: var(--e3) var(--e4); }
.generar__legal--ok { border-left-color: var(--cobalto); }
.generar__legal h4 { margin-top: 0; }
.generar__aviso-lista { margin: var(--e2) 0 0; padding: var(--e2) var(--e3); background: var(--crema); border-left: 4px solid var(--naranja); border-radius: var(--radio); font-size: var(--t-s); color: var(--tinta); }
.generar__aviso-lista[hidden] { display: none; }

/* ---- Panel de sugerencias, cuadro de cambios y «Modificar copy» (solo administración) ---- */
.sugerencias { background: var(--superficie-2); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); margin: var(--e4) 0; }
.sugerencias__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); cursor: pointer; padding: var(--e3) var(--e4); font-weight: 500; color: var(--marino); list-style: none; }
.sugerencias__titulo::-webkit-details-marker { display: none; }
.sugerencias__titulo::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 200ms var(--curva); margin-right: var(--e2); }
.sugerencias[open] > .sugerencias__titulo::before { transform: rotate(45deg); }
.sugerencias__titulo:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; border-radius: var(--radio); }
.sugerencias__n { margin-left: auto; font-size: var(--t-xs); font-weight: 400; color: var(--tinta-suave); }
.sugerencias__cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); padding: 0 var(--e4) var(--e4); border-top: 1px solid var(--linea); padding-top: var(--e4); }
.sugerencias__col h3 { font-size: var(--t-base); margin-bottom: var(--e2); }
.sugerencias__mensaje { font-size: var(--t-s); line-height: 1.55; min-height: 11rem; }
.sugerencias__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e3); font-size: var(--t-s); }
.sugerencias__lista li { padding-left: var(--e3); border-left: 2px solid var(--azul-100); }
.generar__cambios textarea { min-height: 4.5rem; }
.indicaciones { margin-top: var(--e3); font-size: var(--t-s); color: var(--tinta-suave); }
.indicaciones summary { cursor: pointer; font-weight: 500; padding: var(--e1) 0; }
.indicaciones__lista { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: var(--e2); }
.indicaciones__lista li { display: grid; gap: 2px; padding: var(--e2) var(--e3); background: var(--superficie-2); border-radius: var(--radio); color: var(--tinta); }
.indicaciones__quien { font-size: var(--t-xs); color: var(--tinta-suave); }
.modcopy { margin-top: var(--e1); }
.modcopy__caja { margin-top: var(--e2); padding: var(--e3) var(--e4); background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio); }
.modcopy__caja .campo { margin-bottom: var(--e3); }
@media (max-width: 62rem) { .sugerencias__cuerpo { grid-template-columns: 1fr; } }

/* ---- Textos comunes: lo heredado y lo propio de cada landing ---- */
.herencia { margin: 0 0 var(--e4); }
.herencia__heredado { background: var(--acento-fondo); border-left: 4px solid var(--cobalto); border-radius: var(--radio); padding: var(--e3) var(--e4); }
.herencia__propio { border-left: 4px solid var(--marino); padding-left: var(--e4); margin-top: var(--e3); }
.herencia > .herencia__propio:first-child { margin-top: 0; }
.herencia__cab, .herencia__cinta { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e2); }
.herencia__texto { margin: 0 0 var(--e3); white-space: pre-line; color: var(--tinta); }
.herencia__aviso { margin: 0 0 var(--e3); color: var(--e-pendiente-t); font-size: var(--t-s); }
.herencia__nota { color: var(--tinta-suave); font-size: var(--t-s); }
.herencia__enlace { font-size: var(--t-s); }
.herencia__preguntas { margin: 0 0 var(--e3); }
.herencia__preguntas dt { font-weight: 600; margin-top: var(--e2); }
.herencia__preguntas dd { margin: var(--e1) 0 0; color: var(--tinta); }
.origen { display: inline-block; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; padding: 2px var(--e2); border-radius: 999px; white-space: nowrap; }
.origen--heredado { background: var(--cobalto); color: #fff; }
.origen--propio { background: #fff; color: var(--marino); border: 1px solid var(--marino); }
.apartado-comunes { margin-bottom: var(--e7); }
.apartado-comunes__titulo { font-size: var(--t-xl); margin-bottom: var(--e1); padding-bottom: var(--e2); border-bottom: 2px solid var(--marino); }
.apartado-comunes .bloque h3 { font-size: var(--t-m); margin-bottom: var(--e1); }

/* Colores: dos juegos (marca y submarca) y cual se va a usar */
.colores__uso { margin: 0 0 var(--e4); padding: var(--e3) var(--e4); border-radius: var(--radio); font-weight: 500; border-left: 4px solid var(--cobalto); background: var(--acento-fondo); }
.colores__uso--sub { border-left-color: var(--marino); }
.colores-juego { margin-bottom: var(--e5); }
.colores-juego > h3 { font-size: var(--t-m); margin-bottom: var(--e1); }

.generar__ver { margin: var(--e2) 0 0; font-size: var(--t-s); }

/* Escritorio: los campos cortos de una ficha (una línea: fechas, números, responsables, nombres) van de dos en dos; lo largo ocupa todo el ancho. */
@media (min-width: 62.0625rem) {
  .bloque { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e6); align-items: start; }
  .bloque > * { grid-column: 1 / -1; }
  .bloque > .campo:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"])),
  .bloque > .campo:has(> select) { grid-column: auto; }
}

/* Protección de lo escrito: borrador recuperable, texto para copiar tras un aviso de edición simultánea y versiones anteriores. */
.conflicto__copia { width: 100%; margin-top: var(--e3); font: inherit; font-size: var(--t-s); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: var(--e3); }
.conflicto--borrador { background: var(--acento-fondo); border-color: var(--linea-fuerte); border-left-color: var(--linea-fuerte); }
.versiones__boton { margin-top: var(--e2); }
.versiones { list-style: none; margin: var(--e4) 0; padding: 0; display: grid; gap: var(--e4); }
.version { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e3) var(--e4); background: var(--superficie-2); }
.version__cab { font-size: var(--t-s); color: var(--tinta-suave); display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline; }
.version__cab strong { color: var(--tinta); }
.version__estado, .version__sub { font-size: var(--t-xs); border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: 0 var(--e3); }
.version__texto { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow: auto; margin: var(--e3) 0 0; padding: var(--e3); font: inherit; font-size: var(--t-s); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.versiones__aviso { background: var(--e-pendiente-f); border: 1px solid var(--e-pendiente-b); border-radius: var(--radio); padding: var(--e3) var(--e4); }

/* Aviso de choque por campo: qué campo, quién lo tocó y las dos versiones lado a lado (ver avisosBorrador.js) */
.conflicto--campos { color: var(--tinta); }
.conflicto__resumen { font-weight: 600; }
.choque { background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: var(--e3) var(--e4); margin: var(--e3) 0; }
.choque__campo { margin: 0 0 var(--e1); font-size: var(--t-m, 1rem); }
.choque__quien { margin: 0 0 var(--e3); font-size: var(--t-s); color: var(--tinta-suave); }
.choque__versiones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-bottom: var(--e3); }
.choque__version { background: var(--superficie-2); border-radius: var(--radio); padding: var(--e2) var(--e3); min-width: 0; }
.choque__version strong { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); margin-bottom: var(--e1); }
.choque__version pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--t-s); max-height: 12rem; overflow: auto; }
.choque__resultado { margin: 0; font-size: var(--t-s); font-weight: 500; color: var(--verde); }
@media (max-width: 700px) { .choque__versiones { grid-template-columns: 1fr; } }

/* «No se ha podido guardar»: banda roja pegada arriba, a todo el ancho; imposible de pasar por alto (ver avisosBorrador.js) */
.fallo-guardado {
  position: sticky; top: 0; z-index: 50; margin: 0 0 var(--e4);
  background: var(--error-f); color: var(--error-t); border: 2px solid var(--error-b); border-radius: var(--radio);
  padding: var(--e3) var(--e4); box-shadow: 0 6px 20px rgb(161 40 28 / 0.25);
}
.fallo-guardado[hidden] { display: none; }
.fallo-guardado p { margin: 0 0 var(--e2); }
.fallo-guardado__titulo { font-size: 1.15rem; font-weight: 700; }
.fallo-guardado--grave { background: var(--error-t); color: #fff; border-color: var(--error-t); }
.fallo-guardado--grave .fallo-guardado__titulo { font-size: 1.3rem; }
.fallo-guardado--grave .boton { background: #fff; color: var(--error-t); border-color: #fff; }
@media (prefers-reduced-motion: no-preference) { .fallo-guardado:not([hidden]) { animation: fallo-entra 220ms var(--curva, ease-out); } }
@keyframes fallo-entra { from { transform: translateY(-8px); opacity: 0; } }