/* Sistema de diseño de Impulso (docs/arquitectura-impulso.md §8).
   Tres capas de tokens:
   1. Base: espaciado, tipografía, radios, sombras y movimiento (aquí).
   2. Semántica: superficies, texto, estados y etapas, en claro y en oscuro (aquí).
   3. Marca: --marca-50…950, --marca, --marca-sobre, --acento y --lateral-* (identidad.css, que se
      genera desde Administración → Identidad). Cada marca cambia solo esta capa; los componentes
      usan solo tokens, nunca colores sueltos. */
:root {
  /* Base */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --t-xs: 11px; --t-sm: 12px; --t-ch: 13px; --t-base: 14px; --t-md: 15px; --t-lg: 18px; --t-xl: 22px; --t-2xl: 26px; --t-3xl: 28px;
  --radio-sm: 6px; --radio: 10px; --radio-lg: 14px; --radio-pildora: 999px;
  --rapido: .12s; --medio: .2s; --lento: .3s;
  /* Movimiento: salida fuerte para entrar/responder, in-out para mover en pantalla, cajón tipo iOS. */
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-cajon: cubic-bezier(.32, .72, 0, 1);
  --curva: var(--ease-out); --presion: .14s;
  /* Tipografía (identidad.css trae las familias): títulos y marcas 800, encabezados 700, texto 400, botones 600. */
  --fuente-texto: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: "Plus Jakarta Sans", var(--fuente-texto);
  --fuente-encabezados: var(--fuente-texto);
  --peso-titulos: 800; --peso-encabezados: 700; --peso-texto: 400; --peso-botones: 600;
  --fuente-mono: ui-monospace, Consolas, monospace;
  /* Respaldo de la capa de marca, por si identidad.css no carga */
  --marca: #2b2d6e; --marca-fuerte: #2b2d6e; --marca-sobre: #ffffff; --marca-suave: #e6eafe; --marca-tenue: #f4f6ff;
  --acento: #767fc8; --lateral-fondo: #2b2d6e; --lateral-texto: #e6eafe; --lateral-activo: #b1baf0;
}

/* Semántica, tema claro (también para vistas forzadas en claro: .tema-claro) */
:root, .tema-claro {
  --fondo: #f5f6fa;
  --superficie: #ffffff;
  --superficie-2: #f0f1f7;
  --borde: #e2e4ee;
  --texto: #1b1c2e;
  --texto-2: #5b5e78;
  --tenue: #686b84;
  --sombra: 0 1px 2px rgba(20, 22, 60, .06), 0 4px 16px rgba(20, 22, 60, .06);
  --sombra-alta: 0 20px 60px rgba(0, 0, 0, .3);
  --sombra-baja: 0 1px 2px rgba(20, 22, 60, .06);
  --sombra-elevada: 0 2px 4px rgba(20, 22, 60, .06), 0 10px 28px rgba(20, 22, 60, .10);
  --velo: rgba(12, 13, 30, .4);
  --blanco: #ffffff;              /* texto sobre colores sólidos de estado */
  --lateral-borde: transparent;

  --ok: #1f9d6e;
  --aviso: #9c5e04;
  --peligro: #c53b4c;
  --whatsapp: #1fa855;
  /* Estados como texto: mezclados con el texto para pasar 4.5:1 sobre sus propios fondos tintados (claro y oscuro). */
  --ok-texto: color-mix(in srgb, var(--ok) 55%, var(--texto));
  --aviso-texto: color-mix(in srgb, var(--aviso) 75%, var(--texto));
  --peligro-texto: color-mix(in srgb, var(--peligro) 70%, var(--texto));

  /* Etapas: fríos para toques, verdes al avanzar, apagados para salidas (iguales en todas las marcas) */
  --e-nuevo: #64748b;
  --e-toque_1: #3b82f6;
  --e-toque_2: #6366f1;
  --e-toque_3: #8b5cf6;
  --e-respondio: #0ea5a4;
  --e-muestra_enviada: #14b8a6;
  --e-negociacion: #22a06b;
  --e-cliente: #15803d;
  --e-perdido: #b4536a;
  --e-descartado: #94a3b8;
  --e-giro_equivocado: #a78b6d;
  --e-no_contactar: #9f1239;
  color-scheme: light;
}

/* Semántica, tema oscuro (elegido, del sistema o forzado con .tema-oscuro) */
:root[data-tema="oscuro"], .tema-oscuro {
  --fondo: #11121c; --superficie: #1a1b29; --superficie-2: #232436; --borde: #2e3047;
  --texto: #e8e9f3; --texto-2: #a9abc4; --tenue: #898ca9;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);
  --sombra-baja: 0 0 0 1px rgba(255, 255, 255, .06);
  --sombra-elevada: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .35);
  --ok: #3ccf95; --aviso: #e0a84a; --peligro: #f06c7e; --e-no_contactar: #f0627a; --e-perdido: #d9809a;
  --e-cliente: #34c46e; --e-negociacion: #3cc48a; --e-nuevo: #8b9ab0; --e-descartado: #a3b0c2;
  --lateral-borde: #2e3047;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #11121c; --superficie: #1a1b29; --superficie-2: #232436; --borde: #2e3047;
    --texto: #e8e9f3; --texto-2: #a9abc4; --tenue: #898ca9;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);
  --sombra-baja: 0 0 0 1px rgba(255, 255, 255, .06);
  --sombra-elevada: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .35);
    --ok: #3ccf95; --aviso: #e0a84a; --peligro: #f06c7e; --e-no_contactar: #f0627a; --e-perdido: #d9809a;
  --e-cliente: #34c46e; --e-negociacion: #3cc48a; --e-nuevo: #8b9ab0; --e-descartado: #a3b0c2;
    --lateral-borde: #2e3047;
    color-scheme: dark;
  }
}
.tema-claro, .tema-oscuro { background: var(--fondo); color: var(--texto); }
.aviso-dominio { font-size: var(--t-sm); font-weight: 600; color: var(--aviso-texto); text-decoration: none; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto);
  font-size: var(--t-base);
  line-height: 1.45;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca-fuerte); }
h1, h2, h3 { margin: 0; line-height: 1.2; font-family: var(--fuente-encabezados); font-weight: var(--peso-encabezados); }
h1, .titulo-principal { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); letter-spacing: -.015em; }
kbd {
  font: 600 10px/1 var(--fuente-mono);
  padding: 2px 5px; border-radius: var(--radio-sm);
  border: 1px solid currentColor; opacity: .55; margin-left: 4px;
}
.tenue { color: var(--tenue); }
[hidden] { display: none !important; }

/* --- Estructura -------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.lateral {
  background: var(--lateral-fondo);
  color: var(--lateral-texto);
  border-right: 1px solid var(--lateral-borde);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin;
}
.marca { display: flex; align-items: center; gap: 10px; color: var(--blanco); font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); text-decoration: none; font-size: 16px; padding: 4px 6px 18px; }
.marca strong { font-weight: inherit; }
.marca-logo {
  width: 32px; height: 32px; border-radius: var(--radio-sm); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--marca-700, var(--marca)), var(--marca-900, var(--marca))); color: var(--lateral-activo); font-weight: 800; font-size: var(--t-lg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lateral-activo) 40%, transparent);
}
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radio-sm);
  color: color-mix(in srgb, var(--lateral-texto) 85%, transparent); text-decoration: none; font-weight: 500;
  transition: background var(--rapido), color var(--rapido);
}
.menu a:hover { background: rgba(255, 255, 255, .06); color: var(--blanco); }
.menu a.activo { background: color-mix(in srgb, var(--lateral-activo) 16%, transparent); color: var(--blanco); box-shadow: inset 3px 0 0 var(--lateral-activo); }
.ico { width: 18px; height: 18px; flex: none; opacity: .85; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lateral .btn-fantasma { color: var(--lateral-texto); border-color: rgba(255, 255, 255, .14); }
.solo-oscuro { display: none; }
:root[data-tema="oscuro"] .solo-oscuro { display: inline; }
:root[data-tema="oscuro"] .solo-claro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .solo-oscuro { display: inline; }
  :root:not([data-tema="claro"]) .solo-claro { display: none; }
}

.contenido { padding: 24px 28px 40px; min-width: 0; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.encabezado h1 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.01em; }
.sub { margin: 4px 0 0; color: var(--texto-2); }

.rafaga { font-size: var(--t-sm); color: var(--texto-2); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-pildora); padding: 6px 12px; }
.rafaga kbd { opacity: .8; }

/* --- Botones ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font: inherit; font-weight: var(--peso-botones); font-size: var(--t-ch);
  padding: 8px 14px; border-radius: var(--radio-sm);
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease, transform var(--presion) var(--ease-out);
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { border-color: var(--marca-fuerte); } }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .cola-item:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}
.btn-bloque { width: 100%; }
.btn-primario { background: var(--marca); border-color: var(--marca); color: var(--marca-sobre); }
.btn-primario:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--marca); }
.lateral .btn-primario { background: var(--lateral-activo); border-color: var(--lateral-activo); color: var(--lateral-fondo); }
.btn-secundario { background: var(--superficie-2); }
.btn-fantasma { background: transparent; }
.btn-whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--blanco); }
.btn-ok { background: color-mix(in srgb, var(--ok) 14%, var(--superficie)); border-color: var(--ok); color: var(--ok-texto); }
.btn-etapa { border-left: 4px solid var(--c, var(--borde)); }
.btn-salida { color: var(--texto-2); }
.btn-peligro { color: var(--peligro-texto); border-color: color-mix(in srgb, var(--peligro) 45%, var(--borde)); }
.btn-peligro:hover:not(:disabled) { background: var(--peligro); color: var(--blanco); }
.btn-mini { padding: 3px 8px; font-size: var(--t-sm); font-weight: 500; }

/* --- Avisos ------------------------------------------------------------------ */
.aviso {
  padding: 10px 14px; border-radius: var(--radio-sm); margin: 0 0 14px;
  border: 1px solid var(--borde); background: var(--superficie);
}
.aviso-ok { border-color: var(--ok); color: var(--ok-texto); }
.aviso-aviso { border-color: var(--aviso); color: var(--aviso-texto); }
.aviso-error { border-color: var(--peligro); color: var(--peligro-texto); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--texto); color: var(--fondo); padding: 10px 18px; border-radius: var(--radio-pildora);
  font-weight: 600; box-shadow: var(--sombra); z-index: 50; max-width: 90vw;
}
.toast.error { background: var(--peligro); color: var(--blanco); }

/* --- Métricas de Hoy --------------------------------------------------------- */
.metricas-hoy { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.metrica {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px;
  color: inherit; text-decoration: none;
}
.metrica-etq { font-size: var(--t-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.metrica-num { font-size: var(--t-md); color: var(--texto-2); }
.metrica-num strong { font-size: var(--t-3xl); color: var(--texto); font-weight: 700; letter-spacing: -.02em; }
.metrica-pie { font-size: var(--t-sm); color: var(--tenue); }
.metrica-enlace:hover { border-color: var(--marca-fuerte); }
.metrica.alerta { border-color: var(--e-respondio); }
.metrica.alerta strong { color: var(--e-respondio); }
.barra { height: 8px; background: var(--superficie-2); border-radius: var(--radio-pildora); overflow: hidden; margin-top: 4px; }
.barra-relleno { height: 100%; background: linear-gradient(90deg, var(--marca), var(--acento)); border-radius: var(--radio-pildora); transition: width .3s; }
.barra-relleno.cumplida { background: var(--ok); }

/* --- Cola y tarjeta ---------------------------------------------------------- */
.hoy-cuerpo { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 18px; align-items: start; }
.cola {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 8px; position: sticky; top: 16px;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.cola-modo { margin: 6px 8px; font-size: var(--t-sm); color: var(--texto-2); }
.cola-grupo {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-2); padding: 12px 10px 6px; display: flex; justify-content: space-between;
}
.cola-grupo .cuenta { background: var(--superficie-2); border-radius: var(--radio-pildora); padding: 0 8px; font-weight: 600; }
.grupo-recordatorio { color: var(--aviso-texto); }
.grupo-vencido { color: var(--e-toque_2); }
.grupo-por_descartar { color: var(--e-perdido); }
.grupo-respuesta { color: var(--e-respondio); }
.cola-lista { list-style: none; margin: 0; padding: 0; }
.cola-item {
  display: grid; gap: 1px; padding: 9px 10px; border-radius: var(--radio-sm);
  color: inherit; text-decoration: none; border-left: 3px solid transparent;
}
.cola-item:hover { background: var(--superficie-2); }
.cola-item.activo { background: color-mix(in srgb, var(--marca-fuerte) 12%, var(--superficie)); border-left-color: var(--marca-fuerte); }
.cola-item.hecho { opacity: .45; }
.cola-nombre { font-weight: 600; }
.cola-meta { font-size: var(--t-sm); color: var(--texto-2); }
.cola-detalle { font-size: var(--t-sm); color: var(--tenue); }
.verif { color: var(--ok-texto); font-weight: 700; }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.tarjeta-cabeza { display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; font-size: var(--t-sm); font-weight: 600;
  padding: 2px 10px; border-radius: var(--radio-pildora); background: var(--superficie-2); color: var(--texto-2);
}
.chip.etapa { background: color-mix(in srgb, var(--c) 16%, var(--superficie)); color: color-mix(in srgb, var(--c) 55%, var(--texto)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.chip-ok { background: color-mix(in srgb, var(--ok) 14%, var(--superficie)); color: var(--ok-texto); }
.chip-tenue { background: transparent; color: var(--tenue); }
.nombre-editable {
  font: 700 22px/1.25 inherit; font-family: inherit; color: var(--texto);
  border: 1px solid transparent; background: transparent; border-radius: var(--radio-sm);
  padding: 2px 6px; margin-left: -7px; width: 100%;
}
.nombre-editable:hover:not(:disabled) { border-color: var(--borde); }
.nombre-editable:focus { border-color: var(--marca-fuerte); background: var(--superficie-2); outline: none; }
.origen { margin: 0; font-size: var(--t-sm); color: var(--tenue); }
.origen-auto { color: var(--aviso-texto); font-weight: 600; }

.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.datos div { min-width: 0; }
.datos .ancho { grid-column: span 2; }
.datos dt { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.datos dd { margin: 1px 0 0; overflow-wrap: anywhere; }
.enlace-maps { font-weight: 600; text-decoration: none; align-self: flex-start; }
.enlace-maps:hover { text-decoration: underline; }

.bloque { border-top: 1px solid var(--borde); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bloque h3 { font-size: var(--t-ch); font-weight: 700; }
.mensaje-texto {
  margin: 0; white-space: pre-wrap; font-family: inherit; font-size: var(--t-base); line-height: 1.5;
  background: color-mix(in srgb, var(--whatsapp) 9%, var(--superficie)); border-radius: var(--radio);
  border: 1px solid color-mix(in srgb, var(--whatsapp) 22%, var(--borde)); padding: 12px 14px;
}
.bloque-cliente { background: color-mix(in srgb, var(--e-cliente) 8%, var(--superficie)); border-radius: var(--radio); padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--e-cliente) 30%, var(--borde)); }
.bloque-cliente p { margin: 0; }

.muestra-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.muestra-cuerpo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: start; }
.muestra-mini { display: block; height: 200px; overflow: hidden; border-radius: var(--radio-sm); border: 1px solid var(--borde); background: var(--superficie-2); }
.muestra-mini img { width: 100%; display: block; }
.muestra-info { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.muestra-info p { margin: 0; font-size: var(--t-sm); }
.btn.cargando { pointer-events: none; opacity: .7; }
.muestra-info p { margin: 0; }
.nota-envio { font-size: var(--t-sm); background: color-mix(in srgb, var(--whatsapp) 10%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--whatsapp) 30%, var(--borde)); border-radius: var(--radio-sm); padding: 8px 10px; margin: 0; }
.paleta-mini { display: flex; gap: 4px; }
.paleta-mini span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--borde); }
.avance { background: var(--superficie-2); border-radius: var(--radio); padding: 12px 14px; }
.avance-titulo { margin: 0 0 6px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avance-pasos { margin: 0; padding-left: 20px; font-size: var(--t-ch); color: var(--texto-2); }
.avance-pasos li:last-child { color: var(--texto); font-weight: 600; }
.girando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borde); border-top-color: var(--marca-fuerte); animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.muestras-anteriores { font-size: var(--t-sm); color: var(--texto-2); }
.muestras-anteriores ul { margin: 6px 0 0; padding-left: 18px; }
.dialogo-ancho { width: min(720px, 94vw); max-height: 92vh; }
.form-brief { display: flex; flex-direction: column; gap: 12px; }
.form-brief h2 { font-size: var(--t-lg); }
.campo.destacado { background: color-mix(in srgb, var(--acento) 10%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--acento) 40%, var(--borde)); border-radius: var(--radio-sm); padding: 10px; }
.chips-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.check-simple { display: flex; gap: 8px; align-items: center; font-size: var(--t-ch); }
input[type="file"] { font: inherit; font-size: var(--t-ch); }
.ficha { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px; }
.paleta { display: flex; flex-wrap: wrap; gap: 14px; }
.color { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); min-width: 120px; }
.muestra-color { height: 48px; border-radius: var(--radio-sm); border: 1px solid var(--borde); }
.plan-texto { white-space: pre-wrap; font: 13px/1.55 var(--fuente-mono); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; overflow-x: auto; }
.acciones { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--borde); padding-top: 14px; }
.fila-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.salidas { padding-top: 4px; }
.corregir {
  margin-left: auto; font: inherit; font-size: var(--t-sm); color: var(--texto-2);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 6px 8px;
}

