/* ============================================================
   TELEPORT — DESIGN SYSTEM v2.0
   Dirección: "Manifiesto & Tracking" — el vocabulario del producto
   (deliveries, bounces, suppressions) ya es logística de envíos;
   el sistema visual lo hace literal en vez de metafórico.
   ver .impeccable/surfaces/templates-layout-html.md
   ============================================================ */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS — Variables Globales
   ───────────────────────────────────────────── */
:root {
  /* Acento interactivo — azul sello. Mundo "Boletín": papel cálido, tinta densa. */
  --color-primary:        #23456B;
  --color-primary-light:  #8497AE;
  --color-primary-dark:   #172F4A;

  /* NO hay acento secundario. El sistema tiene cuatro acentos y solo cuatro:
     rojo (bloqueado/rebotado), verde (live/entregado), ámbar (test/pendiente/procesando),
     azul (preview/sistema/automatización/links). Lo que no es estado va en neutro. */

  /* Compat — variables heredadas, redirigidas al nuevo sistema */
  --color-accent-pink:    var(--stamp-red);
  --color-accent-peach:   var(--stamp-amber);
  --color-accent-green:   var(--stamp-green);
  --color-accent-red:     var(--stamp-red);

  /* Tinta y superficie. La rampa gris está tensada para cumplir WCAG AA sobre los
     CUATRO fondos de texto reales del sistema: --paper, blanco, --kraft y --color-gray-50.
     Antes de tocar cualquiera de estos valores, comprueba los cuatro, no solo uno. */
  --color-dark:      #14130F;
  --color-gray-900:  #23211B;
  --color-gray-700:  #423F37;
  --color-gray-600:  #4C4941;
  --color-gray-500:  #55524A;
  --color-gray-400:  #6A665C;
  --color-gray-300:  #D5D0C4;
  --color-gray-200:  #E4E0D6;
  --color-gray-100:  #EDEAE1;
  --color-gray-50:   #F7F5F0;
  --color-white:     #FFFFFF;

  /* Líneas y filetes — separados del texto a propósito: estos valores son
     demasiado claros para texto y solo deben tocar bordes e iconos decorativos. */
  --rule-hairline:   #E4E0D6;
  --rule-strong:     #D5D0C4;

  /* Papel y cromo secundario — el suelo del mundo */
  --kraft:       #EFECE4;
  --kraft-deep:  #D5D0C4;
  --paper:       #FBFAF7;

  /* Sellos de estado — únicos acentos saturados, solo para estado.
     Todos los pares texto/fondo verificados >= 4.5:1. */
  --stamp-red:          #9E2B25;
  --stamp-red-bg:       #F6E5E3;
  --stamp-red-border:   #E0B9B5;
  --stamp-green:        #2C6141;
  --stamp-green-bg:     #E3EDE5;
  --stamp-green-border: #B3CDBB;
  --stamp-amber:        #7E5711;
  --stamp-amber-bg:     #F5E9D3;
  --stamp-amber-border: #DCC28D;
  --stamp-blue:         var(--color-primary);
  --stamp-blue-bg:      #E4E9F0;
  --stamp-blue-border:  #B4C3D5;

  /* "Gradientes" heredados — aplanados a color sólido a propósito:
     el mundo Manifiesto & Tracking no usa degradados decorativos. */
  --gradient-hero:     var(--color-gray-100);
  --gradient-primary:  var(--color-primary);
  --gradient-subtle:   var(--color-gray-100);
  --gradient-dark-bg:  var(--color-primary-dark);

  --font-family-base:     'Archivo', system-ui, -apple-system, sans-serif;
  --font-family-heading:  'Archivo', system-ui, -apple-system, sans-serif;
  --font-heading:         var(--font-family-heading);
  --font-mono:            'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --font-size-xs:   0.8125rem;
  --font-size-sm:   0.9375rem;
  --font-size-base: 1.0625rem;
  --font-size-lg:   1.1875rem;
  --font-size-xl:   1.375rem;
  --font-size-2xl:  1.625rem;
  --font-size-3xl:  2rem;
  --font-size-4xl:  2.5rem;
  --font-size-5xl:  3.25rem;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:    1.2;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.7;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radios — manifiesto/sellos, no burbujas SaaS */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(20,19,15,0.06);
  --shadow-sm: 0 2px 4px rgba(20,19,15,0.08);
  --shadow-md: 0 6px 16px rgba(20,19,15,0.10);
  --shadow-lg: 0 12px 32px rgba(20,19,15,0.14);
  --shadow-xl: 0 20px 48px rgba(20,19,15,0.18);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;
}

