/* ===========================================================================
   Editor de Informes Airis — Hoja de estilos principal
   ---------------------------------------------------------------------------
   Paleta y tipografía espejan el look del PDF (definidos en styles/base.css):
   azul corporativo + acentos naranja y amarillo. La interfaz prioriza
   legibilidad y espacios generosos porque el usuario va a pasar mucho tiempo
   editando aquí.
   =========================================================================== */

/* ─────────────── Paleta y tokens de diseño ─────────────── */
:root {
  /* Coinciden 1:1 con styles/base.css del informe */
  --airis-primary:        #1B3A6B;
  --airis-primary-dark:   #0F2240;
  --airis-primary-mid:    #1E4080;
  --airis-orange:         #E8861A;
  --airis-orange-claro:   #F0A030;
  --airis-acento:         #F5C518;
  --airis-acento-oscuro:  #C9A200;
  --airis-blanco:         #FFFFFF;
  --airis-off-white:      #F9F9F9;
  --airis-claro:          #EEEEEE;
  --airis-gris:           #CCCCCC;
  --airis-gris-oscuro:    #888888;
  --airis-texto:          #2A2A2A;
  --airis-texto-medio:    #555555;
  --airis-texto-suave:    #888888;

  /* Espaciado consistente */
  --espacio-xs: 4px;
  --espacio-s:  8px;
  --espacio-m:  16px;
  --espacio-l:  24px;
  --espacio-xl: 40px;

  --radio-base:  6px;
  --radio-grande: 10px;

  --sombra-suave: 0 2px 8px rgba(15, 34, 64, 0.08);
  --sombra-card:  0 6px 24px rgba(15, 34, 64, 0.12);

  --altura-header: 72px;
}

/* ─────────────── Reset mínimo ─────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

/* Cuando el editor está activo, el body ocupa exactamente el viewport y no
   hace scroll exterior — el scroll ocurre dentro de las columnas del editor. */
body.editor-activo {
  height: 100vh;
  overflow: hidden;
}

/* Garantizamos que TODO lo marcado como oculto realmente desaparezca.
   Es crítico porque varios elementos (`.editor-selector`, `.editor-layout`,
   `.modal`, etc.) tienen su propio `display: flex/grid`, lo que normalmente
   pisaría a `display: none`. Con `!important` el modificador `--oculto` y el
   atributo `hidden` siempre ganan. */
[hidden],
.editor-layout--oculto,
.editor-selector[hidden],
.modal--oculto,
.overlay-carga--oculto,
.modal__resultado--oculto,
.modal__cerrar--oculto,
.mensaje--oculto,
.banner-advertencias--oculto {
  display: none !important;
}

/* Banner de advertencias — aparece encima del editor cuando hay avisos de carga */
.banner-advertencias {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  background: #7A4800;
  color: #fff;
  border-radius: var(--radio-base);
  padding: var(--espacio-s) var(--espacio-m);
  font-size: 13px;
  max-width: 600px;
  width: calc(100% - 32px);
  box-shadow: var(--sombra-card);
  display: flex;
  gap: var(--espacio-s);
  align-items: flex-start;
}

.banner-advertencias__texto {
  flex: 1;
}

.banner-advertencias__cerrar {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  opacity: 0.8;
}
.banner-advertencias__cerrar:hover { opacity: 1; }

