/* =========================================================================
   MailShogun: hoja de estilos del panel.
   CSS plano, sin build. Orden: tokens → base → layout → componentes →
   páginas → responsive. Las clases antiguas se mantienen: los módulos
   escriben markup a mano y no se reescriben todos a la vez.
   ========================================================================= */

:root{
  --ico-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
  /* Superficies y texto */
  --bg:#f2f6f6; --surface:#ffffff; --surface-2:#f9fbfb; --surface-3:#edf2f2;
  --border:#e0e8e8; --border-strong:#c8d5d4;
  --text:#132422; --text-2:#334745; --muted:#647a78;

  /* Marca y estados */
  --brand:#0d9488; --brand-700:#0f766e; --brand-900:#134e4a; --brand-050:#f0fdfa;
  --brand-ink:#0f766e;   /* marca cuando es texto, no relleno */
  --nav-hover:#e9f7f4;   /* fondo del item bajo el raton: teal, un paso por debajo del activo */
  --nav-active:#d8f3ef;  /* fondo del item activo */
  --ok:#15803d; --ok-bg:#dcfce7; --ok-border:#bbf7d0;
  --warn:#a15c07; --warn-bg:#fef3c7; --warn-border:#fde68a;
  --danger:#c81e1e; --danger-bg:#fee2e2; --danger-border:#fecaca;

  /* Helpers de componentes */
  --input-hover-border:#a3b8b6;
  --placeholder:#8ba09e;
  --danger-hover:#a51818;
  --armed-border:#99f6e4;
  --brand-soft-border:#ccfbf1;
  --auth-glow-1:rgba(13,148,136,.16); --auth-glow-2:rgba(45,212,191,.14);
  --auth-grid:#b6cfcb; --auth-grid-opacity:.85;
  --focus-ring:rgba(13,148,136,.20);

  /* Formas y profundidad */
  --r-sm:4px; --r:6px; --r-lg:8px; --radius:6px;
  --shadow-xs:0 1px 2px rgba(10,35,33,.06);
  --shadow:0 1px 3px rgba(10,35,33,.07),0 1px 2px rgba(10,35,33,.04);
  --shadow-md:0 8px 24px rgba(10,35,33,.10);
  --shadow-lg:0 18px 48px rgba(10,35,33,.16);

  /* Métricas del layout */
  --top:56px;            /* alto de la topbar */
  --sb:248px;            /* ancho del sidebar */
  --content-max:none;    /* el .page llena el hueco del sidebar; sin columna estrecha */
  --gutter:24px;

  /* Sin Google Fonts: CSP solo permite style-src 'self'. */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-family:var(--font);
}

[data-theme="dark"]{
  --bg:#0c1413;
  --surface:#131e1d;
  --surface-2:#101a19;
  --surface-3:#1d2b29;
  --border:#243634;
  --border-strong:#314744;
  --text:#eef4f3;
  --text-2:#cbd8d6;
  --muted:#8ba3a0;
  --brand-050:#0c3330;
  --brand-ink:#2dd4bf;
  --nav-hover:#0f302c;
  --nav-active:#12453f;
  --ok:#4ade80;
  --ok-bg:#0f3d24;
  --ok-border:#1a5c36;
  --warn:#fbbf24;
  --warn-bg:#3d2a05;
  --warn-border:#5c3f08;
  --danger:#f87171;
  --danger-bg:#3d0f0f;
  --danger-border:#5c1a1a;
  --input-hover-border:#3f5b58;
  --placeholder:#6d8582;
  --danger-hover:#ef4444;
  --armed-border:#115e56;
  --brand-soft-border:#115e56;
  --auth-glow-1:rgba(13,148,136,.22); --auth-glow-2:rgba(19,78,74,.24);
  --auth-grid:#1f4a46; --auth-grid-opacity:.85;
  --focus-ring:rgba(45,212,191,.26);
  color-scheme:dark;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;
  font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;color:var(--text)}
h1{font-size:clamp(20px,1.1rem + .6vw,26px);margin:0 0 6px;letter-spacing:-.01em}
h2{font-size:18px;margin:0 0 8px}
h3{font-size:16px;margin:0 0 6px}
p{margin:0 0 10px}
p:last-child{margin-bottom:0}
small{font-size:13px}
.muted{color:var(--muted)}
code,pre{font-family:var(--mono)}
code{background:var(--surface-3);padding:1px 6px;border-radius:6px;font-size:.875em;
  overflow-wrap:anywhere}
hr{border:0;border-top:1px solid var(--border);margin:20px 0}

/* Foco visible y homogéneo en todo lo interactivo. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* Solo para lectores de pantalla: matiza un estado que en pantalla ya se ve. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Salto al contenido para teclado y lectores de pantalla. */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--surface);
  color:var(--text);padding:10px 14px;border-radius:0 0 var(--r) 0;box-shadow:var(--shadow-md)}
.skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ===== Topbar (solo en móvil; en escritorio todo vive en el sidebar) ===== */
.topbar{display:none;align-items:center;gap:16px;background:var(--surface);
  border-bottom:1px solid var(--border);padding:0 var(--gutter);height:var(--top);
  position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--text);
  font-size:16px;min-width:0;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{display:block;width:32px;height:32px;border-radius:9px;flex:0 0 auto;
  box-shadow:0 1px 2px rgba(10,35,33,.30)}
.brand-wordmark{display:block;flex:0 0 auto;max-width:100%;height:auto}
.topbar-wordmark{width:168px;max-height:none}
[data-theme="dark"] .topbar-wordmark{filter:brightness(0) invert(1)}
.sidebar-wordmark{width:168px;max-height:none}
.auth-wordmark{width:190px;max-height:none}
.auth-wordmark-dark{display:none}
[data-theme="dark"] .auth-wordmark-light{display:none}
[data-theme="dark"] .auth-wordmark-dark{display:block}
/* En escritorio la marca está en el sidebar; en móvil vuelve a la topbar. */
.topbar-brand{display:none}
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);
  cursor:pointer;flex:0 0 auto}
.nav-toggle:hover{background:var(--surface-3)}
.nav-toggle .icon-close{display:none}
body.nav-open .nav-toggle .icon-open{display:none}
body.nav-open .nav-toggle .icon-close{display:inline}
.nav-backdrop{display:none}

/* Menú de usuario (en el sidebar; nombre + email + avatar) */
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 10px;border:0;
  border-radius:10px;background:transparent;color:var(--text);cursor:pointer;
  font:inherit;max-width:min(320px,42vw)}
.user-btn:hover{background:var(--surface-3)}
.user-menu.open .user-btn{background:var(--surface-3)}
.user-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0;
  text-align:right;line-height:1.25}
.user-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.user-avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(160deg,var(--brand),var(--brand-900));color:#fff;font-weight:700;
  font-size:13px;flex:0 0 auto;letter-spacing:.02em}
.user-chevron{flex:0 0 auto;color:var(--muted);opacity:.75}
.user-drop{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:6px;display:none;z-index:40}
.user-menu.open .user-drop{display:block}
.user-drop a{display:block;padding:10px 12px;border-radius:var(--r-sm);color:var(--text);font-size:14px}
.user-drop a:hover{background:var(--surface-3);text-decoration:none}
.user-drop a.danger{color:var(--danger)}
.user-drop a.danger:hover{background:var(--danger-bg)}
.user-drop .logout-form{margin:0}
.user-drop .logout-form button{display:block;width:100%;padding:10px 12px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--danger);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.user-drop .logout-form button:hover{background:var(--danger-bg)}
.user-drop-row{padding:8px 12px 6px;margin-top:4px;border-top:1px solid var(--border)}
.user-drop-row:first-of-type{border-top:1px solid var(--border)}
.user-drop-row label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.user-drop-row select{width:100%;font-size:13px;padding:7px 30px 7px 10px;min-width:0}
.theme-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:calc(100% - 24px);margin:4px 12px 6px;padding:8px 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text);font-size:14px;text-align:left;cursor:pointer}
.theme-toggle:hover{background:var(--surface-3)}
.theme-toggle-label{pointer-events:none}
.theme-toggle-icons{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;color:var(--muted)}
.theme-toggle-icons svg{position:absolute;transition:opacity .15s ease,transform .15s ease}
.theme-toggle-icons .icon-sun{opacity:1;transform:scale(1)}
.theme-toggle-icons .icon-moon{opacity:0;transform:scale(.8)}
[data-theme="dark"] .theme-toggle-icons .icon-sun{opacity:0;transform:scale(.8)}
[data-theme="dark"] .theme-toggle-icons .icon-moon{opacity:1;transform:scale(1)}

/* Usuario al pie del sidebar (menú abre hacia arriba). */
.side-user{flex:0 0 auto;padding:8px 10px;border-top:1px solid var(--rail-line)}
.side-user .user-btn{color:var(--rail-txt-strong)}
.side-user .user-btn:hover,.side-user .user-menu.open .user-btn{background:var(--rail-hover)}
.side-user .user-name{color:var(--rail-txt-strong)}
.side-user .user-btn .muted{color:var(--rail-dim)}
.side-user .user-chevron{color:var(--rail-dim)}
/* El avatar iba de la marca al tono mas oscuro: sobre el menu se perdia. */
.side-user .user-avatar{background:linear-gradient(160deg,var(--rail-accent),var(--rail-avatar-to));color:var(--rail-avatar-ink)}
.side-user .user-menu{width:100%}
.side-user .user-btn{width:100%;max-width:none;padding:8px 10px;justify-content:flex-start}
.side-user .user-meta{flex:1 1 auto;align-items:flex-start;text-align:left;min-width:0}
.side-user .user-chevron{margin-left:auto}
.side-user .user-drop{top:auto;bottom:calc(100% + 8px);right:auto;left:0}

/* En Administración el pie del menú es la vuelta al panel, no el usuario. Mismo
   sitio y mismo peso que tenía el botón del usuario, para que la mano ya sepa
   dónde está. */
.side-back-app{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;
  color:var(--rail-txt);font-size:13px;font-weight:600;line-height:1.3}
.side-back-app:hover{background:var(--rail-hover);color:var(--rail-txt-strong);text-decoration:none}
.side-back-app .side-back-chevron{flex:0 0 auto;opacity:.75}
.side-back-app:hover .side-back-chevron{opacity:1}
.side-back-app span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Plegado solo cabe la flecha. */
.sb-collapsed .side-back-app{justify-content:center;padding:9px 0}
.sb-collapsed .side-back-app span{display:none}

/* Banner de impersonación (admin viendo como cliente) */
.impersonate-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0;border-radius:0;border-left:none;border-right:none;padding:10px var(--gutter);
  position:sticky;top:0;z-index:25}
.has-sidebar .impersonate-banner{margin-left:var(--sb);transition:margin-left .15s ease}
.impersonate-banner .btn{flex:0 0 auto;white-space:nowrap}

/* ===== Layout: sidebar a altura completa + contenido ===== */
.layout{min-height:100vh}

/* El menu es un bloque de marca en los dos temas, no una superficie mas: es
   lo que le da cara al panel sin tener que tenir el resto. Sus colores viven
   en tokens propios porque dentro no valen --surface/--text, que cambian con
   el tema y aqui el fondo es siempre oscuro. */
.sidebar{
  --rail:#1d5a51;
  --rail-line:rgba(255,255,255,.09);
  --rail-txt:#a5c9c4;
  --rail-txt-strong:#f0faf8;
  --rail-dim:#7aada7;
  --rail-accent:#5eead4;
  --rail-hover:rgba(255,255,255,.07);
  --rail-active:rgba(255,255,255,.11);
  --rail-edge:transparent;      /* filo izquierdo: solo lo pinta Administración */
  --rail-avatar-to:var(--brand-700);
  --rail-avatar-ink:#04211f;
  position:fixed;left:0;top:0;bottom:0;width:var(--sb);background:var(--rail);
  border-right:1px solid var(--rail);border-left:3px solid var(--rail-edge);
  padding:0;overflow:hidden;
  display:flex;flex-direction:column;z-index:40;transition:width .15s ease}
[data-theme="dark"] .sidebar{--rail:#16473f}

/* Administración: el menú deja el verde de marca y se va al índigo, con un
   filo a la izquierda. No es decoración: dice que las acciones de aquí son
   sobre cuentas ajenas, no sobre la tuya. */
.sidebar--admin{
  --rail:#332c5c;
  --rail-line:rgba(255,255,255,.11);
  --rail-txt:#bcb6e2;
  --rail-txt-strong:#f5f3ff;
  --rail-dim:#9b93c9;
  --rail-accent:#c4b5fd;
  --rail-hover:rgba(255,255,255,.08);
  --rail-active:rgba(255,255,255,.13);
  --rail-edge:#a78bfa;
  --rail-avatar-to:#4c1d95;
  --rail-avatar-ink:#f5f3ff}
[data-theme="dark"] .sidebar--admin{--rail:#241f45}
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;height:var(--top);
  padding:0 12px 0 16px;min-width:0}
.sidebar-brand-link{display:flex;align-items:center;gap:9px;min-width:0;
  color:var(--rail-txt-strong);text-decoration:none}
.sidebar-brand-link:hover{text-decoration:none}
.sidebar-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-collapse{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;
  border:0;border-radius:8px;background:transparent;color:var(--rail-dim);cursor:pointer;
  flex:0 0 auto}
.side-collapse:hover{background:var(--rail-hover);color:var(--rail-txt-strong)}
.side-collapse:focus-visible{outline:2px solid var(--rail-accent);outline-offset:1px}
.sidebar-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;padding:14px 10px 10px}
.side-cat{margin:14px 12px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rail-dim);line-height:1.2}
.side-cat:first-child{margin-top:4px}
.side-group{margin-top:6px}
.side-group:first-child{margin-top:0}
.side-group-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;margin:0;padding:7px 11px;border:0;border-radius:7px;background:transparent;
  color:var(--rail-dim);font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.2;cursor:pointer;text-align:left}
.side-group-btn:hover{background:var(--rail-hover);color:var(--rail-txt-strong)}
.side-group.has-active > .side-group-btn{color:var(--rail-accent)}
.side-group-main{display:inline-flex;align-items:center;gap:10px;min-width:0}
.side-group-main .side-ico{flex:0 0 auto;color:inherit}
.side-group-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-group-chevron{flex:0 0 auto;opacity:.65;transition:transform .15s ease}
.side-group.is-open .side-group-chevron{transform:rotate(180deg)}
.side-group-body{display:none;flex-direction:column;gap:1px;
  position:relative;margin:2px 0 4px 16px;padding:0 0 0 12px}
.side-group.is-open .side-group-body{display:flex}
.side-group-body::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:var(--rail-line);
  pointer-events:none;z-index:1}
.sideitem{position:relative;display:flex;align-items:center;gap:10px;
  padding:8px 11px;border-radius:7px;color:var(--rail-txt);font-weight:500;line-height:1.3}
.sideitem .side-ico{flex:0 0 auto}
.sideitem span{min-width:0}
/* Hijos: mismo tamano que el resto del menu, solo con su rail a la izquierda. */
.sideitem--child{padding:8px 11px;margin:0;border-radius:7px;font-weight:500;
  color:var(--rail-txt);gap:0;position:relative;z-index:0}
.sideitem .side-ico{color:var(--rail-dim);transition:color .12s ease}
.sideitem:hover{background:var(--rail-hover);color:var(--rail-txt-strong);text-decoration:none}
.sideitem:hover .side-ico{color:var(--rail-txt-strong)}
/* Activo: fondo apenas insinuado y una barra de acento pegada al borde. El
   color lo pone el icono y la barra, no un relleno que compita con el
   contenido. */
.sideitem.active{background:var(--rail-active);color:var(--rail-txt-strong);font-weight:600}
.sideitem.active .side-ico{color:var(--rail-accent)}
/* La barra se pega al borde del menu: el desplazamiento es el padding lateral
   del scroll, no el del item. */
.sideitem.active::before{content:"";position:absolute;left:-10px;top:4px;bottom:4px;
  width:3px;border-radius:0 3px 3px 0;background:var(--rail-accent)}
.sb-collapsed .sideitem.active::before{left:-8px}
.sideitem--child.active::before{left:-8px}
.sideitem--back{
  gap:6px;margin:0 0 4px;padding:6px 10px;border-radius:8px;
  color:var(--rail-dim);font-size:12px;font-weight:600;letter-spacing:.01em;
  background:transparent
}
.sideitem--back .side-back-chevron{flex:0 0 auto;opacity:.75}
.sideitem--back span{min-width:0}
.sideitem--back:hover{
  color:var(--rail-txt-strong);background:var(--rail-hover);text-decoration:none
}
.sideitem--back:hover .side-back-chevron{opacity:1}
/* Tras el escape, el grupo del dominio arranca el contexto */
.sideitem--back + .side-group{margin-top:2px;padding-top:6px;border-top:1px solid var(--rail-line)}
.side-ico{display:block}

/* Uso del mes al pie del sidebar. Era un aro de 72px con su porcentaje
   dentro: ocupaba casi tanto como cuatro items del menu para decir un dato
   que no se mira a diario. Ahora es una linea y una barra. */
.side-usage{flex:0 0 auto;padding:10px 12px 12px;
  display:flex;flex-direction:column;gap:7px;
  background:rgba(255,255,255,.035);border-top:1px solid var(--rail-line)}
.side-usage-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.side-usage-lbl{font-size:11px;font-weight:600;color:var(--rail-dim);letter-spacing:.02em}
.side-usage-num{font-size:11.5px;font-weight:700;color:var(--rail-txt-strong);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.side-usage-bar{height:4px;border-radius:999px;background:rgba(255,255,255,.14);
  overflow:hidden}
.side-usage-bar > span{display:block;height:100%;border-radius:inherit;
  background:#4ade80;transition:width .3s ease}
.side-usage-bar.is-warn > span{background:#fbbf24}
.side-usage-bar.is-err > span{background:#f87171}

/* ===== Menú plegado: solo iconos =====
   Restaurado en local: 0618103 se llevó este bloque al quitar el aro.
   El ancho sale del token, asi que el contenido y la barra de impersonacion
   siguen al menu sin reglas aparte. */
html.sb-collapsed{--sb:68px}
/* El tooltip y el menu de usuario salen del rail; si no, overflow los come. */
.sb-collapsed .sidebar{overflow:visible}

.sb-collapsed .sidebar-brand{padding:0 8px;justify-content:center}
.sb-collapsed .sidebar-brand-link{display:none}
.sb-collapsed .side-collapse{width:44px;height:44px}
/* Contraido el boton solo dice "ampliar": la flecha se da la vuelta. */
.sb-collapsed .side-collapse-ico{transform:scaleX(-1)}

.sb-collapsed .sidebar-scroll{padding:14px 8px 10px;gap:4px}
/* Plegado no cabe el rotulo del separador: queda la linea, que es lo que
   hace el trabajo de separar. */
.sb-collapsed .side-cat{font-size:0;margin:10px 8px;height:1px;background:var(--rail-line)}
.sb-collapsed .sideitem,
.sb-collapsed .side-group-btn{justify-content:center;gap:0;padding:9px 0}
.sb-collapsed .sideitem span,
.sb-collapsed .side-group-label,
.sb-collapsed .side-group-chevron{display:none}
.sb-collapsed .side-group-main{gap:0}
.sb-collapsed .side-group{margin-top:4px}
/* Los hijos no caben: el grupo se despliega al abrir el menu. Hace falta
   repetir .is-open para ganarle a la regla que lo abre. */
.sb-collapsed .side-group.is-open .side-group-body{display:none}
/* Enlaces sin icono (volver, atajos de cuenta) no dicen nada como cuadro vacio. */
.sb-collapsed .sideitem--back,
.sb-collapsed .side-usage{display:none}

.sb-collapsed .side-user{padding:8px}
.sb-collapsed .side-user .user-btn{justify-content:center;padding:8px 0}
.sb-collapsed .user-meta,
.sb-collapsed .user-chevron{display:none}
/* El menu de usuario se sale del ancho: se ancla al borde y crece a la derecha. */
.sb-collapsed .side-user .user-drop{left:calc(100% + 8px);bottom:0;min-width:230px}

/* Tooltip del menú plegado. Nodo único en el body: el sidebar recorta y hace
   scroll, asi que dentro quedaria cortado. */
.tip{position:fixed;z-index:60;transform:translateY(-50%);
  padding:6px 10px;border-radius:7px;background:var(--text);color:var(--surface);
  font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap;
  pointer-events:none;opacity:0;visibility:hidden;box-shadow:var(--shadow-md)}
.tip.is-on{opacity:1;visibility:visible}
.tip::before{content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left:0;border-right-color:var(--text)}
@media (prefers-reduced-motion:no-preference){
  .tip{transition:opacity .1s ease}
}

/* El contenido ocupa el hueco del sidebar a ancho completo (padding = gutter). */
.layout{flex:1 0 auto;width:100%;display:flex;flex-direction:column;min-height:0}
.content{padding:28px var(--gutter) 40px;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.page{width:100%;max-width:var(--content-max);margin:0;flex:1 1 auto;display:flex;
  flex-direction:column;min-width:0}
.has-sidebar .content{margin-left:var(--sb);transition:margin-left .15s ease}

/* ===== Formularios ===== */
input,select,textarea,button{font:inherit}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{
  width:100%;max-width:100%;padding:9px 11px;border:1px solid var(--border-strong);
  border-radius:10px;background:var(--surface);color:var(--text)}
textarea{min-height:88px;resize:vertical}
input:hover:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled){border-color:var(--input-hover-border)}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
input:disabled:not([type=range]),select:disabled,textarea:disabled{background:var(--surface-3);color:var(--muted);cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--brand);
  margin:0;flex:0 0 auto}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
/* Mano en controles clicables (select, fecha, archivo). Texto/búsqueda dejan I-beam. */
select,input[type=date],input[type=datetime-local],input[type=time],input[type=month],
input[type=week],input[type=file],input[type=range],summary{cursor:pointer}
/* Fecha: el icono nativo abre otro calendario. Lo quitamos y pintamos
   uno decorativo; el clic entero es del input. Hora: icono nativo. */
input[type=date]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]){
  background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
input[type=date]::-webkit-calendar-picker-indicator{display:none}
input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;pointer-events:none}
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator{cursor:pointer}

/* Calendario propio (el nativo no deja suavizar el recuadro de hoy). */
.ms-dp{position:fixed;z-index:80;width:252px;max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);overflow:auto;padding:10px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md)}
.ms-dp-nav{display:flex;align-items:center;gap:4px;margin:0 0 8px}
.ms-dp-title{flex:1;text-align:center;font-size:13px;font-weight:650;line-height:1.2}
.ms-dp-shift{flex:0 0 auto;display:inline-grid;place-items:center;width:28px;height:28px;
  padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);
  cursor:pointer}