/* RESET & BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-dark);background:var(--color-white);overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

/* Superficies del navegador — parte del sistema, no defaults del browser */
::selection{background:var(--stamp-blue-bg);color:var(--color-primary-dark)}
/* El halo blanco interior es lo que mantiene el anillo visible sobre el verde
   del sello LIVE y sobre el panel de activación oscuro, donde el azul solo
   daría 1.5:1 contra el fondo. */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 2px var(--color-white)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--color-gray-100)}
::-webkit-scrollbar-thumb{background:var(--kraft-deep);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--color-gray-500)}

/* LUCIDE ICONS BASE */
[data-lucide] {
    width: 20px;
    height: 20px;
    stroke-width: 1.75px;
    vertical-align: middle;
}

.nav-icon [data-lucide] {
    width: 20px;
    height: 20px;
}


/* TIPOGRAFÍA */
.label-tag{display:inline-block;font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-gray-600);letter-spacing:0.06em;white-space:nowrap}
/* En esta app el <h1> es siempre el título de la página, y ese título venía
   marcado como <h2> con el tamaño 4xl. Al promoverlo a h1 por accesibilidad
   conservamos su tamaño: la escala visual no debería moverse porque cambie la
   semántica. .heading-1 mantiene el 5xl para un display de verdad. */
h1{font-family:var(--font-family-heading);font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-dark);letter-spacing:-0.015em}
.heading-1{font-family:var(--font-family-heading);font-size:var(--font-size-5xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-dark);letter-spacing:-0.02em}
h2,.heading-2{font-family:var(--font-family-heading);font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-dark);letter-spacing:-0.015em}
h3,.heading-3{font-family:var(--font-family-heading);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-dark)}
h4,.heading-4{font-family:var(--font-family-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-dark)}
.subtitle{font-family:var(--font-family-base);font-size:var(--font-size-lg);color:var(--color-gray-500);line-height:var(--line-height-relaxed);max-width:560px;font-weight:400}
.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs)}.text-muted{color:var(--color-gray-500)}
.font-mono,.mono,code,kbd{font-family:var(--font-mono)}
code{background:var(--color-gray-100);padding:1px 5px;border-radius:var(--radius-sm);font-size:0.9em}

/* BOTONES — rectangulares, sin degradado, sin pastilla */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;border:1px solid transparent;transition:all var(--transition-base);white-space:nowrap;text-decoration:none}
.btn-primary{background-color:var(--color-dark);color:var(--color-white);border-color:var(--color-dark)}
.btn-primary:hover{background-color:var(--color-gray-900);box-shadow:var(--shadow-sm)}
.btn-secondary{background-color:var(--color-white);color:var(--color-dark);border-color:var(--color-gray-300)}
.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-gradient{background:var(--color-primary);color:var(--color-white);border:1px solid var(--color-primary)}
.btn-gradient:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--color-gray-700);border-color:transparent}
.btn-ghost:hover{background:var(--color-gray-100);color:var(--color-dark)}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs)}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-base)}
.btn-outline {
    background: transparent;
    border: 1px solid var(--color-gray-300);
    color: var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}
.btn:disabled,.btn[disabled]{opacity:0.55;cursor:not-allowed;box-shadow:none;transform:none}

/* SELLOS / BADGES — rectángulo con borde de tinta, no pastilla */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px var(--space-2);border-radius:var(--radius-sm);border:1px solid transparent;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;line-height:1.4}
.badge-blue{background-color:var(--stamp-blue-bg);color:var(--stamp-blue);border-color:var(--stamp-blue-border)}
.badge-neutral{background-color:var(--kraft);color:var(--color-gray-700);border-color:var(--kraft-deep)}
/* Alias de compatibilidad: el morado salió del sistema. Cae a neutro para que
   ningún uso perdido reintroduzca un quinto acento. */
.badge-purple{background-color:var(--kraft);color:var(--color-gray-700);border-color:var(--kraft-deep)}
.badge-green{background-color:var(--stamp-green-bg);color:var(--stamp-green);border-color:var(--stamp-green-border)}
.badge-red{background-color:var(--stamp-red-bg);color:var(--stamp-red);border-color:var(--stamp-red-border)}
.badge-amber{background-color:var(--stamp-amber-bg);color:var(--stamp-amber);border-color:var(--stamp-amber-border)}
.badge-gray{background-color:var(--color-gray-100);color:var(--color-gray-700);border-color:var(--color-gray-200)}

/* Sello de modo (test / preview / live) — el gate de seguridad del producto.
   Un sello real, no una pastilla de estado: doble filete (border-style:double,
   como un timbre de aduana) y una leve rotación de impresión a mano.
   LIVE es el único momento de color "empapado" (sólido) de toda la interfaz. */