body {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  color: var(--airis-texto);
  background: var(--airis-off-white);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════
   ENCABEZADO
   ═══════════════════════════════════════════════════════════ */
.editor-header {
  height: var(--altura-header);
  background: var(--airis-primary);
  color: var(--airis-blanco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--espacio-l);
  box-shadow: var(--sombra-suave);
  flex-shrink: 0;
}

.editor-header__brand {
  display: flex;
  align-items: center;
  gap: var(--espacio-m);
}

.editor-header__logo {
  height: 44px;
  width: auto;
}

.editor-header__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.editor-header__subtitle {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════
   BOTONES (sistema consistente)
   ═══════════════════════════════════════════════════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-s);
  border: none;
  border-radius: var(--radio-base);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.boton--primario {
  background: var(--airis-orange);
  color: var(--airis-blanco);
}

.boton--primario:hover:not(:disabled) {
  background: var(--airis-orange-claro);
  box-shadow: var(--sombra-suave);
}

.boton--secundario {
  background: var(--airis-blanco);
  color: var(--airis-primary);
  border: 1.5px solid var(--airis-primary);
}

.boton--secundario:hover:not(:disabled) {
  background: var(--airis-primary);
  color: var(--airis-blanco);
}

.boton--terciario {
  background: transparent;
  color: var(--airis-primary);
  border: 1px solid var(--airis-gris);
  font-size: 12px;
  padding: 6px 12px;
}

.boton--terciario:hover {
  background: var(--airis-claro);
}

/* Botón "Refrescar" en la cabecera del preview — necesita destacar sobre
   fondo azul oscuro, por eso es claro con texto azul. */
.boton--refrescar {
  background: var(--airis-acento);
  color: var(--airis-primary-dark);
  border: none;
  font-size: 12px;
  padding: 6px 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.boton--refrescar:hover {
  background: var(--airis-acento-oscuro);
  color: var(--airis-blanco);
}

.boton--ancho {
  width: 100%;
}

.boton--mini {
  background: var(--airis-blanco);
  color: var(--airis-primary);
  border: 1px solid var(--airis-gris);
  font-size: 11px;
  padding: 4px 8px;
}

.boton--mini:hover:not(:disabled) {
  background: var(--airis-claro);
}

/* ═══════════════════════════════════════════════════════════
   PANTALLA DE SELECCIÓN DE PROYECTO
   ═══════════════════════════════════════════════════════════ */
.editor-selector {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-xl);
  background: linear-gradient(135deg, var(--airis-off-white) 0%, #EEF1F6 100%);
}

.editor-selector__card {
  background: var(--airis-blanco);
  border-radius: var(--radio-grande);
  padding: var(--espacio-xl);
  box-shadow: var(--sombra-card);
  width: 100%;
  max-width: 460px;
  text-align: center;
}

.editor-selector__card--ancho {
  max-width: 640px;
  text-align: left;
}

.editor-selector__encabezado {
  display: flex;
  align-items: center;
  gap: var(--espacio-m);
  margin-bottom: var(--espacio-l);
  padding-bottom: var(--espacio-m);
  border-bottom: 1px solid var(--airis-claro);
}

.editor-selector__logo {
  height: 64px;
  width: auto;
  flex-shrink: 0;
}

.editor-selector__card h2 {
  color: var(--airis-primary);
  font-size: 20px;
  margin-bottom: var(--espacio-xs);
}

.editor-selector__hint {
  color: var(--airis-texto-medio);
  font-size: 13px;
}

.campos-fila {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--espacio-m);
}

.selector-clientes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Widget unificado: búsqueda + lista forman una sola caja */
.campo-clientes-widget {
  border: 1.5px solid var(--airis-gris);
  border-radius: var(--radio-base);
  overflow: hidden;
  background: var(--airis-blanco);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-clientes-widget:focus-within {
  border-color: var(--airis-primary);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.1);
}

/* Fila de búsqueda con ícono de lupa */
.campo-busqueda-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--airis-claro);
  background: var(--airis-blanco);
}

.campo-busqueda-icono {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--airis-gris-oscuro);
  pointer-events: none;
  flex-shrink: 0;
}

.campo-clientes-widget input[type="search"] {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 10px 12px 10px 40px;
  font-size: 14px;
  font-family: inherit;
  color: var(--airis-texto);
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.campo-clientes-widget input[type="search"]:focus {
  outline: none;
  box-shadow: none;
}

.campo-clientes-widget input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

.campo-clientes-widget input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l12 12M13 1L1 13' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.6;
}