.recordatorio {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radio-sm); background: var(--superficie-2);
}
.recordatorio.vencido { background: color-mix(in srgb, var(--aviso) 14%, var(--superficie)); }
.form-recordatorio { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; }
.atajos-fecha { grid-column: 1 / -1; display: flex; gap: 6px; }
.form-nota { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

input[type="text"], input[type="date"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"],
input[type="url"], input[type="month"], input[type="datetime-local"], input[type="password"], textarea, select {
  font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 8px 10px; width: 100%;
}
textarea { resize: vertical; }

.historial { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--borde); display: flex; flex-direction: column; gap: 10px; }
.evento { position: relative; display: grid; grid-template-columns: 130px 120px 1fr; gap: 8px; font-size: var(--t-ch); }
.evento::before {
  content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--tenue);
}
.evento-toque_enviado::before { border-color: var(--e-toque_1); background: var(--e-toque_1); }
.evento-etapa::before { border-color: var(--e-respondio); }
.evento-nota::before { border-color: var(--aviso); }
.evento-pago::before { border-color: var(--e-cliente); background: var(--e-cliente); }
.evento-fecha { color: var(--tenue); }
.evento-tipo { font-weight: 600; color: var(--texto-2); }

.vacio { text-align: center; padding: 40px 20px; color: var(--texto-2); }
.vacio-titulo { font-size: var(--t-lg); font-weight: 700; color: var(--texto); margin: 0 0 4px; }
.vacio-grande { background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio); padding: 80px 20px; }

/* --- Colores por etapa (variable --c) ------------------------------------- */
.etapa-nuevo { --c: var(--e-nuevo); }
.etapa-toque_1 { --c: var(--e-toque_1); }
.etapa-toque_2 { --c: var(--e-toque_2); }
.etapa-toque_3 { --c: var(--e-toque_3); }
.etapa-respondio { --c: var(--e-respondio); }
.etapa-muestra_enviada { --c: var(--e-muestra_enviada); }
.etapa-negociacion { --c: var(--e-negociacion); }
.etapa-cliente { --c: var(--e-cliente); }
.etapa-perdido { --c: var(--e-perdido); }
.etapa-descartado { --c: var(--e-descartado); }
.etapa-giro_equivocado { --c: var(--e-giro_equivocado); }
.etapa-no_contactar { --c: var(--e-no_contactar); }

/* --- Diálogos y formularios ------------------------------------------------ */
.dialogo {
  border: 1px solid var(--borde); border-radius: 14px; padding: 22px 24px; width: min(460px, 92vw);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
}
.dialogo::backdrop { background: rgba(12, 13, 30, .5); }
.dialogo form { display: flex; flex-direction: column; gap: 12px; }
.dialogo h2 { font-size: var(--t-lg); }
.dialogo p { margin: 0; color: var(--texto-2); }
.dialogo-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); }
.campo input, .campo select, .campo textarea { font-weight: 400; font-size: var(--t-base); min-width: 0; max-width: 100%; }
.campo { min-width: 0; }
.check-simple { min-width: 0; overflow-wrap: anywhere; }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.opcion, .check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-sm); cursor: pointer; }
.check { border-color: color-mix(in srgb, var(--peligro) 40%, var(--borde)); }
.tabla-atajos { border-collapse: collapse; }
.tabla-atajos td { padding: 6px 10px 6px 0; }
.tabla-atajos kbd { opacity: .8; margin: 0; }
.formulario {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 22px 24px; max-width: 720px; display: flex; flex-direction: column; gap: 14px;
}

/* --- Pipeline (Kanban) ------------------------------------------------------ */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.columna { background: var(--superficie-2); border-radius: var(--radio); border-top: 4px solid var(--c); min-height: 120px; display: flex; flex-direction: column; transition: background .12s, box-shadow .12s; }
.columna-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; font-weight: 700; cursor: default; }
.columna-titulo { color: color-mix(in srgb, var(--c) 55%, var(--texto)); }
.columna-nota { margin: 0 12px 4px; font-size: var(--t-xs); color: var(--tenue); }
.columna-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 10px; max-height: 68vh; overflow-y: auto; }
.columna-vacia { margin: 8px 4px; font-size: var(--t-sm); color: var(--tenue); }
.columna.sobre { background: color-mix(in srgb, var(--c) 14%, var(--superficie-2)); box-shadow: inset 0 0 0 2px var(--c); }
.arrastrando .columna.bloqueada { opacity: .45; }
.kcard { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 9px 10px; display: grid; gap: 2px; cursor: grab; box-shadow: 0 1px 2px rgba(20, 22, 60, .05); }
.kcard:hover { border-color: var(--c); }
.kcard:focus-visible { outline: 2px solid var(--acento); }
.kcard[draggable="false"] { cursor: pointer; }
.kcard-nombre { font-weight: 600; font-size: var(--t-ch); }
.kcard-meta { font-size: var(--t-sm); color: var(--texto-2); }
.kcard-pie { display: flex; justify-content: space-between; font-size: var(--t-xs); margin-top: 2px; }
.score { background: color-mix(in srgb, var(--marca-fuerte) 14%, var(--superficie)); color: color-mix(in srgb, var(--marca-fuerte) 60%, var(--texto)); border-radius: var(--radio-pildora); padding: 0 7px; font-weight: 700; }
.ver-todos { font-size: var(--t-sm); font-weight: 600; text-decoration: none; padding: 4px; }
.subtitulo { font-size: var(--t-md); margin: 22px 0 10px; color: var(--texto-2); }
.kanban-salidas { grid-auto-columns: minmax(200px, 1fr); }
.columna-salida summary { list-style: none; cursor: pointer; }
.columna-salida summary::-webkit-details-marker { display: none; }
.columna-salida[open] .columna-cabeza { border-bottom: 1px solid var(--borde); }

/* --- Prospectos (tabla) ---------------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; margin-bottom: 12px; }
.filtros input[type="text"], .filtros input[type="search"], .filtros input[type="date"], .filtros select { width: auto; }
.filtro-busqueda { flex: 1 1 260px; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 8px 10px; }
.filtro-fechas { display: inline-flex; gap: 6px; align-items: center; }
.barra-lote { position: sticky; top: 8px; z-index: 5; display: flex; gap: 10px; align-items: center; background: var(--marca); color: var(--marca-sobre); border-radius: var(--radio); padding: 8px 12px; margin-bottom: 10px; box-shadow: var(--sombra); }
.tabla-envoltura { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-ch); }
.tabla th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); padding: 10px; border-bottom: 1px solid var(--borde); background: var(--superficie-2); position: sticky; top: 0; white-space: nowrap; }
.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr[data-id] { cursor: pointer; }
.tabla tbody tr[data-id]:hover { background: var(--superficie-2); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.col-check { width: 36px; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 14px; color: var(--texto-2); }

/* --- Clientes ---------------------------------------------------------------- */
.metricas-4 { grid-template-columns: repeat(4, 1fr); }
.saldo-pendiente { color: var(--aviso-texto); font-weight: 600; }
.entrega { font-size: var(--t-xs); font-weight: 600; margin-left: 6px; color: var(--texto-2); }
.entrega.pronto { color: var(--aviso-texto); }
.entrega.vencida { color: var(--peligro-texto); }
.tabla input[type="date"], .tabla select { width: auto; padding: 4px 6px; font-size: var(--t-ch); }

/* --- Métricas ---------------------------------------------------------------- */
.rejilla-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.panel h2 { font-size: var(--t-md); }
.panel .tabla th { position: static; }
.embudo { display: flex; flex-direction: column; gap: 6px; }
.embudo-fila { display: grid; grid-template-columns: 130px 1fr 64px 56px; gap: 10px; align-items: center; font-size: var(--t-ch); }
.embudo-pista { height: 18px; background: var(--superficie-2); border-radius: var(--radio-sm); overflow: hidden; }
.embudo-barra { height: 100%; background: var(--c); border-radius: 0 4px 4px 0; }
.embudo-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.embudo-pct { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.tasa { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.tasa-barra { height: 10px; background: var(--marca); border-radius: 0 4px 4px 0; min-width: 2px; }
.tasa-barra.tenue-barra { opacity: .45; }
.tasa span { font-variant-numeric: tabular-nums; font-weight: 600; }
.ab-titulo { font-size: var(--t-ch); color: var(--texto-2); margin-top: 6px; }
.veredicto { margin: 0; font-size: var(--t-ch); padding: 8px 10px; border-radius: var(--radio-sm); background: var(--superficie-2); }
.veredicto.concluyente { background: color-mix(in srgb, var(--ok) 14%, var(--superficie)); color: var(--ok-texto); font-weight: 600; }
.grafica { width: 100%; height: auto; max-height: 220px; }
.grafica .eje { stroke: var(--borde); stroke-width: 1; }
.grafica .eje-texto { fill: var(--texto-2); font-size: var(--t-xs); }
.grafica .zona { fill: transparent; }
.grafica .barra-v { fill: var(--marca); }
.grafica .barra-grupo:hover .zona { fill: var(--superficie-2); }
.grafica .barra-grupo:hover .barra-v { fill: var(--acento); }

/* --- Plantillas ------------------------------------------------------------- */
.plantillas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.plantilla-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-sm); color: inherit; text-decoration: none; background: var(--superficie-2); }
.plantilla-tarjeta:hover { border-color: var(--marca-fuerte); }
.plantilla-tarjeta.con-error { border-color: var(--peligro); }
.plantilla-titulo { font-weight: 700; }
.plantilla-texto { font-size: var(--t-ch); color: var(--texto-2); white-space: pre-line; }
.plantilla-pie { font-size: var(--t-sm); color: var(--tenue); }
.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.editor-texto { font: 14px/1.5 inherit; font-family: inherit; min-height: 260px; }
.errores { margin: 0; padding-left: 18px; color: var(--peligro-texto); font-size: var(--t-ch); }
code { font: 12px var(--fuente-mono); background: var(--superficie-2); padding: 1px 5px; border-radius: var(--radio-sm); }

.campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.campos-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.formulario h2 { font-size: var(--t-md); margin-top: 4px; }
.lista-simple { margin: 0; padding-left: 18px; font-size: var(--t-ch); }

/* --- Cajón lateral --------------------------------------------------------- */
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 94vw); background: var(--fondo); z-index: 40; overflow-y: auto; padding: 16px 18px 40px; box-shadow: -20px 0 50px rgba(0, 0, 0, .2); }
.cajon-fondo { position: fixed; inset: 0; background: var(--velo); z-index: 39; }
.cajon-cerrar { position: sticky; top: 0; float: right; z-index: 2; background: var(--superficie); }

@media (max-width: 1100px) {
  .metricas-hoy { grid-template-columns: 1fr 1fr; }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evento { grid-template-columns: 110px 1fr; }
  .evento-texto { grid-column: 1 / -1; }
}

/* --- Brief: notas del negocio y veredicto de la muestra ------------------------- */
.notas-negocio {
  border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--borde)); border-radius: var(--radio-sm);
  padding: 10px 14px 4px; margin: 0 0 14px; background: color-mix(in srgb, var(--acento) 6%, var(--superficie));
}
.notas-negocio legend { font-weight: 600; padding: 0 4px; }
.notas-negocio .aviso { margin: 4px 0 10px; }
.veredicto { margin: 6px 0; font-size: var(--t-ch); }
.veredicto-distinta { color: var(--ok-texto); }
.veredicto-parecida { color: var(--aviso-texto); }
.direccion-mini { font-size: var(--t-sm); }

