/* ============================================================
   Estadísticas E3 — “Pro Modern Flex” (SOLO LIGHT, sin grid)
   - Profesional, moderno, sin sombras “gordas”
   - Un gráfico por FILA (siempre 100% ancho)
   - Botones/toggles nuevos con hovers suaves (sin translate)
   - Rápidos arriba, controles debajo del gráfico
   - 100% namespaced con sufijo -chart-e3
   ============================================================ */

/* -------------------------------
   Design Tokens (Light only)
--------------------------------*/
:root {
  /* Surfaces */
  --e3-surface-chart-e3:       #ffffff;
  --e3-surface-alt-chart-e3:   #f7f8fb;
  --e3-elev1-chart-e3:         #ffffff;
  --e3-border-chart-e3:        #e6e8ef;

  /* Text */
  --e3-text-chart-e3:          #1e1f24;
  --e3-muted-chart-e3:         #6a6f7a;

  /* Shadow sutil */
  --e3-shadow-soft-chart-e3:   0 6px 18px rgba(16,24,40,.08);

  /* Radius (moderado) */
  --e3-r-sm-chart-e3:   6px;
  --e3-r-md-chart-e3:   8px;
  --e3-r-lg-chart-e3:   10px;
  --e3-r-xl-chart-e3:   12px;

  /* Colores de acento */
  --e3-accent-1-chart-e3:  #3b82f6;  /* azure */
  --e3-accent-2-chart-e3:  #22c55e;  /* green */
  --e3-accent-3-chart-e3:  #f59e0b;  /* amber */
  --e3-accent-4-chart-e3:  #ef4444;  /* red */
  --e3-accent-5-chart-e3:  #8b5cf6;  /* violet */
  --e3-accent-6-chart-e3:  #06b6d4;  /* cyan */
  --e3-accent-7-chart-e3:  #f43f5e;  /* rose */
  --e3-accent-8-chart-e3:  #10b981;  /* emerald */
  --e3-accent-9-chart-e3:  #0ea5e9;  /* sky */
  --e3-accent-10-chart-e3: #eab308;  /* yellow */
  --e3-accent-11-chart-e3: #a855f7;  /* purple */
  --e3-accent-12-chart-e3: #14b8a6;  /* teal */

  /* Controles */
  --e3-ctrl-bg-chart-e3:      #ffffff;
  --e3-ctrl-border-chart-e3:  #dfe3ea;
  --e3-focus-ring-chart-e3:   0 0 0 4px rgba(59,130,246,.18);

  /* Sizes */
  --e3-h-btn-chart-e3:        40px;
  --e3-h-chip-chart-e3:       34px;
  --e3-h-input-chart-e3:      40px;
}

/* -----------------------------------
   Modal Shell — limpio y profesional
------------------------------------*/
.modal-shell-chart-e3 {
  background: var(--e3-elev1-chart-e3);
  border: 1px solid var(--e3-border-chart-e3);
  border-radius: var(--e3-r-xl-chart-e3);
  box-shadow: var(--e3-shadow-soft-chart-e3);
  overflow: hidden;
}
.modal-header-chart-e3 {
  background: var(--e3-surface-alt-chart-e3);
  border-bottom: 1px solid var(--e3-border-chart-e3);
  padding: 12px 16px;
}
.title-wrap-chart-e3 { display:flex; align-items:center; gap:10px; }
.robot-title-chart-e3 { color: var(--e3-accent-1-chart-e3); font-size: 18px; }
.modal-title-chart-e3 { margin:0; color:var(--e3-text-chart-e3); letter-spacing:.2px; }
.modal-body-chart-e3 { background: var(--e3-surface-chart-e3); padding: 16px; }
.modal-footer-chart-e3 {
  background: var(--e3-surface-alt-chart-e3);
  border-top: 1px solid var(--e3-border-chart-e3);
  padding: 12px 16px;
}

/* Botón cerrar */
.modal-header-chart-e3 .btn-close,
.close-chart-e3 {
  width: 36px; height: 36px;
  border-radius: var(--e3-r-md-chart-e3);
  color: red !important;
  opacity: 1;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.modal-header-chart-e3 .btn-close:hover,
.close-chart-e3:hover { box-shadow: var(--e3-focus-ring-chart-e3); }

/* -----------------------------------
   Quickbar (Rápidos arriba de todo)
------------------------------------*/
.chart-e3-quickbar{
  display:flex; flex-wrap:wrap; gap:8px;
  margin: 0 0 10px 0;
}

/* -----------------------------------
   Spinner
------------------------------------*/
.chart-e3-spinner-wrap { min-height: 220px; }
.chart-e3-spinner { width:64px; height:64px; border-width:6px; color:var(--e3-accent-1-chart-e3); }

/* -----------------------------------
   KPIs (tarjetas compactas)
------------------------------------*/
/* Head */
.chart-e3-kpi-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: "Rubik", sans-serif;
  color: #6a6f7a; /* muted oscuro */
  letter-spacing:.2px;
}

/* Icono circular con acento */
.chart-e3-kpi-head i{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;

  background:
    linear-gradient(180deg, rgba(var(--kpi-color), .95), rgba(var(--kpi-color), .75));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 0px 14px rgba(var(--kpi-color), .35),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* Valor principal */
.chart-e3-kpi-main{
  margin-top:6px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing:.2px;
  color:#0b0b0b;
}

/* Subtítulo */
.chart-e3-kpi-sub{
  margin-top:2px;
  font-family: "Rubik", sans-serif;
  font-size: 12px;
  color:#6a6f7a;
}

/* Acentos por KPI (usa data-kpi del HTML) */
.chart-e3-kpi[data-kpi="kpi-total-revenue"]{ --kpi-color: 34,197,94; }   /* verde */
.chart-e3-kpi[data-kpi="kpi-ticket"]{        --kpi-color: 79,70,229; }   /* indigo */
.chart-e3-kpi[data-kpi="kpi-cancel"]{        --kpi-color: 239,68,68; }   /* rojo */
.chart-e3-kpi[data-kpi="kpi-conv"]{          --kpi-color: 37,99,235; }   /* azul */
.chart-e3-kpi[data-kpi="kpi-aband"]{         --kpi-color: 245,158,11; }  /* ámbar */
.chart-e3-kpi[data-kpi="kpi-canc-rate"]{     --kpi-color: 244,63,94; }   /* rose */
.chart-e3-kpi[data-kpi="kpi-transfers"]{     --kpi-color: 6,182,212; }   /* cyan */
.chart-e3-kpi[data-kpi="kpi-inproc-amt"]{    --kpi-color: 13,148,136; /* teal 600 #0D9488 */
}

/* Fallback sin soporte de blur */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .chart-e3-kpi{
    background:#ffffff;
    box-shadow: 0 10px 20px rgba(16,24,40,.10);
  }
}

/* Fullscreen badges */
.e3-fs-grid{height:720px;display:grid;grid-template-columns:1fr;gap:12px}
.e3-fs-slot{position:relative;height:100%}
.e3-fs-slot canvas{height:100%!important;width:100%!important}
.e3-fs-badge{
  position:absolute;left:10px;top:10px;z-index:5;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;padding:6px 10px;
  font-size:12px;font-weight:700;color:#111;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.12)
}
.e3-fs-badge .dot{
  width:8px;height:8px;border-radius:999px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)
}

/* Badges en tarjetas (vista chica) */
.e3-card-badge{
  position:absolute;left:8px;top:8px;z-index:3;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;padding:4px 8px;
  font-size:11px;font-weight:700;color:#111;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.e3-card-badge .dot{
  width:8px;height:8px;border-radius:999px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);
}
/* Asegurar anclaje relativo dentro de cada columna del dual */
.chart-e3-dual-col{ position:relative; }

/* -----------------------------------
   Toolbar (fechas, estados, acciones)
------------------------------------*/
.chart-e3-toolbar{
  background: var(--e3-elev1-chart-e3);
  border: 1px solid var(--e3-border-chart-e3);
  border-radius: var(--e3-r-xl-chart-e3);
  box-shadow: var(--e3-shadow-soft-chart-e3);
  padding: 12px;
  margin-bottom: 12px;
}
.chart-e3-toolrow{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:10px;
}
.chart-e3-field{ flex: 1 1 220px; }
.chart-e3-field > label{
  font-family: "Rubik", sans-serif;
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; margin-bottom:6px; color:var(--e3-text-chart-e3);
}
.chart-e3-field > label i{ color: var(--e3-accent-1-chart-e3); }