.campo-clientes-widget input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
}

.lista-clientes {
  max-height: 260px;
  min-height: 160px;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  background: var(--airis-blanco);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lista-clientes:focus {
  outline: none;
  box-shadow: none;
}

.lista-clientes__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--airis-texto);
  border-radius: var(--radio-base);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.lista-clientes__item:hover {
  background: var(--airis-off-white);
}

.lista-clientes__item.seleccionado {
  background: var(--airis-primary);
  color: var(--airis-blanco);
  font-weight: 600;
}

.lista-clientes__cargando,
.lista-clientes__vacio,
.lista-clientes__error {
  padding: var(--espacio-m);
  color: var(--airis-texto-suave);
  font-size: 13px;
  text-align: center;
  font-style: italic;
}

.lista-clientes__error {
  color: #A02828;
}

.editor-selector__form {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-m);
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════
   CAMPOS DE FORMULARIO (compartidos por toda la app)
   ═══════════════════════════════════════════════════════════ */
.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo__etiqueta {
  font-size: 12px;
  font-weight: 600;
  color: var(--airis-texto-medio);
  letter-spacing: 0.3px;
}

.campo__nota {
  font-size: 11px;
  color: var(--airis-texto-suave);
  margin-top: 2px;
  font-style: italic;
}

.campo input[type="text"],
.campo input[type="date"],
.campo input[type="email"],
.campo input[type="search"],
.campo select,
.campo textarea {
  border: 1.5px solid var(--airis-gris);
  border-radius: var(--radio-base);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--airis-texto);
  background: var(--airis-blanco);
  transition: border-color 0.15s ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  padding-right: 32px;
  cursor: pointer;
}

.campo input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--airis-primary);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.1);
}

.campo input[readonly] {
  background: var(--airis-claro);
  color: var(--airis-texto-medio);
  cursor: not-allowed;
}

.campo--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--espacio-s);
}

.campo--inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--airis-primary);
}

.campo--inline span {
  font-size: 13px;
  color: var(--airis-texto-medio);
}

/* Etiqueta especial para campos calculados (no editables) */
.campo--calculado .campo__etiqueta::after {
  content: ' (automatico)';
  font-size: 10px;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   MENSAJES
   ═══════════════════════════════════════════════════════════ */
.mensaje {
  padding: var(--espacio-s) var(--espacio-m);
  border-radius: var(--radio-base);
  font-size: 13px;
  margin-top: var(--espacio-s);
}

.mensaje--error {
  background: #FCE4E4;
  color: #A02828;
  border: 1px solid #F2B0B0;
}

.mensaje--info {
  background: #E6F0FA;
  color: var(--airis-primary);
  border: 1px solid #B8D2EE;
}

.mensaje--oculto {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL DEL EDITOR (3 columnas)
   ═══════════════════════════════════════════════════════════ */
.editor-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr 420px;
  height: calc(100vh - var(--altura-header));
  overflow: hidden;
}

.editor-layout--oculto {
  display: none;
}

/* ─── Sidebar de navegación ─── */
.editor-sidebar {
  background: var(--airis-blanco);
  border-right: 1px solid var(--airis-claro);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--espacio-l) 0;
}

.editor-sidebar__menu {
  list-style: none;
}

.editor-sidebar__item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 12px var(--espacio-l);
  font-size: 14px;
  font-weight: 500;
  color: var(--airis-texto-medio);
  border-left: 4px solid transparent;
  transition: all 0.15s ease;
}

.editor-sidebar__item:hover {
  background: var(--airis-off-white);
  color: var(--airis-primary);
}

.editor-sidebar__item.activo {
  background: var(--airis-off-white);
  color: var(--airis-primary);
  border-left-color: var(--airis-acento);
  font-weight: 600;
}

