/* ═══════════════════════════════════════════════════════════════
   modelo.css — Visor de modelos de negocio del panel de IELCO
   ───────────────────────────────────────────────────────────────
   Usa los tokens de marca definidos en tokens.css. No introduce
   ningún color nuevo: si un cambio aquí rompiera el contraste, lo
   detecta probar-modulos.js.
   ═══════════════════════════════════════════════════════════════ */

/* ── El marco: una ventana por encima del panel ── */
.mo-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--s-4);
}

.mo-modal[hidden] { display: none; }

.mo-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(20, 49, 95, 0.55);
}

.mo-modal__caja {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - var(--s-8));
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(20, 49, 95, 0.28);
  overflow: hidden;
}

.mo-modal__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--c-brand-800);
  color: #FFFFFF;
}

.mo-modal__sello {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: var(--s-1);
}

.mo-modal__titulo {
  font-size: var(--t-xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  margin: 0;
}

.mo-modal__cerrar {
  flex: none;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
}

.mo-modal__cerrar:hover { background: rgba(255, 255, 255, 0.24); }

.mo-modal__cuerpo {
  padding: var(--s-6);
  overflow-y: auto;
}

/* ── Ficha ── */
.mo-cabecera { margin-bottom: var(--s-5); }

.mo-sello {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-accent-700);
  background: var(--c-accent-100);
  border-radius: var(--r-sm);
  padding: 2px var(--s-2);
  margin-bottom: var(--s-2);
}

.mo-titulo {
  font-size: var(--t-lg);
  font-weight: var(--weight-bold);
  color: var(--c-ink-900);
  margin: 0 0 var(--s-1);
}

.mo-meta {
  font-size: var(--t-xs);
  color: var(--c-ink-500);
  margin: 0;
}

.mo-seccion {
  font-size: var(--t-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-brand-800);
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--c-brand-100);
}

/* ── Avisos ── */
.mo-aviso {
  font-size: var(--t-sm);
  color: var(--c-warn-900);
  background: var(--c-warn-100);
  border-left: 4px solid var(--c-warn-700);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
}

/* Tres tonos para el mismo recuadro.
   El de arriba —ámbar— es el de fábrica: avisa de algo que conviene mirar. */
.mo-aviso--info {
  color: var(--c-brand-900);
  background: var(--c-brand-050);
  border-left-color: var(--c-brand-500);
}

.mo-aviso--error {
  color: var(--c-danger-800);
  background: var(--c-danger-100);
  border-left-color: var(--c-danger-700);
}

/* Un aviso de error dentro de un modal no debe ocupar sitio mientras no haya
   nada que decir: se declara explícitamente porque cualquier `display` propio
   anularía el `[hidden]` del navegador. */
.mo-aviso[hidden] { display: none; }

.mo-cargando {
  font-size: var(--t-sm);
  color: var(--c-ink-500);
  text-align: center;
  padding: var(--s-10) 0;
}

/* ── Las dos negativas, que NO son errores ──
   Se pintan como explicación, no como fallo: en un caso ella no autorizó,
   y en el otro todavía no ha guardado nada. Ninguna de las dos es un
   problema de la plataforma. */
.mo-negado,
.mo-vacio {
  border-radius: var(--r-md);
  padding: var(--s-6);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.mo-negado {
  background: var(--c-accent-100);
  border-left: 5px solid var(--c-accent-700);
  color: var(--c-ink-700);
}

.mo-vacio {
  background: var(--c-surface-alt);
  border-left: 5px solid var(--c-line-strong);
  color: var(--c-ink-700);
}

.mo-negado strong,
.mo-vacio strong {
  display: block;
  font-size: var(--t-base);
  color: var(--c-ink-900);
  margin-bottom: var(--s-2);
}

.mo-negado p,
.mo-vacio p { margin: 0; }

/* ── Las cinco etapas ── */
.mo-etapas {
  display: grid;
  gap: var(--s-3);
}

.mo-etapa {
  background: var(--c-brand-050);
  border-left: 4px solid var(--c-brand-500);
  border-radius: var(--r-sm);
  padding: var(--s-4);
}

.mo-etapa--vacia {
  background: var(--c-surface-alt);
  border-left-color: var(--c-line-strong);
}

.mo-etapa__titulo {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--weight-bold);
  color: var(--c-brand-800);
}

.mo-etapa--vacia .mo-etapa__titulo { color: var(--c-ink-500); }

.mo-etapa__pregunta {
  display: block;
  font-size: var(--t-xs);
  font-style: italic;
  color: var(--c-ink-500);
  margin: var(--s-1) 0 var(--s-2);
}