.stamp-mode{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border-radius:2px;font-family:var(--font-mono);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;border-width:3px;border-style:double;white-space:nowrap;transform:rotate(-1.1deg);box-shadow:0 1px 0 rgba(20,19,15,0.04)}
.stamp-mode::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}
.stamp-mode--test{background:var(--stamp-amber-bg);color:var(--stamp-amber);border-color:var(--stamp-amber)}
.stamp-mode--test::before{background:var(--stamp-amber)}
.stamp-mode--preview{background:var(--stamp-blue-bg);color:var(--stamp-blue);border-color:var(--stamp-blue)}
.stamp-mode--preview::before{background:var(--stamp-blue)}
.stamp-mode--live{background:var(--stamp-green);color:var(--color-white);border-color:var(--color-white)}
.stamp-mode--live::before{background:var(--color-white)}

/* TARJETAS — planas, línea fina, sin sombra flotante */
.card{background:var(--color-white);border-radius:var(--radius-md);border:1px solid var(--color-gray-300);padding:var(--space-6);transition:border-color var(--transition-base)}
.card:hover{border-color:var(--color-gray-400)}
.card-soft{background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);padding:var(--space-6)}
.card-featured{background:var(--color-white);border:1.5px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-6)}
.card-icon{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-gray-100);border:1px solid var(--color-gray-200);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);color:var(--color-primary)}

/* PRICING (heredado, sin uso actual en la app) */
.pricing-card{background:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-xl);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.pricing-card.popular{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}
.pricing-price{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);line-height:1}
.pricing-price span{font-size:var(--font-size-base);font-weight:var(--font-weight-normal);opacity:0.7}
.pricing-plan-name{font-size:var(--font-size-sm);color:var(--color-gray-500);font-weight:var(--font-weight-medium)}
.pricing-card.popular .pricing-plan-name{color:rgba(255,255,255,0.7)}
.pricing-features{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.pricing-features li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-gray-700)}
.pricing-card.popular .pricing-features li{color:rgba(255,255,255,0.9)}
.pricing-features li::before{content:"✓";color:var(--color-accent-green);font-weight:var(--font-weight-bold)}
.pricing-card.popular .pricing-features li::before{color:var(--color-white)}
.pricing-toggle{display:inline-flex;background:var(--color-gray-100);border-radius:var(--radius-full);padding:var(--space-1)}
.pricing-toggle button{padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);border:none;background:transparent;font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-base)}
.pricing-toggle button.active{background:var(--color-dark);color:var(--color-white)}

/* DIALOG / MODAL */
.dialog-overlay{position:fixed;inset:0;background:rgba(20,19,15,0.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}
.dialog{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-8);width:100%;max-width:480px;box-shadow:var(--shadow-xl);position:relative}
.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-6)}
.dialog-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-dark)}
.dialog-close{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--color-gray-300);background:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-gray-500);transition:all var(--transition-fast)}
.dialog-close:hover{background:var(--color-gray-100);color:var(--color-dark)}
.dialog-body{color:var(--color-gray-500);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin-bottom:var(--space-6)}
.dialog-footer{display:flex;gap:var(--space-3);justify-content:flex-end}

/* TOAST */
.toast{display:inline-flex;align-items:center;gap:var(--space-3);background:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);box-shadow:var(--shadow-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}
.toast-success{border-color:var(--stamp-green-border);background:var(--stamp-green-bg)}
.toast-error{border-color:var(--stamp-red-border);background:var(--stamp-red-bg)}
.toast-info{border-color:var(--stamp-blue-border);background:var(--stamp-blue-bg)}
/* Región de avisos. Reemplaza los 56 alert() nativos: aquellos bloqueaban la página,
   no decían la causa y no ofrecían salida — pero sí se anunciaban en lector de
   pantalla, así que el contenedor lleva aria-live para no perder eso. */
.toast-region{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:2000;display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-end;pointer-events:none;max-width:min(420px,calc(100vw - var(--space-8)))}
.toast-region .toast{pointer-events:auto;align-items:flex-start;animation:toast-in 180ms cubic-bezier(.2,.8,.3,1) both}
.toast-region .toast.leaving{animation:toast-out 160ms ease-in both}
.toast-text{flex:1;min-width:0;line-height:1.45}
.toast-text b{display:block;font-weight:var(--font-weight-semibold)}
.toast-text span{display:block;margin-top:2px;font-weight:400;color:var(--color-gray-600)}
.toast-close{background:none;border:none;padding:2px;margin:-2px -4px -2px 0;cursor:pointer;color:var(--color-gray-500);flex-shrink:0;line-height:0}
.toast-retry{background:none;border:1px solid currentColor;border-radius:var(--radius-sm);padding:3px 9px;margin-top:6px;font:inherit;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);cursor:pointer;color:var(--color-gray-700)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion: reduce){.toast-region .toast,.toast-region .toast.leaving{animation:none}}
@media (max-width: 768px){.toast-region{left:var(--space-4);right:var(--space-4);bottom:var(--space-4);max-width:none;align-items:stretch}}