.ms-dp-shift:hover{background:var(--surface-3);color:var(--text)}
.ms-dp-w,.ms-dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.ms-dp-w span{font-size:10px;font-weight:700;color:var(--muted);text-align:center;
  padding:2px 0;text-transform:capitalize}
.ms-dp-day{width:100%;aspect-ratio:1;border:0;border-radius:999px;padding:0;
  background:transparent;color:var(--text);font:inherit;font-size:12.5px;line-height:1;
  cursor:pointer}
.ms-dp-day.is-empty{visibility:hidden;pointer-events:none}
.ms-dp-day:hover:not(:disabled):not(.is-on){background:var(--surface-3)}
.ms-dp-day.is-today{font-weight:650;color:var(--brand-ink)}
.ms-dp-day.is-on{background:var(--brand);color:#fff;box-shadow:none;font-weight:650}
.ms-dp-day.is-off{opacity:.35;cursor:not-allowed}
/* Hora: popup de Edge (dos listas, celdas 36px, recuadro en el foco).
   Solo cambian hover/selección: teal en vez de gris. */
.ms-tp{position:fixed;z-index:80;display:flex;width:114px;padding:0;
  background:var(--surface);color:var(--text);
  border:1px solid #c8c8c8;border-radius:0;
  box-shadow:0 4px 16px rgba(0,0,0,.18)}
.ms-tp-col{flex:1 1 0;min-width:0;max-height:252px;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:none}
.ms-tp-col::-webkit-scrollbar{width:0;height:0}
.ms-tp-cell{-webkit-appearance:none;appearance:none;display:grid;place-items:center;
  width:calc(100% - 8px);height:32px;margin:2px 4px;padding:0;
  border:2px solid transparent;border-radius:2px;background:transparent;
  color:var(--text);font:inherit;font-size:13px;font-weight:400;
  font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;
  box-sizing:border-box}
.ms-tp-cell:hover:not(.is-on){background:rgba(13,148,136,.12)}
.ms-tp-cell.is-on{background:rgba(13,148,136,.28);color:var(--text);font-weight:400}
.ms-tp-cell.is-focus{border-color:var(--text)}
select{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647a78' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
/* Campo con etiqueta encima (patrón por defecto de los módulos). */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text)}
.field input,.field select,.field textarea{font-weight:400;font-size:15px}
.field-hint{font-weight:400;color:var(--muted);font-size:12px}

/* Fila etiqueta → valor. En pantallas anchas la etiqueta se queda en una
   columna estrecha: si no, el valor se iba al otro extremo del monitor. */
.field-row{display:grid;grid-template-columns:minmax(120px,240px) minmax(0,1fr) auto;
  gap:8px 20px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
.field-row:first-child{padding-top:0}
.field-row:last-child{border-bottom:0;padding-bottom:0}
.field-row > :first-child{color:var(--muted)}
.field-row code{background:var(--surface-3)}

/* Ficha de un envio: dos columnas. A la izquierda los datos, a la derecha los
   eventos en su franja gris. Lo tecnico va plegado: solo se mira cuando algo
   ha fallado. */
.msg-view{display:grid;grid-template-columns:minmax(0,60%) minmax(0,40%);gap:0;
  padding:0;overflow:hidden}
.msg-view-main{min-width:0;padding:22px 26px}
.msg-view-side{min-width:0;padding:22px 24px;background:var(--surface-2);
  border-left:1px solid var(--border)}
.msg-view-side h2{margin:0 0 16px;font-size:14px;font-weight:700;color:var(--text)}

/* Etiqueta a la izquierda, valor a la derecha: se leen en vertical, uno debajo
   de otro, sin cajas ni separadores verticales. */
.msg-kv{margin:0}
.msg-kv-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 20px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border)}
.msg-kv-row:last-child{border-bottom:0}
.msg-kv-row dt{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.msg-kv-row dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--text);
  overflow-wrap:anywhere}
.msg-view-break{word-break:break-all}


/* Cronologia: la hora encima de lo que paso, que en una columna estrecha una
   rejilla de tres columnas no cabe. */
.msg-tl{list-style:none;margin:0;padding:0}
.msg-tl-step{display:grid;grid-template-columns:16px minmax(0,1fr);gap:0 10px;align-items:start}
.msg-tl-dot{position:relative;display:block;width:16px;height:100%}
.msg-tl-dot::before{content:"";position:absolute;top:6px;left:4px;width:8px;height:8px;
  border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px var(--surface-2)}
.msg-tl-dot::after{content:"";position:absolute;top:17px;bottom:0;left:7px;width:2px;
  background:var(--border)}
.msg-tl-step:last-child .msg-tl-dot::after{display:none}
.msg-tl-step--ok .msg-tl-dot::before{background:var(--ok)}
.msg-tl-step--err .msg-tl-dot::before{background:var(--danger)}
.msg-tl-step--warn .msg-tl-dot::before{background:var(--warn)}
.msg-tl-step--info .msg-tl-dot::before{background:var(--brand)}
.msg-tl-body{min-width:0;padding:0 0 16px}
.msg-tl-step:last-child .msg-tl-body{padding-bottom:0}
.msg-tl-body time{display:block;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.msg-tl-label{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;
  font-weight:600;color:var(--text)}
.msg-tl-detail{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;
  color:var(--muted);overflow-wrap:anywhere}
.msg-view-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

@media (max-width:900px){
  .msg-view{grid-template-columns:1fr}
  .msg-view-side{border-left:0;border-top:1px solid var(--border)}
  .msg-kv-row{grid-template-columns:1fr;gap:2px;padding:10px 0}
}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;
  border-radius:8px;border:1px solid transparent;font-weight:600;font-size:14px;
  min-height:40px;cursor:pointer;text-decoration:none;white-space:nowrap;
  background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn:hover{text-decoration:none}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand);color:#fff;border-color:transparent;box-shadow:var(--shadow-xs)}
.btn-primary:hover:not(:disabled){background:var(--brand-700)}
.btn-ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover:not(:disabled){background:var(--surface-3)}
.btn-soft{background:var(--surface-3);border-color:transparent;color:var(--text);font-weight:600}
.btn-soft:hover:not(:disabled){background:var(--border)}
.btn-danger{background:var(--danger);color:#fff;border-color:transparent}
.btn-danger:hover:not(:disabled){background:var(--danger-hover)}
/* En oscuro --danger se aclara para poder leerse como texto: el boton
   solido necesita entonces tinta oscura. */
[data-theme="dark"] .btn-danger{color:#2b0a0a}
/* Borrar en una fila o en la zona de peligro: subordinado, pero inequívoco al
   apuntarlo. Antes tenía el mismo aspecto que "Ver". */
.btn-quiet-danger{background:transparent;border-color:transparent;color:var(--muted);font-weight:500}
.btn-quiet-danger:hover:not(:disabled){background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}
.btn-sm{padding:6px 11px;min-height:34px;font-size:13px;border-radius:7px}
.btn-lg{padding:14px 22px;min-height:52px;font-size:16px;border-radius:10px}
.btn-block{width:100%}
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn-sm{min-height:38px}
}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* ===== Alta en panel: progreso + composición ===== */
.setup-stage{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:4px 0 8px}
.setup-stage-inner{width:100%;max-width:640px;margin-inline:auto}
.setup-stage--compose{padding:0}
.setup-stage--compose .setup-stage-inner{max-width:none;margin:0;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-start}
.content:has(.setup-stage--compose){padding-top:18px;padding-bottom:14px}
.setup-stage--compose .onboard-progress{margin:0 0 14px;padding:0;background:transparent;border:0;
  flex:0 0 auto}
/* Grupo back+card bajo el stepper (arriba, no flotando a media altura). */
.setup-compose{flex:0 0 auto;width:100%;max-width:680px;margin:4px auto 0;display:flex;
  flex-direction:column;gap:10px}
.setup-stage--compose .back-link-row{margin:0}
.onboard-progress{margin:0 0 16px}
.onboard-progress--page{margin:0 0 18px;padding:0;background:transparent;border:0}
.onboard-progress ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;
  align-items:center}
.onboard-progress .is-locked{opacity:.72}
.onboard-progress .is-locked .onboard-progress-num{border-style:dashed;background:var(--surface-2)}
.onboard-progress-lock{display:block;font-size:11px;font-weight:500;color:var(--muted);
  letter-spacing:0;text-transform:none;margin-top:1px}
/* Alta: misma columna en pasos 1 y 2; ancha para que los valores DNS respiren. */
.content:has(.domain-flow){padding-top:12px;padding-bottom:4px}
.page:has(.domain-flow){justify-content:safe center}
@media (max-width:720px){.page:has(.domain-flow){justify-content:start}}
.domain-flow{width:100%;max-width:940px;margin-inline:auto}
.domain-flow .page-head{margin-bottom:6px;gap:8px}
.domain-flow .onboard-progress--page{margin:0 0 8px}
.domain-flow .onboard-progress-lock{display:inline;margin-left:6px}
.domain-add-card{max-width:none}
/* Paso 1 (alta): columna estrecha con aire, para que la página no quede
   vacía a lo ancho ni el formulario apelotonado. */
.domain-flow--add{max-width:620px}
.domain-flow--add .page-head{margin-bottom:14px}
.domain-flow--add .card{padding:22px}
.domain-add-sub{margin:6px 0 0;font-size:14px;font-weight:400;color:var(--muted)}
.domain-input-wrap{position:relative;display:block;font-weight:400}
.domain-input-wrap input{width:100%;padding-right:38px}
.domain-input-tick{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--ok);opacity:0;transition:opacity .15s ease;display:grid;place-items:center;
  pointer-events:none}
.domain-input-tick.is-on{opacity:1}
.domain-add-grid{display:grid;gap:10px;align-items:end;margin-bottom:8px}
.domain-add-grid .field{margin:0}
.domain-add-go{min-height:42px}
.domain-add-card .field-hint{margin:0 0 14px}
.domain-add-card #addError{margin:0 0 14px}
.from-preview{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:14px 16px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  transition:border-color .2s ease,background .2s ease}
.from-preview-lbl{font-size:13px;font-weight:600;color:var(--muted)}
.from-preview-addr{font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:700;letter-spacing:-.02em;
  color:var(--text);word-break:break-all;transition:color .2s ease}