.mo-etapa__respuesta {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-700);
  margin: 0;
  white-space: pre-wrap;
}

.mo-etapa--vacia .mo-etapa__respuesta { color: var(--c-ink-300); font-style: italic; }

/* ── Tablas de números ── */
.mo-tabla-caja { margin-bottom: var(--s-4); }

.mo-tabla__titulo {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-500);
  margin-bottom: var(--s-2);
}

.mo-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.mo-tabla th,
.mo-tabla td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

.mo-tabla thead th {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-ink-500);
  background: var(--c-surface-alt);
}

.mo-tabla th {
  font-weight: var(--weight-normal);
  color: var(--c-ink-700);
  width: 62%;
}

.mo-tabla td {
  font-weight: var(--weight-bold);
  color: var(--c-ink-900);
  text-align: right;
}

.mo-fila--destacada { background: var(--c-brand-050); }
.mo-fila--destacada th { color: var(--c-brand-800); font-weight: var(--weight-bold); }

/* ── Diagnóstico en lenguaje llano ── */
.mo-diagnostico {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
}

.mo-diagnostico--ok {
  color: var(--c-ok-900);
  background: var(--c-ok-100);
  border-left: 4px solid var(--c-ok-700);
}

.mo-diagnostico--warn {
  color: var(--c-warn-900);
  background: var(--c-warn-100);
  border-left: 4px solid var(--c-warn-700);
}

/* Los tres tonos que devuelve IELCO.finance.diagnostico(): ok, warn y bad.
   El nombre «bad» viene del módulo de finanzas; aquí se respeta para que
   no haya dos vocabularios para lo mismo. */
.mo-diagnostico--bad {
  color: var(--c-danger-800);
  background: var(--c-danger-100);
  border-left: 4px solid var(--c-danger-700);
}

.mo-diagnostico--neutro {
  color: var(--c-ink-700);
  background: var(--c-surface-alt);
  border-left: 4px solid var(--c-line-strong);
}

/* ── Evolución entre versiones ── */
.mo-evolucion__lectura {
  font-size: var(--t-sm);
  font-weight: var(--weight-bold);
  color: var(--c-brand-800);
  margin: 0 0 var(--s-3);
}

/* ── Selector de versiones ── */
.mo-versiones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px dashed var(--c-line);
}

.mo-versiones__etiqueta {
  font-size: var(--t-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-500);
}

.mo-version {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--weight-bold);
  min-width: 36px;
  padding: var(--s-1) var(--s-3);
  color: var(--c-brand-800);
  background: var(--c-surface);
  border: 2px solid var(--c-brand-100);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.mo-version:hover { border-color: var(--c-brand-500); }

.mo-version--activa {
  color: #FFFFFF;
  background: var(--c-brand-800);
  border-color: var(--c-brand-800);
}

/* ── Acciones ── */
.mo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

/* ── Ventanas angostas (enlace y baja) ──
   No necesitan el ancho del visor de modelos: son formularios cortos. */
.mo-modal__caja--angosta { width: min(560px, 100%); }

.mo-modal__cabecera--peligro { background: var(--c-danger-800); }

/* ── Contenido de las ventanas de acción ── */
.mo-peligro {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-danger-800);
  background: var(--c-danger-100);
  border-left: 5px solid var(--c-danger-700);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin: 0 0 var(--s-5);
}

.mo-peligro strong { display: block; margin-bottom: var(--s-2); }

.mo-campo { margin-bottom: var(--s-4); }

.mo-campo__etiqueta {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--weight-bold);
  color: var(--c-ink-900);
  margin-bottom: var(--s-2);
}

.mo-campo__ayuda {
  display: block;
  font-size: var(--t-xs);
  color: var(--c-ink-500);
  margin-bottom: var(--s-2);
  line-height: 1.5;
}

.mo-campo__entrada {
  width: 100%;
  font-family: var(--font);
  font-size: var(--t-base);
  color: var(--c-ink-900);
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  padding: var(--s-3);
}

.mo-campo__entrada:focus {
  outline: none;
  border-color: var(--c-brand-500);
}

textarea.mo-campo__entrada { min-height: 80px; resize: vertical; line-height: 1.6; }

/* ── Permisos de publicación y uso del modelo ──
   Mismo lenguaje visual que las casillas del formulario de alta y del espacio
   de la emprendedora (`.cp-casilla` y `.es-casilla`): el borde se vuelve verde
   al marcarlas, así que de un vistazo se ve qué quedó autorizado. Se repite
   aquí porque el panel no carga captura.css ni espacio.css, y copiar tres
   reglas es más barato que arrastrar dos hojas enteras. */