/* --- Plataforma Impulso: piezas nuevas ------------------------------------------------ */
.usuario-menu { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.usuario-menu a { color: var(--blanco); text-decoration: none; display: flex; flex-direction: column; font-size: var(--t-ch); padding: 4px 6px; border-radius: var(--radio-sm); }
.usuario-menu a.activo, .usuario-menu a:hover { background: rgba(255, 255, 255, .08); }
.usuario-menu .tenue { color: color-mix(in srgb, var(--lateral-texto) 75%, transparent); font-size: var(--t-xs); }
.enlace-privacidad { font-size: var(--t-xs); color: color-mix(in srgb, var(--lateral-texto) 75%, transparent); text-align: center; }
.cuerpo-simple { background: var(--fondo); min-height: 100vh; }
.simple { max-width: 460px; margin: 0 auto; padding: 48px 16px; display: flex; flex-direction: column; gap: 16px; }
.marca-simple { color: var(--marca-fuerte); justify-content: center; padding: 0 0 8px; }
.formulario-simple h1 { font-size: var(--t-xl); }
.pie-simple { text-align: center; font-size: var(--t-sm); }
.panel-angosto { max-width: 560px; }
.panel-texto { max-width: 760px; line-height: 1.6; }
.panel-texto h2 { margin-top: 10px; }
.qr { width: 220px; max-width: 100%; background: var(--blanco); padding: 10px; border-radius: var(--radio-sm); }
.qr svg { width: 100%; height: auto; display: block; }
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.rejilla-2 > .panel { margin-bottom: 0; }
.rejilla-2 + .panel { margin-top: 16px; }
.formulario-plano { border: 0; box-shadow: none; padding: 0; background: transparent; max-width: none; }
.en-linea { display: inline; }
.zona-peligro { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.aviso-enlace { border-color: var(--acento); }
.enlace-copiar { width: 100%; font-family: var(--fuente-mono); font-size: var(--t-ch); padding: 8px; }
.etapas-proyecto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.etapas-proyecto li { padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-sm); }
.etapas-proyecto li.hecha { background: var(--superficie-2); }
.etapas-proyecto li.hecha strong { text-decoration: line-through; color: var(--texto-2); }
@media (max-width: 640px) { .rejilla-2 { grid-template-columns: 1fr; } }

/* --- Celular: el menú lateral pasa a una barra superior con desplazamiento ------------- */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app > * { min-width: 0; }
  .lateral { position: sticky; top: 0; z-index: 30; height: auto; min-height: 0; flex-direction: row; flex-wrap: wrap;
             align-items: center; gap: 8px; padding: 8px 12px; overflow: visible; }
  .lateral .marca { padding: 0; font-size: var(--t-base); }
  .lateral .marca-logo { width: 28px; height: 28px; }
  .menu { min-width: 0; max-width: 100%; flex-direction: row; flex: 1 1 100%; order: 3; overflow-x: auto; gap: 4px; padding-bottom: 2px; scrollbar-width: none; }
  .menu a { white-space: nowrap; padding: 6px 10px; font-size: var(--t-ch); }
  .menu a.activo { box-shadow: inset 0 -2px 0 var(--lateral-activo); }
  .lateral .btn-bloque { width: auto; }
  .lateral > .btn-primario { margin-left: auto; padding: 6px 10px; font-size: var(--t-ch); }
  .usuario-menu { margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; order: 2; }
  .usuario-menu a .tenue, .tema-toggle, .enlace-privacidad { display: none; }
  .usuario-menu .btn-bloque { padding: 6px 10px; font-size: var(--t-ch); }
  .contenido { padding: 16px; }
  .encabezado { flex-direction: column; align-items: stretch; }
  .encabezado h1 { font-size: var(--t-xl); }
  .metricas-hoy, .metricas-4 { grid-template-columns: 1fr 1fr; }
  .hoy-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cola { position: static; max-height: none; }
  .muestra-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .muestra-mini { height: 160px; }
  .filtro-fechas { flex: 1 1 100%; flex-wrap: wrap; }
  .filtro-fechas input[type="date"] { flex: 1 1 120px; min-width: 0; }
  .rejilla-metricas { grid-template-columns: minmax(0, 1fr); }
  .panel { min-width: 0; }
  .panel .tabla { display: block; overflow-x: auto; }
  .embudo-fila { grid-template-columns: 96px minmax(0, 1fr) 48px 44px; }
  .rafaga { display: none; }
  .campos-2, .campos-3 { grid-template-columns: minmax(0, 1fr); }
  .campos-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabla-envoltura { overflow-x: auto; }
  .cajon { width: 100%; }
}


/* --- Sistema de diseño: marca en tarjetas, identidad y galería -------------------------- */
.tarjeta[data-marca] { border-top: 3px solid var(--marca); }
.kcard[data-marca] { box-shadow: inset 3px 0 0 var(--marca), 0 1px 2px rgba(20, 22, 60, .05); }
.chip-marca { background: var(--marca-suave); color: color-mix(in srgb, var(--marca-fuerte) 65%, var(--texto)); }
.ico-boton { width: 16px; height: 16px; }
.btn .ico { opacity: 1; }
.identidad { display: flex; flex-direction: column; gap: var(--e-4); }
.identidad .panel { margin-bottom: 0; }
.identidad-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.identidad-color { display: flex; align-items: flex-end; gap: var(--e-3); }
.identidad-color input[type="color"] { width: 56px; height: 40px; padding: 2px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); cursor: pointer; }
.identidad-color .campo { flex: 0 1 220px; }
.identidad-contraste { margin: 0; font-size: var(--t-ch); color: var(--texto-2); }
.avisos-contraste { margin: 0; padding-left: 18px; color: var(--aviso-texto); font-size: var(--t-ch); }
.avisos-contraste:empty { display: none; }
.escala { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); border-radius: var(--radio-sm); overflow: hidden; border: 1px solid var(--borde); }
.escala-tono { height: 44px; display: flex; align-items: flex-end; padding: 3px 5px; transition: background var(--medio); }
.escala-tono small { font-size: 10px; font-weight: 600; color: #11121c; }
/* 50–500 llevan texto oscuro (los tonos medios no alcanzan 4.5:1 con blanco); 600–950, blanco. */
.escala-tono:nth-child(n+7) small { color: #ffffff; }
.galerias { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e-3); }
.galeria { display: grid; grid-template-columns: 56px minmax(0, 1fr); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.galeria-lateral { background: var(--lateral-fondo); color: var(--lateral-texto); display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: var(--e-3) 0; }
.galeria-lateral .marca-logo { width: 30px; height: 30px; font-size: var(--t-md); }
.galeria-menu { display: grid; place-items: center; width: 36px; height: 32px; border-radius: var(--radio-sm); font-size: 0; }
.galeria-menu.activo { background: color-mix(in srgb, var(--lateral-activo) 18%, transparent); box-shadow: inset 3px 0 0 var(--lateral-activo); color: var(--blanco); }
.galeria-cuerpo { padding: var(--e-3) var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.galeria-titulo, .galeria-texto { margin: 0; }
.galeria .aviso { margin: 0; }
.galeria-barra { width: 60%; }
.barra-guardar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) 0; background: linear-gradient(transparent, var(--fondo) 35%); }
.iconos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--e-2); }
.iconos-lista li { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); }
.iconos-lista .ico { width: 22px; height: 22px; opacity: 1; }
.tokens-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.tokens-lista li { display: flex; align-items: center; gap: var(--e-3); }
.token-espacio { display: inline-block; height: 12px; background: var(--marca); border-radius: 2px; }
.token-radio { display: inline-block; width: 40px; height: 28px; border: 2px solid var(--marca); }
.token-e-1 { width: var(--e-1); } .token-e-2 { width: var(--e-2); } .token-e-3 { width: var(--e-3); } .token-e-4 { width: var(--e-4); }
.token-e-5 { width: var(--e-5); } .token-e-6 { width: var(--e-6); } .token-e-7 { width: var(--e-7); }
.token-radio { border-radius: var(--radio); } .token-radio-sm { border-radius: var(--radio-sm); } .token-radio-lg { border-radius: var(--radio-lg); } .token-radio-pildora { border-radius: var(--radio-pildora); }
.token-t-xs { font-size: var(--t-xs); } .token-t-sm { font-size: var(--t-sm); } .token-t-ch { font-size: var(--t-ch); } .token-t-base { font-size: var(--t-base); }
.token-t-md { font-size: var(--t-md); } .token-t-lg { font-size: var(--t-lg); } .token-t-xl { font-size: var(--t-xl); } .token-t-2xl { font-size: var(--t-2xl); } .token-t-3xl { font-size: var(--t-3xl); }
.token-texto { font-family: var(--fuente-titulos); min-width: 160px; }
@media (max-width: 760px) { .escala-tono small { display: none; } }

/* --- Panel de Impulso ---------------------------------------------------------------- */
.marca-logo-img { object-fit: contain; background: #ffffff; padding: 3px; }

/* Logos de marca: versión normal en tema claro y de texto aclarado en tema oscuro (_logo.html). */
.logo { display: inline-flex; align-items: center; gap: var(--e-2); }
.logo img { display: block; width: auto; }
.logo-fondo-oscuro { display: none !important; }
:root[data-tema="oscuro"] .logo-fondo-claro { display: none !important; }
:root[data-tema="oscuro"] .logo-fondo-oscuro { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-fondo-claro { display: none !important; }
  :root:not([data-tema="claro"]) .logo-fondo-oscuro { display: block !important; }
}
.logo-simple img { height: 56px; }
.identidad-logos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-4); margin: var(--e-3) 0; }
.identidad-logos figure { margin: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-xs); color: var(--texto-2); }
.identidad-logo-fondo { display: grid; place-items: center; height: 72px; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-sm); }
.identidad-logo-fondo img { max-height: 56px; max-width: 180px; width: auto; height: auto; }
.identidad-simbolo img { max-height: 44px; }
.identidad-logos p { flex-basis: 100%; margin: 0; }
.chip-aviso { background: color-mix(in srgb, var(--aviso) 14%, var(--superficie)); color: var(--aviso-texto); }
.chip-peligro { background: color-mix(in srgb, var(--peligro) 14%, var(--superficie)); color: var(--peligro-texto); }
.en-vivo { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--texto-2); white-space: nowrap; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); animation: latido 2s infinite; }
.en-vivo.sin-conexion .punto-vivo { background: var(--aviso); animation: none; }
@keyframes latido { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.embudo-marca + .embudo-marca { margin-top: var(--e-4); }
.embudo-marca h3 { font-size: var(--t-ch); color: var(--marca-fuerte); margin-bottom: var(--e-2); }
.lista-limpia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.panel-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
.tabla-plana { box-shadow: none; }
.celda-recorte { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formulario-linea { max-width: none; margin-top: var(--e-4); }
.titulo-code { font-size: var(--t-xl); background: none; padding: 0; }
.versiones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.versiones li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-sm); }
.version-texto { margin-top: var(--e-1); font-size: var(--t-ch); white-space: pre-wrap; color: var(--texto-2); }
.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.planes-rejilla, .paginas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--e-3); }
.plan-tarjeta, .pagina-tarjeta { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: inherit; text-decoration: none; box-shadow: var(--sombra); transition: border-color var(--rapido), transform var(--rapido); }
@media (hover: hover) and (pointer: fine) { .plan-tarjeta:hover, .pagina-tarjeta:hover { border-color: var(--marca-fuerte); transform: translateY(-1px); } }
.pagina-tarjeta[data-marca] { border-top: 3px solid var(--marca); }
.plan-tarjeta.inactivo { opacity: .6; }
.plan-nombre, .pagina-titulo { font-weight: 700; font-size: var(--t-md); }
.plan-precio { font-size: var(--t-lg); font-weight: 700; color: var(--marca-fuerte); }
.plan-precio small { font-size: var(--t-sm); font-weight: 500; color: var(--texto-2); }
.plan-incluye { font-size: var(--t-sm); color: var(--texto-2); }
.galeria-medios { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--e-3); }
.medio { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; }
.medio-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: repeating-conic-gradient(var(--superficie-2) 0 25%, var(--superficie) 0 50%) 0 0 / 16px 16px; }
.medio-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.medio-info { padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.medio-nombre { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medio-alt { display: flex; gap: var(--e-1); }
.medio-alt input { padding: 4px 8px; font-size: var(--t-ch); }
.zona-subida { border: 2px dashed var(--borde); transition: border-color var(--rapido), background var(--rapido); }
.zona-subida.arrastrando-archivo { border-color: var(--marca-fuerte); background: var(--marca-tenue); }
.zona-subida-ayuda { margin: 0; font-size: var(--t-sm); }
.fuentes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.fuentes-lista li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }

/* Editor de páginas */
.editor-pagina { display: flex; flex-direction: column; gap: var(--e-3); }
.editor-barra { position: sticky; top: 0; z-index: 6; display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) var(--e-4);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.editor-titulo { flex: 1 1 260px; }
.editor-estado { font-size: var(--t-sm); color: var(--texto-2); margin-left: auto; padding-bottom: 9px; min-width: 150px; text-align: right; }
.editor-estado.pendiente { color: var(--aviso-texto); }
.editor-estado.guardado { color: var(--ok-texto); }
.editor-estado.error { color: var(--peligro-texto); }
.editor-cuerpo { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.editor-lista { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-2); position: sticky; top: 92px; }
.editor-lista ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.editor-bloque { border-radius: var(--radio-sm); border-left: 3px solid transparent; }
.editor-bloque.activo { background: color-mix(in srgb, var(--marca-fuerte) 10%, var(--superficie)); border-left-color: var(--marca-fuerte); }
.editor-bloque.oculto .editor-bloque-nombre { opacity: .55; }
.editor-bloque-nombre { display: grid; gap: 1px; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; padding: var(--e-2); cursor: pointer; border-radius: var(--radio-sm); }
.editor-bloque-nombre .tenue { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-bloque-acciones { display: flex; gap: 2px; padding: 0 var(--e-2) var(--e-2); }
.editor-bloque-acciones .btn { padding: 2px 7px; }
.editor-agregar { border-top: 1px solid var(--borde); margin-top: var(--e-2); padding: var(--e-2); }
.editor-formulario { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-4) var(--e-5); min-height: 300px; }
.editor-campos { display: flex; flex-direction: column; gap: var(--e-3); }
.editor-campos h2 { font-size: var(--t-lg); }
.editor-campos > p { margin: -6px 0 0; }
.editor-campos small { font-weight: 400; }
.editor-imagen-previa { max-width: 220px; max-height: 140px; object-fit: contain; border-radius: var(--radio-sm); border: 1px solid var(--borde); margin-top: var(--e-1); }
.editor-lista-campo { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-3); margin: 0; min-width: 0; }
.editor-lista-campo legend { font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); padding: 0 var(--e-1); }
.editor-elemento { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3); background: var(--superficie-2); border-radius: var(--radio-sm); }
.editor-elemento-cabeza { display: flex; align-items: center; gap: var(--e-1); }
.editor-elemento-cabeza strong { margin-right: auto; }
.editor-pie { margin-top: var(--e-4); }
@media (max-width: 900px) {
  .editor-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .editor-lista { position: static; }
  .editor-estado { text-align: left; margin-left: 0; }
}