.from-preview.is-live{border-color:var(--armed-border);background:var(--brand-050)}
.from-preview.is-live .from-preview-addr{color:var(--brand-ink)}
.domain-add-next{margin:14px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.domain-dns-card{margin:0 0 8px;padding:12px 14px}
.domain-dns-card .card-title{margin-bottom:2px}
.domain-dns-help{margin:0 0 6px;font-size:13px;line-height:1.35}
.domain-flow .dns-row{padding:6px 10px}
.domain-flow .dns-row-lbl{margin:0 0 3px}
.domain-flow .dns-name-tip{margin-top:4px;padding-top:6px}
/* SPF/DMARC con el mismo patrón NOMBRE/VALOR que el registro DKIM. */
.domain-flow .card{padding:14px 16px}
.dns-peer-stack .dns-auth-block + .dns-auth-block{margin-top:16px}
.dns-auth-block + .dns-auth-block{margin-top:14px}
.dns-auth-head{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.dns-auth-name{font-size:14px;font-weight:700}
.dns-row-sep{height:0;padding:0;border-top:1px dashed var(--border)}
.dns-row-hint{margin:3px 0 0;font-size:11px;color:var(--text-2)}
.dns-row-val--col{flex-direction:column;align-items:stretch;gap:6px}
.dns-auth-note{margin:6px 0 0;font-size:12.5px}
.dns-auth-note code{overflow-wrap:anywhere}
.domain-dns-footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.domain-dns-footer .dns-status{padding:0;border:0;background:transparent;border-radius:0}
.domain-dns-next-compact{margin:0 0 8px;font-size:13px;line-height:1.4;color:var(--text-2)}
.domain-dns-status-line{margin:0 0 6px;font-size:12.5px}
.domain-dns-next-actions{flex-wrap:wrap;align-items:center;gap:8px 10px}
.domain-dns-delete{margin-left:auto}
.domain-flow .dns-optional{max-width:none;margin:0;padding:10px 14px}
.domain-flow .dns-optional .card-title{font-size:13px;margin:0}
@media (min-width:720px){
  .domain-add-grid{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .domain-add-go{min-width:132px}
}
.onboard-progress li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
  min-width:0}
.onboard-progress li + li::before{content:"";width:16px;height:1px;margin:0 10px 0 2px;
  background:var(--border-strong);flex:0 0 auto}
.onboard-progress-num{flex:0 0 auto;width:22px;height:22px;border-radius:999px;display:inline-grid;
  place-items:center;font-size:11px;font-weight:700;border:1.5px solid var(--border-strong);
  color:var(--muted);background:var(--surface)}
.onboard-progress .is-now{color:var(--text);font-weight:600}
.onboard-progress .is-now .onboard-progress-num{background:var(--brand);border-color:var(--brand);color:#fff}
.onboard-progress .is-done{color:var(--text-2)}
.onboard-progress .is-done .onboard-progress-num{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok)}
.onboard-progress .is-todo .onboard-progress-label{color:var(--muted)}
.task{width:100%}
.task-field{width:100%}
.task-field + .field-hint,
.task > .field-hint{margin-top:8px}
.setup-stage .page-head{margin-bottom:14px}
.setup-stage .page-head h1{letter-spacing:-.02em;font-size:clamp(1.5rem,2.4vw,1.85rem)}
.setup-stage .page-head p{font-size:15px;line-height:1.5;max-width:36em}
.setup-stage .card{width:100%}

/* Paso 1: tablero en superficie (card). Dominio = composición corta. */
.setup-board{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px;
  justify-content:center;max-width:980px;width:100%;margin-inline:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:22px 24px 18px}
/* No estirar: la card abraza el contenido; el wrapper .setup-compose la centra. */
.setup-board--domain{flex:0 0 auto;max-width:none;width:100%;gap:18px;padding:28px 28px 24px;
  justify-content:flex-start;margin:0}
.setup-board-head h1{margin:0;letter-spacing:-.03em;font-size:clamp(1.55rem,2.6vw,1.95rem);line-height:1.15}
.setup-board-head p{margin:8px 0 0;font-size:15px;line-height:1.5;max-width:42em}
.setup-board--domain .setup-board-head{margin-bottom:4px}
.setup-board-task{display:grid;gap:10px;align-items:end}
.setup-board-task .task-field{margin:0}
.setup-board-field{min-width:0;display:flex;flex-direction:column;gap:8px}
.setup-board--domain .setup-board-task .task-field input{font-size:16px;letter-spacing:-.01em}
.setup-board-go{min-height:46px}
.setup-board-hint{margin:0}
.setup-board--domain #addError{margin:0}
.setup-board-foot{margin:0;font-size:13px;line-height:1.45;max-width:40em}
.from-hero{padding:16px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  display:flex;align-items:center;gap:14px;transition:border-color .2s ease,background .2s ease}
.from-hero-ico{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:inline-grid;place-items:center;
  background:var(--surface);color:var(--muted);border:1px solid var(--border);
  transition:color .2s ease,border-color .2s ease,background .2s ease}
.from-hero-text{min-width:0;display:flex;flex-direction:column;gap:4px}
.from-hero-lbl{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.from-hero-addr{font-size:clamp(1.25rem,2.4vw,1.65rem);line-height:1.2;letter-spacing:-.025em;
  color:var(--text);font-weight:700;word-break:break-all;font-variant-ligatures:none;
  transition:color .2s ease}
.from-hero.is-live{border-color:var(--armed-border);background:var(--brand-050)}
.from-hero.is-live .from-hero-ico{background:var(--surface);color:var(--brand-ink);
  border-color:var(--brand-soft-border)}
.from-hero.is-live .from-hero-addr{color:var(--brand-ink)}
.channel-grid{display:flex;flex-direction:column;gap:10px}
.channel-grid-title{margin:0;font-size:13px;font-weight:700;color:var(--text)}
.channel-grid-cards{display:grid;gap:10px}
.channel-card{padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.channel-card-ico{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:var(--brand-050);color:var(--brand-ink);margin-bottom:10px}
.channel-card h3{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--text)}
.channel-card p{margin:0;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.channel-card.is-armed{border-color:var(--armed-border);box-shadow:var(--shadow-xs)}
.setup-board-note{display:flex;align-items:flex-start;gap:12px;margin:2px 0 0;padding:12px 14px;
  background:var(--brand-050);border:1px solid var(--brand-soft-border);border-radius:var(--r)}
.setup-board-note-ico{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:inline-grid;place-items:center;
  background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow-xs)}
.setup-board-note p{margin:0;font-size:13.5px;line-height:1.45;color:var(--text-2);padding-top:5px}

/* Paso 3: elegir vía de envío. */
.connect-paths{display:grid;gap:12px;margin:0 0 12px}
.connect-path{padding:16px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  display:flex;flex-direction:column;gap:8px;min-width:0}
.setup-board .connect-path{box-shadow:none}
.connect-path-title{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.connect-path-body{margin:0;font-size:13.5px;line-height:1.45;color:var(--text-2);flex:1}
.connect-path .btn{align-self:flex-start;margin-top:4px}
.connect-paths-note{margin:0 0 8px;font-size:13px}
.back-link-row{margin:0 0 12px}
@media (min-width:720px){
  .setup-board-task{grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
  .setup-board--domain .setup-board-go{min-width:132px;margin-top:26px}
  .channel-grid-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .connect-paths{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}
@media (prefers-reduced-motion:no-preference){
  .setup-board{animation:setup-in .3s ease both}
  .channel-card.is-armed{transform:translateY(-2px)}
}
@keyframes setup-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.setup-info{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--border)}
.setup-info-title{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--text)}
.setup-info-body{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}
.setup-info-list{margin:0;padding:0 0 0 1.15em;list-style:disc}
.setup-info-list li{margin:0 0 7px;font-size:14px;line-height:1.45;color:var(--text-2)}
.setup-info-list li:last-child{margin-bottom:0}

/* Aviso de email sin verificar (suave, encima del DNS). */
.verify-gate--soft{background:var(--brand-050);border:1px solid var(--brand-soft-border);border-radius:var(--r);
  padding:14px 16px;margin:0 0 18px}
.setup-board .verify-gate--soft{margin:0}
.verify-gate--soft .verify-gate-title{font-size:15px;margin:0 0 4px}
.verify-gate--soft .verify-gate-text{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.45}
.verify-gate--primary{padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
.verify-gate--primary.verify-gate--ok .muted{color:var(--ok)}
.setup-board--verify{max-width:640px;justify-content:center}

/* Filas DNS del alta: Tipo/Nombre/Valor sin simular un panel ajeno. */
.setup-board--dns{gap:12px;justify-content:flex-start;max-width:980px}
.dns-panel{min-width:0}
.dns-rows{display:grid;gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  background:var(--surface-2)}
.dns-row{padding:12px 14px;background:var(--surface-2)}
.dns-row + .dns-row{border-top:1px solid var(--border)}
.dns-row-lbl{display:block;font-size:11px;font-weight:700;color:var(--muted);margin:0 0 6px;
  text-transform:uppercase;letter-spacing:.04em}
.dns-row-val{display:flex;align-items:flex-start;gap:10px}
.dns-row-val code{flex:1;min-width:0;font-size:12.5px;line-height:1.4;word-break:break-all;
  padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.dns-row-val .dns-value{white-space:pre-wrap;max-height:none;overflow:visible}
.dns-row-val .btn{flex:0 0 auto;margin-top:1px}
.dns-name-eg{display:grid;gap:8px;margin-top:12px}
@media (min-width:560px){.dns-name-eg{grid-template-columns:1fr 1fr}}
.dns-eg{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;font-size:13px}
.dns-eg code{display:block;margin-top:2px;font-size:12.5px;word-break:break-all}
.dns-eg-lbl{display:block;font-size:12px;font-weight:600}
.dns-eg-mark{flex:0 0 auto;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1}
.dns-eg-ok{background:var(--ok-bg);color:var(--text)}
.dns-eg-ok .dns-eg-mark{background:var(--ok);color:#fff}
.dns-eg-ok .dns-eg-lbl{color:var(--ok)}
.dns-eg-bad{background:var(--danger-bg);color:var(--text)}
.dns-eg-bad .dns-eg-mark{background:var(--danger);color:#fff}
.dns-eg-bad .dns-eg-lbl{color:var(--danger)}
.dns-eg-strike{text-decoration:line-through;opacity:.75}
.dns-status{padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.dns-status-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dns-status-copy{flex:1 1 200px;min-width:0}
.dns-status-title{display:block;font-size:13px;font-weight:700;color:var(--text)}
.dns-status-copy .muted{margin:2px 0 0;font-size:13px;line-height:1.4}
.dns-status-main .btn{margin-left:auto}
.dns-wait-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dns-delete-line{margin:4px 0 0}
.setup-board .dns-optional{margin:0;box-shadow:none;background:var(--surface-2);
  border:1px solid var(--border)}
.setup-board .dns-optional[style]{margin-top:0 !important}
.link-danger{background:none;border:0;padding:0;color:var(--danger);font:inherit;font-size:13px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link-danger:hover{color:var(--brand-900)}

.setup-board--connect{gap:14px;max-width:980px}
.setup-board--connect .connect-paths{margin:0}
.setup-board--connect .connect-paths-note{margin:0}
.connect-path-ico{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:var(--brand-050);color:var(--brand-ink);margin-bottom:10px}

/* Botón copiar (valores DNS, credenciales, snippets). */
.copy{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;
  border:1px solid var(--border-strong);background:var(--surface);border-radius:7px;
  cursor:pointer;font-size:12px;color:var(--muted);vertical-align:middle}
.copy:hover{background:var(--surface-3);color:var(--text)}

/* ===== Cabecera de página ===== */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:12px 16px;margin-bottom:20px}
.page-head > :first-child{min-width:0}
.page-head h1{margin:0}
.page-head p{margin:4px 0 0;color:var(--muted)}
.page-head-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Filtro junto al boton de alta. La regla global de input lleva varios :not()
   y gana por especificidad: hay que nombrar el contenedor para fijar el ancho. */
.list-toolbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;flex:0 0 auto}
.list-toolbar input.domain-search,.list-toolbar input.tenant-search{flex:0 0 200px;width:200px;min-width:0;
  margin:0;padding:6px 10px;font-size:13px;min-height:34px;border-radius:7px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text)}
.list-toolbar input.domain-search::placeholder,.list-toolbar input.tenant-search::placeholder{color:var(--placeholder)}
.list-toolbar input.domain-search:hover:not(:disabled),.list-toolbar input.tenant-search:hover:not(:disabled){border-color:var(--input-hover-border)}
.list-toolbar input.domain-search:focus,.list-toolbar input.tenant-search:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--focus-ring)}
.list-toolbar input.domain-search:disabled,.list-toolbar input.tenant-search:disabled{opacity:.45;cursor:not-allowed;
  background:var(--surface-3)}

/* Etiqueta discreta junto al nombre (dominio compartido). */
.cell-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:5px;
  background:var(--surface-3);color:var(--muted);font-size:11px;font-weight:600;
  vertical-align:1px}

/* Estado sin pill: punto de color y palabra. */
.status-dot{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:500;color:var(--text-2);white-space:nowrap}
.status-dot::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none}
.status-dot--ok{color:var(--ok)}
.status-dot--warn{color:var(--warn)}
.status-dot--err{color:var(--danger)}

/* Fila-enlace sin JS: el ancla se estira sobre toda la fila. Vale para
   cualquier tabla que marque .table-rows, no solo la de dominios. */
.table-rows tbody tr{position:relative}
.table-rows .row-link{font-weight:500}
.table-rows .row-link::after{content:"";position:absolute;inset:0;z-index:0}
.table-rows tbody tr:hover{background:var(--surface-2)}
/* Solo lo que ya era clicable sube por encima del enlace de fila. Elevar
   todos los hijos dejaba el badge de estado tapando la fila. */
.table-rows tbody td a:not(.row-link),
.table-rows tbody td button{position:relative;z-index:1}
.table-rows .row-link:focus-visible::after{outline:2px solid var(--brand);
  outline-offset:-2px;border-radius:4px}
#domainsTable td.cell-actions{text-align:right}
/* Título con el estado al lado: el estado es parte de la identidad de la
   página, no una fila más de una tabla de propiedades. */
.title-with-badge{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.title-with-badge .badge{font-size:12px}
/* El estado va centrado con el titulo: el <span> que lo envuelve heredaba el
   interlineado del h1 y lo dejaba caido. */
.title-with-badge > span{display:inline-flex;align-items:center;line-height:1}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--muted);text-decoration:none}
.back-link:hover{color:var(--brand-ink);text-decoration:none}

/* ===== Tarjetas ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
/* En grids/flex con gap propio, el margen hermano duplica el aire y descentra filas. */
.billing-info-grid > .card + .card,
.prefs-security-top > .card + .card,
.billing-main > .card + .card,
.billing-main > .card + .disclosure,
.billing-main > .disclosure + .card,
.billing-main > .billing-info + .card,
.billing-main > .card + .billing-info{margin-top:0}
.card-title{font-size:16px;margin:0 0 4px;font-weight:700;color:var(--text)}
.card-title + .muted{margin-bottom:14px}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
/* NORMA: si una tarjeta tiene titulo, ese titulo es una cabecera gris de lado
   a lado y el cuerpo va en blanco. Es la misma franja que .channel-head, y asi
   una tarjeta y un canal se leen igual en toda la aplicacion. */
.card > .card-title:first-child,
.card > .card-head:first-child{margin:-22px -22px 18px;padding:14px 22px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
/* Las cabeceras propias de cada pagina (una tarjeta cuyo primer hijo es su
   titulo con su accion al lado) siguen la misma norma, no cada una la suya. */
/* Campanas se queda como estaba: nadie pidio tocarla y su cabecera lleva un
   subtitulo debajo que en franja gris se lee peor. */
.card > .billing-info-card-head:first-child,
.card > .audience-contacts-results-head:first-child{margin:-22px -22px 18px;padding:14px 22px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
/* Las tarjetas de Seguridad y Datos fiscales titulan con .prefs-profile-section
   y algunas envuelven el titulo en su propia fila: misma norma para todas. */
.card > .prefs-profile-section:first-child,
.card > .prefs-security-head:first-child{margin:-22px -22px 18px;padding:14px 22px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.card > .prefs-security-head:first-child > .prefs-profile-section{margin:0}
.card > .card-head:first-child > .card-title{margin:0}
.cards-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:16px}
/* Las tarjetas hermanas ya tienen el espacio del grid. Sin esta excepción,
   `.card + .card` añade un margen fantasma y las filas arrancan descuadradas. */
.cards-2 > .card + .card{margin-top:0}
.section-title{font-size:16px;margin:24px 0 10px;font-weight:700}

/* ===== Métricas ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:20px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:var(--shadow);color:var(--text);display:block}
a.stat{transition:transform .12s ease,box-shadow .12s ease}
a.stat:hover{text-decoration:none;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat-num{font-size:28px;font-weight:700;color:var(--brand-ink);line-height:1.15;
  letter-spacing:-.02em;overflow-wrap:anywhere}
.stat-lbl{color:var(--muted);font-size:13px;margin-top:4px}
.stat-foot{font-size:12px;color:var(--muted);margin-top:8px}

/* Barra de progreso (límites de uso). */
.meter{height:8px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin-top:6px}
.meter > span{display:block;height:100%;border-radius:999px;background:var(--brand)}
.meter.is-warn > span{background:var(--warn)}
.meter.is-danger > span{background:var(--danger)}

/* ===== Tablas =====
   El wrapper lo añade assets/js/app.js: así todas las tablas del panel scrollan
   en horizontal sin que cada módulo tenga que envolverlas a mano. */
.table-wrap{width:100%;overflow-x:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
/* Si la tabla ya vive en una card, el wrap no pinta otra caja. */
.card .table-wrap{border:0;box-shadow:none;background:transparent;border-radius:0}
.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.table-wrap > .table{border:0;border-radius:0;box-shadow:none;min-width:680px}
/* Los layouts de tabla y fichas no deben mostrar estados ocultos por JS. */
.table[hidden],.table [hidden],.table-wrap[hidden]{display:none!important}
/* Listado con su barra de acciones: una sola caja, la barra arriba y la
   tabla debajo, para que el boton de alta este donde se actua y no perdido
   en la esquina de la pagina. */
.list-panel{background:var(--surface);border:1px solid var(--border);
  border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
/* Misma norma que .card-title: la cabecera del panel va en gris. */
.list-toolbar{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px 16px;padding:11px 14px;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.list-summary{margin:0;font-size:13px;color:var(--muted);line-height:1.4;
  white-space:nowrap}
.list-summary strong{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.list-summary span{margin:0 2px;opacity:.5}
.list-panel .table-wrap,.list-panel > .table{border:0;box-shadow:none;border-radius:0}
.list-panel .table-wrap{background:transparent}

/* Tenants de entrega: mismo patrón de listado que Dominios, con filtro GET
   compacto y el resumen dentro de la propia barra. */
.tenant-list-panel,.tenant-detail-list{margin-bottom:16px}
.tenant-list-filters{display:flex;flex:1 1 360px;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.tenant-list-filters select{flex:0 1 180px;width:180px;min-width:140px;margin:0;
  min-height:34px;padding:6px 30px 6px 10px;font-size:13px;border-radius:7px}
.list-toolbar input.tenant-search{flex:0 1 270px;width:270px}
.tenant-list-summary{max-width:100%}
.tenant-list-note{margin:4px 0 0;max-width:74ch;font-size:13px;line-height:1.45;color:var(--muted)}
#tenantInventory{min-width:760px;table-layout:fixed}
#tenantInventory th:nth-child(1),#tenantInventory td:nth-child(1){width:34%}
#tenantInventory th:nth-child(2),#tenantInventory td:nth-child(2){width:27%}
#tenantInventory th:nth-child(3),#tenantInventory td:nth-child(3){width:17%}
#tenantInventory th:nth-child(4),#tenantInventory td:nth-child(4){width:22%}
.tenant-overview{margin-bottom:16px}
.tenant-automation-card{margin-bottom:16px}
.tenant-automation-card .card-title{margin-bottom:6px}
.tenant-automation-card > .muted{margin:0;max-width:76ch}
.tenant-automation-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:16px}
.tenant-automation-rules p{margin:0;padding:11px 12px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:13px;line-height:1.45;color:var(--muted)}
.tenant-automation-rules strong{color:var(--text)}
.tenant-automation-current{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--muted)}
.tenant-automation-current strong{color:var(--text)}

/* Si el módulo oculta la tabla (listado vacío), el envoltorio no debe dejar
   una caja con borde flotando. */
.table-wrap:has(> .table[hidden]){display:none}
.card + .table-wrap,.card + .table,.table-wrap + .card,.table + .card,
.empty + .table-wrap,.table-wrap + .empty,.card + .empty,.empty + .card{margin-top:16px}
.table th,.table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);
  vertical-align:top}
.table th{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);font-weight:700;white-space:nowrap}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface-2)}
.table code{overflow-wrap:anywhere}
.table .btn{white-space:nowrap}
.cell-actions{white-space:nowrap}
.cell-actions-inner{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cell-nowrap{white-space:nowrap}
/* Aclaración bajo un valor de celda (qué falta, por qué está así). */
.cell-note{font-size:12px;margin-top:4px;max-width:34ch}
/* Badge en celda: alinear el TEXTO con el th, no el contenedor del pill.
   Compensa padding-inline (10px) + border (1px) del .badge. Una sola vez:
   no poner el mismo margen en .status-with-note (antes se aplicaba doble). */
.table td .badge{margin-inline-start:calc(-10px - 1px)}
/* Badge + nota en la misma línea (p.ej. dominio pendiente). */
.status-with-note{display:inline-grid;grid-template-columns:auto 1fr;align-items:center;gap:6px}
.status-with-note .cell-note{margin:0;max-width:none;font-size:11px;word-break:break-word}
.table .cell-num{text-align:center;font-variant-numeric:tabular-nums;font-weight:600;
  white-space:nowrap}
.table th.cell-num{font-weight:700;text-align:center}
/* Dominios: reparto fijo equitativo; cifras centradas; Acciones con aire y en una fila. */
#domainsTable{min-width:1080px;width:100%;table-layout:fixed}
#domainsTable th:nth-child(1),#domainsTable td:nth-child(1){width:20%}
/* Las cuatro columnas de cifras llevan barras debajo: necesitan mas ancho que
   cuando solo habia un numero. 20 + 4x15 + 20 (estado, mas abajo) = 100%. */
#domainsTable th.cell-num,#domainsTable td.cell-num{
  width:15%;padding-left:8px;padding-right:8px;text-align:center}

/* Barras de 30 dias bajo la cifra. Una sola serie por celda y sin eje: lo que
   se lee es la forma, no el valor, que ya esta en el numero de arriba.
   El tono es apagado a proposito para que la cifra siga mandando; la columna
   de rebotes hereda el tono de estado de su celda (.tone-* pone color). */
/* La fila la estira la barra, que va bajo la cifra. Sin esto, .table pone
   vertical-align:top y el dominio y el estado se quedaban arriba del todo
   mientras su fila bajaba hasta las barras. */
#domainsTable tbody td{vertical-align:middle}
#domainsTable .spark{
  display:flex;align-items:stretch;
  height:18px;margin:4px auto 0;max-width:120px;
  color:var(--muted)}
#domainsTable td.tone-ok .spark{color:var(--ok)}
#domainsTable td.tone-warn .spark{color:var(--warn)}
#domainsTable td.tone-err .spark{color:var(--danger)}
/* La barra ocupa todo el alto en transparente y pinta solo con ::after: asi se
   puede apuntar a cualquier altura de la columna y no solo al trocito pintado,
   que en un dia flojo son dos pixeles. El padding separa las barras y entra en
   la zona sensible, que con 30 barras en 120px hace falta. */
#domainsTable .spark i{
  flex:1 1 0;min-width:1px;position:relative;
  padding-inline:1px;cursor:default}
#domainsTable .spark i::after{
  content:'';position:absolute;left:1px;right:1px;bottom:0;
  height:var(--h,0%);
  /* Extremo redondeado anclado a la base: la barra crece hacia arriba. */
  border-radius:2px 2px 0 0;
  background:currentColor;opacity:.55}
/* Un dia a cero deja un punto en la base, no un hueco: asi se ve que el dia
   existe y no parece que falten datos. */
#domainsTable .spark i[data-v="0"]::after{
  height:2px;opacity:.22;border-radius:1px}
#domainsTable .spark i:hover::after{opacity:1}
@media (prefers-reduced-motion:no-preference){
  #domainsTable tr:hover .spark i::after{opacity:.85;transition:opacity .12s ease}
  #domainsTable .spark i:hover::after{opacity:1}
}

/* Tooltip de las barras. Mismo lenguaje que .overview-chart-tip de Inicio,
   pero position:fixed porque se coloca contra la ventana, no contra la celda. */
.spark-tip{position:fixed;z-index:60;min-width:104px;padding:8px 10px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-sm);box-shadow:var(--shadow);pointer-events:none}
.spark-tip[hidden]{display:none}
.spark-tip-date{display:block;font-size:12px;color:var(--muted);line-height:1.3;
  margin-bottom:6px}
.spark-tip-row{display:flex;align-items:center;gap:8px}
.spark-tip-swatch{display:block;width:8px;height:8px;border-radius:2px;
  background:var(--muted);flex:none}
.spark-tip-n{font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.2}
.spark-tip-lbl{font-size:12px;color:var(--text-2)}
#domainsTable .cell-num-link{color:inherit;text-decoration:none;font:inherit}
#domainsTable .cell-num-link:hover{color:var(--brand-ink);text-decoration:underline}
#domainsTable .cell-num-link.is-zero{color:var(--muted);font-weight:500}
#domainsTable .cell-num-link.is-pending{color:var(--brand-ink)}
/* El link de ordenación es width:100% + flex-start: sin esto el título
   queda a la izquierda y la cifra centrada no cae debajo. */
#domainsTable th.cell-num .th-sort-link{justify-content:center}
/* Dominio y estado tambien centrados: con las cuatro columnas de cifras
   centradas, dejarlos pegados a su borde partia la fila en dos alineaciones. */
#domainsTable th:first-child,#domainsTable td:first-child,
#domainsTable th:last-child,#domainsTable td.cell-status{text-align:center}
#domainsTable th:first-child .th-sort-link,
#domainsTable th:last-child .th-sort-link{justify-content:center}
#domainsTable th:last-child,#domainsTable td.cell-actions{
  width:20%;padding-left:20px;white-space:nowrap}
#domainsTable .cell-actions-inner{flex-wrap:nowrap;gap:8px}

/* Nombre + icono «entrar como» (solo clientes) */
.user-name-cell{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.user-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.impersonate-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;
  border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer;flex:0 0 auto}
.impersonate-icon:hover{color:var(--brand-ink);background:var(--brand-050);border-color:var(--brand-soft-border)}
.impersonate-icon:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Registros DNS: el nombre no debe partirse a mitad de palabra por falta de
   sitio; antes cede la columna del valor, que ya rompe donde sea. */
#recordsTable th:nth-child(1),#recordsTable td:nth-child(1){width:72px}
#recordsTable th:nth-child(2),#recordsTable td:nth-child(2){min-width:270px}
/* Log de envíos: el destinatario es el dato que se busca, así que se le reserva
   sitio para un email normal antes de dejar que se parta. */
#sendlogTable th:nth-child(3),#sendlogTable td:nth-child(3){min-width:200px}

/* ===== Badges ===== */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--surface-3);color:var(--text-2);border:1px solid transparent;white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-border)}
.badge-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border)}
.badge-err{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}
.badge-muted{background:var(--surface-3);color:var(--muted);border-color:var(--border)}

/* ===== Avisos ===== */
.alert{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border);
  padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:14px}
.alert-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-border)}
.alert-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border)}
.alert-info{background:var(--brand-050);color:var(--brand-ink);border-color:var(--brand-soft-border)}