/* FORMULARIOS */
.form-group{display:flex;flex-direction:column;gap:var(--space-2)}
.form-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-dark)}
.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--color-dark);background:var(--color-white);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none}
.form-input::placeholder{color:var(--color-gray-400)}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--stamp-blue-bg)}
.form-textarea{resize:vertical;min-height:100px}
.form-hint{font-size:var(--font-size-xs);color:var(--color-gray-500)}
.form-error{font-size:var(--font-size-xs);color:var(--stamp-red)}

/* TABLAS — manifiesto denso */
.table-wrapper{background:var(--color-white);border-radius:var(--radius-md);border:1px solid var(--color-gray-300);overflow-x:auto;width:100%;}
table.outreach-table{width:100%;min-width: 800px;border-collapse:collapse;font-size:var(--font-size-sm)}
.outreach-table thead{background:var(--color-gray-50)}
.outreach-table th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:var(--font-weight-semibold);color:var(--color-gray-600);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--color-gray-300)}
.outreach-table td{padding:var(--space-4);color:var(--color-dark);border-bottom:1px solid var(--color-gray-100);vertical-align: middle;}
.outreach-table tr:last-child td{border-bottom:none}
.outreach-table tr:hover td{background:var(--color-gray-50)}
.data-table{width:100%;border-collapse:collapse;text-align:left}
.data-table th{padding:var(--space-3) var(--space-5);background:var(--color-gray-50);font-size:var(--font-size-xs);font-weight:700;color:var(--color-gray-600);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--color-gray-300)}
.data-table td{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-gray-100);font-size:var(--font-size-sm);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--color-gray-50)}

/* Números tabulares — cifras del manifiesto */
.tabular,.mono-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tracking-id{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-gray-500);letter-spacing:0.02em}

/* NAVBAR */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-8);background:var(--paper);border-bottom:1px solid var(--kraft-deep);position:sticky;top:0;z-index:100}
.navbar-logo{display:flex;align-items:center;gap:var(--space-3);font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);color:var(--color-dark);font-family:var(--font-family-heading);letter-spacing:-0.01em}
.navbar-logo-icon{width:34px;height:34px;background:var(--color-white);border:1.5px solid var(--color-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-dark);font-family:var(--font-mono);font-weight:700;position:relative}
.navbar-logo-icon::after{content:"";position:absolute;inset:3px;border:1px solid var(--color-dark);border-radius:50%}

/* Tile de icono para listas y avisos. Existe porque cuatro sitios reutilizaban
   .navbar-logo-icon —que ES la marca— solo para meter un icono en una caja: eso
   arrastraba el anillo doble del ::after y hacía que el sello de cancelación
   postal apareciera como adorno de una fila de tabla, con lo que dejaba de leerse
   como identidad. Aquí: cuadrado, filete fino, sin anillo.
   flex-shrink:0 y aspect-ratio lo mantienen cuadrado — sin ellos se comprimía de
   ancho junto a un nombre largo y el borde redondeado se veía como un óvalo. */
.icon-tile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    aspect-ratio:1;
    width:32px;
    border-radius:var(--radius-sm);
    background:var(--color-gray-100);
    border:1px solid var(--color-gray-200);
    color:var(--color-gray-600);
}
.icon-tile--lg{width:44px}
.navbar-nav{display:flex;align-items:center;gap:var(--space-8);list-style:none}
.navbar-nav a{font-size:15px;color:var(--color-gray-600);font-weight:var(--font-weight-medium);transition:color var(--transition-fast)}
.navbar-nav a:hover,.navbar-nav a.active{color:var(--color-dark)}
.navbar-actions{display:flex;align-items:center;gap:var(--space-4);height:100%;}
.user-profile{display:flex;align-items:center;gap:var(--space-3);line-height:1.4;}
.user-identity{min-width:0;text-align:right;line-height:1.4;display:flex;flex-direction:column}
.user-identity-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-dark);font-size:14px;font-weight:600}
.user-identity-email{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-gray-500);font-size:12px}