/* --- Estudio a profundidad ------------------------------------------------------------ */
.estado-estudio-borrador { background: var(--superficie-2); color: var(--texto-2); }
.estado-estudio-revision { background: color-mix(in srgb, var(--aviso) 16%, var(--superficie)); color: var(--aviso-texto); }
.estado-estudio-entregado { background: color-mix(in srgb, var(--ok) 14%, var(--superficie)); color: var(--ok-texto); }
.editor-bloque.falta .editor-bloque-nombre .tenue { color: var(--aviso-texto); }
.editor-navegar { justify-content: space-between; border-top: 1px solid var(--borde); padding-top: var(--e-3); margin-top: var(--e-2); }
.recomendaciones li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--borde); }
.separado { margin-top: var(--e-3); }
.resultados-estudio { grid-template-columns: repeat(3, 1fr); }

/* --- IA y migración de datos --------------------------------------------------------- */
.ia-estado.ia-prueba { border-left: 4px solid var(--ok); }
.ia-estado.ia-real { border-left: 4px solid var(--aviso); }
.ia-estado h2 { display: flex; align-items: center; gap: var(--e-2); }
.ia-estado p { margin: 0; }
.candados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-ch); }
.candados li { display: flex; align-items: center; gap: var(--e-2); color: var(--aviso-texto); }
.candados li.ok { color: var(--ok-texto); }
.ia-funciones li { display: flex; flex-direction: column; gap: var(--e-1); padding-bottom: var(--e-3); border-bottom: 1px solid var(--borde); }
.campo-en-linea { flex-direction: row; align-items: center; gap: var(--e-2); }
.campo-en-linea select { width: auto; }
.entrada-corta { width: 90px !important; }
.columnas-mapeo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--e-3); }
.columna-mapeo { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie-2); min-width: 0; }
.columna-mapeo.repetida { border-color: var(--peligro); }
.columna-mapeo.repetida::after { content: "Campo repetido"; font-size: var(--t-xs); color: var(--peligro-texto); font-weight: 600; }
.col-nombre { font-size: var(--t-ch); color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-ejemplo { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-razon { font-size: var(--t-xs); color: var(--marca-fuerte); }
.col-razon:empty { display: none; }

/* --- Experiencia: transiciones, esqueletos, accesibilidad ------------------------------ */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--medio); }
.lateral { view-transition-name: lateral; }
.saltar { position: absolute; left: var(--e-3); top: -60px; z-index: 100; background: var(--marca); color: var(--marca-sobre); padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-sm); font-weight: 600; text-decoration: none; transition: top var(--rapido); }
.saltar:focus { top: var(--e-3); }
.contenido:focus { outline: none; }
.esqueleto { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); background: var(--superficie); border-radius: var(--radio); }
.esqueleto span { display: block; height: 14px; border-radius: var(--radio-sm); background: linear-gradient(90deg, var(--superficie-2) 25%, var(--borde) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%; animation: brillo 1.2s infinite linear; }
.esqueleto span:first-child { height: 26px; width: 55%; }
.esqueleto .corto { width: 35%; }
.esqueleto .alto { height: 120px; }
@keyframes brillo { to { background-position: -200% 0; } }
.toast { animation: aparecer var(--medio) var(--curva); }
@keyframes aparecer { from { opacity: 0; transform: translate(-50%, 8px); } }
.dialogo[open] { animation: dialogo-entra var(--medio) var(--curva); }
@keyframes dialogo-entra { from { opacity: 0; transform: scale(.96); } }
.dialogo[open]::backdrop { animation: velo-entra var(--medio) ease; }
@keyframes velo-entra { from { opacity: 0; } }
#dlg-comandos[open], #dlg-atajos[open], #dlg-comandos[open]::backdrop, #dlg-atajos[open]::backdrop { animation: none; }
.cajon:not([hidden]) { animation: cajon-entra var(--lento) var(--ease-cajon); }
@keyframes cajon-entra { from { transform: translateX(32px); opacity: 0; } }
@media (max-width: 760px) {
  .btn { min-height: 40px; }
  .btn-mini { min-height: 32px; }
  input[type="text"], input[type="date"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"],
input[type="url"], input[type="month"], input[type="datetime-local"], input[type="password"], textarea, select { font-size: 16px; } /* sin zoom automático en iPhone */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
.rejilla-2 > * { min-width: 0; }
.candados code, .ia-estado code { overflow-wrap: anywhere; }

/* --- Catálogo y cotizador ------------------------------------------------------------- */
.plan-tarjeta .chip { align-self: flex-start; }
.tabla code { white-space: nowrap; }
.campo-unidad { display: flex; align-items: center; gap: var(--e-2); }
.campo-unidad input { flex: 1; }
.campo .ayuda { font-size: var(--t-xs); font-weight: 400; }
.historial-plegable, .regla { margin-top: var(--e-3); }
.historial-plegable > summary, .regla > summary { cursor: pointer; padding: var(--e-2) 0; }
.regla { border-top: 1px solid var(--borde); }
.regla.inactiva > summary { opacity: .6; }
.avisos-plataforma { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-4); }
.aviso-con-accion { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
.cot-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--e-4); align-items: start; }
.cot-armado { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.cot-lateral { display: flex; flex-direction: column; gap: var(--e-4); position: sticky; top: var(--e-4); }
.cot-paquetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-3); }
.cot-paquete { position: relative; display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-3) var(--e-3) var(--e-3) 40px;
  border: 1px solid var(--borde); border-top: 4px solid var(--marca); border-radius: var(--radio); cursor: pointer; background: var(--superficie); }
.cot-paquete input { position: absolute; left: 14px; top: 16px; }
.cot-paquete:has(input:checked) { box-shadow: 0 0 0 2px var(--marca); background: var(--marca-tenue); }
.cot-paquete-nombre { font-weight: 700; }
.cot-paquete-precio { display: flex; flex-direction: column; font-weight: 600; color: var(--marca-fuerte); font-size: var(--t-ch); }
.cot-resumen { display: flex; flex-direction: column; gap: var(--e-2); }
[data-resumen].cargando { opacity: .55; transition: opacity var(--rapido); }
.cot-totales td:first-child { color: var(--texto-2); }
.cot-total td { font-weight: 800; border-top: 2px solid var(--texto); }
.cot-pagos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.cot-pagos li { display: flex; justify-content: space-between; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-left: 3px solid var(--marca);
  background: var(--superficie-2); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; font-size: var(--t-ch); }
.cot-empezar { margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--radio-sm); background: var(--marca); color: var(--marca-sobre); display: flex; justify-content: space-between; }
.cot-interno summary { cursor: pointer; font-size: var(--t-ch); padding: var(--e-2) 0; }
.cot-botones, .cot-botones-col { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cot-botones-col { flex-direction: column; align-items: stretch; }
.cot-botones-col form { display: flex; flex-direction: column; }
.cot-emitir { margin-top: var(--e-4); }
.cot-vista-doc iframe { width: 100%; height: 80vh; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
@media (max-width: 1100px) { .cot-columnas { grid-template-columns: 1fr; } .cot-lateral { position: static; } }
.cot-lateral .tabla th, .cot-lateral .tabla td { padding: 6px 4px; font-size: var(--t-sm); }
.cot-lateral .tabla th { font-size: 10px; letter-spacing: .02em; white-space: normal; }
.cot-armado .celda-recorte { max-width: 340px; }
.cot-armado .tabla td:last-child, .cot-armado .tabla th:last-child { width: 90px; }
.campo > .chip { align-self: flex-start; }

/* Nombres de marca y de paquete: tipografía de títulos (Plus Jakarta Sans 800). */
.chip-marca, .plan-nombre, .cot-paquete-nombre, .logo-texto strong { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); }
.bandeja { list-style: none; margin: 0; padding: 0; }
.bandeja li { border-bottom: 1px solid var(--borde); padding: var(--e-2) 0; }
.bandeja summary { cursor: pointer; display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.bandeja-cuerpo { white-space: pre-wrap; font: var(--t-ch)/1.5 var(--fuente-texto); background: var(--superficie-2); padding: var(--e-3); border-radius: var(--radio-sm); }

/* --- Biblioteca y entregables ------------------------------------------------------------ */
.biblio { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-3); }
.biblio-carpeta { font-size: var(--t-ch); color: var(--texto-2); margin: var(--e-3) 0 var(--e-2); }
.biblio-archivo { display: flex; gap: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-2); background: var(--superficie); }
.biblio-miniatura { flex: none; width: 72px; height: 72px; border-radius: var(--radio-sm); overflow: hidden; display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto-2); font-weight: 600; font-size: var(--t-xs); text-decoration: none; }
.biblio-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.biblio-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-ch); }
.biblio-datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entregables { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.entregable { border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: var(--radio-sm); padding: var(--e-2) var(--e-3); }
.entregable-en_revision { border-left-color: var(--aviso); }
.entregable-aprobado { border-left-color: var(--ok); }
.entregable-cambios { border-left-color: var(--peligro); }
.entregable-reemplazado { opacity: .6; }
.entregable p { margin: var(--e-1) 0 0; }
.entregable-resolucion { font-size: var(--t-ch); }

/* --- Calendario ------------------------------------------------------------------------- */
.agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.agenda li { display: grid; grid-template-columns: 150px 1fr auto; gap: var(--e-2); align-items: center; padding: var(--e-2) var(--e-3);
  border-left: 3px solid var(--marca); background: var(--superficie-2); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; font-size: var(--t-ch); }
.agenda .agenda-entregable { border-left-color: var(--aviso); }
.agenda .agenda-cobro { border-left-color: var(--peligro); }
.agenda-fecha { color: var(--texto-2); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .agenda li { grid-template-columns: 1fr auto; } .agenda-fecha { grid-column: 1 / -1; } }

.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.crm-formulario-caja { max-width: 32rem; margin: 0 auto; padding: 1.5rem 16px; }
.crm-formulario-pie { margin-top: 1.5rem; font-size: .8rem; }


/* --- Utilidades comunes ------------------------------------------------------------- */
.sr, .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.encabezado-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-4); align-items: start; margin-bottom: var(--e-4); }
.rejilla-3 > .panel { margin-bottom: 0; }
.datos-2 { grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; }
.datos-2 dt { align-self: baseline; }
.vacio-linea { color: var(--texto-2); padding: var(--e-2) 0; list-style: none; }
.segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-pildora); }
.segmentado button { font: inherit; font-size: var(--t-ch); font-weight: var(--peso-botones); color: var(--texto-2); background: transparent; border: 0;
  border-radius: var(--radio-pildora); padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background-color var(--rapido) ease, color var(--rapido) ease; }
.segmentado button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-baja); }
.segmentado button:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.ico-mini { width: 12px; height: 12px; }
.btn.deshabilitado { opacity: .45; pointer-events: none; }

/* --- Fábrica: galería -------------------------------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin: 0 0 var(--e-4); }
.filtros .campo { flex: 0 1 190px; }
.filtros .campo-busqueda { flex: 1 1 260px; }
.galeria-muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4); }
.galeria-compacta { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.muestra-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); display: flex; flex-direction: column; min-width: 0;
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .muestra-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-elevada); }
}
.muestra-imagen { display: block; aspect-ratio: 16 / 10; background: var(--superficie-2); overflow: hidden; }
.muestra-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.muestra-imagen:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.muestra-vacia { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--tenue); font-size: var(--t-ch); }
.muestra-vacia .ico { width: 28px; height: 28px; }
.muestra-tarjeta[data-estado="generando"] .muestra-vacia, .muestra-tarjeta[data-estado="capturando"] .muestra-vacia { color: var(--marca); }
.muestra-info { padding: var(--e-3) var(--e-4) var(--e-4); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.muestra-titulo { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; min-width: 0; }
.muestra-titulo a { color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muestra-titulo a:hover { text-decoration: underline; }
.muestra-meta { margin: 0; font-size: var(--t-ch); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muestra-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.muestra-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-sm); margin-top: 2px; }
.muestra-comparar { font-size: var(--t-sm); }
.chip-estado[data-estado="lista"] { background: color-mix(in srgb, var(--ok) 14%, var(--superficie)); color: var(--ok-texto); }
.chip-estado[data-estado="error"], .chip-estado[data-estado="interrumpida"] { background: color-mix(in srgb, var(--peligro) 14%, var(--superficie)); color: var(--peligro-texto); }
.chip-estado[data-estado="generando"], .chip-estado[data-estado="capturando"], .chip-estado[data-estado="en_fila"] { background: var(--marca-tenue); color: var(--marca-fuerte); }

.barras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 3px; height: 64px; }
.barras li { height: max(var(--alto), 2px); background: color-mix(in srgb, var(--marca) 70%, transparent); border-radius: 3px 3px 0 0; }

.fila-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.fila-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3); align-items: center;
  padding: var(--e-2) var(--e-3); border-radius: var(--radio-sm); background: var(--superficie-2); }
.fila-paso { margin: 2px 0 0; font-size: var(--t-ch); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--marca); }
.fila-item[data-estado="generando"] .fila-pulso, .fila-item[data-estado="capturando"] .fila-pulso { animation: pulso 1.6s ease-in-out infinite; }
.fila-item[data-estado="en_fila"] .fila-pulso { background: var(--tenue); }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.comparar-barra { position: fixed; left: 50%; bottom: calc(var(--e-5) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; gap: var(--e-2); align-items: center; padding: 8px 8px 8px 16px; background: var(--texto); color: var(--fondo);
  border-radius: var(--radio-pildora); box-shadow: var(--sombra-alta); z-index: 40; font-size: var(--t-ch);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva); }
.comparar-barra .btn-fantasma { color: var(--fondo); border-color: transparent; }
@starting-style { .comparar-barra:not([hidden]) { opacity: 0; transform: translate(-50%, 12px); } }

/* --- Fábrica: detalle ------------------------------------------------------------------- */
.vista-muestra { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-4); align-items: start; margin-bottom: var(--e-4); }
.vista-muestra > * { min-width: 0; }
.vista-muestra .panel { margin-bottom: 0; }
.vista-lado { display: flex; flex-direction: column; gap: var(--e-4); }
.marco-escritorio { --escala: .5; position: relative; width: 100%; height: calc(820px * var(--escala)); overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie-2); }
.marco-escritorio iframe { position: absolute; inset: 0 auto auto 0; width: 1280px; height: 820px; border: 0; transform: scale(var(--escala)); transform-origin: 0 0; background: #fff; }
.marco-celular { display: grid; place-items: center; padding: var(--e-4) 0; }
.marco-celular iframe { width: 390px; max-width: 100%; height: 780px; border: 10px solid #15151f; border-radius: 34px; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 40px rgba(12, 13, 30, .22); }
.captura { width: 100%; height: auto; border-radius: var(--radio-sm); border: 1px solid var(--borde); display: block; }
.captura-celular { max-width: 300px; margin: 0 auto; }
.nota-equipo { font-size: var(--t-sm); margin: 0; }
.concepto { font-family: var(--fuente-titulos); font-size: var(--t-md); font-weight: 700; margin: 0; text-wrap: balance; }
.paleta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paleta li { display: flex; gap: 10px; align-items: center; font-size: var(--t-ch); }
.paleta code { font-size: var(--t-sm); }
.muestra-color { width: 28px; height: 28px; border-radius: var(--radio-sm); background: var(--c); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.paleta-fila { display: flex; gap: 4px; }
.paleta-fila .muestra-color { width: 20px; height: 20px; border-radius: var(--radio-sm); }
.regenerar > summary { list-style: none; cursor: pointer; }
.regenerar > summary::-webkit-details-marker { display: none; }
.regenerar[open] > form { margin-top: var(--e-3); }
.comparacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin-bottom: var(--e-4); }
.comparacion > .panel { margin-bottom: 0; min-width: 0; }
.tabla tr.igual td { color: var(--tenue); }
.lista-elegir { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-elegir li { display: flex; justify-content: space-between; gap: var(--e-3); align-items: center; padding: 8px 10px;
  border-radius: var(--radio-sm); background: var(--superficie-2); min-width: 0; }
.lista-elegir li > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-pagina .form-brief { max-width: 900px; }
.uso-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-ch); }
.uso-lista li { display: grid; grid-template-columns: minmax(0, 1fr) 80px 28px; gap: 8px; align-items: center; }
.uso-lista li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.uso-barra { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--marca) var(--p), var(--superficie-2) var(--p)); }
.fuentes-usadas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