/* Acordeón SPF/DMARC opcional en el wizard de dominio */
.dns-optional{display:block;padding:16px 18px}
.dns-optional-summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:8px 12px;user-select:none}
.dns-optional-summary::-webkit-details-marker{display:none}
.dns-optional-summary::before{content:"";width:0;height:0;border-left:5px solid var(--muted);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .12s ease;transform-origin:30% 50%;flex:0 0 auto;margin-top:0.35em}
.dns-optional[open] .dns-optional-summary::before{transform:rotate(90deg)}
.dns-optional-summary:hover .card-title{color:var(--brand-ink)}
.link-quiet{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:13px;
  text-decoration:underline;cursor:pointer}
.link-quiet:hover{color:var(--brand-ink)}

/* Bloque plegado: lo que solo hace falta de vez en cuando (ajustes de experto,
   registros ya publicados) no ocupa la pantalla hasta que se pide. */
.disclosure{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:0}
.disclosure + .disclosure{margin-top:12px}
.card + .disclosure,.disclosure + .card,.table-wrap + .disclosure{margin-top:16px}
/* Sin esto, un hijo con display:grid/flex (p.ej. .sendlog-filters) queda a la vista
   aunque el <details> esté cerrado. */
details.disclosure:not([open]) > *:not(summary){display:none !important}
.disclosure > summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 12px;padding:16px 20px;user-select:none;font-weight:700;color:var(--text)}
.disclosure > summary::-webkit-details-marker{display:none}
.disclosure > summary::before{content:"";width:0;height:0;border-left:5px solid var(--muted);
  border-top:4px solid transparent;border-bottom:4px solid transparent;flex:0 0 auto;
  transition:transform .12s ease;transform-origin:30% 50%;align-self:center}
.disclosure[open] > summary::before{transform:rotate(90deg)}
.disclosure > summary:hover{color:var(--brand-ink)}
/* Cabecera fija de un bloque que no se pliega (p.ej. datos de conexión SMTP):
   misma tipografía que el summary, sin chevron ni cursor. */
.disclosure-static > .disclosure-head{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 12px;padding:16px 20px;font-weight:700;color:var(--text)}
.disclosure-note{font-weight:400;font-size:13px;color:var(--muted)}
.disclosure-body{padding:0 20px 20px}
.disclosure-body > :first-child{margin-top:0}
/* Dentro de una tarjeta no queremos tarjeta-en-tarjeta: solo el desplegable. */
.card > .disclosure,.disclosure.is-plain{background:none;border:0;box-shadow:none;
  border-top:1px solid var(--border);border-radius:0;margin-top:14px}
.card > .disclosure > summary,.disclosure.is-plain > summary{padding:12px 0 0;font-size:14px}

/* Configuración de dominio: DNS siempre visible, tres columnas, sin disclosure. */
/* Sin padding propio: si no, la cabecera gris (que se saca con margenes
   negativos de -22px) no cuadra con la caja y queda distinta al resto. */
.domain-settings-dns{margin:0 0 16px}
.domain-settings-dns > .muted{margin:0 0 14px;font-size:13px;line-height:1.4}
.domain-settings-dns-grid{display:grid;gap:10px}
.domain-settings-dns-grid > p{grid-column:1/-1;margin:0}
/* Las tres cajas miden lo mismo aunque el valor DKIM ocupe más líneas:
   la columna es flex y la caja .dns-rows se estira hasta la más alta. */
.domain-settings-dns-grid .dns-auth-block{display:flex;flex-direction:column}
.domain-settings-dns-grid .dns-auth-block .dns-rows{flex:1 1 auto}
.domain-settings-dns .dns-auth-block + .dns-auth-block{margin-top:0}
.domain-settings-dns .dns-row{padding:8px 10px}
.domain-settings-dns .dns-row-lbl{margin:0 0 4px}
.domain-settings-dns .dns-row-val code{padding:6px 8px;font-size:12px;line-height:1.35}
.domain-settings-dns .dns-value{white-space:pre-wrap;max-height:4.6em;overflow:auto}
.domain-settings-dns .dns-recheck-line{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border)}
.domain-settings-byo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border)}
.domain-settings-byo .muted{margin:0;flex:1 1 240px;font-size:13px;line-height:1.4}
/* Tres ajustes distintos, tres tarjetas: cada una con su cabecera gris, como
   el resto de la aplicacion. Antes era una sola tarjeta partida con rayas. */
.domain-settings-cards{display:grid;gap:16px;margin:0 0 16px}
.domain-settings-cards > .card{margin:0;display:flex;flex-direction:column}
/* La pestana que no toca se esconde de verdad. Va DESPUES del display:flex de
   arriba: con la misma especificidad, manda la ultima. */
.settings-pane[hidden],
.domain-settings-cards > .card[hidden]{display:none}
.domain-settings-cards > .card > .muted{margin:0 0 12px;font-size:13px;line-height:1.45;
  max-width:70ch}
/* Una tarjeta por linea y el campo sin estirarse de lado a lado. */
.domain-settings-cards label{max-width:34rem}
.domain-settings-cards label{display:flex;flex-direction:column;gap:6px;margin:0;
  font-size:13px;font-weight:600;color:var(--text)}
.domain-settings-cards input.is-invalid{border-color:var(--danger)}
.domain-settings-cards input.is-invalid:focus{border-color:var(--danger)}
.domain-settings-cards .btn-row{margin-top:0;padding-top:14px}
.hook-secret{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.hook-secret .alert{margin:0 0 10px}
.hook-none{margin:18px 0 0}
.hook-table{margin-top:18px}
.hook-url{word-break:break-all;font-size:12.5px}

.domain-settings-hook-secret{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.domain-settings-hook-secret .muted{margin:0 0 8px;font-size:13px;line-height:1.4;max-width:64ch}
.domain-settings-hook-secret .alert{margin:0 0 10px}
.domain-settings-hook-secret .field-row{margin:0}
.domain-settings-hook-secret .btn-row{margin-top:10px}
.domain-settings .danger-zone{margin-top:0;padding:14px 16px}
@media (min-width:900px){
  .domain-settings-dns-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Zona de peligro: lo irreversible, al final y separado de todo lo demás. */
.danger-zone{margin-top:40px;border:1px solid var(--danger-border);background:var(--surface);
  border-radius:var(--r-lg);padding:18px 20px}
.danger-zone h2{font-size:15px;margin:0 0 4px;color:var(--danger)}
.danger-zone p{color:var(--muted);font-size:14px;margin:0 0 14px;max-width:64ch}
.danger-zone .alert{margin-top:12px}

/* Invitar va en la cabecera del panel, al lado del titulo. */
.domain-access-form{display:flex;flex-wrap:nowrap;gap:8px;margin:0;align-items:center}
.domain-access-form input[type=email]{width:min(100%,260px);margin:0;min-height:34px;
  padding:5px 10px;font-size:13px}
/* Umbral: panel colapsado bajo las metricas. */
.threshold-strip{display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-xs);padding:14px 16px;margin:-8px 0 18px;max-width:34rem}
.threshold-strip.is-open{display:block}
.threshold-strip-edit-title{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--text)}
.threshold-lifetime{margin:-4px 0 12px;font-size:12.5px}
.threshold-opt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 10px;
  font-size:13.5px;font-weight:500;cursor:pointer}
.threshold-opt input[type=radio]{margin:0}
.threshold-input-wrap{position:relative;display:inline-block;vertical-align:middle}
#thresholdInput{width:84px;margin:0;padding:5px 20px 5px 8px;text-align:right;font-size:13px;
  font-weight:400;min-height:32px}
.threshold-unit{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--muted);pointer-events:none}
.threshold-range{font-size:12px;font-weight:400}
.threshold-strip-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.threshold-strip.is-dirty #thresholdInput{border-color:var(--brand-soft-border)}
.dns-embed{padding-top:4px}
.dns-embed .card-title{margin-bottom:6px}

/* Estado vacío: card sólida (estilo consola limpia), icono + título + CTA. */
.empty{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:48px 28px;text-align:center;box-shadow:var(--shadow-xs)}
.empty-icon{display:inline-grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;
  border-radius:14px;background:var(--brand-050);color:var(--brand-ink)}
.empty-icon svg{width:26px;height:26px}
.empty h2{font-size:18px;margin:0 0 8px;letter-spacing:-.01em}
.empty p{color:var(--muted);max-width:42ch;margin:0 auto 18px;font-size:14px;line-height:1.5}
.empty .btn-row{justify-content:center}

/* ===== Audiencias y campañas =====
   Son flujos de trabajo, no paneles de métricas: se acotan para que formularios
   y estados vacíos conserven jerarquía aun en monitores anchos. */
/* Sin tope de ancho: el resto de paginas llenan el hueco y esta se quedaba
   corta en pantallas grandes. */
.feature-page{width:100%}
.feature-page-head{margin-bottom:2px}
.feature-intro-grid,.feature-detail-grid{display:grid;gap:16px;align-items:start;margin-top:16px}
.feature-intro-grid{grid-template-columns:minmax(0,1.35fr) minmax(290px,.95fr)}
.feature-detail-grid{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);margin-top:20px}
.feature-intro-grid > .card + .card,.feature-detail-grid > .card + .card{margin-top:0}
.feature-section{margin-top:20px}
.feature-empty{display:flex;align-items:center;justify-content:center;gap:18px;min-height:148px;
  margin-top:20px;padding:28px 32px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-xs);text-align:left}
.feature-empty-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:50px;height:50px;
  border-radius:14px;background:var(--brand-050);color:var(--brand-ink);font-size:22px}
.feature-empty h2{margin:0 0 4px;font-size:18px;letter-spacing:-.01em}
.feature-empty p{max-width:54ch;margin:0;color:var(--muted);font-size:14px}
.audience-create-card{margin-top:16px}
.audience-create-form{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;max-width:640px}
.audience-create-form > div{padding-bottom:1px}
.audience-overview-table td.cell-actions{text-align:right}
.audience-back-link{display:inline-block;margin:0 0 8px;color:var(--brand);font-size:13px;font-weight:600;text-decoration:none}
.audience-back-link:hover{text-decoration:underline}
.audience-contacts-summary{margin:0;line-height:1.5}
.audience-import-disclosure{margin-top:16px}
.audience-import-disclosure > summary .muted{font-weight:400}
.audience-import-disclosure-body{padding:0 20px 20px}
.audience-import-disclosure .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.audience-import-disclosure .audience-import-source,.audience-import-disclosure .audience-import-data,.audience-import-disclosure .audience-import-actions{grid-column:1 / -1}
.audience-import-source summary{cursor:pointer;color:var(--brand);font-weight:600;list-style-position:inside}
.audience-import-source[open] .field{margin-top:10px}
.audience-import-disclosure .audience-consent{flex-direction:row;align-items:center;gap:9px}
.audience-import-disclosure .audience-consent input[type=checkbox]{width:auto;margin-top:0}
.audience-import-disclosure .audience-consent>span{white-space:nowrap}
.audience-contacts-results{margin-top:16px}
.audience-contacts-results-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.audience-contacts-results-head .card-title,.audience-contacts-results-head p{margin:0}
.audience-contact-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0;padding:0 0 16px;border-bottom:1px solid var(--border)}
.audience-contact-toolbar input[type=search]{flex:1 1 260px;min-width:0;margin:0}
.audience-contact-toolbar select{flex:0 1 180px;width:180px;max-width:100%;margin:0}
.audience-contact-toolbar-actions{display:flex;flex-wrap:wrap;gap:8px}
.audience-contact-list{border-top:1px solid var(--border)}
.audience-contact-list-head,.audience-contact-row{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:16px;align-items:center}
.audience-contact-list-head{padding:10px 0;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.audience-contact-row{padding:12px 0;border-top:1px solid var(--border)}
.audience-contact-identity,.audience-contact-status{min-width:0;display:flex;flex-direction:column;gap:3px}
.audience-contact-identity code{overflow-wrap:anywhere}
.audience-contact-identity .muted,.audience-contact-status .muted{font-size:12px}
.audience-contact-state{font-size:13px;font-weight:600}
.audience-contact-state.is-subscribed{color:var(--ok)}
.audience-contact-state.is-pending{color:var(--warn)}
.audience-contact-state.is-unsubscribed{color:var(--danger)}
.audience-contact-actions{justify-self:end}
.audience-contact-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.audience-contacts-empty{margin:0;padding:8px 0}
.campaign-prereqs{display:grid;gap:10px;margin-top:16px}
.campaign-prereq{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface-2)}
.campaign-prereq-num{display:inline-grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--surface-3);color:var(--muted);font-size:12px;font-weight:700}
.campaign-prereq.is-ready .campaign-prereq-num{background:var(--ok-bg);color:var(--ok)}
.campaign-prereq-copy{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:1px}
.campaign-prereq-copy strong{font-size:14px;color:var(--text)}
.campaign-prereq-copy span{color:var(--muted);font-size:12.5px;line-height:1.35}
.campaign-safety-card{background:linear-gradient(135deg,var(--surface),var(--brand-050))}
.campaign-wizard{max-width:none}
.campaign-wizard-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.campaign-wizard-nav li{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 10px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:650}
.campaign-wizard-nav li span,.campaign-step-number{display:inline-grid;place-items:center;flex:0 0 auto;width:23px;height:23px;border-radius:50%;
  background:var(--surface-3);color:var(--muted);font-size:11px;font-weight:750}
.campaign-wizard-nav li.is-active{border-color:var(--brand-300);background:var(--brand-050);color:var(--brand-ink)}
.campaign-wizard-nav li.is-active span{background:var(--brand);color:#fff}
.campaign-wizard-nav li.is-complete span{background:var(--ok-bg);color:var(--ok)}
.campaign-wizard-step{margin-top:20px}
.campaign-step-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.campaign-step-heading h3{margin:1px 0 3px;font-size:16px;letter-spacing:-.01em}
.campaign-step-heading p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45}
.campaign-step-number{width:30px;height:30px;background:var(--brand-050);color:var(--brand-ink);font-size:12px}
.campaign-step-fields{max-width:none}
.campaign-estimate{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 12px;border:1px solid var(--brand-200);border-radius:var(--r);
  background:var(--brand-050);color:var(--brand-ink);font-size:13px;line-height:1.4}