/* HERO (heredado, sin uso actual en la app) */
.hero{background:var(--gradient-subtle);padding:var(--space-24) var(--space-8);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);position:relative;overflow:hidden}
.hero-eyebrow{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-primary);letter-spacing:0.08em;position:relative}
.hero-title{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:var(--font-weight-bold);line-height:1.15;letter-spacing:-0.02em;max-width:640px;color:var(--color-dark);position:relative}
.hero-subtitle{font-family:var(--font-family-heading);font-size:var(--font-size-lg);color:var(--color-gray-500);max-width:520px;line-height:var(--line-height-relaxed);position:relative}
.hero-actions{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center;position:relative}

/* MANIFIESTO — franja de totales (reemplaza la grilla de widget-cards) */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    border:1px solid var(--color-gray-300);
    border-radius:var(--radius-md);
    background:var(--color-white);
    overflow:hidden;
    margin-bottom:var(--space-8);
}
.widget-card{
    background:transparent;
    border-radius:0;
    padding:var(--space-5) var(--space-6);
    border:none;
    border-right:1px solid var(--color-gray-200);
    border-bottom:1px solid var(--color-gray-200);
    box-shadow:none;
    transition:background var(--transition-fast);
    display:flex;flex-direction:column;min-width:0;
}
.widget-card:hover{transform:none;box-shadow:none;background:var(--color-gray-50)}
.widget-status {
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-bottom: 4px;
}
.widget-status.purple { color: var(--color-primary); }
.widget-status.green { color: var(--stamp-green); }
.widget-status.gray { color: var(--color-gray-500); }
.widget-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-2);min-height: 15px;}
.widget-card-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-gray-600);line-height: 1.35;}
/* Las tiles resumen son contexto, no el dato principal: el numeral dominante
   vive en cada fila del manifiesto. Antes eran 32px contra 23px del ledger, o sea
   la jerarquía al revés respecto a lo que la pantalla quiere que leas. */
.widget-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.625rem;font-weight:var(--font-weight-semibold);color:var(--color-dark)}
.widget-change{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);display:flex;align-items:center;gap:2px}
.widget-change.up{color:var(--stamp-green)}
.widget-change.down{color:var(--stamp-red)}

/* TESTIMONIALS (heredado, sin uso actual) */
.testimonial-card{background:var(--color-gray-100);border-radius:var(--radius-xl);padding:var(--space-8)}
.testimonial-text{font-size:var(--font-size-base);color:var(--color-dark);line-height:var(--line-height-relaxed);margin-bottom:var(--space-6)}
.testimonial-author{display:flex;align-items:center;gap:var(--space-3)}
.testimonial-avatar{width:40px;height:40px;border-radius:var(--radius-full);object-fit:cover}
.testimonial-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-dark)}
.testimonial-role{font-size:var(--font-size-xs);color:var(--color-gray-500)}

/* FOOTER (heredado, sin uso actual) */
.footer{background:var(--gradient-subtle);padding:var(--space-16) var(--space-8) var(--space-8)}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--space-8);margin-bottom:var(--space-12)}
.footer-col-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-dark);margin-bottom:var(--space-4)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-links a{font-size:var(--font-size-sm);color:var(--color-gray-500);transition:color var(--transition-fast)}
.footer-links a:hover{color:var(--color-primary)}
.footer-bottom{border-top:1px solid var(--color-gray-300);padding-top:var(--space-6);display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-gray-500)}

/* UTILIDADES */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-6)}
.section{padding:var(--space-20) 0}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}
.text-center{text-align:center}
.divider{border:none;border-top:1px solid var(--color-gray-300);margin:var(--space-8) 0}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-8);
}
.header-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* RESPONSIVE */
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  h1,.heading-1{font-size:var(--font-size-3xl)}
  h2,.heading-2{font-size:var(--font-size-2xl)}
  h3,.heading-3{font-size:var(--font-size-xl)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .mobile-menu-toggle { display: flex !important; }
  .navbar{padding:var(--space-3) var(--space-4)}
  .navbar-nav{display:none}
  .user-identity { display: none; }
  .sidebar-toggle { display: none !important; }
  .sidebar {
      position: fixed !important;
      top: 0 !important;
      left: -280px !important;
      height: 100vh !important;
      width: 280px !important;
      z-index: 1010 !important;
      display: flex !important;
      flex-direction: column !important;
      box-shadow: none;
      transition: left 0.3s ease;
  }
  .sidebar.mobile-open {
      left: 0 !important;
      box-shadow: var(--shadow-xl) !important;
  }
  .sidebar.mobile-open .sidebar-header {
      justify-content: space-between !important;
      padding: var(--space-6) var(--space-5) !important;
  }
  .sidebar.mobile-open .nav-link {
      justify-content: flex-start !important;
  }
  .sidebar.mobile-open .brand-name,
  .sidebar.mobile-open .nav-text {
      display: block !important;
  }
  .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(20,19,15,0.45);
      z-index: 1000;
      pointer-events: auto;
  }
  .sidebar-overlay.active { display: block; }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .header-info { gap: var(--space-2); }
  .hero{padding:var(--space-16) var(--space-4)}
  .stats-row{gap:var(--space-6)}
  .footer-grid{grid-template-columns:1fr}
  /* Aquí vivían `.sidebar{display:none}` y `.content{padding:var(--space-4)}`.
     La primera era contradictoria: doce líneas más arriba, en este mismo bloque,
     .sidebar ya se declara `display:flex !important`. La segunda simplemente no
     llegaba a aplicarse — la regla base de .content está más abajo en el archivo
     y con la misma especificidad, así que ganaba y el móvil se quedaba con 64px
     de padding a cada lado (un tercio de una pantalla de 390px).
     El padding móvil ahora se declara junto a la regla base, que es donde puede
     ganar sin recurrir a !important. */
}