@media (max-width: 1100px) { .vista-muestra { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .comparacion { grid-template-columns: minmax(0, 1fr); }
  .filtros .campo { flex: 1 1 140px; }
  .marco-celular iframe { height: 640px; border-width: 6px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .muestra-tarjeta, .comparar-barra { transition: none; }
  .fila-item .fila-pulso { animation: none; }
}
.ficha-diseno p { margin: 0; }
.ficha-diseno .paleta { margin: var(--e-1) 0; }

/* --- Experiencia del CRM: aviso con acción, paleta de comandos, atajos y vistas guardadas ------------- */
.toast { display: flex; align-items: center; gap: var(--e-3); }
.toast-accion { font: inherit; font-weight: var(--peso-botones); color: inherit; background: color-mix(in srgb, currentColor 16%, transparent);
  border: 0; border-radius: var(--radio-sm); padding: 4px 10px; cursor: pointer; }
.toast-accion:hover { background: color-mix(in srgb, currentColor 26%, transparent); }
.toast-accion:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.paleta-comandos { width: min(640px, 94vw); padding: 0; top: 12vh; margin-top: 0; overflow: hidden; }
.paleta-entrada { display: flex; align-items: center; gap: var(--e-3); padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.paleta-entrada .ico { width: 18px; height: 18px; color: var(--tenue); flex-shrink: 0; }
.paleta-entrada input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--texto); padding: 4px 0; }
.paleta-entrada input:focus-visible { outline: none; }
.paleta-comandos:has(input:focus-visible) .paleta-entrada { box-shadow: inset 0 -2px 0 var(--marca); }
.paleta-resultados { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 56vh); overflow-y: auto; overscroll-behavior: contain; }
.paleta-grupo { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); padding: 10px 10px 4px; }
.paleta-resultados [role=option] { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--radio-sm); cursor: pointer; }
.paleta-resultados [role=option][aria-selected="true"] { background: var(--marca-tenue); box-shadow: inset 3px 0 0 var(--marca); }
.paleta-titulo { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-sub { color: var(--texto-2); font-size: var(--t-ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-vacio { padding: 18px 12px; color: var(--texto-2); text-align: center; }
.paleta-pie { margin: 0; padding: 8px 16px; border-top: 1px solid var(--borde); font-size: var(--t-sm); }

.atajo-pista { margin-left: auto; display: inline-flex; gap: 2px; opacity: .75; }
.atajo-pista kbd { font-size: 10px; padding: 0 4px; }
.boton-buscar, [data-abrir-atajos] { display: flex; align-items: center; gap: 8px; }
.atajos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-5); }
.atajos-columnas h3 { font-size: var(--t-ch); color: var(--texto-2); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }

.vistas-barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--e-3); }
.vista-chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: var(--t-ch); font-weight: 600; color: var(--texto-2);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-pildora); padding: 5px 12px; text-decoration: none;
  cursor: pointer; transition: background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease; }
.vista-chip a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
@media (hover: hover) and (pointer: fine) { .vista-chip:hover { border-color: var(--marca); color: var(--texto); } }
.vista-chip.activo { background: var(--marca-tenue); border-color: var(--marca); color: var(--marca-fuerte); }
.vista-chip:focus-visible, .vista-chip a:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.vista-propia { padding-right: 4px; }
.vista-borrar { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.vista-borrar:hover { background: var(--superficie-2); }
.vista-guardar { border-style: dashed; }
.vistas-separador { width: 1px; height: 20px; background: var(--borde); margin: 0 4px; }

/* Reducir movimiento: la regla global ya quita animaciones y transiciones; nada se desplaza al presionar. */
@media (prefers-reduced-motion: reduce) { .btn:active:not(:disabled), .vista-chip:active { transform: none; } }
.btn.cargando { position: relative; cursor: progress; }
.btn.cargando::after { content: ""; width: 12px; height: 12px; margin-left: 8px; border-radius: 50%; display: inline-block; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; animation: girar .6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
/* En pantallas táctiles no hay teclado físico: fuera las pistas y la ayuda de atajos. */
@media (pointer: coarse), (max-width: 760px) {
  .atajo-pista, [data-abrir-atajos], .btn kbd { display: none; }
}
.metrica.metrica-aviso { border-color: var(--aviso); }
.metrica.metrica-aviso strong { color: var(--aviso-texto); }

/* --- Auditoría final: áreas de toque, superficies del navegador y números ------------------------------ */
@media (pointer: coarse), (max-width: 760px) {
  .btn, .btn-mini, select, .menu a, .subnav a, .vista-chip, .segmentado button, .portal-menu a, .portal-inferior a,
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"],
  input[type="date"], input[type="month"], input[type="password"], input[type="datetime-local"] { min-height: 44px; }
  .menu a, .subnav a, .vista-chip a { display: inline-flex; align-items: center; }
  .vista-borrar { width: 32px; height: 32px; }
}
.col-check { padding: 0 !important; }
.col-check input { margin: 0; width: 18px; height: 18px; }
.col-check label { display: grid; place-items: center; min-width: 40px; min-height: 40px; cursor: pointer; }
.galeria-enlace { color: var(--marca); text-decoration: underline; }
.pp-curso-titulo { font-size: var(--t-lg); margin: 0; }
::selection { background: color-mix(in srgb, var(--marca) 28%, transparent); color: inherit; }
input, textarea { caret-color: var(--marca); }
a { text-underline-offset: .18em; }
html { scrollbar-color: color-mix(in srgb, var(--texto-2) 45%, transparent) transparent; -webkit-tap-highlight-color: transparent; }
.num, td.num, th.num, .metrica-num, .cuenta, .crm-uso, .barra-total { font-variant-numeric: tabular-nums; }
h1, h2, .encabezado h1 { text-wrap: balance; }
p, .sub, .tenue { text-wrap: pretty; }
a code { color: color-mix(in srgb, var(--marca) 65%, var(--texto)); }
.vista-borrar { min-width: 24px; min-height: 24px; }
.btn-mini { min-width: 32px; }
@media (pointer: coarse), (max-width: 760px) { .portal-herramienta-accion { min-height: 44px; } }

/* --- Usabilidad: menú en 6 secciones y buscador siempre visible ---------------------------------- */
.menu-grupo { margin: 12px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
              color: color-mix(in srgb, var(--lateral-texto) 62%, transparent); }
.menu a { padding-block: 7px; }
.barra-busqueda { margin: -8px 0 18px; }
.buscador { display: flex; align-items: center; gap: 10px; max-width: 560px; min-height: 44px; padding: 0 12px;
            border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto-2);
            box-shadow: var(--sombra-baja); cursor: text; }
.buscador:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0; font: inherit; color: var(--texto); outline: none; box-shadow: none; }
.buscador .atajo-pista { flex: none; }
@media (max-width: 760px) {
  .menu-grupo { display: none; }
  .barra-busqueda { margin: 0 0 14px; }
  .buscador .atajo-pista { display: none; }
}
.pendientes-hoy { margin-bottom: 18px; padding: 14px 16px; }
.pendientes-hoy h2 { font-size: var(--t-lg); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.pendientes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pendiente { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px;
             border-radius: var(--radio-sm); background: var(--superficie-2, var(--fondo)); }
.pendiente.vencido { box-shadow: inset 3px 0 0 var(--aviso); }
.pendiente-texto { display: grid; gap: 2px; min-width: 0; }
.pendiente-detalle { color: var(--texto-2); font-size: var(--t-ch); }
.pendiente-acciones { display: flex; gap: 6px; flex: none; }
@media (max-width: 640px) { .pendiente { flex-direction: column; align-items: stretch; } }
/* Cotización en 3 pasos con un solo botón principal */
.cot-subtitulo { font-size: var(--t-base); margin: 16px 0 8px; }
.cot-complementos { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 10px; }
.cot-complementos > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.opciones-fila { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cot-botones { display: grid; gap: 8px; margin-top: 12px; }
.cot-secundarias { justify-content: space-between; }
.cot-ayuda { font-size: var(--t-ch); margin-top: 10px; }
.cot-manual-ayuda { grid-column: 1 / -1; margin: 4px 0 0; font-size: var(--t-ch); }
.tarjeta-contenedor.tarjeta-vacia:empty, .tarjeta-vacia:not(:has(*)) { display: none; }
/* Checklist del sitio final */
.checklist-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.checklist-grupo { border: 1px solid var(--borde); margin: 0 0 14px; }
.checklist-grupo legend { font-weight: 700; padding: 0 6px; }
.checklist-item { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.checklist-item:last-child { border-bottom: 0; }
.checklist-casilla { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.checklist-casilla input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.checklist-desc { display: block; font-size: var(--t-ch); }
.checklist-contenido { margin: 8px 0 4px 32px; }
.checklist-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.checklist-foto { position: relative; display: block; }
.checklist-foto input { position: absolute; top: 6px; left: 6px; }
.checklist-foto img { border-radius: var(--radio-sm); object-fit: cover; }
.checklist-faltan { color: var(--aviso-texto); padding-left: 18px; margin: 6px 0; font-size: var(--t-ch); }
.opcion-grande { min-height: 44px; }
@media (max-width: 900px) { .checklist-columnas { grid-template-columns: minmax(0, 1fr); } .checklist-lateral { order: -1; } }
.sitio-final { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.sitio-captura img { width: 100%; height: auto; border: 1px solid var(--borde); border-radius: var(--radio-sm); object-fit: cover; object-position: top; aspect-ratio: 16 / 10; }
.lanzamiento { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.lanzamiento li { display: flex; gap: 10px; align-items: baseline; }
.lanzamiento-marca { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; font-size: 12px; font-weight: 700; }
.lanzamiento-ok .lanzamiento-marca { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok-texto); }
.lanzamiento-falla .lanzamiento-marca { background: color-mix(in srgb, var(--peligro) 18%, transparent); color: var(--peligro-texto); }
.lanzamiento-aviso .lanzamiento-marca, .lanzamiento-pendiente .lanzamiento-marca { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso-texto); }
@media (max-width: 760px) { .sitio-final { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse), (max-width: 760px) {
  .opcion, .check-simple { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  input[type="file"] { min-height: 44px; }
}

/* Editor de sitios */
.ed-sitio { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; height: calc(100vh - 120px); min-height: 560px; }
.ed-sitio-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ed-sitio-barra h1 { font-size: var(--t-xl); margin: 0; }
.editor-tamanos button.activo { background: var(--marca); color: var(--marca-sobre); }
.ed-sitio-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; min-height: 0; }
.editor-lienzo { position: relative; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2, var(--fondo)); padding: 12px; }
.editor-lienzo iframe { display: block; border: 0; background: #fff; transform-origin: top left; box-shadow: var(--sombra-baja); }
.editor-panel { overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); padding: 12px; }
.editor-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.editor-pestanas button { flex: 1; min-height: 44px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--texto-2); cursor: pointer; border-bottom: 2px solid transparent; }
.editor-pestanas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--marca); }
.editor-ayuda { font-size: var(--t-ch); color: var(--texto-2); }
.editor-cambios { padding-left: 18px; font-size: var(--t-ch); max-height: 160px; overflow: auto; }
.editor-global { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 10px; }
.editor-global summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.editor-var { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.editor-var input[type="color"] { width: 44px; height: 36px; border: 1px solid var(--borde); border-radius: 6px; padding: 0; background: none; }
.editor-versiones { list-style: none; padding: 0; display: grid; gap: 8px; }
.editor-versiones li { padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio-sm); font-size: var(--t-ch); }
.editor-versiones li.actual { border-color: var(--marca); }
.editor-foto { border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--radio-sm); }
.editor-foto img { border-radius: var(--radio-sm); object-fit: cover; }
@media (max-width: 900px) { .ed-sitio { height: auto; } .ed-sitio-cuerpo { grid-template-columns: minmax(0, 1fr); } .editor-lienzo { height: 70vh; } }