.campaign-estimate strong{font-size:13px}
.campaign-estimate span{color:var(--muted)}
.campaign-placeholder-note{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.campaign-wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.campaign-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.campaign-review-grid > div{min-width:0;padding:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.campaign-review-grid .campaign-review-content{grid-column:1 / -1}
.campaign-review-grid dt{margin:0 0 5px;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.campaign-review-grid dd{margin:0;overflow-wrap:anywhere;color:var(--text);font-size:14px;font-weight:650}
.campaign-review-grid small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.campaign-review-checks{display:grid;gap:8px;margin-top:12px;padding:12px;border:1px solid var(--ok-border);border-radius:var(--r);background:var(--ok-bg)}
.campaign-review-checks p{margin:0;color:var(--ok);font-size:13px;line-height:1.4}
.campaign-section-heading,.campaign-detail-head,.campaign-detail-title,.campaign-editor-toolbar,.campaign-preview-head,.campaign-control-row{display:flex;align-items:center;gap:12px}
.campaign-section-heading,.campaign-detail-head{justify-content:space-between}
.campaign-section-heading .card-title,.campaign-section-heading p,.campaign-detail-head .card-title,.campaign-detail-head p{margin:0}
.campaign-section-heading p,.campaign-detail-head p{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.4}
.campaign-soft-label{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border-radius:999px;background:var(--brand-050);color:var(--brand-ink);font-size:12px;font-weight:700;white-space:nowrap}
.campaign-filter-form{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
.campaign-filter-form input[type=search]{flex:1 1 260px;min-width:0;margin:0}
.campaign-filter-form select{flex:0 1 180px;width:180px;max-width:100%;margin:0}
.campaign-filter-empty{margin:8px 0 0;padding:16px 0;color:var(--muted);border-top:1px solid var(--border)}
.campaign-state{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
.campaign-state.is-draft{background:var(--brand-050);color:var(--brand-ink)}
.campaign-state.is-scheduled,.campaign-state.is-sending{background:var(--ok-bg);color:var(--ok)}
.campaign-state.is-paused{background:var(--warn-bg);color:var(--warn)}
.campaign-state.is-cancelled{background:var(--danger-bg);color:var(--danger)}
.campaign-table th:last-child,.campaign-table td:last-child{padding-right:12px}
.campaign-editor-toolbar{justify-content:space-between;margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.campaign-editor-toolbar p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.campaign-wysiwyg{display:grid;gap:0}
.campaign-wysiwyg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
.campaign-wysiwyg-head label{font-weight:650}
.campaign-wysiwyg-workspace{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
/* Escribir / Vista previa: el mismo sitio, no una pestana que te saca del
   formulario. Mismo aspecto que el conmutador escritorio/movil de debajo. */
.campaign-view-switch{display:flex;flex:0 0 auto;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.campaign-view-switch button{border:0;border-radius:0;background:transparent;color:var(--muted);padding:5px 11px;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.campaign-view-switch button+button{border-left:1px solid var(--border)}
.campaign-view-switch button.is-active{background:var(--surface);color:var(--brand-ink)}
.campaign-wysiwyg > .campaign-preview-card{margin:0}
/* El area de trabajo es display:grid, y eso le gana al atributo hidden: sin
   esto el editor se quedaba a la vista debajo de la vista previa. */
.campaign-wysiwyg [data-editor-pane][hidden]{display:none}
/* Galeria de bloques: cuelga del primer boton de la barra del editor. Cada
   pieza se enseña dibujada, que "2 columnas" no dice como queda y el dibujo
   si. */
.campaign-block-gallery{display:grid;grid-template-columns:repeat(3,116px);gap:8px;padding:10px;max-width:none}
.campaign-block-item{display:grid;gap:7px;padding:9px 8px 8px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);color:var(--text);font:inherit;cursor:pointer;text-align:center}
.campaign-block-item:hover,.campaign-block-item:focus-visible{border-color:var(--brand);background:var(--brand-050);outline:0}
.campaign-block-art{display:grid;place-items:center;height:54px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--brand)}
.campaign-block-item:hover .campaign-block-art,.campaign-block-item:focus-visible .campaign-block-art{background:var(--surface)}
.campaign-block-art svg{display:block;width:64px;height:54px}
.campaign-block-name{font-size:12px;font-weight:650;line-height:1.2}
.campaign-wysiwyg-editor{min-width:0;background:var(--surface)}
.campaign-wysiwyg-source{margin:0;border:0;border-radius:0}
/* Jodit pinta su propia caja: se le quita el borde y las esquinas para que sea
   el recuadro del area de trabajo el que se vea, no dos marcos uno dentro de
   otro. El resto de su hoja se deja tal cual. */
.campaign-wysiwyg-editor .jodit-container{border:0;border-radius:0;background:var(--surface)}
.campaign-wysiwyg-editor .jodit-toolbar__box{border-radius:0}
.campaign-wysiwyg-editor .jodit-container:not(.jodit_inline) .jodit-workplace{border-radius:0}
.campaign-personalization{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:11px 12px;border:1px solid var(--brand-200);border-radius:var(--r);background:var(--brand-050)}
.campaign-personalization>div:first-child{display:flex;min-width:180px;flex:1 1 100%;flex-direction:column;gap:2px}
.campaign-personalization strong{font-size:13px;color:var(--brand-ink)}
.campaign-personalization p{margin:0;color:var(--muted);font-size:12px;line-height:1.35}
.campaign-personalization-actions{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:6px}
.campaign-personalization-actions .btn{white-space:nowrap}
.campaign-personalization-default{flex:1 1 100%;color:var(--brand-ink)!important}
.campaign-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:16px;align-items:start}
.campaign-editor-fields{display:grid;gap:14px}
.campaign-editor-fields .field{margin:0}
.campaign-preview-card{min-width:0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);overflow:hidden}
.campaign-preview-head{justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)}
.campaign-preview-head>div:first-child{display:flex;min-width:0;flex-direction:column;gap:1px}
.campaign-preview-head strong{font-size:13px;color:var(--text)}
.campaign-preview-head span{color:var(--muted);font-size:11.5px;line-height:1.35}
.campaign-preview-modes{display:flex;flex:0 0 auto;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.campaign-preview-modes button{border:0;border-radius:0;background:transparent;color:var(--muted);padding:5px 7px;font:inherit;font-size:11px;font-weight:650;cursor:pointer}
.campaign-preview-modes button+button{border-left:1px solid var(--border)}
.campaign-preview-modes button.is-active{background:var(--surface);color:var(--brand-ink)}
.campaign-preview-stage{display:flex;justify-content:center;min-height:300px;padding:10px;background:linear-gradient(135deg,var(--surface-3),var(--surface-2))}
.campaign-preview-frame{display:block;width:100%;height:360px;border:1px solid var(--border);border-radius:7px;background:#fff;transition:width .18s ease}
.campaign-preview-frame.is-mobile{width:320px;max-width:100%}
.campaign-review-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:12px;align-items:stretch}
.campaign-review-layout .campaign-review-grid{align-content:start}
.campaign-review-preview .campaign-preview-stage{min-height:0;padding:8px}
.campaign-review-preview .campaign-preview-frame{height:250px}
.campaign-detail-head{align-items:flex-start;margin-bottom:14px}
.campaign-detail-title{align-items:center;flex-wrap:wrap}
.campaign-detail-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}
.campaign-detail-meta>div{min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.campaign-detail-meta dt{margin:0 0 4px;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.campaign-detail-meta dd{margin:0;overflow-wrap:anywhere;color:var(--text);font-size:13px;font-weight:650}
.campaign-detail-explainer{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.45}
.campaign-edit-disclosure{margin:0 0 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.campaign-edit-disclosure>summary{padding:13px 14px;font-weight:700;cursor:pointer;list-style-position:inside}
.campaign-edit-disclosure>summary .muted{margin-left:5px;font-weight:400;font-size:12px}
.campaign-edit-body{padding:0 14px 14px}
.campaign-edit-actions{display:flex;justify-content:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.campaign-schedule-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;align-items:start;margin:0 0 16px;padding:14px;border:1px solid var(--brand-200);border-radius:var(--r);background:var(--brand-050)}
.campaign-schedule-panel h3{margin:0 0 4px;font-size:15px;color:var(--brand-ink)}
.campaign-schedule-panel p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.campaign-send-options{display:grid;gap:8px}
.campaign-send-option{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);cursor:pointer}
.campaign-send-option.is-selected{border-color:var(--brand-300);box-shadow:0 0 0 1px var(--brand-200)}
.campaign-send-option input{width:auto;margin:3px 0 0}
.campaign-send-option span{display:flex;flex-direction:column;gap:2px}
.campaign-send-option strong{font-size:13px;color:var(--text)}
.campaign-send-option small{color:var(--muted);font-size:12px;line-height:1.3}
.campaign-schedule-field{grid-column:2;margin:0}
.campaign-schedule-field[hidden]{display:none!important}
.campaign-schedule-field small{display:block;margin-top:5px;color:var(--muted);font-size:12px}
.campaign-control-row{flex-wrap:wrap;border-top:1px solid var(--border);padding-top:16px}
/* Guardar y probar van juntos; la nota de a donde llega la prueba, al lado. */
.campaign-edit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.campaign-test-hint{font-size:12.5px}
/* Pestanas que se ven: mas grandes, con la activa subrayada en la marca y una
   linea que las separa del panel. No son un menu discreto, son la navegacion
   de la pagina. */
.ms-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 20px;
  border-bottom:1px solid var(--border)}
.ms-tab{width:auto;min-height:0;padding:11px 18px;border:0;background:none;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px}
.ms-tab:hover{color:var(--text)}
.ms-tab.is-active{color:var(--brand-ink);border-bottom-color:var(--brand)}

/* Remitente: nombre y correo, uno al lado del otro. */
.campaign-from-row{display:grid;gap:16px 20px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.campaign-from-row > label{margin:0}

/* Destinatarios: filas campo = valor bajo las dos opciones. */
.campaign-segment{margin:0;padding:0;border:0;min-width:0}
.campaign-segment>legend{padding:0;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--text)}
.campaign-segment-rows{display:grid;gap:8px;margin-top:10px}
.campaign-segment-rows[hidden]{display:none!important}
.campaign-segment-rows>button{justify-self:start;width:auto}
.campaign-segment-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:8px}
.campaign-segment-row>button{width:auto;min-height:0}
.campaign-segment-eq{color:var(--muted);font-weight:700}
.campaign-segment-count{margin:10px 0 0;font-size:13px}
@media (max-width:600px){.campaign-segment-row{grid-template-columns:minmax(0,1fr) auto}.campaign-segment-eq{display:none}}

@media (max-width:900px){
  .feature-page{width:100%}
  .feature-intro-grid,.feature-detail-grid{grid-template-columns:1fr}
  .campaign-editor-grid,.campaign-review-layout,.campaign-schedule-panel{grid-template-columns:minmax(0,1fr)}
  .campaign-schedule-field{grid-column:auto}
}
@media (max-width:700px){
  .feature-empty{align-items:flex-start;justify-content:flex-start;min-height:0;padding:22px 20px}
  .audience-create-form,.audience-import-disclosure .form-grid{grid-template-columns:minmax(0,1fr)}
  .audience-import-disclosure .audience-import-source,.audience-import-disclosure .audience-import-data,.audience-import-disclosure .audience-import-actions{grid-column:auto}
  .audience-import-disclosure-body{padding:0 16px 16px}
  .audience-contact-toolbar{align-items:stretch}
  .audience-contact-toolbar input[type=search],.audience-contact-toolbar select{flex:1 1 auto;width:100%;max-width:none}
  .audience-contact-toolbar-actions{width:100%}
  .audience-contact-toolbar-actions .btn{flex:1 1 auto}
  .audience-contact-list-head{display:none}
  .audience-contact-row{grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:12px 0}
  .audience-contact-identity{grid-column:1;grid-row:1}
  .audience-contact-status{grid-column:1;grid-row:2}
  .audience-contact-actions{grid-column:2;grid-row:1 / span 2;align-self:center}
  .audience-contact-actions .btn{white-space:nowrap}
  .audience-contact-actions .btn-quiet-danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border);font-weight:600}
  .audience-contact-pager{justify-content:center}
  .campaign-prereq{align-items:flex-start;flex-wrap:wrap}
  .campaign-prereq .btn{width:100%}
  .campaign-wizard-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campaign-wizard-nav li{font-size:12px}
  .campaign-estimate{flex-direction:column;gap:4px}
  .campaign-review-grid{grid-template-columns:minmax(0,1fr)}
  .campaign-review-grid .campaign-review-content{grid-column:auto}
  .campaign-wizard-actions{align-items:stretch;flex-direction:column-reverse}
  .campaign-wizard-actions > *{width:100%}
  .campaign-section-heading,.campaign-detail-head,.campaign-editor-toolbar{align-items:flex-start;flex-direction:column}
  .campaign-personalization{align-items:flex-start;flex-direction:column}
  .campaign-personalization>div:first-child,.campaign-personalization-actions{width:100%;flex-basis:auto}
  .campaign-filter-form{align-items:stretch}
  .campaign-filter-form input[type=search],.campaign-filter-form select,.campaign-filter-form .btn{flex:1 1 auto;width:100%;max-width:none}
  .campaign-preview-head{align-items:flex-start;flex-direction:column}
  .campaign-preview-modes{width:100%}
  .campaign-preview-modes button{flex:1 1 50%}
  .campaign-preview-frame{height:300px}
  .campaign-detail-meta{grid-template-columns:minmax(0,1fr)}
  .campaign-edit-disclosure>summary .muted{display:block;margin:4px 0 0}
  .campaign-edit-actions .btn,.campaign-control-row .btn{width:100%}
}

/* ===== Bloques de código / snippets ===== */
.snippet{position:relative;background:#1c1a35;color:#e7e7f7;border-radius:var(--r);
  padding:14px 46px 14px 16px;overflow-x:auto;font-size:13px;line-height:1.6;margin:0}
.snippet code{background:none;padding:0;color:inherit;font-size:13px;white-space:pre}
.snippet .copy{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);color:#d9d9ee}
.snippet .copy:hover{background:rgba(255,255,255,.16);color:#fff}
.snippet-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.snippet-tab{padding:6px 12px;border:1px solid var(--border-strong);background:var(--surface);
  border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.snippet-tab[aria-selected=true]{background:var(--brand-050);border-color:var(--brand);color:var(--brand-ink)}

/* Datos de conexión (SMTP / API): pares clave-valor copiables. */
.conn{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 4px}
.conn-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px}
.conn-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.conn-val{display:flex;align-items:center;gap:8px;margin-top:3px;font-weight:600;
  overflow-wrap:anywhere;font-family:var(--mono);font-size:13.5px}

/* Área Cuenta: subnav + perfil. */
.account-nav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 20px;padding:4px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-xs)}
.pay-empty{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;
  width:100%;max-width:560px;margin:0;padding:36px 28px;box-sizing:border-box}
.pay-empty .badge{margin-bottom:4px}
.pay-empty h2{margin:0}
.pay-empty p{margin:0 0 8px;max-width:42ch}
.pay-empty .btn-row{justify-content:flex-start;width:100%}
#addCardForm{margin-top:0;max-width:720px}
#addCardForm .card-title{margin:0 0 6px}
#addCardForm > .muted{margin:0 0 8px;max-width:56ch}
.pay-setup-mount{padding:12px 0;min-height:48px}
.pay-setup-actions{margin-top:14px;justify-content:flex-start}
#payMethodsGrid.cards-2{margin-top:0}
#payMethodsGrid .billing-info-card-head{margin-bottom:12px;gap:10px 14px}
#payMethodsGrid .billing-info-card-head .card-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.prefs-security{display:flex;flex-direction:column;gap:16px;margin:0}
.prefs-security-card{margin:0;min-width:0}
.prefs-security-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 14px;margin-bottom:6px}
.prefs-security-head .prefs-profile-section{margin:0}
.prefs-security-card > .prefs-profile-section{margin:0 0 6px}
.prefs-security-lead{margin:0 0 14px;font-size:13.5px;line-height:1.45;max-width:64ch}
.twofa-idle-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 16px}
.twofa-idle-row .prefs-security-lead{margin:0;flex:1;min-width:min(100%,28ch)}
.prefs-security-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.prefs-security-hint{margin:10px 0 0;font-size:13px;line-height:1.45;max-width:52ch}
.prefs-security .prefs-security-pw-grid{max-width:560px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.prefs-security-sessions .table{margin-top:4px}
.prefs-security-sessions td.cell-status{white-space:nowrap}
.twofa-setup{margin-top:4px}
.twofa-setup-grid{display:grid;grid-template-columns:220px minmax(0,420px);gap:20px 28px;
  align-items:start;margin-top:14px}
.twofa-qr{display:flex;flex-direction:column;gap:10px;margin:0}
.twofa-qr img{display:block;width:200px;height:200px;padding:10px;background:#fff;
  border:1px solid var(--border);border-radius:var(--r)}
.twofa-qr-hint{margin:0;font-size:13px;max-width:22ch;line-height:1.45}
.twofa-setup-fields{display:flex;flex-direction:column;gap:12px;min-width:0}
.twofa-setup-fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;
  font-weight:600;color:var(--text)}
.twofa-setup-fields input,.twofa-setup-fields textarea{font-weight:400}
.twofa-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.twofa-uri-details{border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;
  background:var(--surface-2)}
.twofa-uri-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text)}
.twofa-uri-details[open] summary{margin-bottom:8px}
.twofa-uri-details textarea{width:100%;min-height:4.5em;resize:vertical;line-height:1.4;
  overflow-wrap:anywhere;word-break:break-all}
.twofa-codes{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  max-width:420px}
@media (max-width:720px){
  .prefs-security .prefs-security-pw-grid{grid-template-columns:1fr;max-width:none}
  .twofa-setup-grid{grid-template-columns:1fr}
}
/* Las pestanas pueden ser <a> o <button>: el boton trae borde y fondo del
   navegador y hay que apagarlos para que se vean igual. */
button.account-nav-item{border:0;background:none;font-family:inherit;cursor:pointer;
  width:auto;min-height:0}
.account-nav-item{padding:7px 14px;border-radius:calc(var(--r) - 2px);font-size:13px;
  font-weight:600;color:var(--muted);text-decoration:none;line-height:1.2;
  transition:background .12s ease,color .12s ease}
.account-nav-item:hover{color:var(--text);background:var(--surface-3);text-decoration:none}
.account-nav-item.is-active,.account-nav-item[aria-current=page]{background:var(--brand-050);
  color:var(--brand-ink)}
/* Pestanas y filtro comparten la cabecera gris del panel. Dentro de ella las
   pestanas no llevan su propia caja: seria una caja dentro de otra. */
.suppress-head{gap:10px 16px;align-items:center}
.suppress-tabs{margin:0;flex:1 1 auto;min-width:0}
.suppress-head .suppress-tabs{padding:0;background:none;border:0;box-shadow:none}
.suppress-head .suppress-toolbar{margin:0;flex:0 0 auto}
.suppress-tab-n{margin-left:6px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.account-nav-item.is-active .suppress-tab-n,
.account-nav-item[aria-current=page] .suppress-tab-n{color:var(--brand-ink)}
.suppress-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px}
.suppress-head .suppress-toolbar select{min-height:34px;padding:5px 10px;font-size:13px}
/* Buscar por destinatario, en la misma cabecera que las pestanas. */
/* Cada filtro debajo de la columna que filtra: una fila mas del thead, no una
   barra aparte donde hay que adivinar a que se refiere cada casilla. */
.table .filter-row td{padding:8px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--border)}
.table .filter-row input{width:100%;margin:0;min-height:32px;padding:4px 9px;
  font-size:13px;font-weight:400}
/* Motivo: el codigo del proveedor y, debajo, que significa. */
.cell-why-code{display:inline-block;font-size:12px}
.cell-why-code + .cell-why-txt{display:block;margin-top:3px;font-size:12.5px;
  line-height:1.4}
.suppress-toolbar label{font-size:13px;font-weight:600;color:var(--text-2)}
.suppress-toolbar select{min-width:min(100%,220px);max-width:280px}
.list-panel > .table-wrap,
.list-panel > .table{border:0;border-radius:0;box-shadow:none;background:transparent}
.list-panel > .empty{margin:0;border:0;border-radius:0;box-shadow:none;padding:32px 22px}
#suppressTable{width:100%;table-layout:fixed}
#suppressTable td{vertical-align:middle}
#suppressTable .cell-dom{width:22%}
#suppressTable .cell-to{width:26%}
#suppressTable .cell-dom,#suppressTable .cell-to{overflow-wrap:anywhere;white-space:normal}
#suppressTable .cell-when{width:18%;white-space:normal}
.table th.cell-check,.table td.cell-check{width:44px;padding-left:12px;padding-right:8px;
  text-align:center;vertical-align:middle}
.table .cell-check input{width:16px;height:16px;margin:0;accent-color:var(--brand);
  vertical-align:middle}
.prefs-profile{margin:0}
.prefs-profile-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.prefs-identity-avatar{flex-shrink:0;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;font-weight:700;color:var(--brand-ink);
  background:var(--brand-050);border:1px solid var(--brand-soft-border)}
.prefs-identity-title{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.prefs-identity-billing{margin-left:auto}
.prefs-profile-section{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--text);
  letter-spacing:-.01em}
.prefs-profile .form-grid{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
.prefs-fiscal-lead{margin:0 0 14px;font-size:13.5px;max-width:64ch}
.prefs-fiscal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* Facturación · una columna: tramo encima del extra. */
.billing-section-title{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--text);
  letter-spacing:-.01em}
.billing-shell{display:flex;flex-direction:column;gap:16px;max-width:720px}
.billing-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.billing-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.billing-info-card{padding:16px 18px;margin:0;height:100%;display:flex;flex-direction:column;
  gap:10px}
.billing-info-card-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:0;min-height:34px}
.billing-info-card-title{margin:0;font-size:14px;font-weight:700;color:var(--text);
  line-height:1.2}
.billing-info-card-head .btn{flex:0 0 auto}
.billing-kv{margin:0;display:flex;flex-direction:column;gap:10px}
.billing-kv > div{display:grid;gap:2px}
.billing-kv dt{font-size:12px;font-weight:600;color:var(--muted)}
.billing-kv dd{margin:0;font-size:13.5px;color:var(--text);line-height:1.4;overflow-wrap:anywhere}
.billing-info-empty{margin:0;font-size:13.5px;line-height:1.45}
.billing-card-line{margin:0;font-size:15px;font-variant-numeric:tabular-nums}
.billing-card-exp{margin:6px 0 0;font-size:13px}
.billing-inv-table{margin-top:0}
.table-wrap > .billing-inv-table{min-width:0}
.billing-inv-table th:last-child,.billing-inv-table td.cell-actions{text-align:right}
.billing-inv-no{font-size:12.5px}
.billing-invoices-empty{margin:0;font-size:14px}
.billing-plan,.billing-extra{margin:0}
.billing-plan .card-title,.billing-extra .card-title{margin:0 0 10px}
.billing-plan .volume-bar,.billing-extra .volume-bar{max-width:640px}
.billing-plan .plan-tier-usage{margin:0 0 6px;font-size:13.5px}
.billing-plan .plan-tier-lead{max-width:none}
.billing-plan .plan-tier-note{margin:0 0 12px}
.billing-plan .plan-tier-alert{margin:0 0 14px}
.billing-plan-pending{margin:8px 0 0;font-size:12.5px;color:var(--warn);line-height:1.4}
.billing-extra-intro{margin:0 0 14px;font-size:13.5px;line-height:1.45}
.billing-limit-meter{margin:0 0 14px}
.billing-limit-meter-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:6px}
.billing-limit-meter .meter{height:8px;margin-top:0}
.billing-inv-dl{border-radius:999px}
@media (max-width:720px){
  .billing-info-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .account-nav{gap:2px;padding:3px}
  .account-nav-item{padding:7px 10px;font-size:12.5px}
  .prefs-identity-billing{margin-left:0}
}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
  max-width:720px}
/* Alta en card ancha (API, webhooks…): rellenar el ancho útil, no un rail de 720. */
.card > .form-grid{max-width:none}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text)}
.form-grid input,.form-grid select,.form-grid textarea{font-weight:400}
.form-grid .col-2{grid-column:1 / -1}
.form-grid small{font-weight:400}
.form-grid .is-invalid{border-color:var(--danger)}
.form-grid .is-invalid:focus{border-color:var(--danger)}
.form-grid .field-error{color:var(--danger);font-size:12px;font-weight:400}

/* ===== Wizard de alta de dominio ===== */
.wizard-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 20px;flex-wrap:wrap}
.wizard-steps li a{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600}
.wizard-steps li a:hover{text-decoration:none;background:var(--surface-3)}
.wizard-steps li.is-current a{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-050)}
.wizard-steps li.is-done a{color:var(--ok);border-color:var(--ok-border);background:var(--ok-bg)}
.wizard-num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;
  background:var(--surface-3);color:var(--text);font-size:12px;flex:0 0 auto}
.wizard-steps li.is-current .wizard-num{background:var(--brand);color:#fff}
.wizard-steps li.is-done .wizard-num{background:var(--ok);color:#fff}
.wizard-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px}

/* ===== Tour guiado (coach marks) ===== */
/* Sin z-index en el contenedor: si no, la tarjeta queda bajo el target (10060). */
.ms-tour{position:fixed;inset:0;pointer-events:none}
.ms-tour-backdrop{position:fixed;inset:0;background:transparent;pointer-events:auto;z-index:10050}
.ms-tour-spot{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(20,20,50,.48);
  outline:2px solid var(--brand);outline-offset:2px;pointer-events:none;transition:top .15s,left .15s,width .15s,height .15s;
  background:transparent;z-index:10051}
.ms-tour-card{position:fixed;z-index:10070;width:min(340px,calc(100vw - 24px));padding:16px 16px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);
  pointer-events:auto;color:var(--text)}