/* ─────────────────────────────────────────────
   7. WIZARD DE OPERACIÓN — Componentes v2
   ───────────────────────────────────────────── */

.plan-header-card {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-8);
    padding: var(--space-6) var(--space-8);
    margin-bottom: var(--space-8);
    align-items: flex-start;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
}

.plan-header-card .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 160px;
}

.plan-header-card .field-divided {
    flex: 1;
    min-width: 220px;
    padding: 0 var(--space-8);
    border-left: 1px solid var(--color-gray-100);
    border-right: 1px solid var(--color-gray-100);
}

.plan-header-card label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.plan-header-card .value {
    font-weight: 600;
    color: var(--color-dark);
    font-size: var(--font-size-sm);
}

.plan-header-card .value-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    padding: 5px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    transition: color 0.15s, background 0.15s;
}

.btn-icon:hover {
    color: var(--color-primary);
    background: var(--color-gray-100);
}

.step-card, .rule-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    position: relative;
    transition: border-color 0.15s;
}

.step-card:hover, .rule-card:hover {
    border-color: var(--color-gray-400);
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}

.step-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

.card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-dark);
    margin: var(--space-1) 0 0 0;
}

.ai-assistant-bar {
    background: var(--color-white);
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-10) 0;
}

.ai-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.ai-input {
    width: 100%;
    padding: 12px 52px 12px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    outline: none;
    font-size: var(--font-size-sm);
    background: var(--color-white);
    transition: all 0.2s;
}

.ai-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--stamp-blue-bg);
}

.btn-ai-send {
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-ai-send:hover {
    background: var(--color-primary-dark);
}

.status-action-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-white);
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    margin-top: var(--space-8);
}

.mini-steps {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-2);
}

.mini-step {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
}

.mini-step.active {
    color: var(--color-primary);
}

.action-buttons {
    display: flex;
    gap: var(--space-6);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-900);
}

.action-btn.primary {
    color: var(--color-primary);
}

/* Panel de activación (aprobar operación) — el único otro punto
   con permiso para un tratamiento de color más comprometido. */