/* Administración → Biblioteca de secciones */
.bib-cobertura { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3); }
.bib-tipo { display: flex; flex-direction: column; gap: 2px; padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); }
.bib-tipo.ok { border-color: var(--ok); }
.bib-tipo.falta span { color: var(--aviso-texto); }
.bib-cabeza { display: flex; justify-content: space-between; gap: var(--e-4); align-items: start; flex-wrap: wrap; }
.bib-vistas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--e-3); margin: var(--e-4) 0; align-items: start; }
.bib-vistas .bib-ancha { grid-column: 1 / -1; }
.bib-marco { position: relative; overflow: hidden; width: 100%; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); }
.bib-marco iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; }
.bib-vistas figure { margin: 0; }
.bib-vistas figcaption { font-size: var(--t-ch); color: var(--tenue); margin-bottom: var(--e-1); }
@media (max-width: 900px) { .bib-vistas { grid-template-columns: 1fr; } }
.lista-revision { list-style: none; padding: 0; margin: var(--e-2) 0; }
.lista-revision .falla { color: var(--peligro-texto); }
.lista-revision .aviso { color: var(--aviso-texto); }
.lista-revision .ok { color: var(--ok-texto); }
.textos-muestra { display: grid; gap: var(--e-2); max-height: 60vh; overflow: auto; padding-right: var(--e-2); }
.bib-filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0; max-width: 100%; }
.bib-filtros .segmentado { flex-wrap: wrap; max-width: 100%; border-radius: var(--radio-lg); }

/* Fase 3: datos verificados del negocio (pantalla del brief) */
.datos-negocio > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); cursor: pointer; min-height: 44px; }
.datos-negocio > summary h2 { margin: 0; }
.datos-fuentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--e-4); margin: var(--e-3) 0; }
.datos-fuentes h3, .datos-conflictos h3 { margin: 0 0 var(--e-2); font-size: var(--t-md); }
.datos-url { overflow-wrap: anywhere; }
.datos-grupo { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-2) var(--e-3); margin: 0 0 var(--e-3); min-width: 0; }
.datos-grupo legend { font-weight: 600; padding: 0 var(--e-1); }
.dato { display: grid; grid-template-columns: 24px 1fr; column-gap: var(--e-2); align-items: start; padding: var(--e-2) 0; min-height: 44px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.dato:last-child { border-bottom: 0; }
.dato input { width: 20px; height: 20px; margin: 2px 0 0; }
.dato > span { grid-column: 2; overflow-wrap: anywhere; }
.dato-valor { font-size: var(--t-base); }
.dato-fuente, .dato-extracto { font-size: var(--t-ch); }
.dato-fuente a { display: inline-block; padding: 4px 2px; }
.dato-sospechoso { background: color-mix(in srgb, var(--peligro) 8%, transparent); }
.dato-alerta { color: var(--peligro-texto); font-weight: 600; font-size: var(--t-ch); }
.dato-alerta::before { content: "⚠ "; }
.datos-conflictos { display: grid; gap: var(--e-2); margin: var(--e-3) 0; }
.dato-conflicto { border: 1px solid var(--aviso); border-radius: var(--radio); padding: var(--e-2) var(--e-3); }
.dato-conflicto p { margin: 0 0 var(--e-1); overflow-wrap: anywhere; }
.datos-agregar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-2); margin-top: var(--e-3); }
.datos-agregar .campo { flex: 1 1 200px; }

/* Fase 3: calificación SiteLab en la ficha del proyecto (rango con texto, no solo color) */
.calidad { margin: var(--e-4) 0; }
.calidad-cifras { list-style: none; padding: 0; margin: 0 0 var(--e-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--e-2); }
.calidad-cifras li { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-2) var(--e-3); display: grid; gap: 2px; }
.calidad-cifra { font-size: var(--t-3xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.calidad-nombre { font-weight: 600; }
.calidad-alta .calidad-cifra { color: var(--ok-texto); }
.calidad-media .calidad-cifra { color: var(--aviso-texto); }
.calidad-baja .calidad-cifra { color: var(--peligro-texto); }
.calidad-detalle summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.calidad-detalle h4 { margin: var(--e-3) 0 var(--e-1); }

/* Publicación del sitio y guía del dominio (fase 4) */
.publicacion { margin: var(--e-4) 0 0; padding-top: var(--e-3); border-top: 1px solid var(--borde); }
.publicar-form { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-end; margin: var(--e-2) 0; }
.publicar-form .campo { flex: 1 1 240px; }
.publicar-form .btn, .publicacion .btn { min-height: 44px; }
.publicacion-historial { margin-top: var(--e-3); }
.publicacion-historial summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.publicacion .fila-acciones .btn-mini { min-height: 44px; min-width: 44px; }
.guia-dominio { max-width: 72ch; }
.guia-intro { font-size: var(--t-base); }
.guia-pasos { padding-left: 1.4em; display: grid; gap: var(--e-3); }
.guia-pasos h2 { font-size: var(--t-lg, 1.15rem); margin: 0 0 4px; }
.guia-registros code, .guia-dominio code { user-select: all; overflow-wrap: anywhere; }
.guia-problemas dt { font-weight: 700; margin-top: var(--e-2); }
.guia-problemas dd { margin: 2px 0 0; }

/* Editor: antes y después de una edición por conversación */
.editor-antes-despues { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.editor-antes-despues figure { margin: 0; }
.editor-antes-despues img { width: 100%; height: auto; border: 1px solid var(--borde, #ccc); border-radius: 8px; }
.editor-antes-despues figcaption { font-size: 0.85rem; color: var(--tenue, #666); }

/* Editor: comparar versiones lado a lado */
.comparar-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.comparar-lado figure { margin: 0; }
.comparar-lado iframe { width: 100%; height: 70vh; border: 1px solid var(--borde, #ccc); border-radius: 8px; background: #fff; }
.comparar-cambios ul { padding-left: 1.2rem; }

/* --- Toques de 44 px (revisor-calidad N4 a N6) -------------------------------------------------------- */
/* N5: encabezado general en celular. */
@media (max-width: 760px) {
  .lateral .marca, .menu a, .lateral > .btn-primario, .usuario-menu a, .usuario-menu .btn-bloque { min-height: 44px; display: inline-flex; align-items: center; }
  .usuario-menu a { flex-direction: row; }
}
/* N4: enlaces dentro del texto de la vista de la muestra: el área de toque crece sin mover el renglón. */
.muestra-cuerpo a:not(.btn), .muestra-cuerpo dd a { display: inline-block; padding-block: 12px; margin-block: -12px; }
/* N6: controles del editor (color, rango, botones pequeños, tamaños). */
.editor-var input[type="color"] { height: 44px; }
.editor-global input[type="range"] { min-height: 44px; width: 100%; }
.ed-sitio .btn, .ed-sitio .btn-mini, .ed-sitio-barra button { min-height: 44px; }
.ed-sitio input[type="radio"], .ed-sitio input[type="checkbox"] { width: 24px; height: 24px; }
.ed-sitio label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.editor-versiones .fila-acciones .btn, .editor-versiones .fila-acciones a { min-height: 44px; display: inline-flex; align-items: center; }
.ed-sitio-barra .sub a, .encabezado .sub a { display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (max-width: 760px) {
  .contenido a:not(.btn):not(.saltar) { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .contenido input[type="checkbox"], .contenido input[type="radio"] { width: 24px; height: 24px; }
  .check-simple { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }   /* la etiqueta entera es el área de toque */
}

/* Revisión final: áreas de toque de 44 px y el historial de publicaciones sin desborde a 390 px. */
.editor-versiones .fila-acciones .btn-mini, .editor-regenerar summary, .crm-nav a, .portal-contenido > p > a { min-height: 44px; min-width: 44px; }
.editor-versiones .fila-acciones .btn-mini, .crm-nav a, .portal-contenido > p > a { display: inline-flex; align-items: center; }
.editor-regenerar summary { display: flex; align-items: center; cursor: pointer; }
.check-simple input[type="checkbox"] { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; }
.campo.check-simple { flex-direction: row; align-items: center; }
@media (max-width: 640px) {
  .publicacion-historial .tabla th:nth-child(3), .publicacion-historial .tabla td:nth-child(3),
  .publicacion-historial .tabla th:nth-child(4), .publicacion-historial .tabla td:nth-child(4) { display: none; }   /* quién y dominio: se ven en la fila de arriba */
  .publicacion-historial .tabla th, .publicacion-historial .tabla td { padding-inline: 8px; }
  .publicacion-historial td.fila-acciones { white-space: normal; min-width: 0; }
  .publicacion-historial td.fila-acciones .btn-mini { display: block; margin: 0 0 6px; }
  .publicacion-historial td.fila-acciones form { display: block; }
}
.pedido-cumplimiento { list-style: none; padding: 0; margin: var(--e-2) 0; display: grid; gap: var(--e-1); }
.pedido-cumplimiento li { padding-left: 1.4em; text-indent: -1.4em; }
.pedido-cumplimiento .cumple-hecho::before { content: "✓ "; color: var(--ok-texto); }
.pedido-cumplimiento .cumple-parcial::before { content: "◐ "; color: var(--aviso-texto); }
.pedido-cumplimiento .cumple-no_hecho::before { content: "✗ "; color: var(--peligro-texto); }
.pedido-cumplimiento .cumple-parcial, .pedido-cumplimiento .cumple-no_hecho { color: var(--aviso-texto); }


/* --- Menú por categorías desplegables (revisión de Tony, §13) -------------------------------------- */
.menu-categoria { list-style: none; }
.menu-categoria-boton { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radio-sm);
  cursor: pointer; font-weight: 700; font-size: var(--t-ch); color: color-mix(in srgb, var(--lateral-texto) 92%, transparent);
  transition: background var(--rapido), color var(--rapido); }
.menu-categoria-boton:hover { background: rgba(255, 255, 255, .06); color: var(--blanco); }
.menu-categoria-boton:focus-visible { outline: 2px solid var(--lateral-activo); outline-offset: 1px; }
.menu-categoria.tiene-activo > .menu-categoria-boton { color: var(--blanco); }
.menu-categoria-nombre { flex: 1; min-width: 0; }
.menu-flecha { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform var(--medio) var(--curva); opacity: .7; }
.menu-categoria-boton[aria-expanded="true"] .menu-flecha { transform: rotate(45deg); }
.menu-sub { list-style: none; margin: 2px 0 6px 18px; padding: 0 0 0 8px; border-left: 1px solid color-mix(in srgb, var(--lateral-texto) 18%, transparent);
  display: flex; flex-direction: column; gap: 2px; }
.menu-sub[hidden] { display: none; }
.menu-categoria + .menu-categoria { margin-top: 2px; }
.menu-compacto-boton { justify-content: flex-start; }

/* Menú compacto: solo iconos; el título de cada elemento sale en el atributo title. */
html[data-menu="compacto"] .app { grid-template-columns: 68px 1fr; }
html[data-menu="compacto"] .lateral { padding-inline: 10px; align-items: center; }
html[data-menu="compacto"] .lateral .marca span:not(.marca-logo), html[data-menu="compacto"] .menu-texto, html[data-menu="compacto"] .menu-categoria-nombre,
html[data-menu="compacto"] .menu-flecha, html[data-menu="compacto"] .usuario-menu, html[data-menu="compacto"] .enlace-privacidad,
html[data-menu="compacto"] .lateral > .btn-primario, html[data-menu="compacto"] .atajo-pista { display: none; }
html[data-menu="compacto"] .menu-sub, html[data-menu="compacto"] .menu-sub[hidden] { display: flex !important; margin: 0; padding: 0; border: 0; }
html[data-menu="compacto"] .menu-categoria-boton { display: none; }   /* en compacto solo los iconos de las pantallas, sin los de categoría repetidos */
html[data-menu="compacto"] .menu a { justify-content: center; }
html[data-menu="compacto"] .lateral .btn-bloque { padding-inline: 0; justify-content: center; }
html[data-menu="compacto"] .lateral .btn-bloque .solo-claro, html[data-menu="compacto"] .lateral .btn-bloque .solo-oscuro { font-size: 0; }

/* En celular el menú es una tira horizontal: sin títulos de categoría, todo a la vista. */
@media (max-width: 760px) {
  .menu-categoria { display: contents; }
  .menu-categoria-boton { display: none; }
  .menu-sub, .menu-sub[hidden] { display: contents !important; }
  .menu-compacto-boton { display: none; }
  html[data-menu="compacto"] .app { grid-template-columns: 1fr; }
}


/* --- Sistema compartido (revisión de Tony, §3): radios de tarjeta, movimiento corto y cifras que entran ---------------- */
:root {
  --radio-tarjeta: 20px;                       /* tarjetas y paneles: 18–24 px */
  --mov-corto: 120ms; --mov-medio: 180ms; --mov-largo: 240ms;
  --medio: .18s; --lento: .24s;                /* los mismos valores que usan todos los componentes */
}
.panel, .metrica, .tarjeta, .portal-tarjeta, .esqueleto, .vacio-grande, .cajon { border-radius: var(--radio-tarjeta); }
.metrica { box-shadow: var(--sombra); }

/* Entrada de cifras y gráficas: acompañan el cambio de pantalla, no se repiten en bucle. */
.barras li { transform-origin: bottom; animation: crecer var(--mov-largo) var(--curva) both; }
.barras li:nth-child(2n) { animation-delay: 20ms; }
@keyframes crecer { from { transform: scaleY(0); opacity: .4; } }
[data-contar] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .barras li { animation: none; } }


/* --- Ayuda en contexto (revisión de Tony, §9) --------------------------------------------------------------------- */
.panel-ayuda { border: 0; border-radius: var(--radio-tarjeta, 20px); padding: var(--e-5); width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta); overflow: auto; }
.panel-ayuda::backdrop { background: var(--velo); }
.panel-ayuda-cabeza, .ayuda-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); }
.ayuda-tipos { border: 0; padding: 0; margin: 0 0 var(--e-3); display: grid; gap: var(--e-2); }
.ayuda-tipos legend { font-weight: 700; margin-bottom: var(--e-2); }
.ayuda-tipo { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer; }
.ayuda-tipo:has(input:checked) { border-color: var(--marca); background: var(--marca-tenue); }
.ayuda-mensajes { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; gap: var(--e-3); }
.ayuda-mensaje { padding: var(--e-3) var(--e-4); border-radius: var(--radio); background: var(--superficie-2); max-width: 70ch; }
.ayuda-mensaje.del-equipo { background: var(--marca-tenue); margin-left: var(--e-5); }
.ayuda-quien, .ayuda-texto { margin: 0; } .ayuda-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.ayuda-adjuntos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-2) 0 0; }
.chip-ayuda-abierta { background: color-mix(in srgb, var(--aviso) 18%, var(--superficie)); }
.chip-ayuda-respondida { background: color-mix(in srgb, var(--ok) 18%, var(--superficie)); }
.chip-ayuda-cerrada { background: var(--superficie-2); color: var(--tenue); }
.ayuda-lista { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
@media (max-width: 760px) { .panel-ayuda { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; } .ayuda-mensaje.del-equipo { margin-left: 0; } }


/* --- Apariencia del negocio (revisión de Tony, §10) ----------------------------------------------------------------- */
.portal-negocio-activo { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); max-width: 320px; }
.portal-negocio-logo { display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde);
  overflow: hidden; color: #1b2330; font: 800 28px var(--fuente-titulos); }   /* fondo blanco fijo: sirve para logos claros y oscuros */
.portal-negocio-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.apariencia-logo-mini { vertical-align: middle; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 4px; }
.apariencia-opciones { border: 0; padding: 0; margin: var(--e-3) 0; display: flex; flex-wrap: wrap; gap: var(--e-3); }
.apariencia-opcion { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer; }
.apariencia-opcion.elegida, .apariencia-opcion:has(input:checked) { border-color: var(--marca); background: var(--marca-tenue); }
.apariencia-muestra { width: 22px; height: 22px; border-radius: 50%; background: var(--muestra, var(--marca)); border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borde); }
.apariencia-previa { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e-4); }
.apariencia-previa-caja { padding: var(--e-4); border-radius: var(--radio-tarjeta); background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); }
.apariencia-previa-caja[data-tema="oscuro"] { --fondo: #11121c; --superficie: #1a1b29; --superficie-2: #232436; --borde: #2e3047; --texto: #e8e9f3; --texto-2: #a9abc4; }
.apariencia-previa-tarjeta { padding: var(--e-4); border-radius: var(--radio-tarjeta); background: var(--superficie); border: 1px solid var(--borde); }
.apariencia-previa-titulo { margin: 0 0 var(--e-2); font-weight: 700; }


/* --- Asistente de dominio (revisión de Tony, §11) -------------------------------------------------------------------- */
.asistente-dominio { max-width: 760px; }
.asistente-pasos { display: flex; gap: var(--e-2); list-style: none; padding: 0; margin: var(--e-2) 0 var(--e-4); }
.asistente-pasos li { flex: 1; height: 6px; border-radius: 999px; background: var(--borde); }
.asistente-pasos li.hecho { background: var(--marca); } .asistente-pasos li.actual { background: color-mix(in srgb, var(--marca) 55%, var(--borde)); }
.asistente-opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.asistente-instrucciones { padding-left: 1.2em; display: grid; gap: var(--e-1); }
.asistente-ayuda { margin-top: var(--e-4); border-top: 1px solid var(--borde); padding-top: var(--e-3); }
.asistente-tecnico { margin-top: var(--e-3); color: var(--texto-2); }


/* --- Resumen por servicio (revisión de Tony, §11) ---------------------------------------------------------------------- */
.portal-resumen-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-4); margin: var(--e-3) 0; }
.portal-resumen-datos dt { font-size: var(--t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); margin-bottom: var(--e-1); }
.portal-resumen-datos dd { margin: 0; }
.portal-resumen-tarea { grid-column: 1 / -1; padding: var(--e-3) var(--e-4); border-radius: var(--radio); background: var(--marca-tenue); border: 1px solid color-mix(in srgb, var(--marca) 22%, var(--borde)); }
.portal-resumen-linea { margin: var(--e-2) 0 0; }