.ms-tour-progress{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.ms-tour-title{font-size:16px;margin:0 0 6px;line-height:1.3}
.ms-tour-body{margin:0 0 14px;font-size:14px;color:var(--text-2);line-height:1.45}
.ms-tour-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.ms-tour-actions [data-tour-skip]{margin-right:auto}
body.ms-tour-active .ms-tour-target{position:relative;z-index:10060;pointer-events:auto}

/* ===== Soporte: tickets ===== */
.support-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.support-filter{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.support-filter:hover{text-decoration:none;background:var(--surface-3)}
.support-filter.is-active{background:var(--brand);border-color:transparent;color:#fff}
.support-subject-link{font-weight:600;color:var(--text);text-decoration:none}
.support-subject-link:hover{color:var(--brand-ink);text-decoration:underline}
.support-hint{font-size:12px;font-weight:600;color:var(--brand-ink);margin-top:2px}
.support-form{max-width:720px}
.support-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ticket-thread{display:flex;flex-direction:column;gap:12px}
.ticket-msg{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px}
.ticket-msg.is-staff{border-color:var(--brand-soft-border);background:var(--brand-050)}
.ticket-msg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 12px;margin-bottom:8px}
.ticket-msg-head strong{font-size:13px}
.ticket-msg-body{font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.support-reply{max-width:720px}
@media (max-width:700px){
  .support-form-grid{grid-template-columns:1fr}
}

/* ===== Logs de envío: filtros y paginación ===== */
.sendlog-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end}
.sendlog-filters label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text)}
.sendlog-filters input,.sendlog-filters select{font-weight:400}


/* Barra de filtros de Estadisticas: la caja; el reparto lo pone .filters-row. */
.sendlog-toolbar{margin:0 0 16px;display:block;padding:16px 18px;border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface);box-sizing:border-box}
/* Dentro del panel, los filtros son su cabecera gris: pierden borde y radio
   propios y se pegan a la tabla, que es lo que estan filtrando. */
.sendlog-panel{margin-bottom:16px}
.sendlog-panel > .sendlog-toolbar{margin:0;border:0;border-radius:0;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.sendlog-panel > .list-metrics{margin:0;padding:16px 16px 0}
.sendlog-panel > .table,
.sendlog-panel > .table-wrap{border:0;border-radius:0;box-shadow:none;background:transparent}
.sendlog-panel > .table-wrap > .table{border:0;border-radius:0;box-shadow:none}
.sendlog-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;padding:12px 16px;border-top:1px solid var(--border);font-size:13px}
/* NORMA de barra de filtros: una rejilla de campos con su etiqueta encima,
   todos iguales, y un pie con «Limpiar filtros» a la izquierda y «Mas filtros»
   + «Buscar» a la derecha. Nada de controles sueltos de distinto tamano. */
.filters-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px 16px}
.filters-row + .filters-row{margin-top:12px}
/* `display:grid` de la linea de arriba le gana al [hidden] del navegador, asi
   que plegar «Mas filtros» no plegaba nada. Hay que apagarlo aqui. */
.filters-row[hidden]{display:none}

/* Estado que ademas explica por que. El bocadillo es CSS: el title del
   navegador tarda un segundo, no se puede leer con el teclado y no se puede
   dar forma. Se marca con el punteado para que se sepa que hay algo que leer. */
.badge-why{position:relative;cursor:help;text-decoration:underline dotted currentColor;
  text-underline-offset:3px}
.badge-why::after,.badge-why::before{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease}
.badge-why::after{content:attr(data-why);position:absolute;z-index:40;
  top:calc(100% + 9px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:280px;padding:8px 10px;border-radius:8px;
  background:var(--text);color:var(--surface);box-shadow:var(--shadow);
  font-size:12px;font-weight:500;line-height:1.4;letter-spacing:0;text-align:left;
  text-transform:none;white-space:normal;text-decoration:none}
.badge-why::before{content:'';position:absolute;z-index:41;top:calc(100% + 3px);left:50%;
  margin-left:-6px;border:6px solid transparent;border-bottom-color:var(--text)}
.badge-why:hover::after,.badge-why:hover::before,
.badge-why:focus::after,.badge-why:focus::before{opacity:1;visibility:visible}
.badge-why:focus{outline:2px solid var(--focus-ring);outline-offset:2px}
/* La tabla vive dentro de .table-wrap, que recorta para poder hacer scroll
   lateral. En pantalla ancha no hace falta ese scroll y el bocadillo cabe. */
@media (min-width:900px){
  .sendlog-panel > .table-wrap{overflow:visible}
}
.filter-field{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0;
  font-size:13px;font-weight:600;color:var(--text)}
.filter-field > input,.filter-field > select{margin:0;width:100%;height:40px;min-height:40px;
  box-sizing:border-box;font-weight:400}
.filters-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;margin-top:14px}
.filters-foot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filters-clear{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--muted);text-decoration:none}
.filters-clear::before{content:'';width:13px;height:13px;flex:0 0 auto;
  background:currentColor;-webkit-mask:var(--ico-trash) center/contain no-repeat;
  mask:var(--ico-trash) center/contain no-repeat}
.filters-clear:hover{color:var(--danger)}
.filters-more-btn{display:inline-flex;align-items:center;gap:8px;width:auto;padding:0 4px;
  border:0;background:none;color:var(--brand-ink);font-size:13px;font-weight:600;cursor:pointer}
.filters-more-btn::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .12s ease}
.filters-more-btn.is-open::after{transform:rotate(-135deg) translate(-1px,-1px)}
.filters-more-btn:hover{color:var(--brand)}
.filters-more-count{display:inline-grid;place-items:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;background:var(--brand);color:#fff;font-size:11px}


/* Cabeceras ordenables: clic = asc/desc. */
.th-sort{padding:0 !important;vertical-align:middle}
button.th-sort-link{border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
.th-sort-link{display:inline-flex;align-items:center;gap:5px;width:100%;padding:12px 16px;
  color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:inherit}
.th-sort-link:hover{color:var(--brand-ink);text-decoration:none;background:var(--surface-3)}
.th-sort-ico{display:inline-block;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid var(--muted);opacity:.35;
  transition:opacity .12s ease,transform .12s ease}
.th-sort.is-active .th-sort-ico{opacity:1;border-top-color:var(--brand-ink)}
.th-sort.is-asc .th-sort-ico{transform:rotate(180deg)}
.th-sort.is-active .th-sort-link{color:var(--brand-ink)}
.list-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px}
.list-filter-lbl{font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.list-filter select{width:auto;min-width:160px;max-width:min(320px,100%);flex:0 1 240px;
  font-weight:500}

/* ===== Panel: puesta en marcha =====
   Una lista de tres pasos con el actual marcado, y acción solo en el actual.
   Sustituye a la fila de tarjetas-métrica: contar dominios y credenciales era
   repetir el menú con números. */
.setup{max-width:680px}
.setup-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:2px}
.setup-steps li{display:flex;align-items:center;gap:10px;padding:9px 0;color:var(--muted);font-size:14px}
.setup-steps li + li{border-top:1px solid var(--border)}
.setup-mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;
  background:var(--surface-3);color:var(--muted);font-size:12px;font-weight:700;flex:0 0 auto}
.setup-steps li.is-done{color:var(--text-2)}
.setup-steps li.is-done .setup-mark{background:var(--ok-bg);color:var(--ok)}
.setup-steps li.is-done .setup-label{text-decoration:line-through;text-decoration-color:var(--border-strong)}
.setup-steps li.is-current{color:var(--text);font-weight:600}
.setup-steps li.is-current .setup-mark{background:var(--brand);color:#fff}
.setup-now{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.setup-now-title{font-size:16px;margin:0 0 4px;font-weight:700}
.setup-now .muted{margin:0 0 14px}

/* Consumo del mes: una línea (vistas que aún la usan). */
.usage-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 16px;margin-top:24px;padding:14px 18px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-xs)}
.usage-line p{margin:0;color:var(--muted);font-size:14px}
.usage-line strong{color:var(--text);font-size:16px}
.usage-line a{font-size:13px}
.usage-figure{margin:0 0 6px;color:var(--muted);font-size:14px}
.usage-figure strong{color:var(--text);font-size:18px}

/* Dashboard de Inicio: el resumen arranca arriba, como el resto del panel. */
.home-dashboard{display:flex;flex-direction:column;justify-content:flex-start;flex:0 0 auto;
  width:100%;max-width:var(--content-max);margin:0 auto}

/* Resumen de Inicio: una tarjeta por metrica, con su grafica dentro. */
.overview-toolbar{display:flex;justify-content:flex-end;margin:0 0 12px}
/* Una sola tarjeta: titulo y periodo arriba, y dentro las cuatro metricas
   separadas por lineas y no por huecos, que son cuatro caras del mismo
   resumen. Sin overflow:hidden, que recortaba el tooltip de las graficas. */
.page-title{margin:0 0 14px}
.overview{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden}
/* Misma norma: la cabecera de las estadisticas, gris como las demas. */
.overview-head{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px 16px;padding:12px 16px;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.overview-head h2{margin:0;font-size:14px;font-weight:700;color:var(--text)}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  align-items:stretch}
.stat-card{display:flex;flex-direction:column;min-width:0;
  padding:12px 14px;border-right:1px solid var(--border)}
.stat-card:last-child{border-right:0}
.stat-card-action{align-self:flex-start;margin-top:5px;padding:0;border:0;
  background:none;color:var(--brand-ink);font:inherit;font-size:11.5px;
  font-weight:600;cursor:pointer}
.stat-card-action:hover{text-decoration:underline}
/* Cinco columnas en la ficha del dominio, dentro de la misma tarjeta que
   usa Inicio. */
.stats-row.domain-view-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.overview.domain-view-card{margin-bottom:16px}
@media (max-width:1080px){
  .stats-row.domain-view-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .stats-row.domain-view-metrics{grid-template-columns:1fr}
}
/* Titulo dentro de la barra de un listado. */
.list-title{margin:0;font-size:14px;font-weight:700;color:var(--text)}
.stat-card-lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);line-height:1.2}
.stat-card-val{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:5px 0 0;
  font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.03em;line-height:1.15;
  font-variant-numeric:tabular-nums}
.stat-card-val .badge{font-size:11.5px;font-weight:600;letter-spacing:0}
.stat-card-note{margin-top:4px;font-size:11.5px;color:var(--muted);line-height:1.35}
/* La grafica se pega al fondo de la celda. Sin sangrar a los bordes: para
   que el tooltip pueda salirse, la tarjeta no puede recortar. */
.stat-card-chart{display:flex;align-items:flex-end;margin:10px 0 0;position:relative;
  flex:1 1 auto;min-height:84px}
.stat-card-chart .overview-chart-plot{width:100%}
/* Semaforo de la tarjeta: tine la grafica (reusando el token de la linea) y
   la cifra. Va en la tarjeta y no en .overview-chart porque en la ficha del
   dominio la grafica no lleva ese envoltorio. */
/* El caso verde no redefine --ok: "--ok:var(--ok)" es un ciclo, la variable
   se invalida y la grafica acaba sin color. Hereda la del tema y ya esta. */
.stat-card--tone-warn{--ok:var(--warn)}
.stat-card--tone-err{--ok:var(--danger)}
.stat-card--tone-ok .stat-card-val{color:var(--ok)}
.stat-card--tone-warn .stat-card-val{color:var(--warn)}
.stat-card--tone-err .stat-card-val{color:var(--danger)}
/* Misma lectura en la columna Rebote del listado. */
.tone-ok{color:var(--ok)}
.tone-warn{color:var(--warn)}
.tone-err{color:var(--danger)}

@media (max-width:1080px){
  .stats-row{grid-template-columns:1fr 1fr}
  .stat-card:nth-child(2n){border-right:0}
  .stat-card:nth-child(-n+2){border-bottom:1px solid var(--border)}
}
@media (max-width:640px){
  .stats-row{grid-template-columns:1fr}
  .stat-card{border-right:0;border-bottom:1px solid var(--border)}
  .stat-card:last-child{border-bottom:0}
}

.period-tabs{position:relative;display:inline-flex;gap:2px;padding:3px;margin:0;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px}
.period-tabs > button{padding:5px 12px;border:0;border-radius:6px;background:transparent;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.2;
  cursor:pointer}
.period-tabs > button:hover{color:var(--text);background:var(--surface-3)}
.period-tabs > button[aria-current=page]{background:var(--surface);color:var(--brand-ink);
  box-shadow:var(--shadow-xs)}
.period-tabs > button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* Rango a medida: se abre sobre el selector sin empujar la cabecera. */
.period-custom{position:relative}
.period-custom > summary{list-style:none;padding:5px 12px;border-radius:6px;
  font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.2;cursor:pointer;
  white-space:nowrap}
.period-custom > summary::-webkit-details-marker{display:none}
.period-custom > summary:hover{color:var(--text);background:var(--surface-3)}
.period-custom > summary[aria-current=page]{background:var(--surface);color:var(--brand-ink);
  box-shadow:var(--shadow-xs)}
.period-custom-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;
  display:flex;align-items:flex-end;gap:8px;padding:12px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;
  box-shadow:var(--shadow-lg)}
.period-custom-panel{align-items:center}
.period-custom-panel input[type=date]{width:auto;min-width:140px;padding:5px 8px;
  min-height:32px;font-size:13px;border-radius:7px}
.period-custom-sep{color:var(--muted);font-weight:600}
@media (max-width:700px){
  .period-tabs{max-width:100%;flex-wrap:wrap}
  .period-custom{position:static;max-width:100%}
  .period-custom > summary{white-space:normal}
  .period-custom-panel{left:0;right:auto;width:100%;max-width:calc(100vw - 32px);
    display:grid;grid-template-columns:minmax(0,1fr);white-space:normal}
  .period-custom-panel input[type=date]{width:100%;min-width:0;max-width:100%}
  .period-custom-sep{text-align:center;line-height:1}
}
.overview-chart{margin:0;position:relative;display:flex;flex-direction:column;
  gap:6px;min-width:0}
.overview-chart-plot{min-height:84px;width:100%;overflow:visible}
.overview-chart-svg{display:block;width:100%;height:84px;max-width:none;color:var(--text);
  cursor:crosshair;overflow:visible;shape-rendering:geometricPrecision}
.overview-chart-svg .overview-baseline{stroke:var(--border-strong);stroke-width:1;
  vector-effect:non-scaling-stroke}
/* El relleno lo pinta un degradado del SVG; el color se le da al gradiente. */
.overview-chart-svg .overview-grad{color:var(--ok)}
.overview-chart-svg .overview-line{stroke:var(--ok);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;fill:none;vector-effect:non-scaling-stroke}
.overview-chart-svg .overview-now{fill:var(--surface);stroke:var(--ok);stroke-width:1.75;
  vector-effect:non-scaling-stroke}
.overview-chart.is-hover .overview-now{opacity:0}
.overview-cursor{display:none}
.overview-chart.is-hover .overview-cursor{display:block}
.overview-cursor-x{stroke:var(--text);stroke-width:1;opacity:.28;vector-effect:non-scaling-stroke}
.overview-cursor-dot{fill:var(--surface);stroke:var(--ok);stroke-width:2;
  vector-effect:non-scaling-stroke}
/* Piezas de la grafica grande (App::overviewChartSvg): escalas, segunda
   serie y leyenda. Inicio usa las mini, pero la grande sigue disponible. */
.overview-chart-svg .overview-grid{stroke:var(--border);stroke-width:1;
  vector-effect:non-scaling-stroke}
.overview-chart-svg .overview-y{fill:var(--muted);font-size:9.5px;font-weight:500;
  font-family:var(--font);font-variant-numeric:tabular-nums}
.overview-chart-svg .overview-x{fill:var(--muted);font-size:9.5px;font-weight:500;
  font-family:var(--font);text-rendering:geometricPrecision}
.overview-chart-svg .overview-x--now{fill:var(--text-2);font-weight:600}
.overview-chart-svg .overview-line--bounce{stroke:var(--danger);stroke-width:1.5}
.overview-chart-svg .overview-now--bounce{stroke:var(--danger)}
.overview-cursor-dot--bounce{stroke:var(--danger)}
.overview-chart-tip-swatch--bounce{background:var(--danger)}
.overview-chart-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px;
  margin:0;font-size:12px;font-weight:500;color:var(--text-2);line-height:1.3}
.overview-chart-legend-item{display:inline-flex;align-items:center;gap:6px}
.overview-chart-legend-item::before{content:'';width:8px;height:8px;border-radius:2px;
  background:var(--ok);flex:none}
.overview-chart-legend-item--bounce::before{background:var(--danger)}
.overview-chart-tip{position:absolute;z-index:3;min-width:108px;padding:8px 10px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-sm);box-shadow:var(--shadow);pointer-events:none}
.overview-chart-tip-date{display:block;font-size:12px;color:var(--muted);line-height:1.3;
  margin-bottom:6px}
.overview-chart-tip-row{display:flex;align-items:center;gap:8px}
.overview-chart-tip-row + .overview-chart-tip-row{margin-top:4px}
.overview-chart-tip-swatch{display:block;width:8px;height:8px;border-radius:2px;
  background:var(--ok);flex:none}
.overview-chart-tip-n{font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.2}
@media (prefers-reduced-motion:no-preference){
  .overview-chart-svg .overview-area{animation:overview-area-in .45s ease both}
  .overview-chart-svg .overview-line,.overview-chart-svg .overview-now{
    animation:overview-now-in .35s ease .12s both}
}
@keyframes overview-area-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes overview-now-in{
  from{opacity:0}
  to{opacity:1}
}
.overview-foot{margin:0;font-size:13px;color:var(--muted)}
.overview-foot a{font-weight:600}

/* Pulso de volumen en Inicio (estado + CTA; sin selector ni mock de pago). */
.plan-pulse{margin:18px 0 8px;padding:14px 18px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-xs)}
.plan-pulse-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.plan-pulse-title{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase}
.plan-pulse-line{margin:0;font-size:15px;line-height:1.45;color:var(--text);max-width:58ch}
.plan-pulse-line strong{font-variant-numeric:tabular-nums}
.plan-pulse-sep{margin:0 .35em;color:var(--muted)}
.plan-pulse-pay{margin:5px 0 0;font-size:12.5px}
.plan-pulse-pay a{font-weight:500}
.plan-pulse-actions{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0}

/* Tramo (Facturación): lectura compacta + edición bajo petición. */
.plan-tier{margin:0}
.plan-tier-head{margin:0 0 8px}
.plan-tier-head .card-title{margin:0}
.plan-tier-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  max-width:520px}
.plan-tier-summary{margin:0;font-size:15px;line-height:1.45;color:var(--text);
  font-variant-numeric:tabular-nums}
.plan-tier-summary strong{font-weight:700;letter-spacing:-.015em}
.plan-tier-sep{margin:0 .4em;color:var(--muted)}
.plan-tier-usage{margin:8px 0 0;font-size:13.5px;line-height:1.45}
.plan-tier-note{margin:6px 0 0;font-size:12.5px;line-height:1.45}
.plan-tier-alert{margin:10px 0 0}
.plan-tier-lead{margin:0 0 12px;font-size:13.5px;max-width:52ch;line-height:1.45}
.plan-tier-edit .volume-bar{margin:0 0 14px}
.plan-tier-effect{margin:0 0 12px;font-size:13px;line-height:1.45;max-width:52ch}

/* Barra de volumen (tramo + extra): track, knob y ticks. */
.volume-bar{--vb-knob:22px;--vb-track:8px;--vb-inset:11px;margin:0 0 4px}
.volume-bar-label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--text)}
.volume-bar-out{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:-.015em;
  line-height:1.3;color:var(--text);font-variant-numeric:tabular-nums}
.volume-bar input.volume-bar-out--edit{display:block;width:100%;max-width:100%;
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  font:inherit;font-size:15px;font-weight:700;letter-spacing:-.015em;line-height:1.3;
  color:var(--text);font-variant-numeric:tabular-nums}
.volume-bar input.volume-bar-out--edit:hover,
.volume-bar input.volume-bar-out--edit:focus,
.volume-bar input.volume-bar-out--edit:focus-visible{border:0;border-color:transparent;
  box-shadow:none;background:transparent}
.volume-bar input.volume-bar-out--edit:focus,
.volume-bar input.volume-bar-out--edit:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.volume-bar-control{position:relative}
.volume-bar-rail{position:relative;height:32px;display:flex;align-items:center}
.volume-bar-track{position:absolute;left:var(--vb-inset);right:var(--vb-inset);height:var(--vb-track);
  border-radius:999px;background:var(--surface-3);box-shadow:inset 0 1px 2px rgba(10,35,33,.08);
  pointer-events:none}
