/* Tema visual (rediseño 2026-11): el sistema de diseño de la Plataforma CRM de Cleartora
   aplicado a AK Sales. Se carga DESPUÉS de styles.css y solo cambia el aspecto: mismas
   clases, mismo HTML, mismas funciones. Para volver al aspecto anterior basta con quitar
   este archivo (y menu-plegable.js) de index.html. */

/* ---------- Fuentes ---------- */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(./fuentes/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(./fuentes/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(./fuentes/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;src:url(./fuentes/instrument-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(./fuentes/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* ---------- Variables ---------- */
:root {
  --fondo: #eef0f3;
  --superficie: #ffffff;
  --superficie-2: #f3f5f7;
  --superficie-3: #e6e9ee;
  --borde: #d5dae1;
  --texto: #1a1d22;
  --texto-2: #545d69;
  --texto-3: #848d98;
  --marca: #1d6b58;
  --marca-hover: #165546;
  --marca-texto: #ffffff;
  --marca-suave: #dcefe8;
  --ok: #1d7a49;
  --ok-suave: #e0f3e8;
  --aviso: #8f5f00;
  --aviso-suave: #fdf0d2;
  --peligro: #b42318;
  --peligro-suave: #fde6e3;
  --info: #2c5aa0;
  --info-suave: #e4ecfa;
  --capa: rgb(18 22 28 / 0.45);
  --sombra: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --sombra-alta: 0 16px 40px rgb(16 24 40 / 0.22);
  --f-ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-datos: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --radio: 10px;
  --radio-s: 7px;
  /* Logos blancos (pensados para el menú oscuro antiguo) en negro sobre fondo claro. */
  --logo-filtro: brightness(0);
  /* La firma de Cleartora va en color: letras oscuras en claro, blancas en oscuro. */
  --logo-claro: block; --logo-oscuro: none;
  /* Las variables de styles.css apuntan ahora a las del tema: así todas las reglas
     antiguas que ya usaban var(--line), var(--brand)… cambian solas. */
  --ink: var(--texto);
  --muted: var(--texto-2);
  --line: var(--borde);
  --brand: var(--marca);
  --accent: #eda100;
  --danger: var(--peligro);
  --panel: var(--superficie);
  --border: var(--borde);
  --profile-unknown: var(--texto-3);
  font-family: var(--f-ui);
  color: var(--texto);
  background: var(--fondo);
  color-scheme: light;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font: 14px / 1.45 var(--f-ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Marco: menú lateral ---------- */
.shell { grid-template-columns: 228px minmax(0, 1fr); background: var(--fondo); }
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--superficie-2); color: var(--texto-2);
  border-right: 1px solid var(--borde);
  padding: 14px 12px; gap: 14px;
}
.brand {
  position: relative; padding: 4px 34px 0 6px;
  font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--texto); line-height: 1.3;
}
.brand-logo { width: 128px; margin: 2px 0 10px; filter: var(--logo-filtro); }
.brand-version {
  color: var(--texto-3); font-family: var(--f-datos); font-size: 11px;
  text-decoration-color: var(--borde);
}
.brand-version:hover, .brand-version:focus-visible { color: var(--texto-2); }

.side-plegar {
  position: absolute; top: 12px; right: 10px; z-index: 1;
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: var(--radio-s); background: none; color: var(--texto-3);
}
.side-plegar::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico-panel) center / 18px no-repeat; mask: var(--ico-panel) center / 18px no-repeat;
}
.side-plegar:hover { background: var(--superficie-3); color: var(--texto); }

.side-status {
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--superficie); color: var(--texto); box-shadow: none;
}
.side-status:hover { background: var(--superficie); border-color: var(--texto-3); }
.side-status strong { font-size: 12.5px; font-weight: 600; }
.side-status small { color: var(--texto-3); font-size: 11px; }
.side-status-top { margin: 0; }
.side-status-dot { width: 8px; height: 8px; background: var(--texto-3); }
.side-status-ok .side-status-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }
.side-status-warn .side-status-dot,
.side-status-loading .side-status-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--aviso-suave); }
.side-status-bad .side-status-dot { background: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-suave); }
.side-status-unknown .side-status-dot { background: var(--texto-3); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--radio-s);
  background: none; color: var(--texto-2); font-weight: 500; font-size: 13.5px; line-height: 1.3;
}
.nav button::before {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--ico, var(--ico-punto)) center / 18px no-repeat; mask: var(--ico, var(--ico-punto)) center / 18px no-repeat;
}
.nav button:hover { background: var(--superficie-3); color: var(--texto); }
.nav button.active { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.nav-badge {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px;
  background: var(--marca); color: var(--marca-texto); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.side-footer { gap: 6px; color: var(--texto-3); }
.side-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--borde) !important; background: var(--superficie) !important;
  color: var(--texto-2) !important; opacity: 1 !important; border-radius: var(--radio-s) !important;
  font-weight: 500;
}
.side-logout::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--ico-salir) center / 15px no-repeat; mask: var(--ico-salir) center / 15px no-repeat;
}
.side-logout:hover { color: var(--texto) !important; border-color: var(--texto-3) !important; }
.side-credit { margin-top: 12px; padding: 12px 6px 0; border-top: 1px solid var(--borde); gap: 7px; align-items: center; text-align: center; }
.side-credit span { color: var(--texto-3); opacity: 1; letter-spacing: .32em; margin-right: -.32em; }
.side-credit img { width: 112px; filter: none; opacity: 1; }
.side-credit .logo-tema-claro { display: var(--logo-claro); }
.side-credit .logo-tema-oscuro { display: var(--logo-oscuro); }
.side-credit:hover span { color: var(--texto-2); }
.side-credit:hover img { opacity: 1; filter: none; transform: none; }