/* Inputs / selects */
.chart-e3-input, .chart-e3-select{
  height: var(--e3-h-input-chart-e3);
  width:100%;
  margin-bottom: 0;
  border:1px solid var(--e3-ctrl-border-chart-e3);
  border-radius: var(--e3-r-md-chart-e3) !important;
  padding:6px 12px;
  background: var(--e3-ctrl-bg-chart-e3);
  color:var(--e3-text-chart-e3);
  font-weight:600;
  outline:none;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.chart-e3-input:focus, .chart-e3-select:focus{
  border-color: var(--e3-accent-1-chart-e3);
  box-shadow: var(--e3-focus-ring-chart-e3);
}

/* Botones */
.chart-e3-btn, .chart-e3-chip{
  font-family: "Rubik", sans-serif !important;
  height: var(--e3-h-btn-chart-e3);
  border-radius: var(--e3-r-md-chart-e3);
  border: 1px solid var(--e3-ctrl-border-chart-e3);
  background: var(--e3-ctrl-bg-chart-e3);
  padding: 0 14px;
  display:inline-flex; align-items:center; gap:10px;
  font-weight:500; font-size:12.5px; color:var(--e3-text-chart-e3);
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease, filter .1s ease;
}
.chart-e3-btn:hover, .chart-e3-chip:hover{
  border-color: var(--e3-accent-1-chart-e3);
  box-shadow: 0 10px 22px rgba(59,130,246,.12);
  filter: brightness(1.02);
  color: white !important;
}
.chart-e3-btn.primary{
  color:#fff; border-color:transparent;
  background: linear-gradient(135deg, var(--e3-accent-1-chart-e3), var(--e3-accent-9-chart-e3));
}
.chart-e3-btn.ghost{ background: var(--e3-elev1-chart-e3); }
.chart-e3-btn.ghost:hover{ color: var(--e3-accent-1-chart-e3) !important; }
.chart-e3-btn.danger{
  color:#fff; border-color:transparent;
  background: linear-gradient(135deg, var(--e3-accent-4-chart-e3), #fb7185);
}
.chart-e3-actions{ margin-left:auto; display:flex; gap:10px; }

/* Estados (TOGGLES nuevos, reemplazan chips) */
.chart-e3-toggle-group{ display:flex; flex-wrap:wrap; gap:8px; }
.chart-e3-toggle{
  height: var(--e3-h-chip-chart-e3);
  border-radius: var(--e3-r-md-chart-e3);
  border:1px solid var(--e3-ctrl-border-chart-e3);
  background: var(--e3-ctrl-bg-chart-e3);
  padding: 0 12px;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:12px; color:var(--e3-text-chart-e3);
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.chart-e3-toggle:hover{ border-color:#bcd7ff; box-shadow: var(--e3-focus-ring-chart-e3); }
.chart-e3-toggle.on{
  color:#0b3b84;
  border-color:#bcd7ff;
  background: linear-gradient(135deg, #eaf3ff, #e9f7ff);
  box-shadow: var(--e3-focus-ring-chart-e3);
}
.chart-e3-toggle.off{ opacity:.8; }
.chart-e3-toggle i{ color: var(--e3-accent-1-chart-e3); }

/* Fila de comparación */
.chart-e3-compare-row{
  margin-top:10px;
  gap:12px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: rgb(255, 232, 232);
}

/* Distribuciones responsive de la toolbar */
@media (min-width:768px){
  .chart-e3-actions{ flex-wrap:nowrap; }
}

/* -----------------------------------
   Layout + Paneles (UN gráfico por fila)
------------------------------------*/
.chart-e3-grid{
  display:flex; flex-direction:column; gap:12px;
}
.chart-e3-row{ width:100%; } /* contenedor por fila */
.chart-e3-panel{
  width:100%;
  background: var(--e3-elev1-chart-e3);
  border: 1px solid var(--e3-border-chart-e3);
  border-radius: var(--e3-r-xl-chart-e3);
  box-shadow: var(--e3-shadow-soft-chart-e3);
  overflow: hidden;
  animation: e3-fade-in-chart-e3 .18s ease-out both;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.chart-e3-panel:hover{
  border-color:#d2d8e6;
  box-shadow: 0 12px 26px rgba(16,24,40,.12);
}
.chart-e3-panel-head{
  font-family: "Rubik", sans-serif !important;
  font-weight: 400;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--e3-border-chart-e3);
  background: var(--e3-surface-alt-chart-e3);
}
.chart-e3-title{ font-family: "Rubik", sans-serif !important; font-weight: 500; display:flex; align-items:center; gap:10px; color:var(--e3-text-chart-e3); }
.chart-e3-title i{ color: var(--e3-accent-1-cha
  rt-e3); }
.chart-e3-panel-body{ padding:10px; overflow:hidden; }
.chart-e3-panel-foot{
  padding:8px 10px; border-top:1px solid var(--e3-border-chart-e3);
  color:var(--e3-muted-chart-e3); font-size:12px; background: var(--e3-surface-alt-chart-e3);
}

/* Controles bajo el gráfico */
.chart-e3-subactions{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:10px; flex-wrap:wrap;
}
.chart-e3-subactions-left{ display:flex; flex-wrap:wrap; gap:8px; }
.chart-e3-subactions-right{ display:flex; flex-wrap:wrap; gap:8px; }
.chart-e3-select-wrap{ display:flex; align-items:center; gap:8px; }
.chart-e3-select-wrap i{ color: var(--e3-muted-chart-e3); }

/* Canvas hosts (el JS setea la altura para evitar overflow) */
.chart-e3-canvas-host{ position:relative; width:100%; height:300px; }
.chart-e3-single canvas,
.chart-e3-dual canvas{ width:100% !important; height:100% !important; display:block; }

/* Comparativa lado a lado (flex, sin grid) */
.chart-e3-dual{
  display:flex; flex-direction:column; gap:10px; width:100%; height:300px;
}
.chart-e3-dual-col{
  flex:1 1 auto;
  border:1px dashed var(--e3-border-chart-e3);
  border-radius: var(--e3-r-md-chart-e3);
  padding:6px; background: var(--e3-surface-chart-e3);
}
@media (min-width: 992px){
  .chart-e3-dual{ flex-direction:row; }
  .chart-e3-dual-col{ flex-basis:50%; }
}

/* Expandir panel (no fullscreen) */
.chart-e3-panel.chart-e3-expanded .chart-e3-canvas-host,
.chart-e3-panel.chart-e3-expanded .chart-e3-dual{ height:560px; }
@media (min-width:1200px){
  .chart-e3-panel.chart-e3-expanded .chart-e3-canvas-host,
  .chart-e3-panel.chart-e3-expanded .chart-e3-dual{ height:660px; }
}

/* -----------------------------------
   SweetAlert estilizado
------------------------------------*/
.chart-e3-swal{
  border-radius: var(--e3-r-xl-chart-e3) !important;
  border: 1px solid var(--e3-border-chart-e3) !important;
  background: var(--e3-elev1-chart-e3) !important;
  box-shadow: var(--e3-shadow-soft-chart-e3) !important;
  padding: 0 !important;
  color: var(--e3-text-chart-e3) !important;
}

/* Editor (flex, sin grid) */
.chart-e3-editor{ padding:10px 6px; }
.chart-e3-editor-grid{
  display:flex; flex-wrap:wrap; gap:10px; padding:6px 8px;
}
.chart-e3-label{ font-size:12px; font-weight:900; margin-bottom:6px; color:var(--e3-text-chart-e3); }
.chart-e3-list{
  border:1px solid var(--e3-border-chart-e3);
  border-radius: var(--e3-r-md-chart-e3);
  background: var(--e3-surface-chart-e3);
  padding:8px; max-height:240px; overflow:auto;
}
.chart-e3-check{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius: var(--e3-r-sm-chart-e3); transition: background .16s ease; }
.chart-e3-check:hover{ background: var(--e3-surface-alt-chart-e3); }
.chart-e3-list-actions{ display:flex; gap:8px; margin-top:8px; }

/* Orden: (1) Tipo, (2) Buscar, (3) Lista, (4) Nombre, (5) Color */
.chart-e3-editor-grid > div:nth-child(1),
.chart-e3-editor-grid > div:nth-child(2),
.chart-e3-editor-grid > div:nth-child(3),
.chart-e3-editor-grid > div:nth-child(4),
.chart-e3-editor-grid > div:nth-child(5){ flex: 1 1 100%; }

@media (min-width:768px){
  .chart-e3-editor-grid > div:nth-child(1){ flex: 1 1 48%; }
  .chart-e3-editor-grid > div:nth-child(2){ flex: 1 1 48%; }
  .chart-e3-editor-grid > div:nth-child(3){ flex: 1 1 100%; }
  .chart-e3-editor-grid > div:nth-child(4){ flex: 1 1 66%; }
  .chart-e3-editor-grid > div:nth-child(5){ flex: 1 1 32%; }
}

/* -----------------------------------
   Tipografía utilitaria local
------------------------------------*/
.modal-body-chart-e3 .text-muted{ color: var(--e3-muted-chart-e3) !important; }
.modal-body-chart-e3 code{
  background: var(--e3-surface-alt-chart-e3);
  border: 1px solid var(--e3-border-chart-e3);
  padding:1px 8px; border-radius: var(--e3-r-sm-chart-e3);
}

/* -----------------------------------
   Animación sutil (entrada, no hover)
------------------------------------*/
@keyframes e3-fade-in-chart-e3{
  from{ opacity:0; transform: translateY(6px); }
  to  { opacity:1; transform:none; }
}

/* -----------------------------------
   Responsive finos
------------------------------------*/
@media (max-width:575.98px){
  .chart-e3-btn, .chart-e3-chip{ height:38px; padding:0 12px; }
  .chart-e3-canvas-host, .chart-e3-dual{ height:260px; }
}

/* -----------------------------------
   Paleta dot utilitaria
------------------------------------*/
.chart-e3-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.chart-e3-dot.c1  { background: var(--e3-accent-1-chart-e3); }
.chart-e3-dot.c2  { background: var(--e3-accent-2-chart-e3); }
.chart-e3-dot.c3  { background: var(--e3-accent-3-chart-e3); }
.chart-e3-dot.c4  { background: var(--e3-accent-4-chart-e3); }
.chart-e3-dot.c5  { background: var(--e3-accent-5-chart-e3); }
.chart-e3-dot.c6  { background: var(--e3-accent-6-chart-e3); }
.chart-e3-dot.c7  { background: var(--e3-accent-7-chart-e3); }
.chart-e3-dot.c8  { background: var(--e3-accent-8-chart-e3); }
.chart-e3-dot.c9  { background: var(--e3-accent-9-chart-e3); }
.chart-e3-dot.c10 { background: var(--e3-accent-10-chart-e3); }
.chart-e3-dot.c11 { background: var(--e3-accent-11-chart-e3); }
.chart-e3-dot.c12 { background: var(--e3-accent-12-chart-e3); }

/* X roja para el .btn-close del header del modal */
.modal-header-chart-e3 .btn-close,
.modal-header-chart-e3 .btn-close.btn-close-white {
  --bs-btn-close-color: #ef4444;
  filter: none;
  opacity: 1;
}
.modal-header-chart-e3 .btn-close:hover { box-shadow: var(--e3-focus-ring-chart-e3); }

.chart-e3-select{
  appearance: none; -webkit-appearance:none; -moz-appearance:none;
  background-image:
    linear-gradient(transparent,transparent),
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%236a6f7a' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, right 10px center;
  background-size: 16px 16px, 16px 16px;
  padding-right: 36px; /* espacio para la flecha */
}

/* Badge de rango (solo claro, letra oscura) */
.chart-e3-range-badge{
  --border: rgba(0,0,0,.08);
  --shadow: rgba(0,0,0,.10);

  margin:8px 0;
  font-size:12px;
  color:#111;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35) 60%),
    #F3F4F6;
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 12px;

  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 8px 20px var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
}

.chart-e3-range-badge strong{
  font-weight:700;
  letter-spacing:.2px;
}

/* Fila de estados */
.chart-e3-states-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

/* Card base estado */
.chart-e3-state-box{
  --tint: rgba(0,0,0,.02);
  --border: rgba(0,0,0,.08);
  --shadow: rgba(16,24,40,.10);
  --accent: 17,24,39; /* fallback */

  flex:1 0 220px;
  border-radius:14px;
  padding:10px 12px;
  color:#0b0b0b;

  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.30) 60%),
    var(--tint);
  border:1px solid var(--border);

  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);

  display:flex;
  flex-direction:column;
  gap:8px;

  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.chart-e3-state-box:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.55);
}

/* Head: título a la izquierda, ícono a la derecha */
.chart-e3-state-box > .d-flex:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between !important;
  gap:8px;
  width:100%;
}