.volume-bar-fill{display:block;height:100%;width:var(--volume-pct,0%);border-radius:inherit;
  background:var(--brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.volume-bar-mark{position:absolute;top:50%;width:2px;height:12px;margin-top:-6px;
  background:color-mix(in srgb,var(--text) 28%,transparent);border-radius:1px;
  transform:translateX(-50%)}
.volume-bar-mark.is-on{background:color-mix(in srgb,var(--brand-900) 55%,transparent)}
.volume-bar input[type=range]{
  -webkit-appearance:none;appearance:none;position:relative;z-index:1;
  width:100%;height:32px;margin:0;padding:0;border:0;background:transparent;
  cursor:pointer}
.volume-bar input[type=range]::-webkit-slider-runnable-track{
  height:var(--vb-track);background:transparent;border:0}
.volume-bar input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:var(--vb-knob);height:var(--vb-knob);
  margin-top:calc((var(--vb-track) - var(--vb-knob)) / 2);
  border-radius:50%;background:var(--surface);border:2px solid var(--brand);
  box-shadow:var(--shadow);transition:box-shadow .12s ease,border-color .12s ease}
.volume-bar input[type=range]::-moz-range-track{
  height:var(--vb-track);background:transparent;border:0}
.volume-bar input[type=range]::-moz-range-thumb{
  width:var(--vb-knob);height:var(--vb-knob);border-radius:50%;
  background:var(--surface);border:2px solid var(--brand);box-shadow:var(--shadow);
  box-sizing:border-box}
.volume-bar input[type=range]:hover::-webkit-slider-thumb,
.volume-bar input[type=range]:focus-visible::-webkit-slider-thumb{
  border-color:var(--brand-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
.volume-bar input[type=range]:hover::-moz-range-thumb,
.volume-bar input[type=range]:focus-visible::-moz-range-thumb{
  border-color:var(--brand-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
.volume-bar input[type=range]:focus,
.volume-bar input[type=range]:focus-visible{outline:none}
.volume-bar-ticks{position:relative;height:34px;margin:2px var(--vb-inset) 0}
.volume-bar-tick{position:absolute;top:0;transform:translateX(-50%);
  padding:4px 2px 0;border:0;background:none;font:inherit;font-size:11.5px;
  font-weight:500;line-height:1.2;color:var(--muted);cursor:pointer;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.volume-bar-tick.is-on{color:var(--text);font-weight:600}
.volume-bar-tick:hover{color:var(--brand-ink)}
.volume-bar-tick:first-child{transform:translateX(0);text-align:left}
.volume-bar-tick:last-child{transform:translateX(-100%);text-align:right}
.volume-bar-tick.is-crowded{visibility:hidden;pointer-events:none}
.volume-bar--sparse .volume-bar-ticks{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);gap:10px;height:auto;min-height:40px}
.volume-bar--sparse .volume-bar-tick{position:static;transform:none;align-self:start;
  font-size:12px;white-space:normal;width:auto;min-width:0;max-width:none;
  overflow-wrap:anywhere;text-align:center}
.volume-bar--sparse .volume-bar-tick:first-child{text-align:left}
.volume-bar--sparse .volume-bar-tick:last-child{text-align:right}
.volume-bar.is-disabled{opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .volume-bar-fill,.volume-bar input[type=range]::-webkit-slider-thumb,
  .volume-bar input[type=range]::-moz-range-thumb{transition:none}
}
.plan-tier-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.plan-cap-details{margin:0 0 14px;max-width:52ch;border:0;padding:0}
.plan-cap-details > summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.plan-cap-details > summary::-webkit-details-marker{display:none}
.plan-cap-details > summary::before{content:'';width:.45em;height:.45em;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.plan-cap-details[open] > summary::before{transform:rotate(45deg)}
.plan-cap-body{margin-top:10px;padding-top:2px}
.plan-cap-field{display:flex;flex-direction:column;gap:6px;max-width:200px;margin:0 0 6px}
.plan-cap-hint{margin:0;font-size:12.5px;line-height:1.45}
@media (max-width:640px){
  .plan-pulse-main{align-items:stretch}
  .plan-pulse-actions{width:100%}
  .plan-pulse-actions .btn{flex:1 1 auto;justify-content:center}
  .plan-tier-field{max-width:none}
}

/* Tira de métricas ligeras sobre listados (Dominios / Envíos). */
.list-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin:0 0 18px}
.list-metrics.sendlog-metrics{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
@media (max-width:520px){
  .list-metrics.sendlog-metrics{grid-template-columns:1fr}
}
.list-metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow-xs)}
a.list-metric--link{display:block;color:inherit;text-decoration:none}
a.list-metric--link:hover{border-color:var(--brand-soft-border);box-shadow:var(--shadow)}
a.list-metric--link:hover .list-metric-num{color:var(--brand-ink)}
a.list-metric--link.is-pending .list-metric-num{color:var(--brand-ink)}
a.list-metric--link.is-active{border-color:var(--brand-soft-border);box-shadow:var(--shadow)}
a.list-metric--link.is-active .list-metric-num{color:var(--brand-ink)}
.list-metric-num{display:block;font-size:22px;font-weight:700;color:var(--text);
  letter-spacing:-.02em;line-height:1.15}
.list-metric-lbl{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);font-weight:500}

/* Encabezado de sección con enlace a la vista completa. */
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 16px;margin:28px 0 10px}
.section-head .section-title{margin:0}
.section-head a{font-size:13px}
.home-domains{margin:0 0 28px}
.home-domains .section-head{margin-top:0}

/* ===== Autenticación (login, signup, forgot, reset, verify) ===== */
/* El fondo anterior era un radial descentrado al 20/20: una mancha lechosa
   fuera de eje que no casaba con la tarjeta. Ahora el lienzo es simétrico;
   dos halos de marca arriba y abajo del eje central, más una rejilla muy
   tenue que se desvanece hacia los bordes. */
body.auth{display:block;min-height:100vh;min-height:100dvh;background:var(--bg);
  color:var(--text)}
body.auth::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58rem 34rem at 50% -8%,var(--auth-glow-1),transparent 62%),
    radial-gradient(48rem 30rem at 50% 108%,var(--auth-glow-2),transparent 62%)}
body.auth::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--auth-grid-opacity);
  background-image:
    linear-gradient(to right,var(--auth-grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--auth-grid) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(52rem 42rem at 50% 45%,#000 35%,transparent 85%);
  mask-image:radial-gradient(52rem 42rem at 50% 45%,#000 35%,transparent 85%)}

.auth-shell{position:relative;z-index:1;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:40px 16px}

.auth-card{width:100%;max-width:416px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:16px;
  padding:clamp(24px,4vw,34px)}

.auth-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.auth-brand{display:inline-flex;min-width:0}
.auth-brand:hover{text-decoration:none}
.auth-brand .brand-mark{width:44px;height:44px;border-radius:10px}
.auth-theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer}
.auth-theme-toggle[hidden],.auth-theme-sun{display:none}
.auth-theme-toggle:hover{background:var(--surface-3);color:var(--text)}
.auth-theme-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[data-theme="dark"] .auth-theme-moon{display:none}
[data-theme="dark"] .auth-theme-sun{display:block}

.auth-title{font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.2;
  margin:18px 0 0;color:var(--text)}
.auth-tag{color:var(--muted);font-size:14.5px;margin:8px 0 0}
/* El primer bloque tras la cabecera abre el cuerpo del formulario. */
.auth-card form,.auth-card .alert,.auth-card > .btn{margin-top:22px}
.auth-card .alert{margin-bottom:0}
.auth-card .alert + form{margin-top:16px}

/* ===== Campos ===== */
.auth-field{display:block;margin-bottom:16px}
.auth-field > span{display:block;font-size:13px;font-weight:600;color:var(--text-2);
  margin-bottom:7px}
.auth-field > span.auth-label-row{display:flex;align-items:baseline;
  justify-content:space-between;gap:12px}
.auth-label-link{font-weight:500;font-size:12.5px;color:var(--brand-ink)}
.auth-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}

.auth-card input:not([type=checkbox]):not([type=radio]){
  width:100%;min-height:44px;padding:11px 13px;font-size:15px;
  border:1px solid var(--border-strong);border-radius:10px;
  background:var(--surface);color:var(--text);
  transition:border-color .12s ease,box-shadow .12s ease}
.auth-card input:hover:not(:focus):not(:disabled){border-color:var(--input-hover-border)}
.auth-card input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--focus-ring)}
/* Código TOTP: seis dígitos, se leen mejor espaciados y en monoespaciada. */
.auth-code{font-family:var(--mono);font-size:20px;letter-spacing:.34em;text-align:center}

/* Ver/ocultar contraseña. El botón lo inyecta inc/auth_foot.php. */
.pw-wrap{display:block;position:relative}
.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:inline-grid;place-items:center;width:34px;height:34px;padding:0;
  border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.pw-toggle:hover{background:var(--surface-3);color:var(--text-2)}
.pw-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ===== Acciones y pie ===== */
.auth-card .btn{width:100%;min-height:46px;font-size:15px;border-radius:10px}
.auth-card .btn-primary{font-weight:650;letter-spacing:.01em;background:var(--brand);
  box-shadow:none;transition:background-color .12s ease}
.auth-card .btn-primary:hover:not(:disabled){background:var(--brand-700)}
.auth-card .btn-primary:active:not(:disabled){background:var(--brand-900)}
.auth-card .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.auth-card form .btn{margin-top:4px}

.auth-extra{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border);
  font-size:13.5px;text-align:center;color:var(--muted)}
.auth-extra a{font-weight:600}
/* Selector de idioma bajo la tarjeta. Desplegable, no pestañas: con tres o
   cuatro idiomas las pestañas ya no caben. Con JS el <select> se oculta y lo
   sustituye .lang: la lista del nativo la pinta el sistema y no hay forma de
   que encaje con el resto de la interfaz. */
.auth-foot{display:flex;justify-content:center}
.auth-lang{position:relative;display:inline-flex;align-items:center;gap:6px}
.auth-lang-ico{position:absolute;left:11px;color:var(--muted);pointer-events:none}
.auth-lang select{width:auto;min-width:150px;padding:7px 32px 7px 32px;
  font-size:13px;font-weight:600;color:var(--text-2);
  border:1px solid var(--border);border-radius:999px;background-color:var(--surface);
  background-position:right 11px center;box-shadow:var(--shadow-xs)}
.auth-lang select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--focus-ring)}
.auth-lang.has-menu select,.auth-lang.has-menu .auth-lang-ico{display:none}

.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;
  border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);
  color:var(--text-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .12s ease,color .12s ease}
.lang-btn:hover{border-color:var(--input-hover-border);color:var(--text)}
.lang-btn:focus-visible{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--focus-ring)}
.lang-caret{color:var(--muted);transition:transform .15s ease}
.lang.is-open .lang-caret{transform:rotate(180deg)}

/* Abre hacia abajo: el selector va bajo la tarjeta y hacia arriba el menu se
   le montaba encima. */
.lang-list{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  min-width:180px;padding:5px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:0 8px 24px -12px rgba(10,35,33,.35);display:none;z-index:30}
.lang.is-open .lang-list{display:block}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:9px 11px;border:0;border-radius:7px;background:transparent;
  color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.lang-opt:hover,.lang-opt:focus-visible{background:var(--surface-3);outline:none}
.lang-opt .lang-tick{color:var(--brand);opacity:0;flex:0 0 auto}
.lang-opt.is-on{color:var(--brand-ink);font-weight:600}
.lang-opt.is-on .lang-tick{opacity:1}

@media (prefers-reduced-motion:reduce){
  .auth-card input,.auth-card .btn-primary{transition:none}
  .auth-card .btn-primary:hover:not(:disabled){transform:none}
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Portátiles estrechos: el bloque de usuario no cabe entero. */
@media (max-width:1180px){
  .user-meta{max-width:140px}
}

@media (max-width:1080px){
  :root{--gutter:20px}
  .topbar{gap:12px}
}

/* Tablet y móvil: el sidebar pasa a ser el drawer del hamburguesa. */
@media (max-width:900px){
  :root{--gutter:16px}
  .topbar{display:flex;gap:10px;padding:0 12px}
  .layout{min-height:calc(100vh - var(--top))}
  .has-sidebar .topbar,
  .has-sidebar .impersonate-banner{margin-left:0}
  .has-sidebar .impersonate-banner{top:var(--top)}
  .topbar-brand{display:flex}
  .nav-toggle{display:inline-flex}

  .sidebar{display:none;position:fixed;left:8px;right:8px;top:calc(var(--top) + 8px);
    bottom:auto;width:auto;max-height:calc(100vh - var(--top) - 24px);flex-direction:column;
    padding:0;overflow:hidden;border:1px solid var(--border);
    border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:35;transform:none}
  /* El `border` de arriba borra los cuatro lados: el filo de Administración se
     repone para que el cajón también diga dónde estás. */
  .sidebar--admin{border-left:3px solid var(--rail-edge)}
  .sidebar-brand{display:none}
  /* El cajon del movil se abre entero: el plegado de escritorio no cuenta. */
  html.sb-collapsed{--sb:248px}
  .sb-collapsed .sideitem span,
  .sb-collapsed .side-group-label,
  .sb-collapsed .side-group-chevron,
  .sb-collapsed .user-meta,
  .sb-collapsed .user-chevron{display:initial}
  .sb-collapsed .side-group.is-open .side-group-body{display:flex}
  .sb-collapsed .sideitem,
  .sb-collapsed .side-group-btn{justify-content:flex-start;gap:10px}
  .sb-collapsed .sideitem{padding:10px 12px}
  .sb-collapsed .side-group-btn{padding:8px 12px}
  .sb-collapsed .side-group-main{gap:10px}
  .sb-collapsed .side-usage{display:flex}
  .tip{display:none}
  body.nav-open .sidebar{display:flex}
  body.nav-open .nav-backdrop{display:block;position:fixed;inset:var(--top) 0 0 0;
    background:rgba(10,35,33,.32);z-index:25;border:0;padding:0;margin:0}
  .sidebar-scroll{padding:10px}
  .side-cat{margin:12px 12px 4px}
  .sideitem{justify-content:flex-start;padding:12px 14px;
    border:0;border-radius:9px;font-size:15px}
  .sideitem--child{padding:8px 10px;border-radius:7px;font-size:13px}
  .has-sidebar .content{margin-left:0}

  .content{padding:20px var(--gutter) 32px}
  .card{padding:18px;border-radius:var(--r)}
  .stats{gap:12px}
  .overview-body{grid-template-columns:1fr}
  .overview-primary{border-right:0;border-bottom:1px solid var(--border)}
}

/* Móvil: una sola columna en todo y tablas como fichas. */
@media (max-width:700px){
  .msg-view-main,.msg-view-side{padding:18px}
  .field-row{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .field-row > :first-child{font-size:12px;text-transform:uppercase;letter-spacing:.04em}
  /* Igual que las tarjetas, el mínimo automático de `1fr` puede adoptar el
     ancho intrínseco de un input. Cero evita que un formulario rompa el
     viewport estrecho. */
  .form-grid,.sendlog-filters{grid-template-columns:minmax(0,1fr)}
  .sendlog-filter-actions .btn{flex:1}
  /* `1fr` conserva un mínimo automático: un control nativo puede ensanchar
     la pista y provocar scroll lateral. El mínimo explícito permite que la
     tarjeta se adapte al ancho real del móvil. */
  .cards-2{grid-template-columns:minmax(0,1fr)}
  .empty{padding:36px 20px}
  .page-head{gap:12px}
  .page-head-actions{width:100%}
  .page-head-actions .btn{flex:1 1 auto}
  .wizard-actions .btn{flex:1 1 auto}

  /* Cada fila pasa a ser una ficha con la etiqueta de su columna delante
     (data-label lo rellena app.js leyendo el thead). */
  .table-wrap{border:0;background:none;box-shadow:none;overflow:visible;border-radius:0}
  .table-wrap > .table,.table{min-width:0;border:0;background:none;box-shadow:none;display:block}
  .table thead{display:none}
  /* El filtro de dominios ya no vive en el thead, asi que aqui se oculta con
     el resto. En la barra pasa a ocupar la fila entera. */
  .list-toolbar-actions{width:100%}
  .list-toolbar input.domain-search,.list-toolbar input.tenant-search{flex:1 1 auto;width:auto}
  .tenant-list-filters{width:100%}
  .tenant-list-filters select{flex:1 1 150px;width:auto}
  .tenant-list-summary{white-space:normal}
  .table tbody,.table tr,.table td{display:block;width:auto}
  .table tbody tr{background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r);box-shadow:var(--shadow-xs);padding:6px 14px;margin-bottom:10px}
  .table tbody tr:last-child{margin-bottom:0}
  .table tbody tr:hover{background:var(--surface)}
  /* Flex y no grid: una celda puede llevar el valor y su botón de copiar, y con
     grid el botón caía a la fila siguiente estirado de lado a lado. */
  .table td{border-bottom:1px solid var(--border);padding:9px 0;
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
  .table td:last-child{border-bottom:0}
  .table td::before{content:attr(data-label);flex:0 0 100%;color:var(--muted);font-size:11.5px;
    text-transform:uppercase;letter-spacing:.05em;font-weight:700}
  .table td:not([data-label])::before{display:none}
  .table td[colspan]::before{display:none}
  /* En ficha manda el ancho de la pantalla: lo que se dejó sin partir para no
     romper una columna estrecha aquí sí puede partirse. */
  .table .cell-nowrap{white-space:normal}
  .cell-actions .btn{flex:1 1 auto}
  #domainsTable,#suppressTable{min-width:0;table-layout:auto;width:auto}
  #suppressTable .cell-dom,#suppressTable .cell-to,
  #suppressTable .cell-when,#suppressTable .cell-why{width:auto}
  #domainsTable th:nth-child(1),#domainsTable td:nth-child(1),
  #domainsTable th:nth-child(2),#domainsTable td:nth-child(2),
  #domainsTable th.cell-num,#domainsTable td.cell-num,
  #domainsTable th:last-child,#domainsTable td.cell-actions{
    width:auto;padding-left:0;padding-right:0;white-space:normal}
  #domainsTable .cell-actions{flex-wrap:wrap}
  .table td .badge{margin-inline-start:0}
  .table td.cell-num{text-align:left}

  .conn{grid-template-columns:1fr}
}

@media (max-width:420px){
  .brand span:not(.brand-mark){display:none}
  .wizard-steps li a span:not(.wizard-num){display:none}
  .wizard-steps li a{padding:9px}
  .wizard-steps li.is-current a span:not(.wizard-num){display:inline}
}

/* Pantallas grandes: un poco más de aire en los márgenes. */
@media (min-width:1600px){
  :root{--gutter:32px}
  .content{padding-top:32px}
}

/* Siguiente paso (Inicio): una tarea, un CTA. */
.next-step{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 20px;padding:16px 18px;margin:0 0 18px;background:var(--brand-050);
  border:1px solid var(--brand-soft-border);border-radius:var(--r)}
.next-step--soft{background:var(--surface);border-color:var(--border)}
.next-step-title{margin:0;font-size:16px;font-weight:700;color:var(--text)}
.next-step .btn-row{margin:0}

/* Tip DNS Bien/Mal: fuera del fold hasta que lo pidan. */
.dns-name-tip{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.dns-name-tip > summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;
  list-style:none}
.dns-name-tip > summary::-webkit-details-marker{display:none}
.dns-name-tip > summary:hover{color:var(--brand-ink)}
.dns-name-tip[open] > summary{margin-bottom:10px;color:var(--text)}
.dns-name-tip .dns-name-eg{margin-top:0}
.dns-recheck-line{margin:8px 0 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.dns-recheck-form{margin:0}
.dns-peer-stack .dns-recheck-line{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}

/* Menú de acciones densas (Admin). */
.row-menu{position:relative;display:inline-block}
.row-menu > summary{list-style:none;cursor:pointer}
.row-menu > summary::-webkit-details-marker{display:none}
.row-menu-panel{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:180px;
  padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:2px}
.row-menu-panel.is-floating{position:fixed;right:auto;max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);overflow-y:auto}
.row-menu-panel button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;
  background:transparent;border-radius:6px;color:var(--text);font:inherit;font-size:13px;
  font-weight:600;cursor:pointer}
.row-menu-panel button:hover{background:var(--surface-3)}
.row-menu-panel button.menu-danger{color:var(--danger)}
.row-menu-panel button.menu-danger:hover{background:var(--danger-bg)}
@media (max-width:700px){
  .row-menu{max-width:100%}
  .row-menu-panel{position:static;margin-top:4px;max-width:100%}
}