/* --- Alta de prospectos por secciones (revisión de Tony, §14) ---------------------------------------------------------- */
.alta-prospecto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); max-width: 820px; }
.alta-prospecto .dialogo-botones { flex-wrap: wrap; }
.seccion-plegable { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 0 var(--e-4); }
.seccion-plegable > summary { cursor: pointer; padding: var(--e-3) 0; display: flex; align-items: center; gap: var(--e-2); list-style: none; font-weight: 700; }
.seccion-plegable > summary::-webkit-details-marker { display: none; }
.seccion-plegable > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(45deg); transition: transform var(--medio) var(--curva); }
.seccion-plegable[open] > summary::after { transform: rotate(-135deg); }
.seccion-plegable[open] { padding-bottom: var(--e-4); }
.seccion-plegable[open] > summary { border-bottom: 1px solid var(--borde); margin-bottom: var(--e-3); }
.seccion-plegable .campo { margin-bottom: var(--e-3); }
.chip-obligatorio { background: color-mix(in srgb, var(--peligro) 14%, var(--superficie)); color: var(--peligro-texto); }
.chip-auto { background: var(--marca-tenue); color: var(--marca-fuerte); }
.obligatorio { color: var(--peligro-texto); font-weight: 700; }
.campo-grupo { border: 0; padding: 0; margin: 0 0 var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-3); } .campo-grupo legend { font-weight: 600; margin-bottom: var(--e-2); }
.prospecto-creado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }


/* --- Tutorial conectado (revisión de Tony, §5) -------------------------------------------------------------------------- */
.tutorial-foco { position: fixed; z-index: 1190; border-radius: var(--radio); pointer-events: none; box-shadow: 0 0 0 3px var(--marca), 0 0 0 9999px rgba(10, 12, 30, .5);
  transition: top var(--mov-medio) var(--curva), left var(--mov-medio) var(--curva), width var(--mov-medio) var(--curva), height var(--mov-medio) var(--curva); }
.tutorial-popover { position: fixed; z-index: 1200; width: min(360px, calc(100vw - 24px)); padding: var(--e-4); border-radius: var(--radio-tarjeta); background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-alta); border: 1px solid var(--borde); }
.tutorial-popover.centrado { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tutorial-popover h2 { font-size: var(--t-lg); margin: 0 0 var(--e-2); } .tutorial-popover p { margin: 0 0 var(--e-2); }
.tutorial-progreso { font-size: var(--t-sm); color: var(--texto-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tutorial-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.tutorial-burbuja { position: fixed; z-index: 1200; right: 16px; bottom: 16px; width: min(320px, calc(100vw - 32px)); padding: var(--e-3) var(--e-4); border-radius: var(--radio-tarjeta);
  background: var(--superficie); color: var(--texto); border: 1px solid var(--marca); box-shadow: var(--sombra-alta); }
.tutorial-burbuja p { margin: 0 0 var(--e-2); }
@media (max-width: 760px) { .tutorial-popover { top: auto !important; left: 12px !important; right: 12px; bottom: 12px; width: auto; transform: none !important; } .tutorial-burbuja { bottom: 76px; } }
@media (prefers-reduced-motion: reduce) { .tutorial-foco { transition: none; } }
.tutorial-pausa { position: fixed; z-index: 1200; right: 16px; bottom: 16px; display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-radius: 999px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); box-shadow: var(--sombra-elevada); font-size: var(--t-ch); }
@media (max-width: 760px) { .tutorial-pausa { bottom: 76px; left: 12px; right: 12px; justify-content: space-between; } }


/* --- Código de verificación animado (revisión de Tony, §2C) ------------------------------------------------------------ */
.cod-escena { display: grid; justify-items: center; gap: var(--e-3); }
.cod-escena[hidden] { display: none; }
.cod-instruccion { margin: 0; text-align: center; color: var(--texto-2); }
.cod-lienzo { position: relative; width: min(100%, 340px); height: 210px; }
.cod-casilla { position: absolute; left: 50%; top: 50%; width: 44px; height: 54px; border-radius: var(--radio); background: var(--superficie); border: 2px solid var(--borde); box-shadow: var(--sombra);
  display: grid; place-items: center; will-change: transform; transition: border-color var(--medio), box-shadow var(--medio); }
.cod-casilla:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 25%, transparent); }
.cod-casilla input { all: unset; width: 100%; text-align: center; font: 700 22px/1 var(--fuente-mono); color: var(--texto); caret-color: var(--marca); }
.cod-escena.verificando .cod-casilla, .cod-escena.converge .cod-casilla { border-color: var(--marca); }
.cod-escena.hay-error .cod-casilla { border-color: var(--peligro); animation: cod-sacudir .32s var(--curva); }
@keyframes cod-sacudir { 20% { margin-left: -6px; } 40% { margin-left: 6px; } 60% { margin-left: -4px; } 80% { margin-left: 3px; } }
.cod-centro { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; margin-top: 0; border-radius: var(--radio); background: var(--superficie); color: var(--ok);
  border: 3px solid var(--ok); opacity: 0; transform: scale(.6); pointer-events: none; }
.cod-escena { position: relative; }
.cod-escena .cod-centro { top: 105px; left: 50%; margin-left: -32px; margin-top: -32px; }
.cod-escena.verificado .cod-centro { opacity: 1; transform: scale(1); transition: opacity var(--medio), transform var(--mov-largo) cubic-bezier(.2, 1.3, .4, 1); }
.cod-escena.verificado .cod-lienzo .cod-casilla { visibility: hidden; }
.cod-palomita { stroke-dasharray: 40; stroke-dashoffset: 40; }
.cod-escena.verificado .cod-palomita { animation: cod-trazo .45s .12s var(--curva) forwards; }
@keyframes cod-trazo { to { stroke-dashoffset: 0; } }
.cod-onda { position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--ok); opacity: 0; }
.cod-escena.verificado .cod-onda { animation: cod-onda .9s .1s ease-out; }
@keyframes cod-onda { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.cod-estado { min-height: 1.4em; margin: 0; font-weight: 600; text-align: center; }
.cod-estado[data-tipo="error"] { color: var(--peligro-texto); } .cod-estado[data-tipo="ok"] { color: var(--ok-texto); font-size: var(--t-lg); }
.cod-acciones { display: flex; gap: var(--e-2); }
@media (prefers-reduced-motion: reduce) { .cod-escena.hay-error .cod-casilla { animation: none; } .cod-escena.verificado .cod-palomita { animation: none; stroke-dashoffset: 0; }
  .cod-escena.verificado .cod-onda { animation: none; } .cod-escena.verificado .cod-centro { transition: opacity var(--medio); transform: scale(1); } }


/* --- Lienzo de flujos (revisión de Tony, §2B) --------------------------------------------------------------------------- */
.fl-app { display: grid; gap: var(--e-2); }
.fl-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.fl-sep { width: 1px; height: 20px; background: var(--borde); }
.fl-zoom { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.fl-estado { margin-left: auto; font-size: var(--t-ch); color: var(--texto-2); } .fl-estado[data-tipo="ok"] { color: var(--ok-texto); } .fl-estado[data-tipo="error"] { color: var(--peligro-texto); }
.fl-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: var(--e-3); align-items: start; }
.fl-paleta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: var(--e-2) var(--e-3); }
.fl-paleta h2 { margin: 0; } .fl-paleta > div { display: flex; flex-wrap: wrap; gap: var(--e-2); } .fl-paleta .fl-ayuda { flex-basis: 100%; }
.fl-paleta-btn { padding: 6px 12px; font-size: var(--t-ch); }
.fl-lateral, .fl-paleta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: var(--e-3); display: grid; gap: var(--e-3); align-content: start; }
.fl-paleta h2, .fl-lateral h2 { font-size: var(--t-md); margin: 0; } .fl-ayuda { font-size: var(--t-sm); margin: 0; }
.fl-lienzo { --z: 1; --vx: 0px; --vy: 0px; position: relative; height: min(72vh, 760px); min-height: 460px; overflow: hidden; border-radius: var(--radio-tarjeta); border: 1px solid var(--borde); background-color: var(--fondo);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--texto-2) 38%, transparent) 1px, transparent 1.4px); background-size: calc(24px * var(--z)) calc(24px * var(--z)); background-position: var(--vx) var(--vy);
  touch-action: none; cursor: grab; outline: none; }