.editor-sidebar__pie {
  padding: var(--espacio-m) var(--espacio-m) var(--espacio-l);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-s);
  border-top: 1px solid var(--airis-claro);
}

/* ─── Zona de formularios ─── */
.editor-formularios {
  overflow-y: auto;
  padding: var(--espacio-l);
  background: var(--airis-off-white);
}

.editor-seccion {
  display: none;
  max-width: 780px;
}

.editor-seccion.activa {
  display: block;
}

.editor-seccion__titulo {
  font-size: 18px;
  color: var(--airis-primary);
  margin-bottom: var(--espacio-s);
  border-bottom: 2px solid var(--airis-acento);
  padding-bottom: var(--espacio-s);
}

.editor-seccion__intro {
  font-size: 13px;
  color: var(--airis-texto-medio);
  margin-bottom: var(--espacio-l);
}

.editor-grupo-campos {
  background: var(--airis-blanco);
  border-radius: var(--radio-base);
  padding: var(--espacio-l);
  margin-bottom: var(--espacio-m);
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-m);
}

.editor-grupo-campos__titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--airis-primary);
  margin-bottom: var(--espacio-xs);
}

/* Inversores: lista dinámica de items */
.editor-inversores-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-s);
}

.editor-inversor-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--espacio-s);
  align-items: end;
  padding: var(--espacio-s);
  background: var(--airis-off-white);
  border-radius: var(--radio-base);
}

.editor-inversor-eliminar {
  background: transparent;
  border: 1px solid var(--airis-gris);
  border-radius: var(--radio-base);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--airis-texto-medio);
}

.editor-inversor-eliminar:hover {
  background: #FCE4E4;
  color: #A02828;
  border-color: #F2B0B0;
}

/* ─── Lista de anexos PDF ─── */
.editor-anexos-grupo {
  background: var(--airis-blanco);
  border-radius: var(--radio-base);
  padding: var(--espacio-m) var(--espacio-l);
  margin-bottom: var(--espacio-m);
  box-shadow: var(--sombra-suave);
}

.editor-anexos-grupo__titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--airis-primary);
  margin-bottom: var(--espacio-s);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.editor-anexos-grupo__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-xs);
  flex-shrink: 0;
}

.editor-anexos-grupo__contador {
  font-size: 11px;
  background: var(--airis-acento);
  color: var(--airis-primary-dark);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
}

.editor-anexos-vacio {
  font-size: 12px;
  color: var(--airis-texto-suave);
  font-style: italic;
  padding: var(--espacio-s) 0;
}

.editor-anexo-item {
  display: flex;
  align-items: center;
  gap: var(--espacio-s);
  padding: 8px;
  border-radius: var(--radio-base);
  transition: background 0.1s ease;
}

.editor-anexo-item:hover {
  background: var(--airis-off-white);
}

.editor-anexo-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--airis-primary);
  flex-shrink: 0;
}

.editor-anexo-item__icono {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--airis-orange);
  border: 1px solid var(--airis-orange);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.4;
}

.editor-anexo-item__nombre {
  font-size: 13px;
  color: var(--airis-texto);
  word-break: break-all;
  flex: 1;
}

.editor-anexo-item__insignia {
  font-size: 11px;
  color: #A02828;
  background: #FCE4E4;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.editor-anexo-item__preview {
  padding: 6px 12px !important;
  font-size: 12px !important;
  flex-shrink: 0;
}

/* ─── Vista previa con miniaturas de páginas ─── */
.editor-anexo-detalle {
  margin-top: var(--espacio-s);
  padding: var(--espacio-m);
  background: var(--airis-off-white);
  border-radius: var(--radio-base);
  border: 1px solid var(--airis-claro);
}

.editor-anexo-detalle__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espacio-s);
  font-size: 12px;
  color: var(--airis-texto-medio);
}

.editor-anexo-detalle__acciones {
  display: flex;
  gap: var(--espacio-xs);
}