/* Tarjetas de los 3 registros DNS en el alta (DKIM + SPF + DMARC). */
/* Los registros de DNS en tabla: sin cajas dentro de cajas. */
.dns-table{table-layout:fixed}
.dns-table td{padding-top:14px;padding-bottom:14px}
.dns-table .dns-t-rec{width:12%}
.dns-table .dns-t-state{width:14%}
.dns-table .dns-t-name{width:26%}
.dns-table td{vertical-align:top}
.dns-table .dns-t-rec strong{display:block;font-size:13.5px}
.dns-table .dns-t-rec .muted{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.dns-copy{display:flex;align-items:flex-start;gap:6px}
.dns-copy code{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.55;
  padding:9px 11px;background:var(--surface-3);border:1px solid var(--border);
  border-radius:8px;word-break:break-all;white-space:pre-wrap}
.dns-copy .copy{margin-top:6px}
.dns-copy .copy{flex:0 0 auto}
.dns-t-hint{display:block;margin-top:5px;font-size:12px;line-height:1.4;
  word-break:break-all}
.dns-t-found{display:block;margin-bottom:4px;font-size:12.5px;word-break:break-all}
@media (max-width:700px){
  .dns-table{table-layout:auto}
  .dns-table .dns-t-rec,.dns-table .dns-t-state,.dns-table .dns-t-name,.dns-table .dns-t-val{width:auto}
  .dns-table .dns-copy,.dns-table .dns-t-hint,.dns-table .dns-t-found{width:100%}
  .dns-table .dns-copy code{flex:1 1 0}
  .domain-settings-dns .dns-recheck-line{flex-direction:column;align-items:flex-start}
}
.dns-records-grid{display:grid;gap:8px}
.dns-record-card{padding:10px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.dns-record-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.dns-record-name{font-size:14px;font-weight:700}
.dns-record-card .dns-rows{border-color:var(--border-strong);background:var(--surface)}
.dns-record-card .dns-row{padding:6px 8px;background:var(--surface)}
.dns-record-card .dns-row-val code{padding:5px 7px;font-size:12px;line-height:1.35}
.dns-record-card .dns-row-val .btn{padding:4px 10px;font-size:12px;line-height:1.3}
.dns-record-hint{margin:4px 0 0;font-size:12px;line-height:1.35;color:var(--text-2)}
.dns-record-tip{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.dns-record-tip .dns-name-eg{gap:6px}
.dns-record-tip .dns-eg{padding:6px 8px}
@media (min-width:900px){.dns-records-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:560px) and (max-width:899px){.dns-records-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Variante lista (wizard de alta): una fila por registro, se escanea como un
   checklist; en Ajustes se queda la rejilla de 3 columnas. */
.dns-records-grid--list{gap:10px}
@media (min-width:560px){.dns-records-grid--list{grid-template-columns:minmax(0,1fr)}}
.dns-records-grid--list .dns-record-card{padding:14px 16px}
.dns-record-why{margin:0 0 8px;font-size:12.5px;line-height:1.4;color:var(--muted)}
/* El valor DKIM no se lee, se copia: dos líneas y fuera. Copiar sigue llevando
   el valor completo (el texto DOM no se trunca, solo la vista). */
.dns-row-val .dns-value--clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-all;max-height:calc(2 * 1.35em + 10px)}

@media print{
  .topbar,.sidebar,.nav-backdrop,.impersonate-banner{display:none !important}
  .has-sidebar .content{margin-left:0}
  .card,.table-wrap{box-shadow:none}
}

/* ===== Canales de envio (SMTP / API) =====
   Cada canal es un bloque cerrado con su para-que-sirve arriba: SMTP para
   correo transaccional, API para eso y ademas envios masivos. */
/* Los dos canales, uno al lado del otro: se comparan de un vistazo en vez de
   tener que bajar. En pantallas estrechas caen uno debajo del otro. */
.channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
  align-items:start}
@media (max-width:1180px){.channels{grid-template-columns:1fr}}
.channels > .channel{margin-bottom:0}
.channel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.channel-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;
  justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);
  background:var(--surface-2)}
.channel-intro{min-width:0;flex:1 1 320px}
.channel-title{margin:0;font-size:17px;line-height:1.2}
.channel-desc{margin:6px 0 0;color:var(--text-2);font-size:13.5px;line-height:1.5;max-width:68ch}
.channel-uses{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.channel-uses li{font-size:12px;font-weight:600;color:var(--brand-ink);background:var(--brand-050);
  border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.channel-actions{flex:0 0 auto}
/* La tabla manda: ocupa el canal de lado a lado, sin margenes que le coman
   ancho. Los titulillos y las tarjetas sueltas si llevan su sangrado. */
.channel-body{padding:0 0 0}
.channel-body > .channel-sub{padding:18px 22px 0;margin-bottom:12px}
/* Nada de tarjetas dentro de la tarjeta: el alta, el aviso de credencial
   creada y el vacio son franjas de lado a lado, separadas por una linea. */
.channel-body > .card,
.channel-body > .empty{margin:0;max-width:none;border:0;border-radius:0;
  box-shadow:none;border-top:1px solid var(--border);padding:18px 22px;
  background:transparent}
.channel-body > .card > .card-title:first-child,
.channel-body > .card > .card-head:first-child{margin:-18px -22px 16px}
.channel-body > .empty{padding:28px 22px;text-align:center}
.channel-body > .empty h4{font-size:15px;margin:0 0 6px}
.channel-body > .empty p{margin:0 auto;max-width:44ch}
.channel-body > .empty .btn-row{margin-top:14px;justify-content:center}
/* app.js envuelve cada tabla en .table-wrap, que es quien trae el borde y el
   redondeo: hay que apagarlo ahi, no solo en la tabla, o la esquina sigue
   curvada dentro del canal. El wrap ya da el scroll horizontal. */
.channel-body > .table,
.channel-body > .table-wrap{border:0;border-radius:0;box-shadow:none;
  background:transparent;border-top:1px solid var(--border)}
.channel-body > .table-wrap > .table{border:0;border-radius:0;box-shadow:none;
  min-width:0}
.channel-body .cell-actions-inner{gap:6px}
.channel-sub{margin:0 0 12px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted)}
.channel-body > * + .channel-sub{margin-top:26px}
.channel-body .card{box-shadow:none}
@media (max-width:640px){
  .channel-head{padding:16px}
  .channel-body > .channel-sub{padding:14px 16px 0}
  .channel-body > .card,
  .channel-body > .empty{padding-left:16px;padding-right:16px}
  .channel-actions,.channel-actions .btn{width:100%}
}


/* Usuario SMTP a medias: el dominio es fijo y solo se escribe lo de detras.
   Se ve como un solo campo para que quede claro que es un unico valor. */
.user-compose{display:flex;align-items:stretch;border:1px solid var(--border);
  border-radius:9px;background:var(--surface);overflow:hidden;max-width:520px}
.user-compose-pre{display:flex;align-items:center;padding:0 10px;font-family:var(--mono);
  font-size:13px;color:var(--muted);background:var(--surface-2);
  border-right:1px solid var(--border);white-space:nowrap}
/* Gana a los estilos generales de input, que le meterian su propio borde y
   redondeo y partirian el campo en dos cajas. */
/* La misma cadena de :not que el estilo general de los inputs, o gana el
   otro y el campo se parte en dos cajas con su borde y su redondeo. */
.user-compose > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]){
  flex:1 1 auto;width:auto;min-width:0;border:0;border-radius:0;background:transparent;
  box-shadow:none;font-family:var(--mono);font-size:13px;padding:9px 10px;margin:0}
.user-compose > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus,
.user-compose > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):hover{
  outline:0;box-shadow:none;border:0;background:transparent}
.user-compose:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050)}

/* Alta de dominio: tarjeta blanca centrada en el hueco del panel.
   El gesto es el del login; la rejilla y los halos de auth no se copian. */
.content:has(.domain-add),
.content:has(.dns-setup){background:var(--bg);justify-content:center}
.content:has(.domain-add){padding:40px 16px}
.content:has(.dns-setup){padding:16px}
.page:has(.domain-add),
.page:has(.dns-setup){justify-content:safe center;align-items:center}
@media (max-width:720px){
  .page:has(.dns-setup){justify-content:start}
}

.domain-add{width:100%;max-width:416px;margin:0;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,34px)}
.domain-add > .back-link{margin:0 0 16px}
.domain-add .flow-steps{margin:0 0 18px}
.domain-add .page-head{margin:0 0 22px}
.domain-add .page-head h1{font-size:25px;font-weight:700;letter-spacing:-.025em;
  line-height:1.2}
.domain-add .page-head p{margin:8px 0 0;font-size:14.5px}
.domain-add-field{display:block;margin:0}
.domain-add-field > span{display:block;font-size:13px;font-weight:600;
  color:var(--text-2);margin-bottom:7px}
.domain-add #domainInput{width:100%;min-height:44px;margin:0;padding:11px 13px;
  font-size:15px}
.domain-add #domainInput.is-invalid{border-color:var(--danger)}
.domain-add #domainInput.is-invalid:focus{border-color:var(--danger);
  box-shadow:0 0 0 3px var(--danger-bg)}
.domain-add-hint{margin:6px 0 0;font-size:12px}
.domain-add #addError{margin:16px 0 0}
.domain-add #addError + #btnAddSubmit{margin-top:16px}
.domain-add #btnAddSubmit{width:100%;min-height:46px;margin:16px 0 0;
  font-size:15px;border-radius:10px}
.domain-add-need{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--border)}
.domain-add-need h2{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--muted)}
.domain-add-need ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.domain-add-need li{display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;line-height:1.45;color:var(--text-2)}
.domain-add-need li::before{content:"";width:6px;height:6px;border-radius:999px;
  background:var(--brand);margin-top:7px;flex:0 0 auto}

/* Stepper reutilizable: activo teal, hecho y pendiente en gris (sin check).
   Pasos juntos; la raya es corta y fija, no se estira. */
.flow-steps{margin:0 0 20px}
.flow-steps ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap}
.flow-steps li{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  font-size:13px;font-weight:600;color:var(--muted)}
.flow-steps li:not(:last-child)::after{content:"";flex:0 0 48px;width:48px;height:1px;
  margin:0 10px;background:var(--border-strong)}
.flow-steps-num{flex:0 0 auto;width:22px;height:22px;border-radius:999px;display:inline-grid;
  place-items:center;font-size:11px;font-weight:700;line-height:1;
  border:1.5px solid var(--border-strong);color:var(--muted);background:var(--surface)}
.flow-steps-lbl{min-width:0;line-height:1.25}
.flow-steps .is-active{color:var(--text)}
.flow-steps .is-active .flow-steps-num{background:var(--brand);border-color:var(--brand);color:#fff}
.flow-steps .is-done{color:var(--text-2)}
.flow-steps .is-done .flow-steps-num{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok)}

.dns-setup{width:100%;max-width:640px;margin:0;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:24px 28px}
.dns-setup .flow-steps{margin:0 0 10px}
.dns-setup .flow-steps .is-done{color:var(--muted)}
.dns-setup .flow-steps .is-done .flow-steps-num{background:var(--surface);
  border-color:var(--border-strong);color:var(--muted)}
.dns-setup .page-head{margin-bottom:8px}
.dns-setup .page-head p{margin-top:2px}
.dns-setup > .alert{margin-bottom:10px;padding:8px 12px}
.dns-setup-item + .dns-setup-item{margin-top:12px}
.dns-setup-item.is-fail{box-shadow:none;padding-left:0}
.dns-setup-item .dns-auth-head{flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.dns-setup-item .dns-auth-name{flex:0 1 auto;min-width:0}
.dns-setup .dns-item-why{margin:0;flex:1 1 12rem;min-width:0;font-size:12.5px;line-height:1.35}
.dns-setup-item .dns-auth-head > :last-child{flex:0 0 auto;margin-left:auto}
.dns-setup .dns-row{padding:10px 14px}
.dns-setup .dns-row-lbl{margin:0 0 6px}
.dns-setup .dns-copy{display:flex;align-items:center;gap:8px;min-height:44px;
  padding:0 6px 0 13px;border:1px solid var(--border-strong);border-radius:var(--r);
  background:var(--surface);box-sizing:border-box;overflow:hidden}
.dns-setup .dns-copy code{flex:1 1 0;min-width:0;width:0;margin:0;padding:11px 0;
  border:0;background:transparent;border-radius:0;font-size:13.5px;line-height:1.4;
  display:block;overflow:hidden}
.dns-setup .dns-copy .dns-value--clamp{white-space:nowrap;word-break:normal;
  text-overflow:ellipsis;max-height:none}
.dns-copy-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:6px 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text-2);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer}
.dns-copy-btn:hover{background:var(--surface-3);color:var(--text)}
.dns-copy-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.dns-copy-btn.is-copied{color:var(--brand-ink)}
.dns-copy-btn svg{flex:0 0 auto}
.dns-setup-cta{margin:12px 0 0}
.dns-setup-cta .btn{width:100%}
.dns-setup-foot{margin:8px 0 0;font-size:13px}
@media (max-width:640px){
  .flow-steps{margin-bottom:16px}
  .dns-setup .dns-item-why{flex-basis:100%;margin-left:0}
  .dns-setup .dns-copy{align-items:flex-start}
  .dns-setup .dns-copy-btn{margin-top:5px}
}

/* Confirmaciones en <dialog> nativo: el navegador ya da el foco atrapado, el
   cierre con Escape y la capa de fondo por encima de todo. */
.modal{border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--text);
  padding:24px;max-width:420px;width:calc(100% - 32px);
  box-shadow:0 24px 60px rgba(10,35,33,.35)}
.modal::backdrop{background:rgba(8,22,21,.62)}
.modal-title{margin:0 0 8px;font-size:17px;letter-spacing:-.01em}
.modal .muted{margin:0;font-size:14px;line-height:1.55}
.modal-actions{margin-top:20px;justify-content:flex-end}


/* Acciones de cierre de pagina: al final y a la derecha, fuera del camino. */

/* Tarjeta que hay que mirar ahora (la contrasena recien creada). */
.card-accent{border-color:var(--warn);box-shadow:var(--shadow-xs)}

/* Lista de datos: etiqueta, valor y copiar en una fila. De lado a lado de la
   tarjeta, separadas por una linea, para leerlas en orden de arriba abajo. */
.kv{margin:0;padding:0}
.kv-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  padding:12px 0;border-bottom:1px solid var(--border)}
.kv-row:last-child{border-bottom:0;padding-bottom:0}
.kv dt{flex:0 0 168px;margin:0;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.kv dd{flex:1 1 220px;display:flex;align-items:center;gap:8px;margin:0;min-width:0}
.kv dd code{font-size:13.5px;background:transparent;padding:0;color:var(--text);
  overflow-wrap:anywhere}
.kv .copy{margin-left:auto;flex:0 0 auto}
@media (max-width:560px){
  .kv dt{flex:1 1 100%}
  .kv-row{gap:4px}
}

/* Grupos de un formulario: un titulillo y sus campos, sin cajas dentro de la
   tarjeta. */
.field-set{border:0;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--border)}
.field-set legend{padding:0;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 36px;
  margin-top:12px}
.field-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.field-grid small{font-weight:400}
.check{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;font-weight:400}
.check input{width:auto;margin:0}

/* Lo elegido se apila en una lista debajo del campo: se ven todos en orden y
   se quitan de uno en uno, que es lo que una lista separada por comas no deja
   hacer. */
.field-block{margin-top:18px}
.field-grid > .field-block{margin-top:0}
.field-block > label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.field-block small{display:block;margin-top:6px;font-size:12.5px}
.field-block small.is-error{color:var(--danger)}
/* El boton de anadir va dentro del campo: es parte de escribir la IP, no una
   accion aparte que compita con el de crear. */
.field-add{position:relative}
.field-add input{width:100%;padding-right:78px}
.field-add .btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:auto;padding:4px 10px}
.picked{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--border)}
/* La fila entera se enciende al pasar por encima: asi se ve cual se va a
   quitar antes de llegar al boton. */
.picked-row{display:flex;align-items:center;gap:8px;padding:8px;margin:0 -8px;
  border-radius:8px;border-bottom:1px solid var(--border);font-size:13.5px}
.picked-row:hover{background:var(--surface-2)}
.picked-label{min-width:0;overflow-wrap:anywhere}
.picked-x{margin-left:auto;flex:0 0 auto;width:auto;padding:2px 6px;border:0;
  background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer}
.picked-x:hover{color:var(--danger);text-decoration:underline}

/* Buscador con lista: escribir filtra y se elige de la lista, con su bandera. */
.combo{position:relative}
.combo-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;
  list-style:none;max-height:264px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}
.combo-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;
  cursor:pointer;font-size:14px}
.combo-opt:hover{background:var(--surface-2)}
.combo-code{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.flag{flex:0 0 auto;width:20px;height:15px;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(10,35,33,.12)}
.picked-row .flag{margin-right:2px}

/* Filters belong to the column header, including on small screens. */
.table .filter-row td{vertical-align:top;position:relative}
.table .filter-row input,.table .filter-row select{width:100%;min-width:120px;max-width:100%;margin:0;height:40px;font-weight:400}
.column-filter{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0;font-size:12px;font-weight:400}
.column-filter + .column-filter{margin-top:8px}
.filter-row > td > .column-filter:not(.column-filter-date) > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.column-filter-more{margin-top:8px;min-width:155px}
.column-filter-more summary{cursor:pointer;font-size:12px;color:var(--brand-ink)}
.column-filter-more[open] summary{margin-bottom:10px}
.table .filter-actions-row td{background:var(--surface-2);padding:8px 16px;text-align:right}
.filter-actions-row .filters-foot{padding:0;margin:0;border:0}
.filter-actions-row .list-toolbar-actions{width:100%;justify-content:flex-end}
/* Barra de filtros encima de la tabla (admin): rejilla que se adapta, cada campo
   con su ancho, y las acciones (Buscar/Limpiar) en su propia linea a la derecha.
   Evita apretar los filtros dentro de la cabecera de la tabla. */
.sendlog-filterbar{padding:12px 14px;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.sendlog-filterbar .sendlog-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0;flex:1 1 auto}
.sendlog-filterbar .column-filter{flex:0 1 180px;min-width:150px}
.sendlog-filterbar .column-filter span{font-size:12px;font-weight:600;color:var(--text)}
.sendlog-filterbar input,.sendlog-filterbar select{width:100%;min-width:0;height:38px;margin:0;font-weight:400}
.sendlog-filterbar .sendlog-filter-actions{display:flex;gap:8px;align-items:end;flex:0 0 auto}
.sendlog-filterbar .sendlog-filter-actions .btn{white-space:nowrap}
@media (max-width:640px){
  .sendlog-filterbar .column-filter{flex:1 1 140px}
  .sendlog-filterbar .sendlog-filter-actions{width:100%;justify-content:flex-end}
}
[data-list-tabs][aria-busy=true]{opacity:.65}
@media(max-width:760px){
  .table-wrap:has(.filter-row){overflow-x:auto;max-width:100%}
  .table:has(.filter-row) tbody tr{border:0;border-radius:0;box-shadow:none;padding:0;margin:0}
  .table:has(.filter-row) td{padding:12px 16px}
  .table:has(.filter-row) thead{display:table-header-group}
  .table:has(.filter-row){display:table;min-width:680px}
  .table:has(.filter-row) tbody{display:table-row-group}
  .table:has(.filter-row) tr{display:table-row}
  .table:has(.filter-row) th,.table:has(.filter-row) td{display:table-cell}
  .table:has(.filter-row) td::before{display:none}
}

/* Keep the date range compact and leave the reason room to wrap. */
#suppressTable .cell-to{width:30%}
#suppressTable .cell-when{width:190px}
#suppressTable .cell-date{width:340px}
#suppressTable .filter-row td{vertical-align:bottom}
#suppressTable .suppress-date-filter input{min-width:0}

.suppress-date-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.suppress-date-range .column-filter + .column-filter{margin-top:0}

/* Base de datos: la fila de filtros, baja. La regla general deja 40px de alto
   mas el hueco de la etiqueta, y aqui la etiqueta sobra porque la cabecera de
   la columna ya dice lo mismo. La pantalla es finita. */
#dbTable .filter-row td{padding:4px 16px}
#dbTable .filter-row .column-filter{gap:0}
/* Oculta a la vista pero no al lector de pantalla: la etiqueta sigue ahi. */
#dbTable .filter-row .column-filter > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#dbTable .filter-row input,
#dbTable .filter-row select{height:30px;padding:2px 8px}