/* Estilo del título e ícono */
.chart-e3-state-box .fw-700{
  font-weight:700;
  letter-spacing:.2px;
}

.chart-e3-state-box i[class^="bi"]{
  font-size:18px;
  color: rgb(var(--accent));
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  opacity:.9;
}

/* Valor grande */
.chart-e3-state-box .big{
  font: 700 26px/1.1 "SF Pro Display", -apple-system, BlinkMacSystemFont, Inter, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
}

/* (Opcional) Sub-etiqueta estilo macOS dentro del box */
.chart-e3-state-box .sub{
  --pill-bg: rgba(var(--accent), .10);
  --pill-border: rgba(0,0,0,.08);

  display:inline-flex;
  align-items:center;
  gap:8px;

  width: fit-content;
  padding:6px 12px;
  border-radius:14px;
  border:1px solid var(--pill-border);

  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.25) 60%),
    var(--pill-bg);
  color:#0b3b84; /* texto oscuro; cambiá si querés fijarlo por estado */

  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.55);

  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
}

/* Variantes por estado (solo claro, letra oscura) */
.box-aprob{
  --tint: rgba(34,197,94,.12);     /* verde */
  --border: rgba(16,185,129,.28);
  --accent: 34,197,94;
}
.box-canc{
  --tint: rgba(239,68,68,.12);     /* rojo */
  --border: rgba(239,68,68,.28);
  --accent: 239,68,68;
}
.box-aband{
  --tint: rgba(245,158,11,.14);    /* ámbar */
  --border: rgba(245,158,11,.30);
  --accent: 245,158,11;
}

/* Fallback sin soporte de blur */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .chart-e3-range-badge,
  .chart-e3-state-box{
    background:#ffffff;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }
}

/* Fallback sin soporte de blur */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .chart-e3-range-badge,
  .chart-e3-state-box{
    background:#fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }
}
.chart-e3-state-box .big{ font-size:40px !important; line-height:1; font-family: "Rubik", sans-serif; font-weight: 500 !important;}
.chart-e3-state-box .sub{ font-size:12px; opacity:.8;}
/* Pill estilo macOS — SOLO modo claro con letra oscura */
.chart-e3-state-box .sub {
  /* Tokens */
  --tint: rgba(11, 59, 132, 0.12);     
  --border: rgba(0, 0, 0, 0.08);
  --shadow: rgba(0, 0, 0, 0.12);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  width: fit-content;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);

  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.25) 60%),
    var(--tint);
  color: #353535; 

  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);

  box-shadow:
    0 8px 24px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.55);

  font-family: "Rubik", sans-serif;
  font-weight: 500;
  letter-spacing: .2px;

  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.chart-e3-state-box .sub:hover {
  box-shadow:
    0 10px 28px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.6);
  border-color: rgba(0,0,0,.12);
}

.chart-e3-state-box .sub:active {
  transform: translateY(1px);
  box-shadow:
    0 6px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* Fallback sin soporte de blur */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .chart-e3-state-box .sub {
    background: rgba(11, 59, 132, 0.10);
    color: #0b3b84;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
  }
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .chart-e3-state-box .sub { transition: none; }
}

/* Quick buttons (ventas) con más gap */
.chart-e3-btn.ventas-range{ margin-right:6px; }