.editor-paginas-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--espacio-m);
}

.editor-pagina {
  background: var(--airis-blanco);
  border: 2px solid var(--airis-claro);
  border-radius: var(--radio-base);
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  position: relative;
}

.editor-pagina.activa {
  border-color: var(--airis-primary);
}

.editor-pagina.excluida {
  opacity: 0.35;
  border-color: var(--airis-gris);
}

.editor-pagina.excluida::after {
  content: '✕';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: #A02828;
  font-weight: 700;
  pointer-events: none;
}

.editor-pagina canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--airis-blanco);
}

.editor-pagina__numero {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--airis-texto-medio);
  padding: 4px 0 2px;
  font-weight: 600;
}

.editor-pagina__cargando {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--airis-texto-suave);
}

.editor-anexo-item__expandir {
  background: transparent;
  border: 1px solid var(--airis-gris);
  border-radius: var(--radio-base);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--airis-primary);
  cursor: pointer;
}

.editor-anexo-item__expandir:hover {
  background: var(--airis-claro);
}

/* ═══════════════════════════════════════════════════════════
   PREVIEW LATERAL (3ra columna del editor, siempre visible)
   ═══════════════════════════════════════════════════════════ */
.editor-preview-lateral {
  background: var(--airis-primary-dark);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,0.08);
  min-height: 0;
  overflow: hidden;
}