.activation-panel{
    margin-top: var(--space-8);
    padding: var(--space-8);
    background: var(--color-dark);
    color: var(--paper);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.activation-panel .label-tag{color:var(--kraft)}
/* El título del panel es h2 (cuelga del h1 de la página). Sobre fondo tinta,
   el color tiene que venir del panel, no de la regla global de encabezados. */
.activation-panel h2,.activation-panel h3{color:var(--color-white);margin:0 0 6px 0;font-size:1.3rem}
.activation-panel p{margin:0;color:var(--kraft);font-size:16px;max-width:52ch}
.activation-panel .btn-primary{background:var(--stamp-green);border-color:var(--stamp-green);color:var(--color-white)}
.activation-panel .btn-primary:hover{background:#26582F}

/* Momento de movimiento autorado único del sistema: el botón de aprobación
   "sella" la operación al hacer clic — reservado para la acción de mayor
   consecuencia del producto, no repetido en ningún otro lugar. */
@keyframes stamp-press{
    0%{transform:scale(1) rotate(0deg)}
    35%{transform:scale(0.93) rotate(-1.5deg)}
    65%{transform:scale(1.04) rotate(0.5deg)}
    100%{transform:scale(1) rotate(0deg)}
}
.stamp-press{animation:stamp-press 380ms cubic-bezier(.36,.07,.19,.97) both}
@media (prefers-reduced-motion: reduce){.stamp-press{animation:none}}

/* ─────────────────────────────────────────────
   8. LAYOUT Y NAVEGACIÓN
   ───────────────────────────────────────────── */

.sidebar {
    width: 248px;
    /* El menú no cede nunca. Sin esto, un contenido ancho (la tabla de contactos
       de una fuente de datos) empujaba y el sidebar era lo único encogible del
       flex: se quedaba en 72px con las etiquetas cortadas a media palabra. */
    flex-shrink: 0;
    background: var(--kraft);
    border-right: 1px solid var(--kraft-deep);
    display: flex;
    flex-direction: column;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: sticky;
    top: 65px;
    height: calc(100vh - 65px);
    overflow: hidden;
    z-index: 90;
}

.sidebar.collapsed { width: 76px; }

.sidebar-header {
    padding: var(--space-5) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--kraft-deep);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    overflow: hidden;
    white-space: nowrap;
}

.brand-icon {
    width: 36px;
    height: 36px;
    background: var(--color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
    flex-shrink: 0;
}

.brand-name {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: opacity 0.2s;
}

.sidebar.collapsed .brand-name,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .usage-card {
    display: none;
}

.sidebar-toggle {
    background: var(--paper);
    border: 1px solid var(--kraft-deep);
    color: var(--color-gray-600);
    cursor: pointer;
    padding: 7px;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

.sidebar-toggle:hover {
    background: var(--color-dark);
    color: var(--paper);
    border-color: var(--color-dark);
}

.sidebar-nav { flex: 1; padding: var(--space-4) var(--space-3); }
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--color-gray-700);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    min-height: 44px;
}

.nav-link:hover{background:rgba(255,255,255,0.5);color:var(--color-dark)}

.nav-link.active {
    background: var(--color-dark);
    color: var(--paper) !important;
}

.nav-icon {
    font-size: 1.25rem;
    width: 22px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: var(--space-5);
    border-top: 1px solid var(--kraft-deep);
}

.content {
    flex: 1;
    /* La causa de fondo: por defecto un ítem flex tiene min-width:auto, así que no
       puede encogerse por debajo del ancho intrínseco de lo que contiene. La tabla
       de contactos (1394px) mantenía esta columna ancha y el desbordamiento salía
       del vecino. Con min-width:0 la columna sí se encoge y la tabla scrollea
       dentro de su .table-wrapper, que es donde debe. */
    min-width: 0;
    padding: var(--space-16);
    width: 100%;
    background: var(--paper);
}
@media (max-width: 768px) {
    .content { padding: var(--space-4); }
}

/* TRACKING DE LA OPERACIÓN — checkpoints de manifiesto, no barra genérica */
.step-container {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-10);
    align-items: flex-start;
    max-width: 720px;
}

.step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-top: 0;
    text-decoration: none;
}

.step-item::before{
    content:"";
    width:100%;
    height:1px;
    background:var(--color-gray-300);
    position:absolute;
    top:9px;
    left:-50%;
    z-index:0;
}
.step-item:first-child::before{display:none}
.step-item.checked::before{background:var(--color-dark)}

.step-item::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-300);
    position: relative;
    z-index: 1;
    order: -1;
}

.step-item.active::after{border-color:var(--color-dark);box-shadow:0 0 0 3px var(--color-gray-200)}
.step-item.checked::after{background:var(--color-dark);border-color:var(--color-dark)}

.step-icon {
    display:none; /* el checkpoint dibuja su propio círculo via ::after */
}

.step-label {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.step-item.active .step-label { color: var(--color-dark); }
.step-item.checked .step-label { color: var(--color-gray-700); }

/* Chat Bubbles (Asistente IA) */
.chat-bubble {
    max-width: 80%;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
}

.chat-bubble.user {
    align-self: flex-end;
    background: var(--color-dark);
    color: var(--paper);
}

.chat-bubble.ai {
    align-self: flex-start;
    background: var(--color-white);
    border-color: var(--color-gray-300);
    color: var(--color-dark);
}

/* Plan Box y timeline de secuencia */
.plan-box {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-300);
    overflow: hidden;
    margin-bottom: var(--space-8);
}

.sequence-step {
    display: flex;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    border-left: 1px dashed var(--kraft-deep);
    margin-left: 12px;
    padding-left: 32px;
    position: relative;
}

.sequence-step::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--color-white);
    border: 1.5px solid var(--color-dark);
    border-radius: var(--radius-full);
    z-index: 1;
}