/* IA superior — estilo limpio, sin subrayado y con scroll real */
.chart-e3-ai{ border-radius:16px; padding:12px; background:linear-gradient(180deg,#fff,#fbfbff); border:1px solid #E6E8EF; position:relative; margin-bottom:10px; }
.chart-e3-ai-head{ display:flex; align-items:center; gap:10px; font-weight:600; }
.chart-e3-ai-chip{ font-size:11px; padding:3px 8px; border-radius:999px; background:#111827; color:#fff; opacity:.9; }
.chart-e3-ai-body{ margin-top:8px; max-height:340px; overflow:auto; -webkit-overflow-scrolling:touch; line-height:1.55; }
.chart-e3-ai-body ::selection{ background:#D6E4FF; }
.chart-e3-ai-body .para{ margin-bottom:8px; }
.chart-e3-ai-footer{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chart-e3-ai-quick{ font-size:12px; border:1px solid #E6E8EF; padding:6px 10px; border-radius:999px; background:#fff; cursor:pointer; }
.chart-e3-ai-pulse{ width:8px; height:8px; border-radius:999px; background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:e3-pulse 1.8s infinite; }
@keyframes e3-pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6);} 70%{ box-shadow:0 0 0 10px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }

/* Datalabels: tamaño chico y anti-solape */
.chartjs-datalabel{ font-size:10px; }

/* Dual en comparación: una por fila (para que no queden chicos) */
.chart-e3-dual{ display:grid; grid-template-columns:1fr; gap:10px; }

/* === Charts E3 – estilos extraídos del JS === */

.chart-e3-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width: 992px){ .chart-e3-grid{ grid-template-columns:1fr 1fr; } }

.chart-e3-dual{ display:grid; grid-template-columns:1fr; gap:10px; }

.chart-e3-canvas-host{ min-height:280px; position:relative; overflow:auto; } /* scroll vertical si no entra */
.chart-e3-canvas-host canvas{ max-width:100% !important; max-height:100% !important; }

.chart-e3-range-badge{
  margin:10px 0; font-size:12px; color:#111; background:#F8FAFC;
  border:1px solid #E5E7EB; border-radius:14px; padding:10px 12px;
  display:flex; align-items:center; gap:8px; box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
}
.chart-e3-range-badge strong{ background:#0A84FF15; padding:2px 8px; border-radius:999px; }

.chart-e3-states-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.chart-e3-state-box{
  flex:1 0 220px; border-radius:12px; padding:10px 12px; color:#0b0b0b; position:relative;
  min-height:86px; display:flex; flex-direction:column; justify-content:center; align-items: center;
}
.box-aprob{ background:#E8F6EE; border:1px solid #C9EBD6; }
.box-canc{  background:#FDE8E8; border:1px solid #F6CACA; }
.box-aband{ background:#FFF2E1; border:1px solid #FFD9B3; }
.chart-e3-state-box .big{
  font-size:20px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; min-height:28px;
}
.chart-e3-state-box .sub{
  font-size:12px; opacity:.8; display:flex; align-items:center; justify-content:center; min-height:18px;
}

.chart-e3-btn.ventas-range{ margin-right:6px; }

/* --- IA (bloque principal) --- */
.chart-e3-ai {
  border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:12px 14px;
  background:linear-gradient(180deg,#ffffff, #fbfbff);
  position:relative; overflow:hidden; margin-bottom:10px;
}
.chart-e3-ai::before{
  content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px;
  background:linear-gradient(135deg, rgba(10,132,255,.22), rgba(52,199,89,.22), rgba(175,82,222,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation:e3-ai-border 7s linear infinite;
}
@keyframes e3-ai-border { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }

.chart-e3-ai-head{ display:flex; align-items:center; gap:8px; font-weight:600; }
.chart-e3-ai-head .sparkle{
  width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 50%, #fff, #eef6ff);
  border-radius:8px; box-shadow:0 0 12px rgba(10,132,255,.18), inset 0 0 6px rgba(255,255,255,.9)
}
.chart-e3-ai-sub{ color:#6a6f7a; font-size:12px; margin-top:2px; }
.chart-e3-ai-body{ margin-top:8px; max-height:340px; overflow:auto; line-height:1.55; -webkit-overflow-scrolling: touch; }
.chart-e3-ai-badge{
  position:absolute; right:8px; top:8px; font-size:11px; background:#0a0a0a; color:#fff;
  padding:3px 8px; border-radius:999px; opacity:.85;
}

.ai-typing{ white-space:pre-wrap; pointer-events:auto; }

/* shimmer de carga */
.shimmer{
  background: linear-gradient(90deg, #f3f4f6 0%, #ffffff 50%, #f3f4f6 100%);
  background-size:200% 100%;
  animation:e3-shimmer 1.2s linear infinite;
}
@keyframes e3-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* --- IA mini por tarjeta --- */
.chart-e3-ai-mini{ border:1px solid #eef0f4; background:#fff; border-radius:12px; padding:10px 12px; margin-top:10px; }
.chart-e3-ai-mini-head{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; margin-bottom:4px; }
.chart-e3-ai-mini-body{ font-size:12px; color:#3e4350; line-height:1.4; white-space:pre-wrap; }
.chart-e3-ai-mini .tag{ font-size:10px; background:#111827; color:#fff; padding:1px 6px; border-radius:999px; margin-left:auto; opacity:.85; }

.chartjs-datalabel{ font-size:10px; }

.ventas-controls-wrap{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* Spinners centrados */
.e3-center-spinner{ display:flex; align-items:center; justify-content:center; width:100%; min-height:22px; }

/* Lock UI */
.e3-locked *{ pointer-events:none !important; }
.chart-e3-btn[disabled], .chart-e3-select[disabled], .chart-type-btn-e3[disabled]{ opacity:.6; cursor:not-allowed; }

/* --- Editor de catálogos (modal) --- */
.e3-cat-wrap{ text-align:left; }
.e3-cat-tabs{ display:flex; gap:8px; margin-bottom:8px; }
.e3-cat-tab{ padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; }
.e3-cat-tab.active{ background:#0a84ff; color:#fff; border-color:#0a84ff; }
.e3-cat-grid{ display:grid; gap:12px; grid-template-columns: 280px 1fr; min-height:380px; }
.e3-cat-card{ border:1px solid #e5e7eb; border-radius:12px; padding:10px; background:#fff; }
.e3-cat-groups-list{ display:flex; flex-direction:column; gap:8px; max-height:320px; overflow:auto; }
.e3-cat-group-row{ display:grid; grid-template-columns: 1fr 88px 32px; gap:6px; align-items:center; }
.e3-cat-items{ max-height:320px; overflow:auto; border:1px solid #eef0f4; border-radius:10px; }
.e3-cat-item-row{
  display:grid; grid-template-columns: 90px 1fr 200px; gap:8px;
  padding:6px 8px; border-bottom:1px solid #f2f4f7; align-items:center;
}
.e3-cat-item-row:nth-child(odd){ background:#fafafa; }
.e3-cat-toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.e3-cat-search{ width:320px; }

/* KPIs en una sola fila con scroll horizontal si no entra */
.chart-e3-kpis{ display:flex; gap:10px; margin-bottom:12px; flex-wrap:nowrap; overflow-x:auto; }

/* Botones de acceso rápido (con hover del mismo color) */
.chart-e3-btn.quick {
  border: 1px solid #d1e7dd !important;
  background-color: #f3fff6 !important;   /* verdoso */
  color: #0f5132 !important;
  transition: box-shadow .15s ease, transform .05s ease;
}

/* Hover/Focus (habilitado): conserva color verdoso */
.chart-e3-btn.quick:not(:disabled):hover,
.chart-e3-btn.quick:not(:disabled):focus,
.chart-e3-btn.quick:not(:disabled):focus-visible {
  background-color: #f3fff6 !important;
  border-color: #d1e7dd !important;
  color: #0f5132 !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.15) inset !important;
  outline: none !important;
}

/* Active (clic): leve feedback sin blanquear */
.chart-e3-btn.quick:not(:disabled):active {
  transform: translateY(1px);
  background-color: #ecfff2 !important;
  border-color: #cbeadf !important;
}

/* Deshabilitado: rojizo opaco SIEMPRE (también en hover/focus) */
.chart-e3-btn.quick:disabled,
.chart-e3-btn.quick:disabled:hover,
.chart-e3-btn.quick:disabled:focus {
  background-color: #fde2e1 !important;   /* rojizo opaco */
  border-color: #f5c2c7 !important;
  color: #842029 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.e3-cat-group-row input {
    margin-bottom: 0 !important;
}

.nav-pills .nav-link:hover {
    color: white;
    background-color: rgb(161, 161, 161);
}

.chart-e3-canvas-host,
.chart-e3-single,
.chart-e3-dual,
.chart-e3-dual-col{
  box-sizing: border-box;
  contain: layout paint;       
}

.chart-e3-canvas-host{
  scrollbar-gutter: stable both-edges;
}

/* === FIX COMPARAR: SIEMPRE VERTICAL + SCROLL DE PÁGINA === */

/* 1) Dejar que el contenido crezca (para que la página pueda scrollear) */
.chart-e3-panel-body{
  overflow: visible !important;
}

/* 2) Forzar layout vertical y anular cualquier grid/row previo */
.chart-e3-dual{
  display: flex !important;
  flex-direction: column !important;  /* una debajo de la otra */
  gap: 10px !important;
  height: auto !important;            /* NO altura fija */
  max-height: none !important;
  grid-template-columns: none !important; /* por si quedó algún grid previo */
}

/* 3) Dar altura a cada gráfico comparado (el <canvas> toma 100% de la col) */
.chart-e3-dual-col{
  height: 320px !important;     /* ajustá a gusto: 300–420px */
  min-height: 320px !important;
}

/* 4) Nunca pasar a dos columnas en breakpoints */
@media (min-width: 992px){
  .chart-e3-dual{ flex-direction: column !important; }
}

/* Canvas en su propia capa para evitar parpadeos al hacer hover/scroll */
.chart-e3-canvas-host canvas{
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* El contenido puede crecer: el scroll lo maneja la página */
.chart-e3-panel-body{ overflow: visible !important; }

/* Comprobado: comparación SIEMPRE vertical (una debajo de la otra) */
.chart-e3-dual{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: auto !important;
  max-height: none !important;
}
.chart-e3-dual-col{
  min-height: 320px !important;  /* ajustá si querés más alto */
}

/* Evitar micro-reflow por aparición de scrollbar vertical */
.modal-body-chart-e3{ scrollbar-gutter: stable both-edges; }

/* (Opcional) Suavizar el hover del panel para reducir repaints fuertes */
.chart-e3-panel,
.chart-e3-panel:hover{
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* === Comparación (vertical) + badge de scroll === */
.chart-e3-dual { display:block; }
.chart-e3-dual-col{
  position:relative;
  min-height:320px;         /* da alto real para que aparezca el scroll */
  margin-bottom:12px;
}

/* Badge rojizo con animación */
.e3-compare-badge{
  position:absolute;
  right:10px; top:50px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
  color:#b91c1c;                     /* rojo oscuro */
  background:#fee2e2;                /* fondo rosado */
  border:1px solid #fecaca;          /* borde suave */
  box-shadow:0 2px 10px rgba(185,28,28,.15);
  z-index:3;
  animation:e3Pulse 1.3s ease-in-out infinite;
}
.e3-compare-badge .bi{ font-size:14px; }
@keyframes e3Pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}
.e3-compare-badge.e3-hide{
  opacity:0; transform:translateY(-6px) scale(.98);
  transition:opacity .22s ease, transform .22s ease;
  animation:none;
}

/* Ancla para el badge en esquina */
.chart-e3-kpi,
.chart-e3-state-box { position: relative; }

/* Badge B — esquina superior derecha (glassmorphism) */
.e3-badgeB{
  margin-top: 5px;
  display:flex; align-items:center; gap:8px;
  justify-content: center;
  padding:8px 10px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease;
}

.e3-badgeB .tag{
  position: absolute;
  right: -10px;
  top: -10px;
  min-width:24px; height:24px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; letter-spacing:.02em;
  color:#fff; background:linear-gradient(135deg,#3b82f6,#6366f1);
  box-shadow:0 2px 8px rgba(59,130,246,.4);
}
.e3-badgeB .stack{ display:flex; flex-direction:column; line-height:1.15 }
.e3-badgeB .val{ font-weight:800; font-size:13px; color:#0b1220 }
.e3-badgeB .sub{ font-weight:600; font-size:11px; color:#475569; white-space:nowrap }

.e3-badgeB .val {
    font-weight: 600;
    font-size: 25px;
    color: #6366f1;
    text-align: center;
    font-family: "Rubik", sans-serif;
}

/* ============================================================
   E3 AI — UI styles (LogiPaq IA)  [CSS separado]
   ============================================================ */

/* Shell + fuente */
.ai-shell-ia{position:relative;border-radius:18px;padding:12px 14px;background:linear-gradient(180deg,#ffffff,#fbfbff);border:1px solid #E6E8EF;overflow:hidden}
.ai-shell-ia, .ai-shell-ia *{font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}

/* Aura y fondo animado */
.ai-aura-ia{position:absolute;inset:-2px;border-radius:20px;padding:1px;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(37,99,235,.38),rgba(16,185,129,.38),rgba(147,51,234,.38),rgba(37,99,235,.38));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ai-hue-ia 7s linear infinite;animation-play-state:paused}
.ai-bg-ia{position:absolute;inset:-30% -20% -40% -20%;pointer-events:none;
  background:radial-gradient(65% 48% at 50% 40%,rgba(59,130,246,.32),transparent 60%),
             radial-gradient(56% 40% at 60% 60%,rgba(16,185,129,.26),transparent 60%),
             radial-gradient(50% 44% at 40% 60%,rgba(168,85,247,.30),transparent 60%);
  filter:blur(36px) saturate(120%);animation:ai-slow-float-ia 16s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes ai-hue-ia{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
@keyframes ai-slow-float-ia{0%{transform:translateY(-4%)}100%{transform:translateY(4%)}}
.ai-animate-ia .ai-aura-ia,.ai-animate-ia .ai-bg-ia{animation-play-state:running}

/* Header */
.ai-header-ia{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-left-ia{display:flex;align-items:center;gap:8px}
.ai-badge-mini-ia,.ai-badge-ia{font-size:11px;background:#0b0b0b;color:#fff;padding:4px 10px;border-radius:999px;opacity:.95;white-space:nowrap;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.ai-badge-ia{backdrop-filter:saturate(150%) blur(6px)}

/* Orbe superior derecho DONA + label */
.ai-edge-ia{display:flex;align-items:center;gap:8px}
.ai-orb-edge-ia{width:22px;height:22px;aspect-ratio:1/1;position:relative;border-radius:999px;overflow:visible;
  background:conic-gradient(from 0deg,#60a5fa,#34d399,#a78bfa,#fb7185,#60a5fa);
  box-shadow:0 0 22px rgba(59,130,246,.85), inset 0 0 9px rgba(255,255,255,.98);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 46%, black 48%);mask:radial-gradient(circle at 50% 50%,transparent 46%, black 48%);
  animation:ai-edge-spin-ia 7.2s linear infinite, ai-breathe-ia 2.1s ease-in-out infinite;animation-play-state:paused}
@keyframes ai-edge-spin-ia{to{transform:rotate(360deg)}}
.ai-orb-edge-ia::before{content:"";position:absolute;inset:-6px;border-radius:inherit;filter:blur(8px);
  background:conic-gradient(from 0deg,rgba(96,165,250,.9),rgba(52,211,153,.9),rgba(167,139,250,.9),rgba(251,113,133,.9),rgba(96,165,250,.9))}
.ai-orb-edge-ia::after{content:"";position:absolute;inset:20%;border-radius:999px;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);mix-blend-mode:screen}
.ai-orb-label-ia{font-size:12px;font-weight:800;letter-spacing:.2px;background:linear-gradient(90deg,#0ea5e9,#22c55e,#a78bfa,#f97316,#0ea5e9);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ai-label-glint-ia 8s linear infinite;animation-play-state:paused}
@keyframes ai-label-glint-ia{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.ai-animate-ia .ai-orb-edge-ia,.ai-animate-ia .ai-orb-label-ia{animation-play-state:running}

/* Boot centrado */
.ai-body-ia{position:relative;margin-top:10px;min-height:420px}
.ai-booting-ia .ai-header-ia,.ai-booting-ia .ai-log-ia,.ai-booting-ia .ai-input-ia{display:none!important}
.ai-bootwrap-ia{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
/* Logipaq ia — alta legibilidad, colores sobrios y animación suave */
.ai-boot-brand-ia{
  position: relative;
  display: inline-block;
  font-weight: 900;
  letter-spacing: .35px;
  font-size: 18px;
  color: #000b25;             
  z-index: 1;
}

/* Orbe central dona + satélites */
.ai-orb-center-ia{position:relative;width:160px;height:160px;border-radius:999px;aspect-ratio:1/1;
  background:radial-gradient(closest-side,transparent 56%,rgba(255,255,255,.95) 58%),
             conic-gradient(from 0deg,#60a5fa,#34d399,#a78bfa,#fb7185,#60a5fa);
  box-shadow:0 0 64px rgba(37,99,235,.95), inset 0 0 18px rgba(255,255,255,.98), 0 12px 30px rgba(0,0,0,.12);
  animation:ai-orb-spin-ia 6s linear infinite, ai-breathe-ia 2.4s ease-in-out infinite;animation-play-state:paused;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 42%,black 46%);mask:radial-gradient(circle at 50% 50%,transparent 42%,black 46%);overflow:visible}
.ai-orb-center-ia::before{content:"";position:absolute;inset:-10px;border-radius:inherit;filter:blur(16px);
  background:conic-gradient(from 0deg,rgba(96,165,250,.85),rgba(52,211,153,.85),rgba(167,139,250,.85),rgba(251,113,133,.85),rgba(96,165,250,.85));
  animation:ai-orb-spin-ia 5.2s linear infinite reverse;opacity:.92}
.ai-orb-center-ia::after{content:"";position:absolute;inset:12%;border-radius:999px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.98),rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;animation:ai-breathe-ia 2.4s ease-in-out infinite}
@keyframes ai-orb-spin-ia{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
@keyframes ai-breathe-ia{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.ai-orb-ring-ia{position:absolute;inset:6%;border-radius:999px;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0 18deg,rgba(255,255,255,.12) 18deg 20deg);
  mix-blend-mode:overlay;filter:blur(.6px);animation:ai-ring-rot-ia 10s linear infinite;pointer-events:none;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 35%,black 47%,transparent 58%);mask:radial-gradient(circle at 50% 50%,transparent 35%,black 47%,transparent 58%)}
.ai-orb-ring-ia.r2{inset:10%;opacity:.7;animation-duration:7.6s}
@keyframes ai-ring-rot-ia{to{transform:rotate(360deg)}}
.ai-orb-center-ia .ai-sat-ia{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:999px;
  background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#a78bfa 100%);box-shadow:0 0 12px rgba(96,165,250,.9)}
.ai-s1{--r:66px;transform-origin:var(--r) 0;animation:ai-orbit-ia 7s linear infinite}
.ai-s2{--r:50px;transform-origin:var(--r) 0;animation:ai-orbit-ia 6s linear infinite reverse;background:radial-gradient(circle at 35% 35%,#fff,#34d399 55%,#60a5fa 100%)}
.ai-s3{--r:80px;transform-origin:var(--r) 0;animation:ai-orbit-ia 8.8s linear infinite;background:radial-gradient(circle at 35% 35%,#fff,#fb7185 55%,#f59e0b 100%);width:8px;height:8px}
.ai-s4{--r:95px;transform-origin:var(--r) 0;animation:ai-orbit-ia 10.2s linear infinite reverse;background:radial-gradient(circle at 35% 35%,#fff,#22c55e 55%,#a78bfa 100%);width:7px;height:7px;opacity:.9}
@keyframes ai-orbit-ia{0%{transform:rotate(0) translateX(var(--r)) rotate(0)}100%{transform:rotate(360deg) translateX(var(--r)) rotate(-360deg)}}

/* Estado / mensajes de carga */
.ai-status-ia{z-index:1;text-align:center;font-size:13px;color:#3e4350;min-height:22px;white-space:pre-wrap;transition:max-height .25s ease,opacity .25s ease,margin .25s ease;max-height:92px;opacity:1;font-weight:500}
.ai-status-hidden-ia{max-height:0!important;opacity:0!important;margin:0!important}
/* Estilo “macOS” durante el boot */
.ai-booting-ia .ai-status-ia{
  display:inline-block; background:rgba(255,255,255,.7); border:1px solid #E6E8EF; border-radius:12px; padding:8px 12px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(46,64,103,.10); backdrop-filter:saturate(140%) blur(6px)
}

/* Spinner “…” (NO BORRAR) */
.ai-typing-dot-ia{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:999px;background:#9aa4b2;animation:ai-bounce-ia .85s infinite;animation-play-state:paused}
.ai-typing-dot-ia:nth-child(2){animation-delay:.10s}
.ai-typing-dot-ia:nth-child(3){animation-delay:.20s}
@keyframes ai-bounce-ia{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}}
.ai-animate-ia .ai-typing-dot-ia{animation-play-state:running}

/* Log con fondo animado + fade superior */
.ai-log-ia{position:relative;display:block;max-height:460px;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 4px;line-height:1.6;border-radius:12px;
  background:linear-gradient(120deg,rgba(96,165,250,.20),rgba(52,211,153,.18),rgba(167,139,250,.20),rgba(251,146,60,.18));background-size:400% 400%;
  animation:ai-logflow-ia 12s ease-in-out infinite;animation-play-state:paused}
@keyframes ai-logflow-ia{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ai-animate-ia .ai-log-ia{animation-play-state:running}
.ai-log-ia::before{content:"";position:sticky;top:-26px;left:0;right:0;height:68px;display:block;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,.55),rgba(255,255,255,0));border-top-left-radius:12px;border-top-right-radius:12px}

/* Mensajes */
.ai-msg-ia{margin:12px 0;display:flex;gap:8px;align-items:flex-start}
.ai-bubble-ia{position:relative;border:1px solid #DDE3EE;background:#fff;padding:14px 16px;border-radius:14px;
  box-shadow:0 14px 22px rgba(46,64,103,.18), 0 1px 0 rgba(255,255,255,.9) inset}
.ai-msg-ia.user .ai-bubble-ia{background:linear-gradient(180deg,#f0f7ff,#e8eefc);border-color:#c6d3f6;
  box-shadow:0 12px 20px rgba(64,86,150,.18), 0 1px 0 rgba(255,255,255,.9) inset}
.ai-user-tag-ia{display:inline-block;font-size:10px;font-weight:700;color:#1f2937;background:#e0e7ff;border:1px solid #c7d2fe;padding:2px 6px;border-radius:999px;margin-right:8px;text-transform:uppercase;letter-spacing:.3px}

/* Meta */
.ai-meta-ia{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.ai-time-ia{font-size:11px;color:#6b7280}

/* Botones macOS */
.ai-copy-ia,.ai-send-ia,.ai-skip-typing-ia{font-size:12px;border:1px solid #C7CFDF;background:linear-gradient(180deg,#fdfdff,#f3f5fa);
  padding:7px 13px;border-radius:12px;cursor:pointer;transition:all .18s ease;color:#0f172a;box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(0,0,0,.08)}
.ai-copy-ia{margin-left:10px}
.ai-copy-ia:hover,.ai-send-ia:hover,.ai-skip-typing-ia:hover{background:#111827;color:#fff;transform:translateY(-1px)}
.ai-send-ia:disabled{opacity:.55;cursor:not-allowed}
.ai-skip-typing-ia{display:inline-block;margin-top:8px}

/* Input */
.ai-input-ia{margin-top:8px;display:flex;gap:8px;align-items:center}
.ai-input-ia input{flex:1;height:38px;border:1px solid #E6E8EF;border-radius:12px;padding:0 12px;outline:none;margin-bottom:0!important}

/* Orb del dock */
.ai-orb-dock-ia{width:18px;height:18px;aspect-ratio:1/1;flex:0 0 auto;border-radius:999px;background:radial-gradient(circle at 30% 30%,#fff,#60a5fa 26%,#34d399 62%,#a78bfa 100%);
  box-shadow:0 0 14px rgba(37,99,235,1), inset 0 0 6px rgba(255,255,255,.98);animation:ai-hue-ia 8s linear infinite, ai-breathe-ia 1.8s ease-in-out infinite;animation-play-state:paused;position:relative}
.ai-animate-ia .ai-orb-dock-ia{animation-play-state:running}
.ai-wiggle-ia{animation:ai-wiggle-kf-ia .45s ease}
@keyframes ai-wiggle-kf-ia{0%{transform:rotate(0)}25%{transform:rotate(6deg)}75%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
.ai-orb-dock-ia::after{content:"";position:absolute;inset:-8px;border-radius:999px;border:2px solid rgba(99,102,241,.8);transform:scale(.2);opacity:0;pointer-events:none}
.ai-orb-dock-ia.ai-ping-ia::after{animation:ai-ping-kf-ia .6s ease-out forwards}
@keyframes ai-ping-kf-ia{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* Realce / chips / listas / marcas */
.ai-section-ia{margin:10px 0 4px;font-weight:700;letter-spacing:.2px;display:inline-block;background:#eef2ff;color:#111827;padding:2px 8px;border-radius:10px}
.ai-list-ia{padding-left:16px;margin:6px 0}
.ai-list-ia li{margin:3px 0}
.ai-num-ia{font-weight:700}
.ai-chip-ia{display:inline-block;font-size:11px;padding:1px 6px;border-radius:999px;background:#eef2ff;color:#1d4ed8;margin-left:6px}
.ai-hl-ia{padding:0 6px;border-radius:8px;font-weight:600}
/* Base del resaltado */
.ai-hl-ia{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .45rem; border-radius:.6rem;
  font-weight:700; line-height:1.15;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* Paleta clara */
.ai-hl-ia.green { background:#e6f9f1; color:#026e46; }
.ai-hl-ia.red   { background:#ffebeb; color:#9a1b1b; }
.ai-hl-ia.amber { background:#fff6e5; color:#8a5600; }
.ai-hl-ia.gray  { background:#f1f5f9; color:#334155; }

.ai-hl-ia.blue   { background:#e9f2ff; color:#0b4aa2; }
.ai-hl-ia.purple { background:#f3e8ff; color:#5b21b6; }
.ai-hl-ia.teal   { background:#e6fffb; color:#0f766e; }
.ai-hl-ia.pink   { background:#ffe8f2; color:#9d174d; }

/* Dark mode opcional (o usá .dark .ai-hl-ia.{color}) */
@media (prefers-color-scheme: dark){
  .ai-hl-ia{ border-color:rgba(255,255,255,.16); box-shadow:none; }
  .ai-hl-ia.green { background:#083d31; color:#a7f3d0; }
  .ai-hl-ia.red   { background:#4c0b0b; color:#fecaca; }
  .ai-hl-ia.amber { background:#3f2a00; color:#fde68a; }
  .ai-hl-ia.gray  { background:#0f172a; color:#cbd5e1; }

  .ai-hl-ia.blue   { background:#0a2a5a; color:#bfdbfe; }
  .ai-hl-ia.purple { background:#2a0a5a; color:#e9d5ff; }
  .ai-hl-ia.teal   { background:#063a38; color:#99f6e4; }
  .ai-hl-ia.pink   { background:#5a0a2a; color:#fecdd3; }
}
.ai-mark-ia{background:#eef2ff;color:#111827;padding:0 6px;border-radius:8px;font-weight:800}

/* Tablas lindas en el chat (tipo Bootstrap pero namespaced) */
.table-responsive{width:100%;overflow-x:auto}
.ai-table-ia{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #E6E8EF;border-radius:12px;overflow:hidden}
.ai-table-ia thead th{background:#f8fafc;font-weight:700;font-size:12px;letter-spacing:.2px;color:#0f172a;border-bottom:1px solid #E6E8EF;padding:10px 12px;text-transform:uppercase}
.ai-table-ia tbody td{padding:10px 12px;border-bottom:1px solid #EEF2F7;color:#334155;font-size:13px}
.ai-table-ia tbody tr:last-child td{border-bottom:none}
.ai-table-ia tbody tr:hover{background:#f7fafc}
.ai-table-ia.table-sm thead th,.ai-table-ia.table-sm tbody td{padding:8px 10px}
.ai-table-ia.table-striped tbody tr:nth-child(odd){background:#fafbff}
.ai-table-ia.table-hover tbody tr:hover{background:#f2f6ff}
.ai-table-ia td .ai-num-ia,.ai-table-ia th .ai-num-ia{font-weight:800}
.ai-table-ia td{text-wrap:pretty}

/* Bloom (desaparece el orbe al terminar boot) */
@keyframes ai-bloom-ia{0%{transform:scale(1);opacity:1}60%{transform:scale(9);opacity:.35}100%{transform:scale(16);opacity:0}}

/* Motion safe */
@media (prefers-reduced-motion:reduce){
  .ai-aura-ia,.ai-orb-edge-ia,.ai-orb-center-ia,.ai-orb-dock-ia,.ai-log-ia,.ai-typing-dot-ia{animation:none!important}
}

/* === 1) Tabla: encabezado claro + letras oscuras === */
.ai-table-ia thead th{
  background:#f5f7ff !important;  /* más claro */
  color:#0b1220 !important;        /* más oscuro */
  font-weight:700 !important;
  border-bottom:1px solid #E6E8EF !important;
}

/* === 2) Badge independiente: "Cargando módulo de chat" (sin puntos) === */
.ai-boot-badge-ia{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:6px 12px;
  font-size:11px;
  font-weight:700;
  color:#0f172a;
  border:1px solid #E6E8EF;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.9),
    rgba(248,250,252,.9),
    rgba(255,255,255,.9)
  );
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px rgba(46,64,103,.10);
  backdrop-filter:saturate(140%) blur(6px);
  /* leve brillo en movimiento */
  position:relative;
  overflow:hidden;
}
.ai-boot-badge-ia::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-100%);
  animation:ai-badge-sheen 2.6s ease-in-out infinite;
}
@keyframes ai-badge-sheen{
  0%{ transform:translateX(-120%) }
  60%{ transform:translateX(120%) }
  100%{ transform:translateX(120%) }
}
.ai-boot-badge-ia .ai-led-ia{
  width:8px; height:8px; border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:ai-led-pulse 1.6s ease-out infinite;
}
@keyframes ai-led-pulse{
  0%  { box-shadow:0 0 0 0   rgba(34,197,94,.55) }
  70% { box-shadow:0 0 0 10px rgba(34,197,94,0) }
  100%{ box-shadow:0 0 0 0   rgba(34,197,94,0) }
}

.ai-bootwrap-ia{
  position:relative;
}
.ai-bootwrap-ia::before{
  content:"";
  position:absolute; inset:-14px -16px;
  z-index:0; pointer-events:none; border-radius:18px;
  background:linear-gradient(120deg,
    rgba(96,165,250,.20),
    rgba(52,211,153,.18),
    rgba(167,139,250,.20),
    rgba(251,146,60,.18)
  );
  background-size:400% 400%;
  animation:ai-bootflow-ia 7.5s ease-in-out infinite; 
  filter:saturate(120%);
}
@keyframes ai-bootflow-ia{
  0%{   background-position:0% 50% }
  50%{  background-position:100% 50% }
  100%{ background-position:0% 50% }
}
.ai-bootwrap-ia > *{ position:relative; z-index:1 }

/* === Chips de sugerencias === */
.ai-chip-row-ia{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.ai-chip-ia{
  appearance:none; border:1px solid rgba(0,0,0,.08); background:#fff;
  padding:.5rem .75rem; border-radius:999px; font-size:.9rem; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
  will-change: transform;
}
.ai-chip-ia:active{ transform: scale(.98); }

/* Fijas (tu set) */
.ai-chip-fixed-ia{ border-color:rgba(60,120,255,.25); background:rgba(60,120,255,.06); color:#225; }

/* IA (dinámicas) */
.ai-chip-ia-suggest{ border-color:rgba(140,90,255,.25); background:rgba(140,90,255,.06); color:#241a3a; position:relative; padding-left:2rem; margin-right: 5px;}
.ai-chip-ia-badge{
  position:absolute; left:.3rem; top:50%; transform:translateY(-50%);
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
  background:linear-gradient(90deg,#6a6cf6,#b86adf); color:#fff;
  border-radius:5px; padding:3px 6px;
}

/* Hover (ambos tipos) */
.ai-chip-ia:hover{
  background:linear-gradient(90deg, rgba(64,132,255,.85), rgba(120,180,255,.85));
  color:#fff; border-color:transparent;
}

/* Título del bloque */
.ai-config-title-ia{ margin-bottom:.25rem; }
.ai-chip-row-ia-alt{ margin-top:.25rem; }

/* Botón estilo macOS (lila) */
.ai-btn-macos-lilac{
  appearance: none;
  border: 0;
  padding: .38rem .7rem;
  font-size: .85rem;
  border-radius: 14px;
  background: linear-gradient(180deg,#d8c9ff,#bda7ff);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 8px 16px rgba(120, 80, 220, .18),
    0 2px 4px rgba(120, 80, 220, .16);
  color: #2a2250;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
  user-select: none;
  will-change: transform;
}
.ai-btn-macos-lilac:active{
  transform: translateY(1px);
  box-shadow:
    0 0 0 rgba(255,255,255,0) inset,
    0 4px 10px rgba(120, 80, 220, .22),
    0 1px 2px rgba(120, 80, 220, .18);
}
.ai-btn-macos-lilac:hover{
  background: linear-gradient(180deg,#b79bff,#a084ff);
  color:#fff; /* ← pedido: al hover la letra en blanco */
}

/* Reutilizable (si no lo tenías) */
.ai-btn-ia.ai-btn-danger-ia{
  background: linear-gradient(180deg,#ff7676,#ff4d4d);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: .42rem .75rem;
  font-size: .85rem;
  box-shadow: 0 6px 14px rgba(255,77,77,.25), 0 2px 4px rgba(255,77,77,.2);
}
.ai-btn-ia.ai-btn-danger-ia:hover{ filter: brightness(1.05); color:#fff; }

.ai-btn-ia.ai-btn-cancel-ia{
  background: linear-gradient(180deg, #b3b8bf, #7b8088);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: .42rem .75rem;
  font-size: .85rem;
  box-shadow: 0 6px 14px rgba(123,128,136,.25), 0 2px 4px rgba(123,128,136,.2);
}
.ai-btn-ia.ai-btn-cancel-ia:hover{
  filter: brightness(1.05);
  color:#fff;
}

.ai-btn-ia.ai-btn-success-ia{
  background: linear-gradient(180deg, #62d38b, #2ebf6b);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: .42rem .75rem;
  font-size: .85rem;
  box-shadow: 0 6px 14px rgba(46,191,107,.25), 0 2px 4px rgba(46,191,107,.2);
}
.ai-btn-ia.ai-btn-success-ia:hover{
  filter: brightness(1.05);
  color:#fff;
}

/* ===========================
   Badges estilo macOS (frosted)
   =========================== */
.ai-badge-mini-ia,
.ai-badge-ia{
  /* Paleta base (modo oscuro por defecto) */
  --bg: rgba(28,28,30,.72);
  --tint: rgba(255,255,255,.12);
  --border: rgba(255,255,255,.18);
  --text: #f5f5f7;
  --shadow: 0 1px 0 rgba(255,255,255,.14) inset,
            0 .5px 0 rgba(0,0,0,.35) inset,
            0 2px 8px rgba(0,0,0,.25);

  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  line-height: 1;

  background: linear-gradient(180deg, var(--tint), transparent), var(--bg);
  color: var(--text);
  border: .5px solid var(--border);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: var(--shadow);
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);

  opacity: .98;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}

.ai-badge-mini-ia{ font-size: 11px; padding: 3px 10px; }
.ai-badge-ia{ font-size: 12px; padding: 5px 14px; }

.ai-badge-mini-ia i,
.ai-badge-ia i{
  font-size: 1em;
  line-height: 1;
  opacity: .9;
}

.ai-badge-mini-ia:focus-visible,
.ai-badge-ia:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,122,255,.35), var(--shadow);
}

/* Variantes de color (opcional): usar data-variant="success|info|warning|danger" */
.ai-badge-mini-ia[data-variant="success"],
.ai-badge-ia[data-variant="success"]{
  --bg: rgba(52,199,89,.22);
  --tint: rgba(52,199,89,.35);
  --border: rgba(52,199,89,.45);
  --text: #eafff2;
}

.ai-badge-mini-ia[data-variant="info"],
.ai-badge-ia[data-variant="info"]{
  --bg: rgba(0,122,255,.22);
  --tint: rgba(0,122,255,.32);
  --border: rgba(0,122,255,.45);
  --text: #000000;
}

.ai-badge-mini-ia[data-variant="warning"],
.ai-badge-ia[data-variant="warning"]{
  --bg: rgba(255,159,10,.22);
  --tint: rgba(255,159,10,.35);
  --border: rgba(255,159,10,.45);
  --text: #000000;
}

.ai-badge-mini-ia[data-variant="danger"],
.ai-badge-ia[data-variant="danger"]{
  --bg: rgba(255,69,58,.22);
  --tint: rgba(255,69,58,.35);
  --border: rgba(255,69,58,.45);
  --text: #ffecef;
}

/* Light mode */
@media (prefers-color-scheme: light){
  .ai-badge-mini-ia,
  .ai-badge-ia{
    --bg: rgba(245,245,247,.78);
    --tint: rgba(255,255,255,.65);
    --border: rgba(0,0,0,.08);
    --text: #1d1d1f;
    --shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 .5px 0 rgba(0,0,0,.08) inset,
              0 2px 10px rgba(0,0,0,.08);
    color: var(--text);
  }
}

/* ===== macOS Light — Steps / Badges ===== */
:root{
  --ai-mac-bg: rgba(255,255,255,.78);
  --ai-mac-stroke: rgba(0,0,0,.08);
  --ai-mac-text: #0b0b0b;
  --ai-mac-accent: #0a84ff;

  --ai-mac-ok-bg: #ecfdf5;
  --ai-mac-ok-stroke: #a7f3d0;
  --ai-mac-ok-text: #065f46;

  --ai-mac-err-bg: #fef2f2;
  --ai-mac-err-stroke: #fecaca;
  --ai-mac-err-text: #7f1d1d;
}

.ai-step-ia{
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .8rem; border-radius:999px;
  background:var(--ai-mac-bg);
  color:var(--ai-mac-text);
  border:1px solid var(--ai-mac-stroke);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  font:600 12.5px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  letter-spacing:.2px;
  box-shadow:none !important; /* sin sombra paralela */
  width:max-content; margin:.35rem 0;
}

.ai-step-ia .ico{ font-size:14px; line-height:1; opacity:.9 }
.ai-step-ia .txt{ letter-spacing:.2px }

/* Spinner */
.ai-spin-ia{
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--ai-mac-stroke);
  border-top-color:var(--ai-mac-accent);
  animation:ai-spin .75s linear infinite;
}
@keyframes ai-spin{ to{ transform:rotate(360deg) } }

/* Estados */
.ai-step-ia.ok{
  background:var(--ai-mac-ok-bg);
  border-color:var(--ai-mac-ok-stroke);
  color:var(--ai-mac-ok-text);
}
.ai-step-ia.ok .ico{ color:var(--ai-mac-ok-text) }
.ai-step-ia.ok .ai-spin-ia{
  border-color:color-mix(in srgb, var(--ai-mac-ok-text) 20%, transparent);
  border-top-color:var(--ai-mac-ok-text);
}

.ai-step-ia.err{
  background:var(--ai-mac-err-bg);
  border-color:var(--ai-mac-err-stroke);
  color:var(--ai-mac-err-text);
}
.ai-step-ia.err .ico{ color:var(--ai-mac-err-text) }
.ai-step-ia.err .ai-spin-ia{
  border-color:color-mix(in srgb, var(--ai-mac-err-text) 20%, transparent);
  border-top-color:var(--ai-mac-err-text);
}

/* Tamaño compacto opcional */
.ai-step-ia.sm{ padding:.35rem .6rem; font-size:12px }

/* Contenedor de cada mensaje */
.ai-msg-ia {
  display: flex;
  width: 100%;
}

/* Bot a la izquierda */
.ai-msg-ia.bot {
  justify-content: flex-start;
}

/* Usuario a la derecha */
.ai-msg-ia.user {
  justify-content: flex-end;
}

/* Alinear metadatos a la derecha en mensajes de usuario */
.ai-msg-ia.user .ai-meta-ia {
  text-align: right;
  align-self: flex-end;
}

.chart-e3-kpi-sub div{ line-height:1.15; margin-top:2px; }
.chart-e3-kpi-sub div strong{ font-weight:700; }

/* KPI — subdetalles elegantes */
.chart-e3-kpi-sub{ margin-top:6px; }
.chart-e3-kpi-sub .e3-subgrid{
  display:flex; gap:6px; flex-direction: column;
}
@media (max-width:540px){
  .chart-e3-kpi-sub .e3-subgrid{ grid-template-columns: 1fr; }
}
.chart-e3-kpi-sub .e3-subpill{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px; padding:6px 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.4);
}
.chart-e3-kpi-sub .e3-subpill .lbl{ font-size:11px; color:#6b7280; }
.chart-e3-kpi-sub .e3-subpill .val{ font-weight:700; font-size:13px; letter-spacing:.2px; }

.chart-e3-kpi .e3-badgeB .stack{ display:flex; flex-direction:column; line-height:1.1; }
.chart-e3-kpi .e3-badgeB .stack .val{ font-weight:700; font-size:16px; }
.chart-e3-kpi .e3-badgeB .stack .sub{ font-size:11px; color:#6b7280; }

/* Acento */
:root{
  --e3-accent: #0A84FF;
  --e3-accent-bg: rgba(10,132,255,.12);
  --e3-accent-bg-hover: rgba(10,132,255,.18);
}

/* Botón 'Detalle' – suave/translúcido */
.e3-collapse-toggle,
.btn.e3-collapse-toggle,
.btn-light.e3-collapse-toggle{
  background: var(--e3-accent-bg) !important;
  color: var(--e3-accent) !important;
  border: 1px solid rgba(10,132,255,.35) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 1px rgba(0,0,0,.06);
}

/* Hover / foco */
.e3-collapse-toggle:hover{
  background: var(--e3-accent-bg-hover) !important;
  border-color: rgba(10,132,255,.45) !important;
}
.e3-collapse-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,132,255,.20);
}

/* Estado abierto */
.e3-collapse-toggle[aria-expanded="true"]{
  background: rgba(10,132,255,.14) !important;
  border-color: rgba(10,132,255,.50) !important;
}

/* Icono Bootstrap: chevron que rota */
.e3-collapse-toggle .bi{ font-size:14px; opacity:.95; transition: transform .18s ease; }
.e3-collapse-toggle[aria-expanded="true"] .bi{ transform: rotate(180deg); }

/* Espaciado del contenido colapsable debajo del botón */
.chart-e3-kpi-sub .collapse{ margin-top: 8px; }

/* Hint/info pequeño debajo del título del KPI */
.chart-e3-kpi-hint{
  font-size: 11px;
  color: rgb(70, 70, 70); 
  background-color: rgb(238, 238, 238);
  padding: 2px 4px;   
  border-radius: 10px;       
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart-e3-kpi-hint .bi{
  font-size: 12px;
  opacity: .9;
}

/* [MAPAR] — estilos mapa AR */
.chart-e3-mapar {
  width: 100%;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eef0f4;
}
.chart-e3-mapar .leaflet-container {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, Roboto, "Segoe UI", Arial, sans-serif;
}

.mapar-toolbar {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.mapar-toolbar .chart-e3-btn.active {
  background:#111827; color:#fff; border-color:#111827;
}
.mapar-legend {
  display:flex; align-items:center; gap:10px; font-size:12px; color:#6b7280;
}
.mapar-legend .dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot-aprob { background:#22C55E; }
.dot-canc  { background:#EF4444; }
.dot-aband { background:#F59E0B; }

.chart-e3-panel .e3-note-muted {
  font-size:12px; color:#6a6f7a; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px 8px 0 0; padding:6px 8px;
}

.chart-e3-panel .e3-note-muted-red {
  font-size:12px; color:#960c0c; background:#ffd9d9; border:1px solid hsl(4, 100%, 68%); border-radius:8px; padding:6px 8px;
}

/* Mapa AR: asegurar altura y que no quede en 0px */
.chart-e3-mapar{ min-height: 420px; border-radius:12px; overflow:hidden; }
#mapar-canvas{ width:100%; height:420px; }

.chart-e3-mapar #mapar-canvas{
  min-height: 420px;
  height: 52vh;
  border-radius: 12px;
  overflow: hidden;
}