.editor-preview-lateral__cabecera {
  background: var(--airis-primary);
  color: var(--airis-blanco);
  padding: var(--espacio-s) var(--espacio-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.editor-preview-lateral__acciones {
  display: flex;
  gap: 6px;
  align-items: center;
}

.editor-preview-lateral__iframe {
  flex: 1;
  width: 100%;
  border: none;
  min-height: 0;
  display: block;
  background: var(--airis-blanco);
}

.editor-preview-lateral__nota {
  background: var(--airis-primary-dark);
  color: rgba(255,255,255,0.55);
  font-size: 10px;
  padding: 5px var(--espacio-m);
  text-align: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY: VISTA PREVIA GRANDE (pantalla completa)
   ═══════════════════════════════════════════════════════════ */
.overlay-preview {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--airis-primary-dark);
  display: flex;
  flex-direction: column;
}

.overlay-preview--oculto {
  display: none !important;
}

.overlay-preview__cabecera {
  background: var(--airis-primary);
  color: var(--airis-blanco);
  padding: var(--espacio-s) var(--espacio-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 48px;
}

.overlay-preview__titulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.overlay-preview__iframe {
  flex: 1;
  border: none;
  background: var(--airis-primary-dark);
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   MODAL DE CONFIRMACIÓN (reemplaza window.confirm)
   ═══════════════════════════════════════════════════════════ */
.modal-confirm {
  position: fixed;
  inset: 0;
  background: rgba(15, 34, 64, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  animation: fade-in-overlay 0.15s ease-out;
}

.modal-confirm--oculto {
  display: none !important;
}

.modal-confirm__cuerpo {
  background: var(--airis-blanco);
  border-radius: var(--radio-grande);
  padding: var(--espacio-l) var(--espacio-xl);
  max-width: 400px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: var(--sombra-card);
}

.modal-confirm__mensaje {
  color: var(--airis-texto);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: var(--espacio-l);
}

.modal-confirm__acciones {
  display: flex;
  gap: var(--espacio-s);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   MODAL DE GENERACIÓN
   ═══════════════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 34, 64, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal--oculto {
  display: none;
}

.modal__cuerpo {
  background: var(--airis-blanco);
  border-radius: var(--radio-grande);
  padding: var(--espacio-xl);
  max-width: 480px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: var(--sombra-card);
}

.modal__titulo {
  color: var(--airis-primary);
  font-size: 18px;
  margin-bottom: var(--espacio-s);
}

.modal__estado {
  color: var(--airis-texto-medio);
  font-size: 13px;
  margin-bottom: var(--espacio-m);
}

.modal__resultado {
  background: var(--airis-off-white);
  padding: var(--espacio-m);
  border-radius: var(--radio-base);
  margin-bottom: var(--espacio-m);
  text-align: left;
  font-size: 13px;
}

.modal__resultado--oculto {
  display: none;
}

.modal__resultado a {
  color: var(--airis-orange);
  text-decoration: none;
  font-weight: 600;
}

.modal__resultado a:hover {
  text-decoration: underline;
}

.modal__cerrar--oculto {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY DE CARGA — pantalla completa, oculta todo lo demás
   ═══════════════════════════════════════════════════════════ */
.overlay-carga {
  position: fixed;
  inset: 0;
  z-index: 2000; /* por encima del modal de generación */
  background: linear-gradient(135deg, var(--airis-primary-dark) 0%, var(--airis-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-l);
  animation: fade-in-overlay 0.2s ease-out;
}

.overlay-carga--oculto {
  display: none;
}

.overlay-carga__cuerpo {
  text-align: center;
  color: var(--airis-blanco);
  max-width: 420px;
}

.overlay-carga__logo {
  height: 96px;
  width: auto;
  margin-bottom: var(--espacio-l);
  filter: brightness(0) invert(1); /* lo dejamos blanco para alto contraste */
  opacity: 0.95;
}

.overlay-carga__spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--espacio-l);
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--airis-acento);
  border-right-color: var(--airis-orange);
  border-radius: 50%;
  animation: girar-spinner 0.9s linear infinite;
}

.overlay-carga__titulo {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: var(--espacio-s);
  letter-spacing: 0.3px;
}

.overlay-carga__mensaje {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.6;
}

@keyframes girar-spinner {
  to { transform: rotate(360deg); }
}

@keyframes fade-in-overlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* En móvil reducimos el tamaño del logo para que quepa todo */
@media (max-width: 480px) {
  .overlay-carga__logo {
    height: 72px;
    margin-bottom: var(--espacio-m);
  }
  .overlay-carga__titulo {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MODAL DE VISTA PREVIA DE ANEXO PDF
   Ocupa toda la pantalla; muestra una grilla grande de páginas
   donde el usuario puede excluir páginas con un click.
   ═══════════════════════════════════════════════════════════ */
.modal-anexo {
  position: fixed;
  inset: 0;
  z-index: 1500; /* debajo del overlay de carga, encima del editor */
  background: var(--airis-off-white);
  display: flex;
  flex-direction: column;
  animation: fade-in-overlay 0.15s ease-out;
}

.modal-anexo--oculto {
  display: none;
}

.modal-anexo__cabecera {
  background: var(--airis-primary);
  color: var(--airis-blanco);
  padding: var(--espacio-m) var(--espacio-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-m);
  box-shadow: 0 2px 8px rgba(15, 34, 64, 0.2);
}

.modal-anexo__info {
  flex: 1;
  min-width: 0;
}

.modal-anexo__titulo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-anexo__subtitulo {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

.modal-anexo__acciones {
  display: flex;
  gap: var(--espacio-s);
  flex-shrink: 0;
}

.modal-anexo__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--espacio-l);
  background: var(--airis-claro);
}

.modal-anexo__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--espacio-l);
  max-width: 1400px;
  margin: 0 auto;
}

.modal-anexo__cargando {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--airis-texto-medio);
  padding: var(--espacio-xl);
  font-size: 14px;
  font-style: italic;
}

/* Cada página individual dentro del modal */
.pagina-grande {
  background: var(--airis-blanco);
  border: 3px solid transparent;
  border-radius: var(--radio-base);
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
  position: relative;
  box-shadow: var(--sombra-suave);
}

.pagina-grande.activa {
  border-color: var(--airis-primary);
}

.pagina-grande:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-card);
}

.pagina-grande.excluida {
  opacity: 0.4;
  border-color: var(--airis-gris);
}

.pagina-grande.excluida::after {
  content: '✕';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 96px;
  color: #A02828;
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.pagina-grande canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--airis-blanco);
  border: 1px solid var(--airis-claro);
}