/* Iconos del menú (trazos de Lucide, los mismos que el CRM). */
:root {
  --ico-punto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ico-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E");
  --ico-salir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}
[data-ico="candidates"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
[data-ico="catalog"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7 12 12l8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
[data-ico="distributors"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E"); }
[data-ico="competitors"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
[data-ico="conversacion-v2"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
[data-ico="llamadas"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
[data-ico="notas-equipo"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z'/%3E%3Cpath d='M15 3v6h6'/%3E%3C/svg%3E"); }
[data-ico="pruebas"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.5a2 2 0 0 1-.2.9L4.7 20.6a1 1 0 0 0 .9 1.4h12.8a1 1 0 0 0 .9-1.4l-5.1-10.2a2 2 0 0 1-.2-.9V2'/%3E%3Cpath d='M8.5 2h7M7 16h10'/%3E%3C/svg%3E"); }
[data-ico="mailing"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
[data-ico="history"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l4 2'/%3E%3C/svg%3E"); }
[data-ico="control-panel"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E"); }

/* Menú plegado: solo iconos (en pantallas anchas; en el móvil el menú va arriba). */
@media (min-width: 1001px) {
  .menu-plegado .shell { grid-template-columns: 64px minmax(0, 1fr); }
  .menu-plegado .side { padding: 14px 8px; align-items: stretch; }
  .menu-plegado .side-plegar { position: static; margin: 0 auto; }
  .menu-plegado .brand { padding: 0; font-size: 0; display: flex; justify-content: center; }
  .menu-plegado .brand-logo { width: 40px; height: 16px; object-fit: cover; object-position: left center; margin: 0; }
  .menu-plegado .brand-version { display: none; }
  .menu-plegado .side-status { display: grid; place-items: center; grid-template-columns: 1fr; padding: 10px 0; }
  .menu-plegado .side-status > span:last-child { display: none; }
  .menu-plegado .nav button { justify-content: center; padding: 9px 0; font-size: 0; }
  .menu-plegado .nav-badge {
    position: absolute; top: 2px; right: 6px; margin: 0;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
  }
  .menu-plegado .side-logout { font-size: 0 !important; padding: 9px 0 !important; }
  .menu-plegado .side-credit { display: none; }
}
@media (max-width: 1000px) {
  .shell, .menu-plegado .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--borde); }
  .nav button { min-width: 0; }
  .side-plegar { display: none; }
  .nav { display: grid; }
}

/* ---------- Contenido ---------- */
.main { padding: 22px 28px 48px; }
.top { align-items: flex-end; margin-bottom: 18px; }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; color: var(--texto-3); }
.title { font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 4px 0; color: var(--texto); }
.sub, .muted { color: var(--texto-2); }
.link { color: var(--marca); text-underline-offset: 2px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 12px; line-height: 1.25;
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--superficie); color: var(--texto);
  font-weight: 500; font-size: 13.5px; text-decoration: none;
  transition: background-color .12s, border-color .12s;
}
.btn:hover { background: var(--superficie-2); }
.btn.primary { background: var(--marca); border-color: transparent; color: var(--marca-texto); }
.btn.primary:hover { background: var(--marca-hover); }
.btn.gold { background: var(--aviso-suave); border-color: transparent; color: var(--aviso); }
.btn.gold:hover { background: var(--aviso-suave); filter: brightness(.97); }
.btn.danger { background: var(--peligro-suave); border-color: transparent; color: var(--peligro); }
.btn.danger:hover { background: var(--peligro-suave); filter: brightness(.97); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Campos */
.field {
  min-height: 36px; padding: 7px 10px;
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--superficie); color: var(--texto);
}
.field:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.field::placeholder { color: var(--texto-3); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); }

/* Bloques */
.panel {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; box-shadow: none;
}
.panel h2 { font-size: 15px; font-weight: 600; color: var(--texto); }
.panel h3 { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); }
.hero { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); }
.hero .sub { color: var(--texto-2); }
.metric { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.empty { color: var(--texto-2); }

/* Tablas */
.table th {
  padding: 9px 12px; background: var(--superficie-2); color: var(--texto-3);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.table td { padding: 9px 12px; border-bottom: 1px solid var(--superficie-3); font-size: 13.5px; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover { background: none; }
.table tbody tr:hover td { background: var(--superficie-2); }

/* Etiquetas y estados */
.tag {
  gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--superficie-3); color: var(--texto-2);
  font-weight: 500; font-size: 12px; white-space: nowrap;
}
.tag.ok { background: var(--ok-suave); color: var(--ok); }
.tag.warn { background: var(--aviso-suave); color: var(--aviso); }
.tag.bad { background: var(--peligro-suave); color: var(--peligro); }
.country-chips .tag.active { background: var(--marca); color: var(--marca-texto); }
.dot { background: var(--texto-3); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--accent); }
.dot.bad { background: var(--peligro); }
.status { color: var(--texto-2); }

/* Avisos */
.notice { background: var(--aviso-suave); color: var(--aviso); border-radius: var(--radio-s); font-size: 13px; }
.error, .alert.bad { background: var(--peligro-suave); color: var(--peligro); border-radius: var(--radio-s); font-size: 13px; }

/* Ventanas */
.profile-backdrop, .two-backdrop { background: var(--capa); }
.profile-modal {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: var(--sombra-alta);
}
.profile-head { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.profile-head h2 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.profile-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.two-modal { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); }

/* ---------- Acceso y cambio de contraseña (ak-auth.js los pinta con estilos en línea) ---------- */
#ak-login-overlay, #ak-pass-overlay { font-family: var(--f-ui) !important; color: var(--texto) !important; }
#ak-login-overlay { background: var(--fondo) !important; }
#ak-pass-overlay { background: var(--capa) !important; }
#ak-login-form, #ak-pass-form {
  background: var(--superficie) !important; border: 1px solid var(--borde) !important;
  border-radius: 12px !important; box-shadow: var(--sombra-alta); padding: 28px !important;
}
#ak-login-form img { filter: var(--logo-filtro); width: 150px !important; margin-bottom: 18px !important; }
#ak-login-form h1, #ak-pass-form h1 { font-size: 21px !important; letter-spacing: -.01em; color: var(--texto); }
#ak-login-form p, #ak-pass-form p, #ak-pass-form > div:first-child { color: var(--texto-2) !important; }
#ak-login-form input, #ak-pass-form input {
  min-height: 38px; padding: 8px 11px !important;
  border: 1px solid var(--borde) !important; border-radius: var(--radio-s) !important;
  background: var(--superficie) !important; color: var(--texto) !important;
}
#ak-login-form input:focus, #ak-pass-form input:focus { outline: none; border-color: var(--marca) !important; box-shadow: 0 0 0 3px var(--marca-suave); }
#ak-login-error, #ak-pass-error { color: var(--peligro) !important; }
#ak-login-submit, #ak-pass-enviar {
  min-height: 40px; border-radius: var(--radio-s) !important;
  background: var(--marca) !important; color: var(--marca-texto) !important; font-weight: 600 !important;
}
#ak-login-submit:hover, #ak-pass-enviar:hover { background: var(--marca-hover) !important; }
#ak-pass-cancelar { border: 1px solid var(--borde) !important; border-radius: var(--radio-s) !important; color: var(--texto) !important; background: var(--superficie) !important; }

/* ---------- Fase 2: ajustes por pantalla ---------- */
/* Botones con aspecto de enlace («Ver ficha», acciones de las tablas): sin el gris del navegador. */
button.link {
  padding: 0; border: 0; background: none;
  color: var(--marca); font-weight: 600; font-size: 13px;
  text-decoration: none;
}
button.link:hover { text-decoration: underline; text-underline-offset: 2px; }
button.link:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
td button.link, .draft-actions button.link + button.link { margin-right: 12px; }

/* Pestañas: subrayado de marca en la activa, como en el CRM. */
.control-tabs, .tabs {
  display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden;
  border-bottom: 1px solid var(--borde); margin-bottom: 4px;
}
.control-tabs .btn, .tabs .btn {
  min-width: 0; min-height: 0; padding: 9px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--texto-2); font-weight: 600; white-space: nowrap;
}
.control-tabs .btn:hover, .tabs .btn:hover { background: none; color: var(--texto); }
.control-tabs .btn.primary, .tabs .btn.primary {
  background: none; color: var(--texto); border-bottom-color: var(--marca);
}
@media (max-width: 620px) {
  .control-tabs { display: flex; }
  .tabs .btn { width: auto; }
}

/* Correos */
.mail-shell { border-radius: var(--radio); }
.mail-list-col { background: var(--superficie); }
.mail-row:hover { background: var(--superficie-2); }
.mail-row.active { background: var(--marca-suave); }
.mail-avatar { background: var(--superficie-3); color: var(--texto-2); font-weight: 600; }
.mail-row-time { font-variant-numeric: tabular-nums; }
.message { border-radius: var(--radio); }
.message.inbound { background: var(--superficie-2); }
.message.draft { background: var(--aviso-suave); border-color: var(--accent); }
.mode-seg.active.ok, .mode-pill.active.ok { background: var(--marca-suave); color: var(--marca); }

/* Panel de control: tarjetas de cifras y servicios */
.control-row-grid > div, .control-service, .control-metric {
  background: var(--superficie-2); border: 1px solid var(--superficie-3); border-radius: var(--radio);
}
.control-metric strong { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.control-label, .control-subhead { color: var(--texto-3); }
.control-spinner { border-color: var(--superficie-3); border-top-color: var(--marca); }

/* Ficha de empresa */
.profile-metrics span { background: var(--superficie-2); border-radius: var(--radio-s); }
.profile-metrics b { font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-item { border-top-color: var(--superficie-3); }
.profile-body, .profile-json, .email-body { background: var(--superficie-2); border-color: var(--borde); }

/* Fases del recorrido */
.phase { border-radius: var(--radio-s); }
.phase.current { border-color: var(--marca); background: var(--marca-suave); }
.num { background: var(--superficie-3); color: var(--texto-2); font-weight: 600; }
.control-row-grid > div > .tag { justify-self: start; }

/* ---------- Fase 3: estilos en línea que vienen del JS ----------
   Se corrigen desde aquí para no tocar el JS. Los colores de Mailing y del editor de
   correo NO se tocan: son el contenido de los correos que se envían. */
/* Candidatas: la acción principal de la fila («Aprobar y enviar») */
.link[style*="#1d5fa8"] { color: var(--info) !important; }
/* Textos de ayuda de AK Scout */
[style*="color:#b45309"] { color: var(--aviso) !important; }
[style*="color:#666"] { color: var(--texto-2) !important; }
[style*="color:#64748b"] { color: var(--texto-3) !important; }
[style*="color:#0284c7"] { color: var(--info) !important; }
label[style*="rgba(217,119,6"] {
  background: var(--aviso-suave) !important; border-color: transparent !important;
  border-radius: var(--radio-s) !important;
}
/* Consolas (AK Scout en vivo, Playground): se quedan oscuras, con la letra de datos */
.scout-live-console, .code-block {
  font-family: var(--f-datos) !important; border-radius: var(--radio) !important;
  box-shadow: none !important;
}
/* Recorrido V1M: el rótulo era claro para el banner oscuro antiguo */
.hero .eyebrow[style] { color: var(--texto-3) !important; }
/* Aviso de error de carga (index.html) */
#ak-runtime-error {
  background: var(--peligro-suave) !important; color: var(--peligro) !important;
  border: 1px solid var(--peligro) !important; border-radius: var(--radio) !important;
  font-family: var(--f-ui) !important; box-shadow: var(--sombra-alta);
}

/* ---------- Fase 4: modo oscuro ----------
   Sigue al sistema. El botón de tema del menú fija data-theme="light" o "dark" en <html>.
   Mismos valores que el CRM. El lienzo del editor de correo y las vistas previas de los
   correos se quedan claros: muestran cómo los verá el destinatario. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #101215; --superficie: #191c20; --superficie-2: #20242a; --superficie-3: #2a2f36;
    --borde: #343a43; --texto: #e7eaee; --texto-2: #a5adb7; --texto-3: #78818c;
    --marca: #4fb497; --marca-hover: #6ec6ab; --marca-texto: #0a1612; --marca-suave: #173a30;
    --ok: #5cc58a; --ok-suave: #163626; --aviso: #e2b24c; --aviso-suave: #382d12;
    --peligro: #f17d71; --peligro-suave: #3d1d1a; --info: #86aae8; --info-suave: #1b2940;
    --accent: #c98500;
    --capa: rgb(0 0 0 / 0.62);
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra-alta: 0 16px 40px rgb(0 0 0 / 0.55);
    --logo-filtro: none; --logo-claro: none; --logo-oscuro: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #101215; --superficie: #191c20; --superficie-2: #20242a; --superficie-3: #2a2f36;
  --borde: #343a43; --texto: #e7eaee; --texto-2: #a5adb7; --texto-3: #78818c;
  --marca: #4fb497; --marca-hover: #6ec6ab; --marca-texto: #0a1612; --marca-suave: #173a30;
  --ok: #5cc58a; --ok-suave: #163626; --aviso: #e2b24c; --aviso-suave: #382d12;
  --peligro: #f17d71; --peligro-suave: #3d1d1a; --info: #86aae8; --info-suave: #1b2940;
  --accent: #c98500;
  --capa: rgb(0 0 0 / 0.62);
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-alta: 0 16px 40px rgb(0 0 0 / 0.55);
  --logo-filtro: none; --logo-claro: none; --logo-oscuro: block;
  color-scheme: dark;
}

/* Botón de tema, junto a «Cerrar sesión» */
.side-tema {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--superficie); color: var(--texto-2); font-size: 12px; font-weight: 500;
}
.side-tema:hover { color: var(--texto); border-color: var(--texto-3); }
.side-tema::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--ico-tema) center / 15px no-repeat; mask: var(--ico-tema) center / 15px no-repeat;
}
:root {
  --ico-tema: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='black'/%3E%3C/svg%3E");
}
@media (min-width: 1001px) {
  .menu-plegado .side-tema { font-size: 0; padding: 9px 0; }
}

/* Lo que debe seguir claro en oscuro: el lienzo del correo y su vista previa */
.mke-lienzo {
  --fondo: #eef0f3; --superficie: #ffffff; --superficie-2: #f3f5f7; --superficie-3: #e6e9ee;
  --borde: #d5dae1; --texto: #1a1d22; --texto-2: #545d69; --texto-3: #848d98;
  --marca: #1d6b58; --marca-hover: #165546; --marca-texto: #ffffff; --marca-suave: #dcefe8;
  --ok: #1d7a49; --ok-suave: #e0f3e8; --aviso: #8f5f00; --aviso-suave: #fdf0d2;
  --peligro: #b42318; --peligro-suave: #fde6e3; --info: #2c5aa0; --info-suave: #e4ecfa;
  --accent: #eda100; --logo-filtro: brightness(0);
  --ink: var(--texto); --muted: var(--texto-2); --line: var(--borde); --brand: var(--marca);
  --danger: var(--peligro); --panel: var(--superficie); --border: var(--borde);
  color-scheme: light;
}