/* ─────────────────────────────────────────────
   9. AJUSTES MÓVILES FINALES — deben ganar la cascada
   sobre las reglas de componente de arriba, por eso
   viven al final de la hoja de estilos.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .step-container { gap: 6px; }
    .step-item { min-width: 0; }
    .step-label {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 11px;
        letter-spacing: 0.02em;
        line-height: 1.35;
        max-width: 100%;
        text-align: center;
    }
    .step-item::before { top: 8px; left: calc(-50% - 3px); width: calc(100% + 6px); }

    .plan-header-card { flex-direction: column; gap: var(--space-5); }
    .plan-header-card .field-divided {
        padding: var(--space-5) 0 0;
        border-left: none;
        border-right: none;
        border-top: 1px dashed var(--color-gray-200);
    }
}

/* ─────────────────────────────────────────────
   FOCO VISIBLE — garantía final
   Varios componentes ponen `outline:none` y lo sustituyen por un box-shadow
   tenue (medido en 1.14:1 sobre blanco) o por nada en absoluto, y como esas
   reglas viven más abajo que el :focus-visible global, ganaban. Este bloque
   va al final del archivo y usa selectores de elemento + pseudoclase, así que
   tiene más especificidad que las reglas de clase que lo estaban anulando.
   El halo blanco interior mantiene el anillo visible sobre el verde del sello
   LIVE y sobre el panel de activación oscuro.
   ───────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--color-white);
}

/* Destinatarios: selección independiente dentro de cada campaña. */
.campaign-audience { margin-top:24px; padding:24px 28px; background:var(--color-white); border:1px solid var(--rule-hairline); border-radius:var(--radius-lg); }
.audience-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.audience-heading-row h2 { margin:0 0 6px; font-size:20px; }
.audience-heading-row p { margin:0; font-size:15px; color:var(--color-gray-600); max-width:65ch; }
.audience-heading-row .audience-count { color:var(--color-dark); white-space:nowrap; font-variant-numeric:tabular-nums; }
.audience-count strong { font-size:24px; }
.audience-controls { min-width:0; border:0; padding:0; margin:20px 0 0; }
.audience-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.audience-bulk { display:flex; gap:8px; flex-wrap:wrap; }
.audience-search { flex:0 1 300px; }
.audience-search label { display:block; margin-bottom:6px; font-size:14px; font-weight:600; }
.audience-search input { width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--rule-strong); border-radius:var(--radius-sm); background:var(--color-white); color:var(--color-dark); font:inherit; }
.audience-search input::placeholder { color:var(--color-gray-500); }
.audience-contact-list { border-top:1px solid var(--rule-strong); }
.audience-contact { display:grid; grid-template-columns:24px minmax(0,1fr) minmax(120px, .55fr); align-items:center; gap:14px; padding:12px 8px; border-bottom:1px solid var(--rule-hairline); cursor:pointer; }
.audience-contact:hover { background:var(--color-gray-50); }
.audience-contact input { width:19px; height:19px; margin:0; accent-color:var(--color-primary); cursor:pointer; }
.audience-person { display:flex; flex-direction:column; gap:3px; min-width:0; }
.audience-purpose { display:grid; gap:8px; margin-bottom:24px; }
.audience-purpose select { width:100%; max-width:440px; }
.audience-hidden .audience-person strong, .audience-hidden .audience-person > span:not(.audience-protection-note), .audience-hidden .audience-company { color:var(--color-gray-500); text-decoration:line-through; }
.audience-hidden { background:var(--surface-muted); }
.audience-person strong { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.audience-person > span, .audience-company { font-size:14px; color:var(--color-gray-500); overflow-wrap:anywhere; }
.audience-controls:disabled .audience-contact { cursor:default; }
.campaign-audience[aria-busy="true"] .audience-contact-list { opacity:.65; }
.campaign-audience :is(input,button,a):focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.audience-pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:16px; font-size:14px; }
.campaign-audience [hidden] { display:none; }
.audience-notice { margin:16px 0 0; font-size:15px; color:var(--stamp-amber); }
.audience-footnote, .audience-empty { margin:12px 0 0; font-size:14px; color:var(--color-gray-500); line-height:1.5; }
.audience-empty { padding:12px 8px; }
.audience-error { margin-top:12px; color:var(--stamp-red); font-size:15px; }
.audience-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:600px) {
    .campaign-audience { padding:20px 16px; }
    .audience-heading-row { gap:12px; }
    .audience-search { flex-basis:100%; }
    .audience-contact { grid-template-columns:24px minmax(0,1fr); gap:5px 12px; }
    .audience-company { grid-column:2; }
    .audience-contact input { grid-row:1 / span 2; }
    .audience-bulk .btn { font-size:14px; padding:9px 10px; }
}