/* huecos.css · los {huecos} de una plantilla, resaltados mientras se escribe (web/huecos.js, 05-10-2026).
   Solo tokens de web/tokens.css: nada de colores sueltos. El campo de verdad va ENCIMA y transparente; la
   copia con los huecos marcados va debajo, con la misma letra y el mismo relleno (los copia huecos.js). */
/* isolation: las capas de dentro (copia 0, campo 1) no salen de la caja; si no, el campo taparía el pie fijo del diálogo. */
.huecos-caja{position:relative;isolation:isolate;display:block;min-width:0}
.huecos-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:transparent;
  border-style:solid;border-color:transparent;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}
.huecos-caja.es-linea .huecos-fondo{white-space:pre;overflow-wrap:normal;display:flex;align-items:center}
.huecos-caja > .huecos-campo{position:relative;z-index:1;background:transparent;width:100%}
/* Un hueco bien puesto: fondo de marca, contorno y subrayado continuo (forma, no solo color). Nada que
   cambie el ancho de la letra: ni negrita, ni relleno, ni borde (solo sombras), o la copia se descuadraría. */
.huecos-fondo mark.hueco{color:transparent;background:var(--verde-100);border-radius:3px;
  box-shadow:0 0 0 1px var(--verde-300);text-decoration:underline 2px var(--verde-600);text-underline-offset:3px}
/* Uno mal puesto: subrayado ONDULADO en el color de error, y la frase de debajo lo dice en palabras. */
.huecos-fondo mark.hueco.is-mal{background:var(--error-fondo);box-shadow:0 0 0 1px var(--error-texto);
  text-decoration:underline wavy 2px var(--error-texto)}
.huecos-campo.huecos-con-fallo{border-color:var(--error-texto)}
.huecos-resumen{display:block;margin-top:4px;font-size:var(--texto-12);color:var(--texto-secundario);line-height:1.6}
.huecos-resumen .huecos-aviso{color:var(--error-texto);font-weight:600}
.huecos-resumen .huecos-aviso::before{content:"⚠ "}
.hueco-chip{display:inline-block;padding:0 6px;border-radius:var(--radio-pill);background:var(--verde-100);
  color:var(--verde-900);box-shadow:inset 0 0 0 1px var(--verde-300);font-weight:600;white-space:nowrap}
/* En la vista previa: el dato que se rellena solo, con subrayado de puntos y su hueco en el título. */
.hueco-valor{background:var(--verde-100);color:inherit;border-radius:3px;padding:0 2px;
  text-decoration:underline dotted 2px var(--verde-600);text-underline-offset:3px}
.hueco-valor.is-mal{background:var(--error-fondo);text-decoration:underline wavy 2px var(--error-texto)}
.huecos-ia{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 4px}
.huecos-ia-nota{flex:1 1 220px;min-width:0;font-size:var(--texto-12);color:var(--texto-secundario)}
/* Alto contraste del sistema: la copia de debajo se quita (el sistema pinta sus colores) y queda la frase. */
@media (forced-colors:active){
  .huecos-fondo{display:none}
  .hueco-valor,.hueco-chip{border:1px solid CanvasText}
}