.mo-grupo { margin-bottom: var(--s-5); }

.mo-grupo__titulo {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-bottom: var(--s-2);
}

.mo-grupo__nota {
  font-size: var(--t-xs);
  color: var(--c-ink-500);
  line-height: 1.5;
  margin-bottom: var(--s-3);
}

.mo-casilla {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3);
  background: #fff;
  border: 2px solid var(--c-line-strong);
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.mo-casilla:hover { border-color: var(--c-brand-500); }
.mo-casilla input {
  margin: 4px 0 0;
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--c-brand-700);
}
.mo-casilla span { display: flex; flex-direction: column; gap: 2px; }
.mo-casilla strong { font-size: var(--t-base); font-weight: 600; }
.mo-casilla small { font-size: var(--t-xs); color: var(--c-ink-500); line-height: 1.45; }

.mo-casilla:has(input:checked) {
  border-color: var(--c-ok-700);
  background: var(--c-ok-100);
}

/* Atenuada: el permiso existe pero depende de otro que está apagado. Se deja
   visible y deshabilitada en lugar de esconderla, porque esconderla haría
   pensar que el permiso no existe. */
.mo-casilla--atenuada { opacity: 0.55; }
.mo-casilla--atenuada:hover { border-color: var(--c-line-strong); }

/* La casilla que decide las demás —aparecer en el directorio— se marca con un
   borde más grueso para que se lea como la principal y no como una más. */
.mo-casilla--principal { border-width: 3px; }

/* La fecha y la evidencia solo tienen sentido si va a publicarse. */
.mo-derivados {
  margin: calc(var(--s-2) * -1) 0 var(--s-4);
  padding: var(--s-4);
  background: var(--c-surface-alt);
  border-radius: var(--r-md);
  border: 1px dashed var(--c-line-strong);
}

.mo-derivados[hidden] { display: none; }

/* ── Opciones de alcance de la baja ── */
.mo-opciones { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }

.mo-opcion {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  cursor: pointer;
}

.mo-opcion:hover { border-color: var(--c-brand-500); }

.mo-opcion--elegida {
  border-color: var(--c-brand-800);
  background: var(--c-brand-050);
}

.mo-opcion--bloqueada {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--c-surface-alt);
}

.mo-opcion input { margin-top: 3px; flex: none; }

.mo-opcion__texto strong { display: block; font-size: var(--t-sm); color: var(--c-ink-900); }

.mo-opcion__texto span {
  display: block;
  font-size: var(--t-xs);
  color: var(--c-ink-500);
  line-height: 1.5;
  margin-top: var(--s-1);
}

/* ── El token del enlace ── */
.mo-token {
  font-family: var(--font-mono);
  font-size: var(--t-xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--c-brand-800);
  background: var(--c-brand-050);
  border: 2px dashed var(--c-brand-500);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
  margin-bottom: var(--s-4);
  word-break: break-all;
  user-select: all;
}

.mo-enlace {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-ink-700);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  word-break: break-all;
  user-select: all;
}

/* ── Acciones ── */
.mo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.mo-acciones--sin-borde { border-top: none; padding-top: 0; margin-top: var(--s-4); }

.mo-boton {
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: var(--weight-bold);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
}

.mo-boton--primario { color: #FFFFFF; background: var(--c-brand-800); }
.mo-boton--primario:hover { background: var(--c-brand-700); }

.mo-boton--neutro {
  color: var(--c-brand-800);
  background: var(--c-surface);
  border-color: var(--c-line-strong);
}
.mo-boton--neutro:hover { border-color: var(--c-brand-800); }

.mo-boton--peligro { color: #FFFFFF; background: var(--c-danger-800); }
.mo-boton--peligro:hover { background: var(--c-danger-700); }

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

/* El aviso del enlace: se muestra una sola vez y hay que copiarlo ya. */
.mo-unica-vez {
  font-size: var(--t-sm);
  color: var(--c-warn-900);
  background: var(--c-warn-100);
  border-left: 4px solid var(--c-warn-700);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  line-height: var(--lh-body);
}

@media (max-width: 640px) {
  .mo-modal { padding: 0; }
  .mo-modal__caja { max-height: 100vh; border-radius: 0; height: 100vh; }
  .mo-modal__cuerpo { padding: var(--s-4); }
  .mo-tabla th { width: auto; }
  .mo-token { font-size: var(--t-lg); }
}