.fl-lienzo:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 30%, transparent); } .fl-lienzo.fl-moviendo { cursor: grabbing; }
.fl-mundo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.fl-cables { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fl-cable { fill: none; stroke: color-mix(in srgb, var(--marca) 80%, var(--texto-2)); stroke-width: 2.2; pointer-events: none; transition: stroke var(--mov-corto); }
.fl-cable-sel { stroke: var(--peligro); stroke-width: 3; } .fl-cable-nuevo { stroke-dasharray: 6 5; opacity: .8; }
.fl-cable-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.fl-bloque { position: absolute; display: grid; gap: 2px; padding: var(--e-3) var(--e-4); background: var(--superficie); color: var(--texto); border: 1.5px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); cursor: grab; user-select: none; touch-action: none; transition: box-shadow var(--mov-corto) var(--curva), transform var(--mov-corto) var(--curva), border-color var(--mov-corto); }
.fl-bloque:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.fl-bloque.fl-seleccionado { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent), var(--sombra); }
.fl-bloque.fl-levantado { box-shadow: var(--sombra-alta), 0 0 0 3px color-mix(in srgb, var(--marca) 28%, transparent); transform: scale(1.018); cursor: grabbing; z-index: 20; transition: none; }
.fl-bloque.fl-destino { border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 30%, transparent); }
.fl-tipo { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--marca-fuerte); }
.fl-titulo { font-weight: 700; overflow-wrap: anywhere; } .fl-texto { font-size: var(--t-ch); color: var(--texto-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fl-bloque[data-tipo="bienvenida"] { border-top: 4px solid var(--ok); } .fl-bloque[data-tipo="transferir"], .fl-bloque[data-tipo="fin"] { border-top: 4px solid var(--aviso); }
.fl-bloque[data-tipo="condicion"] { border-top: 4px solid var(--e-negociacion); } .fl-bloque[data-tipo="opciones"] { border-top: 4px solid var(--marca); }
.fl-puerto { width: 14px; height: 14px; border-radius: 50%; background: var(--superficie); border: 2.5px solid var(--marca); cursor: crosshair; flex: none; }
.fl-puerto:hover { background: var(--marca); transform: scale(1.25); }
.fl-entrada { position: absolute; left: -8px; top: 22px; cursor: default; } .fl-entrada:hover { transform: none; background: var(--superficie); }
.fl-salidas { display: grid; gap: var(--e-1); margin-top: var(--e-2); } .fl-salida { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-2); position: relative; margin-right: calc(-1 * var(--e-4) - 8px); }
.fl-salida-etq { font-size: var(--t-sm); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.fl-salida:only-child:has(.fl-salida-etq:empty) .fl-salida-etq { display: none; }
.fl-guia { position: absolute; background: var(--marca); opacity: .7; pointer-events: none; z-index: 30; } .fl-guia-v { width: 1px; } .fl-guia-h { height: 1px; }
.fl-marco { position: absolute; border: 1px dashed var(--marca); background: color-mix(in srgb, var(--marca) 10%, transparent); pointer-events: none; z-index: 40; }
.fl-opciones { display: grid; gap: var(--e-2); } .fl-opcion { display: flex; gap: var(--e-2); } .fl-opcion input { flex: 1; min-width: 0; } .fl-subtitulo { margin: var(--e-2) 0 0; font-weight: 600; }
.fl-problemas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.fl-problema-btn { all: unset; display: block; cursor: pointer; padding: var(--e-2) var(--e-3); border-radius: var(--radio); font-size: var(--t-ch); }
.fl-error .fl-problema-btn { background: color-mix(in srgb, var(--peligro) 12%, var(--superficie)); } .fl-aviso .fl-problema-btn { background: color-mix(in srgb, var(--aviso) 14%, var(--superficie)); }
.fl-problema-btn:focus-visible { outline: 2px solid var(--marca); }
.fl-bloque[data-usos]::after { content: attr(data-usos); position: absolute; top: -10px; right: var(--e-2); padding: 0 var(--e-2); border-radius: 999px; font-size: var(--t-sm); background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-2); }
.fl-bloque.fl-activo { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 30%, transparent); }
.fl-disparo { display: flex; gap: var(--e-2); margin-bottom: var(--e-2); } .fl-disparo select { flex: 1; min-width: 0; }
.fl-canal { display: flex; align-items: center; gap: var(--e-2); }
.fl-chat { display: grid; gap: var(--e-1); max-height: 280px; overflow-y: auto; margin: var(--e-2) 0; align-content: start; }
.fl-sim { margin: 0; padding: var(--e-1) var(--e-2); border-radius: var(--radio); font-size: var(--t-ch); overflow-wrap: anywhere; white-space: pre-line; max-width: 92%; }
.fl-sim-bot { background: var(--fondo); justify-self: start; } .fl-sim-persona { background: color-mix(in srgb, var(--marca) 14%, var(--superficie)); justify-self: end; }
.fl-sim-botones, .fl-sim-accion, .fl-sim-fin { color: var(--texto-2); font-size: var(--t-sm); padding-block: 0; max-width: 100%; }
.fl-publicacion { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: space-between; align-items: center; }
.crm-horario { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-2); align-items: center; }
.crm-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-bottom: var(--e-2); } .crm-etiquetas .chip { cursor: pointer; border: 0; }
@media (max-width: 1100px) { .fl-cuerpo { grid-template-columns: minmax(0, 1fr); } .fl-lienzo { height: 62vh; } }
@media (prefers-reduced-motion: reduce) { .fl-bloque, .fl-cable { transition: none; } .fl-bloque.fl-levantado { transform: none; } }

/* Vista previa de apariencia: el «enlace» es solo muestra (sin manejador en línea, que la CSP bloquea). */
.apariencia-previa .enlace-previa { color: var(--marca-fuerte); text-decoration: underline; text-underline-offset: .18em; }

/* Lienzo de flujos en pantallas táctiles: botones de zoom de 44 px. */
@media (pointer: coarse), (max-width: 760px) {
  [data-fl="alejar"], [data-fl="acercar"] { min-width: 44px; min-height: 44px; }
}

/* Revisión de calidad: casillas de servicios en una columna en celular; opciones de 44 px; chips del calendario sin cortarse. */
@media (max-width: 760px) {
  .campo-grupo .check-simple { display: flex; }
  .portal .opcion, .portal label.opcion-radio, .portal fieldset label { min-height: 44px; display: flex; align-items: center; gap: 8px; }
}
.portal-calendario [class*="evento"], .portal-calendario [class*="chip"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Demostración: aviso del código fijo en la pantalla de verificación en dos pasos. */
.codigo-demo-nota { margin: 0 0 var(--e-3, 12px); padding: 8px 12px; border-radius: var(--radio-sm); background: var(--marca-tenue); border: 1px solid var(--borde); font-size: var(--t-ch); }

/* Negocios: filtro por pestañas y asistente de alta por pasos */
.pestanas { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borde); margin: 0 0 var(--e-4); overflow-x: auto; }
.pestanas a { padding: var(--e-2) var(--e-3); min-height: 44px; display: inline-flex; align-items: center; color: var(--texto-2); font-weight: var(--peso-botones);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a.activo { color: var(--texto); border-bottom-color: var(--marca); }
.alta-pasos { list-style: none; display: flex; gap: var(--e-1); padding: 0; margin: 0 0 var(--e-5); overflow-x: auto; counter-reset: paso; }
.alta-pasos li { counter-increment: paso; flex: 1 0 auto; }
.alta-pasos li > a, .alta-pasos li > span { display: flex; gap: var(--e-2); align-items: center; padding: var(--e-2) var(--e-3); border-radius: var(--radio-sm);
  font-size: var(--t-ch); color: var(--texto-2); text-decoration: none; background: var(--superficie-2); min-height: 40px; white-space: nowrap; }
.alta-pasos li > a::before, .alta-pasos li > span::before { content: counter(paso); display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--superficie); border: 1px solid var(--borde); font-weight: 700; font-size: var(--t-xs); }
.alta-pasos .hecho a::before { background: var(--ok); color: var(--blanco); border-color: var(--ok); }
.alta-pasos [aria-current] { background: var(--marca-suave); color: var(--texto); font-weight: 600; }
.alta-pasos [aria-current]::before { background: var(--marca); color: var(--marca-sobre); border-color: var(--marca); }
.alta-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: var(--e-5); box-shadow: var(--sombra-baja); max-width: 820px; }
.alta-botones { display: flex; gap: var(--e-2); justify-content: space-between; flex-wrap: wrap; margin-top: var(--e-5); }
.alta-lista { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-2); }
.alta-lista li { display: flex; justify-content: space-between; gap: var(--e-3); align-items: center; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); flex-wrap: wrap; }
.alta-enlace { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.alta-enlace input { flex: 1 1 260px; font-family: var(--fuente-mono); font-size: var(--t-sm); }
.alta-origen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e-4); }
@media (max-width: 640px) { .alta-tarjeta { padding: var(--e-4); } .alta-pasos .texto-paso { display: none; } .alta-pasos [aria-current] .texto-paso { display: inline; } }

/* Pasarela: vista de MUESTRA (demo). Nada de esto cobra. */
.pm { display: grid; gap: var(--e-4); max-width: 860px; }
.pm-banda { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--radio); border: 1px dashed var(--aviso);
  background: color-mix(in srgb, var(--aviso) 10%, var(--superficie)); color: var(--aviso-texto); }
.pm-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: var(--e-5); box-shadow: var(--sombra-baja); }
.pm-tarjeta h2 { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-top: 0; }
.pm .segmentado { margin: var(--e-3) 0; flex-wrap: wrap; }
.pm-partes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-1); }
.pm-partes li { display: flex; justify-content: space-between; padding: var(--e-2) 0; border-bottom: 1px solid var(--borde); }
.pm-hoy { margin: var(--e-3) 0 0; font-size: var(--t-md); }
.pm-metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.pm-metodo { position: relative; display: grid; gap: 2px; text-align: left; padding: var(--e-3) var(--e-4); min-height: 64px; font: inherit; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto); }
.pm-metodo[aria-checked="true"] { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-suave); }
.pm-metodo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.pm-sello { display: inline-block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; color: var(--aviso-texto);
  border: 1px solid var(--aviso); border-radius: var(--radio-sm); padding: 0 6px; justify-self: start; }
.pm-proveedor { font-weight: 600; display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.pm-dibujo { display: grid; gap: var(--e-2); padding: var(--e-4); border-radius: var(--radio); background: var(--superficie-2); margin-bottom: var(--e-3);
  user-select: none; }
.pm-fila-dibujo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.pm-campo-dibujo { display: grid; gap: 2px; font-size: var(--t-sm); color: var(--texto-2); }
.pm-relleno { display: block; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie);
  color: var(--tenue); font-family: var(--fuente-mono); }
.pm-estado { margin: var(--e-3) 0 0; }
.pm-spei code { font-family: var(--fuente-mono); }
.pm-recibo { position: relative; overflow: hidden; padding: var(--e-5); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.pm-recibo-cab { display: flex; justify-content: space-between; gap: var(--e-4); padding-bottom: var(--e-3); border-bottom: 3px solid var(--marca); flex-wrap: wrap; }
.pm-recibo-empresa { font-family: var(--fuente-titulos); font-size: var(--t-xl); color: var(--marca); }
.pm-recibo-folio { text-align: right; }
.pm-marca-agua { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transform: rotate(-24deg);
  font-size: clamp(28px, 7vw, 60px); font-weight: 800; color: var(--peligro); opacity: .14; white-space: nowrap; }
.pm-leyenda { margin: var(--e-4) 0 0; font-size: var(--t-sm); color: var(--texto-2); border-top: 1px dashed var(--borde); padding-top: var(--e-3); }
@media (max-width: 640px) { .pm-tarjeta, .pm-recibo { padding: var(--e-4); } .pm-recibo-folio { text-align: left; } }
@media print { .pm-banda, .pm-tarjeta:not(:has(.pm-recibo)), .pm [data-imprimir] { display: none !important; } .pm-tarjeta { box-shadow: none; border: 0; } }

/* Bandeja omnicanal de CRMLab */
.om-nav { flex-wrap: wrap; }
.om-bandeja { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(230px, 280px); gap: var(--e-3); align-items: start; }
.om-bandeja > .portal-tarjeta { margin: 0; min-width: 0; }
.om-lista { padding: var(--e-3); }
.om-filtros summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); padding: var(--e-1) 0; }
.om-filtros form { display: grid; gap: var(--e-2); margin-top: var(--e-2); }
.om-conversaciones { list-style: none; margin: var(--e-2) 0 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.om-conversaciones a { display: flex; flex-direction: column; gap: 4px; padding: var(--e-2); border-radius: var(--radio-sm); color: inherit; text-decoration: none; transition: background-color .15s ease; }
.om-conversaciones a:hover { background: var(--superficie-2); }
.om-conversaciones a.activa { background: var(--marca-suave); }
.om-fila { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); min-width: 0; }
.om-fila > strong, .om-fila > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.om-vista { font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-no-leidos { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--marca-fuerte); color: var(--sobre-marca, #fff); font-size: var(--t-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.om-ventana { background: var(--superficie-2); color: var(--texto-2); }
.om-ventana[data-ventana="abierta"] { background: color-mix(in srgb, var(--ok) 14%, var(--superficie)); color: var(--ok-texto); }
.om-ventana[data-ventana="por_vencer"] { background: color-mix(in srgb, var(--aviso) 14%, var(--superficie)); color: var(--aviso-texto); }
.om-ventana[data-ventana="cerrada"] { background: color-mix(in srgb, var(--peligro) 14%, var(--superficie)); color: var(--peligro-texto); }
.om-volver { display: none; margin-bottom: var(--e-2); }
.om-chat-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-2); }
.om-chat-titulo h2, .om-chat-titulo p { margin: 0; overflow-wrap: anywhere; }
.om-mensajes { list-style: none; margin: var(--e-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); max-height: 55vh; overflow-y: auto; }
.om-mensaje { max-width: 82%; padding: var(--e-2) var(--e-3); border-radius: var(--radio-sm); background: var(--superficie-2); align-self: flex-start; }
.om-mensaje p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.om-saliente { align-self: flex-end; background: var(--marca-suave); }
.om-nota { margin-top: var(--e-2); }
.om-mensaje.om-nota { align-self: center; max-width: 92%; margin: 0; background: color-mix(in srgb, var(--aviso) 12%, var(--superficie)); }
.om-meta { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--texto-2); }
.om-adjunto { display: inline-block; margin-top: 2px; font-size: var(--t-xs); }
.om-error { display: block; font-size: var(--t-xs); color: var(--peligro-texto); }
.om-motivo { padding: var(--e-2) var(--e-3); border-radius: var(--radio-sm); background: color-mix(in srgb, var(--aviso) 12%, var(--superficie)); color: var(--aviso-texto); }
.om-ayuda { font-size: var(--t-sm); }
.om-escribir, .om-plantilla, .om-ficha form { display: grid; gap: var(--e-2); }
.om-plantilla { margin-top: var(--e-2); }
.om-plantilla summary, .om-nota summary, .om-ficha summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); }
.om-ficha form { margin-bottom: var(--e-2); }
.om-ficha h3 { margin: var(--e-3) 0 var(--e-1); }
.om-otras { list-style: none; margin: 0 0 var(--e-2); padding: 0; display: grid; gap: var(--e-1); }
.om-candidato { display: flex !important; justify-content: space-between; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.om-vacio { display: flex; align-items: center; justify-content: center; min-height: 240px; grid-column: span 2; }
.om-canal { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-2); align-items: end; }
.om-horas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
@media (max-width: 1100px) {
  .om-bandeja { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); }
  .om-ficha { grid-column: 2; }
  .om-vacio { grid-column: auto; }
}
@media (max-width: 760px) {
  .om-bandeja { grid-template-columns: minmax(0, 1fr); }
  .om-ficha { grid-column: auto; }
  .om-con-conversacion .om-lista, .om-vacio { display: none; }
  .om-volver { display: inline-block; }
  .om-mensajes { max-height: none; }
}

/* Tabla que en el celular se lee como tarjetas: lo importante no queda tras un desplazamiento lateral. */
@media (max-width: 640px) {
  .tabla-apilada thead { display: none; }
  .tabla-apilada, .tabla-apilada tbody, .tabla-apilada tr, .tabla-apilada td { display: block; width: 100%; }
  .tabla-apilada tr { padding: 12px 16px; border-bottom: 1px solid var(--borde); }
  .tabla-apilada td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border: 0; text-align: right; }
  .tabla-apilada td[data-etiqueta]::before { content: attr(data-etiqueta); color: var(--tenue); text-align: left; flex: none; max-width: 45%; }
  .tabla-apilada td:not([data-etiqueta]) { justify-content: flex-start; flex-wrap: wrap; }
  .tabla-apilada td:empty { display: none; }
}