/* ============================================================
   ROWAN Analíticas · Extras (IA panel + Export buttons)
   Convive con el design system existente; usa las mismas vars.
   ============================================================ */

/* ------------ Botón "..." en cada card ------------ */
.card-extras{
  position:absolute;top:14px;right:14px;display:flex;gap:6px;z-index:3;
  opacity:.45;transition:opacity .15s;
}

/* Reservar espacio para el botón "..." de modo que NUNCA solape con el
   contenido (titulos, search, tablas). 31px botón + 5px de aire = 36px. */
.card .card-header{padding-right:36px}
.card h3{padding-right:36px}
/* En tarjetas KPI el padding del h3 no hace falta (no llevan ...) */
.card.kpi h3{padding-right:0}

/* ------------ Tags / badges legibles en modo claro ------------ */
/* Los .tag-* originales usan colores pensados para fondo oscuro (#7ec8a9,
   #f0a59e, #a1baea, etc.) — sobre fondo crema/beige son ilegibles. Aquí
   reemplazamos en modo claro por pares saturados con buen contraste. */
[data-theme="light"] .tag-green{
  background:#dcefe1;color:#1e6b48;
  border-color:#9ccfb1;
}
[data-theme="light"] .tag-red{
  background:#f7d9d4;color:#8b2a1f;
  border-color:#dca094;
}
[data-theme="light"] .tag-yellow{
  background:#f4e0b8;color:#7a4a14;
  border-color:#d4a86a;
}
[data-theme="light"] .tag-blue{
  background:#dde6f5;color:#1f3d7a;
  border-color:#9bb1d8;
}
[data-theme="light"] .tag-gray{
  background:#ece5d0;color:#4a4a52;
  border-color:#c8c0a8;
}
/* También el .bad / .good (textos rojo/verde inline) en light */
[data-theme="light"] .bad{color:#a8402f}
[data-theme="light"] .good{color:#1e6b48}

/* ------------ Cabecera 1 fila: menú + filtros centrados juntos ------------ */
/* brand + sector a la izquierda; nav y filtros agrupados y centrados con margin auto.
   Filtros compactados al máximo para que el grupo quepa en una sola línea. */
@media(min-width:701px){
  body > header{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 16px !important;
    grid-template-columns:none !important;
  }
  /* Nav: items principales (Ejecutiva→Operativo) centrados como grupo;
     Mis analíticas empujado al borde derecho del nav, junto a filtros. */
  body > header > nav{
    flex:1 1 0 !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    gap:4px !important;
    margin-left:14px !important;
    min-width:0 !important;
  }
  body > header > nav > a:first-child{margin-left:auto !important}
  body > header > nav > a.nav-ai{margin-left:auto !important}
  body > header > .filters{flex-wrap:nowrap !important;flex-shrink:0;flex-grow:0;flex-basis:auto}
}
nav{gap:0 !important}
nav a{font-size:11px !important;padding:5px 6px !important;letter-spacing:0 !important}
.filters{gap:2px !important}
.hdr-select{min-width:56px !important;padding:5px 16px 5px 6px !important;font-size:10.5px !important}

/* ====================================================================
   <option> de los <select> — legibilidad en TODOS los temas.
   Chrome/Firefox solo respetan color + background-color en options.
   Sin esto, el browser usa colores por defecto que pueden quedar gris
   sobre cremoso (ilegible) según el tema.
   ==================================================================== */
.hdr-select option{
  color:#1c1d23;
  background-color:#ffffff;
  font-weight:500;
  padding:6px 10px;
}
.hdr-select option:checked,
.hdr-select option:hover{
  background-color:#e5b56b;
  color:#0a0b10;
}
/* Tema dark: opciones oscuras */
[data-theme="dark"] .hdr-select option,
html[data-style="dark"] .hdr-select option,
html[data-style="moderno"] .hdr-select option{
  color:#f2efe8;
  background-color:#1e2130;
}
[data-theme="dark"] .hdr-select option:checked,
[data-theme="dark"] .hdr-select option:hover,
html[data-style="dark"] .hdr-select option:checked,
html[data-style="dark"] .hdr-select option:hover,
html[data-style="moderno"] .hdr-select option:checked,
html[data-style="moderno"] .hdr-select option:hover{
  background-color:#E4B56B;
  color:#0a0b10;
}
/* Google theme: fondo blanco material + acento azul */
html[data-style="google"] .hdr-select option{
  color:#202124;
  background-color:#ffffff;
}
html[data-style="google"] .hdr-select option:checked,
html[data-style="google"] .hdr-select option:hover{
  background-color:#1a73e8;
  color:#ffffff;
}
.hdr-btn{width:24px !important;height:24px !important}
.sector-sw .sw-trigger{padding:5px 8px !important;font-size:11px !important}
.brand-name{font-size:11px !important}
.card:hover .card-extras{opacity:1}
.card-extras .ce-btn{
  background:transparent;border:1px solid var(--line-2,#323747);color:var(--muted,#8b8da3);
  width:26px;height:26px;border-radius:6px;cursor:pointer;display:grid;place-items:center;
  font-family:var(--f-mono,monospace);font-size:12px;line-height:1;padding:0;transition:all .15s;
}
.card-extras .ce-btn:hover{border-color:var(--accent,#e5b56b);color:var(--accent,#e5b56b)}
.card-extras .ce-menu{
  position:absolute;top:32px;right:0;background:var(--surface,#12141c);border:1px solid var(--line-2,#323747);
  border-radius:10px;padding:6px;min-width:180px;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  display:none;z-index:30;
}
.card-extras.open .ce-menu{display:block}
.card-extras .ce-mi{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;
  font-size:12.5px;color:var(--text,#f2efe8);cursor:pointer;background:transparent;border:0;width:100%;
  text-align:left;font-family:var(--f-ui,sans-serif);transition:background .12s;
}
.card-extras .ce-mi:hover{background:var(--surface-2,#1e2130)}
.card-extras .ce-mi .ce-ico{font-family:var(--f-mono,monospace);font-size:11px;color:var(--muted,#8b8da3);width:32px;letter-spacing:.06em}

/* ------------ Botones del header (Exportar dashboard, Pregunta IA) ------------ */
.hdr-action{
  background:var(--surface,#12141c);border:1px solid var(--line-2,#323747);color:var(--text,#f2efe8);
  padding:7px 14px;border-radius:7px;font-size:12.5px;font-family:var(--f-ui,sans-serif);font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .15s;white-space:nowrap;
}
.hdr-action:hover{border-color:var(--accent,#e5b56b);color:var(--accent,#e5b56b)}
.hdr-action .ha-ico{font-size:13px}
.hdr-action[data-busy="1"]{opacity:.6;pointer-events:none}
.hdr-action[data-busy="1"]::after{content:'…'}

/* Botones del header sólo-icono (Orden, Descargar) */
.hdr-action.hdr-icon-only{
  padding:7px 10px;gap:4px;font-family:var(--f-mono,monospace);font-size:13px;
  min-width:34px;justify-content:center;
}
.hdr-action.hdr-icon-only .ha-ico{font-size:14px;line-height:1}
.hdr-action.hdr-icon-only .ha-chev{font-size:9px;opacity:.6;line-height:1}

/* ------------ Footer credit ------------ */
footer{display:flex;flex-direction:column;gap:6px;align-items:center}
footer .footer-credit{
  font-size:11px;color:var(--muted-2,#60637a);
  font-family:var(--f-mono,monospace);letter-spacing:.04em;
}
footer .footer-credit a,
.foot a{
  color:#ff8c2f;text-decoration:none;
  border-bottom:1px solid rgba(255,140,47,.4);
  transition:color .15s,border-color .15s;
}
footer .footer-credit a:hover,
.foot a:hover{
  color:#ff6f00;
  border-bottom-color:#ff6f00;
}

/* ------------ Brand logo (PNG) ------------ */
.brand{display:flex;align-items:center;text-decoration:none;color:inherit;gap:0}
.brand-logo{
  height:34px;width:auto;display:block;
  filter:drop-shadow(0 4px 14px rgba(229,181,107,.18));
  transition:filter .18s,transform .18s;
}
.brand:hover .brand-logo{
  filter:drop-shadow(0 6px 18px rgba(229,181,107,.32));
  transform:translateY(-1px);
}
[data-theme="light"] .brand-logo{filter:none}
/* Misma altura en ambos modos. -30% para liberar espacio al menu en cabecera. */
.brand-logo,.brand-logo-light{height:27px;width:auto;max-width:none}
.brand-logo-light{display:none}
[data-theme="light"] .brand-logo-dark{display:none}
[data-theme="light"] .brand-logo-light{display:block}
@media(max-width:700px){.brand-logo,.brand-logo-light{height:21px}}
[data-theme="light"] .brand:hover .brand-logo{filter:drop-shadow(0 4px 12px rgba(185,125,54,.18))}
@media(max-width:700px){.brand-logo{height:28px}}

/* ------------ Iconos en selectores del header ------------ */
header .filters select#f-anio{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4 L5 7 L8 4' stroke='%238b8da3' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:11px center,right 10px center !important;
  background-size:14px 14px,10px 10px !important;
  padding-left:34px !important;
}
header .filters select#f-repre,
header .filters select#f-canal{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4 L5 7 L8 4' stroke='%238b8da3' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:11px center,right 10px center !important;
  background-size:14px 14px,10px 10px !important;
  padding-left:34px !important;
}
header .filters select#f-anio:focus,
header .filters select#f-repre:focus,
header .filters select#f-canal:focus{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5b56b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4 L5 7 L8 4' stroke='%23e5b56b' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") !important;
}
header .filters select#f-repre:focus,
header .filters select#f-canal:focus{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5b56b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4 L5 7 L8 4' stroke='%23e5b56b' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") !important;
}

/* ------------ Descargar dropdown ------------ */
.hdr-pdf-wrap{position:relative;display:inline-block}
.hdr-pdf-wrap .ha-chev{font-size:9px;margin-left:1px;opacity:.7;line-height:1}
.hdr-pdf-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:var(--surface,#12141c);
  border:1px solid var(--line-2,#323747);border-radius:14px;padding:8px;min-width:300px;
  box-shadow:0 28px 60px -12px rgba(0,0,0,.65),0 8px 16px -4px rgba(0,0,0,.35);
  display:none;z-index:30;
}
.hdr-pdf-wrap.open .hdr-pdf-menu{display:block;animation:menu-in .2s cubic-bezier(.2,.8,.2,1)}
.hdr-pdf-section{
  padding:11px 14px 6px;font-family:var(--f-mono,monospace);font-size:9px;
  color:var(--muted-2,#60637a);letter-spacing:.14em;text-transform:uppercase;
  border-top:1px solid var(--line,#262a37);margin-top:4px;
}
.hdr-pdf-section:first-child{border-top:0;margin-top:0;padding-top:6px}

.hdr-pdf-menu .dl-mi{
  display:grid;grid-template-columns:36px 1fr;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  background:transparent;border:0;width:100%;text-align:left;
  font-family:var(--f-ui,sans-serif);color:var(--text,#f2efe8);
  transition:background .12s,transform .12s;
}
.hdr-pdf-menu .dl-mi:hover{background:var(--surface-2,#1e2130);transform:translateX(2px)}
.hdr-pdf-menu .dl-mi:hover .dl-ico{color:var(--accent,#e5b56b);border-color:var(--accent,#e5b56b)}
.hdr-pdf-menu .dl-ico{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-2,#1e2130);border:1px solid var(--line,#262a37);
  color:var(--muted,#8b8da3);transition:all .12s;flex-shrink:0;
}
.hdr-pdf-menu .dl-ico svg{width:18px;height:18px;display:block}
.hdr-pdf-menu .dl-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.hdr-pdf-menu .dl-label{font-size:13px;font-weight:600;color:var(--text,#f2efe8);line-height:1.25}
.hdr-pdf-menu .dl-sub{font-size:11px;color:var(--muted,#8b8da3);line-height:1.3;font-family:var(--f-mono,monospace);letter-spacing:.02em}

/* Nav con scroll horizontal si los enlaces no caben en desktop */
header > nav{
  flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;
  min-width:0;max-width:100%;
  scrollbar-width:thin;scrollbar-color:var(--line-2,#323747) transparent;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding-bottom:4px;margin-bottom:-4px;
}
header > nav::-webkit-scrollbar{height:4px}
header > nav::-webkit-scrollbar-track{background:transparent}
header > nav::-webkit-scrollbar-thumb{background:var(--line-2,#323747);border-radius:2px}
header > nav::-webkit-scrollbar-thumb:hover{background:var(--muted,#8b8da3)}
header > nav a{flex-shrink:0;white-space:nowrap}

/* Link "Mis analíticas" en el nav, con estilo distintivo */
nav a.nav-ai{
  border:1px solid color-mix(in oklab,var(--accent,#e5b56b) 35%,transparent);
  margin-left:6px;color:var(--accent,#e5b56b);
  background:color-mix(in oklab,var(--accent,#e5b56b) 6%,transparent);
  padding:5px 9px !important;font-size:11px !important;
}
nav a.nav-ai:hover{
  background:color-mix(in oklab,var(--accent,#e5b56b) 14%,transparent);
  color:var(--accent,#e5b56b);
}
nav a.nav-ai.active{
  color:var(--accent,#e5b56b);
  background:color-mix(in oklab,var(--accent,#e5b56b) 18%,transparent);
}
nav a.nav-ai.active::after{background:var(--accent,#e5b56b) !important;box-shadow:0 0 12px var(--accent,#e5b56b)}

/* ------------ Botón flotante AI ------------ */
.ai-fab{
  position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent,#e5b56b),var(--accent-deep,#c89048));
  border:0;cursor:pointer;display:grid;place-items:center;color:var(--ink,#0a0b10);
  box-shadow:0 14px 36px -8px rgba(229,181,107,.55),0 6px 16px -4px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;z-index:90;
  padding:0;line-height:0;
}
.ai-fab svg{width:30px;height:30px;display:block;stroke-width:1.6;filter:drop-shadow(0 1px 0 rgba(255,255,255,.25))}
.ai-fab .ai-fab-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ai-fab::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--accent,#e5b56b);opacity:.55;pointer-events:none;
  animation:ai-fab-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.ai-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 44px -10px rgba(229,181,107,.7),0 8px 20px -6px rgba(0,0,0,.45)}
.ai-fab.open{transform:scale(.92)}
.ai-fab.open::after{animation:none;opacity:0}
.ai-fab.open svg{transform:rotate(45deg);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@keyframes ai-fab-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .ai-fab::after{animation:none;opacity:0}
}

/* ------------ Drawer chat ------------ */
/* Backdrop oscurecido cuando el drawer está abierto. Evita que el dashboard
   detrás se mezcle visualmente con el panel del asistente IA. */
.ai-drawer-backdrop{
  position:fixed;inset:0;z-index:90;
  background:rgba(8,9,13,.40);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  opacity:0;pointer-events:none;
  transition:opacity .25s cubic-bezier(.2,.8,.2,1);
}
.ai-drawer-backdrop.show{opacity:1;pointer-events:auto;cursor:pointer}
[data-theme="light"] .ai-drawer-backdrop{background:rgba(28,29,35,.24)}

.ai-drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(520px,100vw);
  background:var(--surface,#12141c);border-left:1px solid var(--line,#262a37);
  display:flex;flex-direction:column;z-index:91;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:-30px 0 80px -20px rgba(0,0,0,.6);
}
.ai-drawer.open{transform:translateX(0)}

.aid-head{
  padding:18px 22px;border-bottom:1px solid var(--line,#262a37);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-shrink:0;
}
.aid-title{font-family:var(--f-display,sans-serif);font-size:18px;font-weight:700;letter-spacing:-.01em}
.aid-title .ai-badge{
  display:inline-block;font-family:var(--f-mono,monospace);font-size:9.5px;color:var(--accent,#e5b56b);
  letter-spacing:.12em;text-transform:uppercase;margin-left:8px;border:1px solid var(--accent,#e5b56b);
  padding:1px 6px;border-radius:4px;vertical-align:1px;
}
.aid-close{background:transparent;border:0;color:var(--muted,#8b8da3);font-size:22px;cursor:pointer;padding:4px 8px;line-height:1}
.aid-close:hover{color:var(--rust,#d36258)}

.aid-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--line,#262a37);padding:0 22px;flex-shrink:0;
  align-items:center;
}
.aid-tab{
  background:transparent;border:0;color:var(--muted,#8b8da3);padding:11px 14px;cursor:pointer;
  font-family:var(--f-mono,monospace);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.aid-tab.active{color:var(--text,#f2efe8);border-bottom-color:var(--accent,#e5b56b)}
.aid-tab:hover:not(.active){color:var(--text,#f2efe8)}
/* X de cierre alineada a la derecha en la fila de tabs */
.aid-tabs-close{
  margin-left:auto;
  background:transparent;border:1px solid transparent;color:var(--muted,#8b8da3);
  width:30px;height:30px;border-radius:7px;cursor:pointer;
  font-size:20px;line-height:1;display:grid;place-items:center;padding:0;
  transition:color .15s,border-color .15s,background .15s;
}
.aid-tabs-close:hover{
  color:var(--rust,#d36258);border-color:var(--rust,#d36258);
  background:color-mix(in oklab, var(--rust,#d36258) 8%, transparent);
}

.aid-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}

/* ============ Gate de email demo ============ */
.aid-email-gate{
  padding:32px 26px;display:flex;flex-direction:column;gap:18px;
  align-items:stretch;text-align:left;
}
.aid-email-gate .gate-icon{
  width:54px;height:54px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent,#e5b56b),var(--accent-deep,#c89048));
  color:var(--ink,#0a0b10);display:grid;place-items:center;
  box-shadow:0 14px 36px -10px rgba(229,181,107,.5);
  margin-bottom:6px;
}
.aid-email-gate .gate-icon svg{width:28px;height:28px;stroke-width:1.6;filter:drop-shadow(0 1px 0 rgba(255,255,255,.25))}
.inline-spark{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg,var(--accent,#e5b56b),var(--accent-deep,#c89048));
  color:var(--ink,#0a0b10);vertical-align:-5px;margin:0 2px;
}
.inline-spark svg{width:14px;height:14px;stroke-width:1.8}
.aid-email-gate h4{
  font-family:var(--f-display,sans-serif);font-size:22px;font-weight:700;
  color:var(--text,#f2efe8);letter-spacing:-.01em;margin:0;
}
.aid-email-gate .gate-sub{
  font-size:13px;color:var(--text-dim,#d4d0c3);line-height:1.55;
}
.aid-email-gate .gate-bullets{
  display:flex;flex-direction:column;gap:8px;
  /* color-mix garantiza contraste con el drawer en los 4 temas */
  background:color-mix(in oklab, var(--text,#f2efe8) 5%, transparent);
  border:1px solid color-mix(in oklab, var(--text,#f2efe8) 14%, transparent);
  border-radius:10px;padding:12px 14px;
}
.aid-email-gate .gate-bullets div{
  font-size:12px;color:var(--text-dim,#d4d0c3);display:flex;gap:10px;align-items:center;
}
.aid-email-gate .gate-bullets .check{
  color:var(--accent,#e5b56b);font-weight:700;font-family:var(--f-mono,monospace);
}
.aid-email-gate input[type="email"]{
  background:color-mix(in oklab, var(--text,#f2efe8) 5%, transparent);
  border:1px solid color-mix(in oklab, var(--text,#f2efe8) 18%, transparent);
  color:var(--text,#f2efe8);padding:13px 15px;border-radius:10px;
  font-size:14px;font-family:var(--f-ui,sans-serif);
}
.aid-email-gate input[type="email"]:focus{
  outline:none;border-color:var(--accent,#e5b56b);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent,#e5b56b) 18%,transparent);
}
.aid-email-gate .gate-btn{
  background:linear-gradient(135deg,var(--accent,#e5b56b),var(--accent-deep,#c89048));
  border:0;color:var(--ink,#0a0b10);padding:12px 18px;border-radius:10px;
  font-weight:700;font-size:14px;cursor:pointer;font-family:var(--f-ui,sans-serif);
  transition:transform .15s;
}
.aid-email-gate .gate-btn:hover{transform:translateY(-1px)}
.aid-email-gate .gate-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.aid-email-gate .gate-consent{
  display:flex;gap:10px;align-items:flex-start;
  font-size:11.5px;color:var(--text-dim,#d4d0c3);line-height:1.5;
  cursor:pointer;user-select:none;padding:4px 0;
}
.aid-email-gate .gate-consent input[type="checkbox"]{
  margin-top:2px;flex-shrink:0;width:16px;height:16px;
  accent-color:var(--accent,#e5b56b);cursor:pointer;
}
.aid-email-gate .gate-consent a,
.aid-email-gate .gate-legal a{
  color:var(--accent,#e5b56b);text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--accent,#e5b56b) 30%,transparent);
}
.aid-email-gate .gate-consent a:hover,
.aid-email-gate .gate-legal a:hover{
  color:var(--accent-deep,#c89048);
  border-bottom-color:var(--accent-deep,#c89048);
}
.aid-email-gate .gate-legal{
  font-size:11px;color:var(--muted-2,#60637a);line-height:1.55;
  font-family:var(--f-mono,monospace);letter-spacing:.02em;
}
.aid-email-gate .gate-error{
  background:color-mix(in oklab,var(--rust,#d36258) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--rust,#d36258) 30%,transparent);
  color:#f0a59e;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.4;
}

/* Contador de pruebas en el head del drawer */
.aid-counter{
  font-family:var(--f-mono,monospace);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted,#8b8da3);background:var(--ink,#0a0b10);
  padding:4px 8px;border-radius:5px;border:1px solid var(--line-2,#323747);
  display:inline-flex;align-items:center;gap:6px;
}
.aid-counter.low{color:var(--rust,#d36258);border-color:var(--rust,#d36258)}
.aid-counter .change-mail{
  background:transparent;border:0;color:var(--muted-2,#60637a);
  padding:0 0 0 6px;cursor:pointer;border-left:1px solid var(--line-2,#323747);
  margin-left:4px;font-size:9px;
}
.aid-counter .change-mail:hover{color:var(--rust,#d36258)}
.aid-head{flex-wrap:wrap;gap:10px}
.aid-head-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.aid-empty{
  text-align:center;padding:40px 20px;color:var(--muted,#8b8da3);font-size:13px;line-height:1.6;
}
.aid-empty h4{font-family:var(--f-display,sans-serif);font-size:18px;color:var(--text,#f2efe8);margin-bottom:10px;font-weight:700}
.aid-empty .ex{
  display:block;background:var(--surface-2,#1e2130);border:1px solid var(--line,#262a37);border-radius:8px;
  padding:9px 12px;margin-top:8px;cursor:pointer;text-align:left;font-size:12px;color:var(--text-dim,#d4d0c3);
  transition:all .12s;
}
.aid-empty .ex:hover{border-color:var(--accent,#e5b56b);color:var(--text,#f2efe8)}

.aid-msg{display:flex;flex-direction:column;gap:8px;animation:msg-in .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.aid-msg .role{font-family:var(--f-mono,monospace);font-size:9.5px;color:var(--muted,#8b8da3);letter-spacing:.1em;text-transform:uppercase}
.aid-msg.user .role{color:var(--blue,#6b95e5)}
.aid-msg.ai .role{color:var(--accent,#e5b56b)}
.aid-msg .bubble{
  background:var(--surface-2,#1e2130);border:1px solid var(--line,#262a37);border-radius:10px;
  padding:14px 16px;font-size:13px;line-height:1.55;color:var(--text-dim,#d4d0c3);
}
.aid-msg.user .bubble{
  background:color-mix(in oklab,var(--blue,#6b95e5) 8%,var(--surface-2,#1e2130));
  border-color:color-mix(in oklab,var(--blue,#6b95e5) 22%,transparent);
}
.aid-msg .narrative{font-size:13px;line-height:1.55;color:var(--text,#f2efe8);margin-bottom:10px}
.aid-msg .meta{font-family:var(--f-mono,monospace);font-size:9.5px;color:var(--muted,#8b8da3);letter-spacing:.06em;margin-top:6px}
.aid-msg .meta code{background:var(--ink,#0a0b10);padding:1px 5px;border-radius:3px;font-size:10px}
.aid-msg .err{color:var(--rust,#d36258);font-size:12px;line-height:1.5}
.aid-msg .err pre{background:var(--ink,#0a0b10);padding:8px 10px;border-radius:6px;font-size:11px;margin-top:6px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}

.aid-result{
  background:var(--surface-2,#1e2130);border:1px solid var(--line,#262a37);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}
.aid-result h5{font-family:var(--f-display,sans-serif);font-size:14px;font-weight:700;color:var(--text,#f2efe8);margin:0}
.aid-result .ar-chart{position:relative;height:220px;min-height:160px}

/* Tabla IA — pulida */
.aid-result .ar-table{
  max-height:300px;overflow:auto;
  border:1px solid var(--line,#262a37);border-radius:8px;
  background:var(--ink,#0a0b10);
}
.ai-table,table.saved-table{
  width:100%;border-collapse:collapse;font-size:12px;
  font-family:var(--f-ui,sans-serif);
}
.ai-table thead,table.saved-table thead{
  position:sticky;top:0;z-index:1;
}
.ai-table thead th,table.saved-table thead th{
  background:var(--surface,#12141c);
  font-family:var(--f-mono,monospace);font-size:9.5px;font-weight:600;
  color:var(--muted,#8b8da3);
  letter-spacing:.1em;text-transform:uppercase;
  padding:11px 14px;border-bottom:1px solid var(--line-2,#323747);
  white-space:nowrap;cursor:pointer;user-select:none;text-align:left;
}
.ai-table thead th:hover,table.saved-table thead th:hover{color:var(--text,#f2efe8)}
.ai-table thead th.col-num,.ai-table thead th.col-int,
table.saved-table thead th.col-num,table.saved-table thead th.col-int{text-align:right}
.ai-table thead th.col-date,table.saved-table thead th.col-date{text-align:center}

.ai-table tbody td,table.saved-table tbody td{
  padding:0 14px;border-bottom:1px solid var(--line,#262a37);
  vertical-align:middle;color:var(--text-dim,#d4d0c3);
  height:38px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:280px;
}
table.saved-table tbody td{height:34px;max-width:240px}
.ai-table thead th,table.saved-table thead th{height:34px;line-height:1.2}
.ai-table tbody td.col-num,.ai-table tbody td.col-int,
table.saved-table tbody td.col-num,table.saved-table tbody td.col-int{
  text-align:right;
  font-family:var(--f-mono,monospace);font-variant-numeric:tabular-nums slashed-zero;
  color:var(--text,#f2efe8);font-weight:500;
  max-width:none;min-width:90px;
}
.ai-table tbody td.col-date,table.saved-table tbody td.col-date{
  min-width:110px;max-width:none;
}
.ai-table tbody td.col-date,table.saved-table tbody td.col-date{
  text-align:center;
  font-family:var(--f-mono,monospace);font-variant-numeric:tabular-nums;
  color:var(--text-dim,#d4d0c3);font-size:11px;letter-spacing:.01em;
}
.ai-table tbody td.col-text,table.saved-table tbody td.col-text{text-align:left}
.ai-table tbody td.cell-null,table.saved-table tbody td.cell-null{
  color:var(--muted-2,#60637a);text-align:center;font-family:var(--f-mono,monospace);
}
.ai-table tbody tr:nth-child(even) td,table.saved-table tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.012);
}
.ai-table tbody tr:hover td,table.saved-table tbody tr:hover td{
  background:var(--row-hover,rgba(229,181,107,.025));
}
.ai-table tbody tr:last-child td,table.saved-table tbody tr:last-child td{border-bottom:0}

[data-theme="light"] .ai-table tbody tr:nth-child(even) td,
[data-theme="light"] table.saved-table tbody tr:nth-child(even) td{
  background:rgba(0,0,0,.02);
}
.aid-result .ar-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.aid-result .ar-btn{
  background:transparent;border:1px solid var(--line-2,#323747);color:var(--muted,#8b8da3);
  padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:var(--f-ui,sans-serif);
  transition:all .12s;
}
.aid-result .ar-btn:hover{border-color:var(--accent,#e5b56b);color:var(--accent,#e5b56b)}
.aid-result .ar-btn.primary{border-color:var(--accent,#e5b56b);color:var(--accent,#e5b56b)}
.aid-result .ar-btn.primary:hover{background:color-mix(in oklab,var(--accent,#e5b56b) 14%,transparent)}
.aid-result details{margin-top:4px}
.aid-result details summary{font-family:var(--f-mono,monospace);font-size:9.5px;color:var(--muted,#8b8da3);letter-spacing:.08em;cursor:pointer;padding:4px 0}
.aid-result details summary:hover{color:var(--text,#f2efe8)}
.aid-result details pre{background:var(--ink,#0a0b10);border:1px solid var(--line,#262a37);border-radius:6px;padding:9px 11px;font-size:10.5px;margin-top:5px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;font-family:var(--f-mono,monospace);color:var(--text-dim,#d4d0c3)}

/* Lista de "Mis analíticas" */
.aid-saved-list{display:flex;flex-direction:column;gap:8px}
.aid-saved-item{
  background:var(--surface-2,#1e2130);border:1px solid var(--line,#262a37);border-radius:8px;
  padding:11px 13px;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  transition:all .12s;
}
.aid-saved-item:hover{border-color:var(--accent,#e5b56b)}
.aid-saved-item .si-title{font-size:13px;font-weight:600;color:var(--text,#f2efe8);margin-bottom:3px}
.aid-saved-item .si-prompt{font-size:11px;color:var(--muted,#8b8da3);line-height:1.4}
.aid-saved-item .si-meta{font-family:var(--f-mono,monospace);font-size:9px;color:var(--muted-2,#60637a);letter-spacing:.08em;margin-top:5px}
.aid-saved-item .si-del{
  background:transparent;border:0;color:var(--muted-2,#60637a);cursor:pointer;font-size:14px;padding:2px 6px;flex-shrink:0;
}
.aid-saved-item .si-del:hover{color:var(--rust,#d36258)}
.aid-saved-empty{padding:24px 12px;text-align:center;color:var(--muted,#8b8da3);font-size:12px;line-height:1.6}

/* Input bar abajo */
.aid-input{
  border-top:1px solid var(--line,#262a37);padding:14px 18px;display:flex;gap:10px;flex-shrink:0;
  background:var(--surface,#12141c);
}
.aid-input textarea{
  flex:1;background:var(--surface-2,#1e2130);border:1px solid var(--line-2,#323747);color:var(--text,#f2efe8);
  border-radius:8px;padding:11px 13px;font-size:13px;font-family:var(--f-ui,sans-serif);resize:none;
  min-height:46px;max-height:140px;line-height:1.45;
}
.aid-input textarea:focus{outline:none;border-color:var(--accent,#e5b56b);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent,#e5b56b) 18%,transparent)}
.aid-input .send{
  background:linear-gradient(135deg,var(--accent,#e5b56b),var(--accent-deep,#c89048));
  border:0;color:var(--ink,#0a0b10);padding:0 18px;border-radius:8px;cursor:pointer;font-weight:700;
  font-family:var(--f-ui,sans-serif);font-size:13px;flex-shrink:0;transition:transform .12s;
}
.aid-input .send:hover{transform:translateY(-1px)}
.aid-input .send:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Cards "guardadas" insertadas en el dashboard */
.saved-section{margin-top:var(--s-3,20px)}
.saved-section h2{font-size:24px;margin-bottom:12px}
.saved-card .card-header .saved-tag{
  font-family:var(--f-mono,monospace);font-size:9px;letter-spacing:.1em;color:var(--accent,#e5b56b);
  border:1px solid var(--accent,#e5b56b);padding:2px 7px;border-radius:4px;text-transform:uppercase;margin-left:8px;
}

/* Cards con tabla pequeña: que no se estiren a la altura de la card vecina del grid */
main .grid > .saved-card{align-self:start}

/* Masonry layout: cada card ocupa solo lo que necesita y las de abajo suben.
   Usa grid-auto-rows pequeño + grid-row-end:span N calculado por JS.
   Compatible con SortableJS (cada card sigue siendo un grid item normal). */
main .grid.masonry{
  grid-auto-rows:8px;
  align-items:start;
  column-gap:16px;
  row-gap:16px;
}

/* ------------ Drag & drop reorder (SortableJS) ------------ */
/* Toda la card es área de drag */
main .grid > .card{cursor:grab}
main .grid > .card:active{cursor:grabbing}

/* Excluir cursor grab de los elementos interactivos (clicks normales) */
main .grid > .card canvas,
main .grid > .card table,
main .grid > .card thead,
main .grid > .card tbody,
main .grid > .card tr,
main .grid > .card th,
main .grid > .card td,
main .grid > .card .scroll,
main .grid > .card .scroll *,
main .grid > .card input,
main .grid > .card button,
main .grid > .card a,
main .grid > .card select,
main .grid > .card textarea,
main .grid > .card label,
main .grid > .card details,
main .grid > .card summary,
main .grid > .card .card-extras,
main .grid > .card .card-extras *,
main .grid > .card .search,
main .grid > .card .search *,
main .grid > .card .tbl-search,
main .grid > .card .tbl-search *,
main .grid > .card .ar-actions,
main .grid > .card .ar-actions *,
main .grid > .card .ar-table,
main .grid > .card .ar-table *{cursor:auto}
main .grid > .card button,
main .grid > .card a{cursor:pointer}
main .grid > .card input,
main .grid > .card textarea{cursor:text}

/* Hint visual: punto en esquina superior izquierda al hacer hover */
main .grid > .card::before{
  content:'⋮⋮';position:absolute;top:8px;left:10px;
  color:var(--muted-2,#60637a);font-family:var(--f-mono,monospace);
  letter-spacing:-1px;font-size:11px;line-height:1;
  opacity:0;transition:opacity .15s;pointer-events:none;z-index:2;
}
main .grid > .card:hover::before{opacity:.5}

.sortable-ghost{
  opacity:.35;outline:2px dashed var(--accent,#e5b56b);outline-offset:-2px;
  background:color-mix(in oklab,var(--accent,#e5b56b) 8%,var(--surface-2,#1e2130));
}
.sortable-chosen{cursor:grabbing !important}
.sortable-drag{
  box-shadow:0 26px 60px -10px rgba(0,0,0,.55),0 8px 22px -6px rgba(0,0,0,.4);
  cursor:grabbing !important;transform:rotate(1deg);
}

/* ------------ Filtro/ordenación en tablas IA ------------ */
.tbl-search{
  display:flex;align-items:center;gap:10px;margin:6px 0 10px;flex-wrap:wrap;
}
.tbl-search input{
  flex:1;min-width:140px;background:var(--surface,#12141c);border:1px solid var(--line-2,#323747);
  color:var(--text,#f2efe8);padding:7px 11px;border-radius:7px;font-size:12px;
  font-family:var(--f-ui,sans-serif);transition:border-color .12s;
}
.tbl-search input:focus{outline:none;border-color:var(--accent,#e5b56b);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent,#e5b56b) 18%,transparent)}
.tbl-search input::placeholder{color:var(--muted-2,#60637a)}
.tbl-search .tbl-count{font-family:var(--f-mono,monospace);font-size:9.5px;color:var(--muted,#8b8da3);letter-spacing:.08em;flex-shrink:0;text-transform:uppercase}
.tbl-search .tbl-clear{
  background:transparent;border:1px solid var(--line-2,#323747);color:var(--muted,#8b8da3);
  padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:var(--f-ui,sans-serif);
}
.tbl-search .tbl-clear:hover{border-color:var(--rust,#d36258);color:var(--rust,#d36258)}

/* AI tables: th clickable */
.aid-result .ar-table th,.saved-card th{cursor:pointer;user-select:none}
.aid-result .ar-table th.sort-asc::after,.saved-card th.sort-asc::after{content:'↑';opacity:1;color:var(--accent,#e5b56b);margin-left:6px}
.aid-result .ar-table th.sort-desc::after,.saved-card th.sort-desc::after{content:'↓';opacity:1;color:var(--accent,#e5b56b);margin-left:6px}

/* Responsive */
@media(max-width:700px){
  .ai-drawer{width:100vw}
  .ai-fab{bottom:18px;right:18px;width:54px;height:54px}
  .ai-fab svg{width:26px;height:26px}
  .card-extras{top:10px;right:10px;opacity:1}
  .card .card-header h3.drag-handle::before{display:none}
}