.pagina-grande__numero {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--airis-texto-medio);
  padding-top: 8px;
  font-weight: 600;
}

.pagina-grande__estado {
  display: block;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 2px;
}

.pagina-grande.activa .pagina-grande__estado {
  color: var(--airis-primary);
}

.pagina-grande.excluida .pagina-grande__estado {
  color: #A02828;
}

@media (max-width: 768px) {
  .modal-anexo__cabecera {
    padding: var(--espacio-s) var(--espacio-m);
  }
  .modal-anexo__titulo {
    font-size: 13px;
  }
  .modal-anexo__cuerpo {
    padding: var(--espacio-m);
  }
  .modal-anexo__grilla {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--espacio-m);
  }
  .pagina-grande.excluida::after {
    font-size: 60px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints clave
   ═══════════════════════════════════════════════════════════
   1100px hacia abajo: el preview va debajo de los formularios
   768px hacia abajo:  sidebar horizontal scrolleable arriba
   480px hacia abajo:  espaciados más ajustados, header en stack
*/

@media (max-width: 1300px) {
  .editor-layout {
    grid-template-columns: 200px 1fr 360px;
  }
}

/* Botón de preview solo visible cuando la columna de preview está oculta */
.boton--preview-movil {
  display: none;
}

@media (max-width: 1050px) {
  .editor-layout {
    grid-template-columns: 200px 1fr;
  }
  .editor-preview-lateral {
    display: none;
  }
  .boton--preview-movil {
    display: flex;
  }
}

@media (max-width: 768px) {
  :root {
    --altura-header: auto;
  }

  .editor-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--espacio-s);
    padding: var(--espacio-s) var(--espacio-m);
  }

  .editor-header__logo {
    height: 32px;
  }

  .editor-header__title {
    font-size: 15px;
  }

  .editor-layout {
    display: flex;
    flex-direction: column;
  }

  .editor-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--airis-claro);
    padding: 0;
  }

  .editor-sidebar__menu {
    display: flex;
    overflow-x: auto;
    padding: var(--espacio-xs) var(--espacio-s);
    gap: 2px;
  }

  .editor-sidebar__menu li {
    flex-shrink: 0;
  }

  .editor-sidebar__item {
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 13px;
  }

  .editor-sidebar__item.activo {
    border-left: none;
    border-bottom-color: var(--airis-acento);
  }

  .editor-sidebar__pie {
    padding: var(--espacio-s);
    border-top: 1px solid var(--airis-claro);
    flex-direction: row;
    flex-wrap: wrap;
  }

  .editor-formularios {
    padding: var(--espacio-m);
  }

  .editor-seccion {
    max-width: 100%;
  }

  .campos-fila {
    grid-template-columns: 1fr;
  }

  .editor-selector__card,
  .editor-selector__card--ancho {
    padding: var(--espacio-l);
  }

  .editor-selector__encabezado {
    flex-direction: column;
    text-align: center;
  }

  .editor-inversor-item {
    grid-template-columns: 1fr;
    gap: var(--espacio-xs);
  }

  .editor-paginas-grilla {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}

@media (max-width: 480px) {
  .editor-selector {
    padding: var(--espacio-m);
  }

  .modal__cuerpo {
    padding: var(--espacio-l);
  }

  .editor-paginas-grilla {
    grid-template-columns: repeat(2, 1fr);
  }

  .editor-anexo-item {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════
   ACCESIBILIDAD: estados visibles para teclado
   ═══════════════════════════════════════════════════════════ */

button:focus-visible,
.lista-clientes__item:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--airis-acento);
  outline-offset: 1px;
}

/* Para usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}