/* ==================================================================
   TEMA "LEO" · Alejo sin jefe
   Misma línea visual que app.leocontraeltiempo.com (estilo Mongi):
   fondo gris #F1F2F5, menú lateral blanco con pastillas, tarjetas muy
   redondeadas, indicadores pastel, tipografía Instrument Sans.

   Se carga DESPUÉS del <style> de cada página y solo cambia el aspecto:
   no toca DOM, datos ni lógica. El verde de marca de Alejo se conserva
   como acento (donde Leo usa dorado).
   ================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --t-fuente: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-fondo: #F1F2F5;
  --t-tarjeta: #FFFFFF;
  --t-tarjeta-2: #F8FAFC;
  --t-suave: #F1F5F9;
  --t-linea: #E2E8F0;
  --t-linea-2: #CBD5E1;
  --t-anillo: rgba(226, 232, 240, .7);
  --t-tinta: #0F172A;
  --t-texto: #1E293B;
  --t-tenue: #64748B;
  --t-apagado: #94A3B8;
  --t-negro: #0F172A;
  --t-negro-texto: #FFFFFF;
  --t-negro-hover: #334155;
  --t-acento: var(--brand, #1F8F5F);
  --t-acento-vivo: #4ADE80;
  --t-acento-suave: #BBF7D0;
  --t-naranja: #F97316;
  --t-sombra: 0 1px 2px rgba(15, 23, 42, .05);
  --t-sombra-alta: 0 16px 40px rgba(15, 23, 42, .12);
  --t-radio: 24px;
  --t-radio-2: 16px;
  --t-radio-3: 12px;
  --t-radio-campo: 10px;
  --t-menu: 256px;
  /* texto sobre tarjetas pastel: siempre oscuro, también en modo oscuro */
  --t-sobre-pastel: #0F172A;
  --t-sobre-pastel-2: rgba(15, 23, 42, .72);
  /* paleta pastel de Leo */
  --p-lima: #D6F28F; --p-lima-2: #E4F5BF; --p-azul: #DCEBFA; --p-azul-2: #BCD8F5;
  --p-rosa: #FDE2EC; --p-durazno: #FFE0C2; --p-naranja: #FF9A5C; --p-lila: #F3E1FA;
  --p-lila-2: #E4B8F3; --p-gris: #E4E5F2; --p-perla: #BDBEDA; --p-crema: #FFF4D6;
  --p-verde: #D1FAE5;

  /* Tokens que ya usa la app: se remapean para que todo lo que dependa
     de ellos cambie solo. (--bg, --panel, --ink y --brand los pone el JS
     de Configuración como estilo en línea, por eso no se dependen aquí.) */
  --muted: var(--t-tenue);
  --line: var(--t-linea);
  --shadow: var(--t-sombra);
  --brand-soft: #E7F7EE;
  --good: #15803D; --bad: #B91C1C; --warn: #B45309;
  --soft-good: #DCFCE7; --soft-bad: #FEE2E2; --soft-warn: #FEF3C7;
  --text-primary: var(--t-tinta);
  --text-secondary: var(--t-tenue);
  --border: var(--t-linea);
  --surface: var(--t-tarjeta);
  --surface-secondary: var(--t-tarjeta-2);
  --background-main: var(--t-fondo);
  --card-shadow: var(--t-sombra);
  --shell-shadow: none;
  /* tokens de campanas.html */
  --surface2: var(--t-tarjeta-2); --surface3: var(--t-suave);
  --border2: var(--t-linea); --text: var(--t-tinta); --text2: var(--t-tenue); --text3: var(--t-apagado);
  --brandSoft: var(--t-suave);
}
html[data-theme="dark"] {
  --t-fondo: #0B0D12;
  --t-tarjeta: #151821;
  --t-tarjeta-2: #1A1E29;
  --t-suave: #1E2330;
  --t-linea: #262B38;
  --t-linea-2: #343B4A;
  --t-anillo: rgba(255, 255, 255, .06);
  --t-tinta: #F1F5F9;
  --t-texto: #E2E8F0;
  --t-tenue: #94A3B8;
  --t-apagado: #64748B;
  --t-negro: #F1F5F9;
  --t-negro-texto: #0F172A;
  --t-negro-hover: #CBD5E1;
  --t-acento-vivo: #15803D;
  --t-sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --t-sombra-alta: 0 16px 40px rgba(0, 0, 0, .5);
  --brand-soft: #16302A;
  --soft-good: #14321F; --soft-bad: #3B1A1A; --soft-warn: #3A2C12;
  --good: #4ADE80; --bad: #FCA5A5; --warn: #FCD34D;
}

/* ---------- 2. Base ---------- */
html, body { font-family: var(--t-fuente) !important; }
body {
  background: var(--t-fondo) !important;
  color: var(--t-texto);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, .file-label, .action-menu summary { font-family: var(--t-fuente) !important; }
h1, h2, h3, h4 { color: var(--t-tinta); letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
.muted { color: var(--t-tenue); }
::selection { background: var(--p-lima); color: #0F172A; }
* { scrollbar-width: thin; scrollbar-color: var(--t-linea-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--t-linea-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. Controles ---------- */
button, .file-label, .action-menu summary {
  min-height: 36px;
  border: 1px solid var(--t-linea);
  background: var(--t-tarjeta);
  color: var(--t-tinta);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button:hover, .file-label:hover, .action-menu summary:hover { transform: none; background: var(--t-suave); border-color: var(--t-linea-2); }
button.primary, .file-label.primary, button.blue, .btn-primary, .login-btn {
  background: var(--t-negro) !important;
  border-color: var(--t-negro) !important;
  color: var(--t-negro-texto) !important;
  font-weight: 600;
  box-shadow: none !important;
  border-radius: 999px;
}
button.primary:hover, .file-label.primary:hover, button.blue:hover, .btn-primary:hover, .login-btn:hover { background: var(--t-negro-hover) !important; border-color: var(--t-negro-hover) !important; transform: none; }
button.danger { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
button.danger:hover { background: #FEE2E2; border-color: #FCA5A5; }
html[data-theme="dark"] button.danger { background: #3B1A1A; color: #FCA5A5; border-color: #5B2626; }
button.ghost { background: transparent; color: var(--t-tenue); border-color: var(--t-linea); }
button.link-btn { min-height: 0; border: 0; background: transparent; padding: 0; color: var(--t-tinta); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
button.link-btn:hover { background: transparent; }
button:disabled, .file-label[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), select, textarea, .multi-button {
  min-height: 38px;
  border: 1px solid var(--t-linea-2);
  background: var(--t-tarjeta);
  color: var(--t-tinta);
  border-radius: var(--t-radio-campo);
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--t-apagado); }
input:focus, select:focus, textarea:focus, .multi-button:focus { outline: none; border-color: var(--t-tinta); box-shadow: 0 0 0 3px rgba(15, 23, 42, .08); }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--t-apagado); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 16px; height: 16px; accent-color: var(--t-tinta); }
input[type="color"] { min-height: 38px; border-radius: var(--t-radio-campo); border: 1px solid var(--t-linea-2); padding: 3px; background: var(--t-tarjeta); }
select[multiple] { border-radius: var(--t-radio-3); }
label { color: var(--t-tenue); }
.filters label, .compact-filters label, .supplier-form label { font-size: 12px; font-weight: 500; color: var(--t-tenue); text-transform: none; letter-spacing: 0; }
.multi-button::after { color: var(--t-apagado); }
.multi-menu, .action-menu-body {
  border: 1px solid var(--t-linea) !important;
  border-radius: var(--t-radio-2) !important;
  background: var(--t-tarjeta) !important;
  box-shadow: var(--t-sombra-alta) !important;
  padding: 8px !important;
}
.multi-option { border-radius: 10px; }
.multi-option:hover { background: var(--t-suave); }
.action-menu-body button, .action-menu-body .file-label { border-radius: 10px; border-color: transparent; }
.badge, .semaforo-indicator, .product-alias {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: var(--t-suave);
  color: var(--t-texto);
  border: 0;
}
.badge.entregado, .badge.green, .semaforo-green { background: #DCFCE7; color: #166534; }
.badge.devolucion, .badge.red, .semaforo-red { background: #FEE2E2; color: #991B1B; }
.badge.alerta, .badge.yellow, .semaforo-yellow { background: #FEF3C7; color: #92400E; }
.badge.cancelado { background: var(--t-suave); color: var(--t-tenue); }

/* ---------- 4. Tablas ---------- */
table { font-size: 13px; }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--t-suave); }
th {
  color: var(--t-tenue);
  background: var(--t-tarjeta);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--t-linea);
}
tbody tr:hover { background: var(--t-tarjeta-2); }
tbody tr:last-child td { border-bottom: 0; }
tr.selected-row { background: var(--brand-soft) !important; box-shadow: inset 3px 0 0 var(--t-acento); }
tr.selected-row td { border-bottom-color: var(--t-linea); }
.table-wrap {
  background: var(--t-tarjeta);
  border: 1px solid var(--t-anillo) !important;
  border-radius: var(--t-radio-2);
  box-shadow: var(--t-sombra);
  overflow: auto;
}
.table-tools { border: 0 !important; padding: 12px 4px; }

/* ---------- 5. Tarjetas (mixin) ---------- */
.finance-panel, .filters, .compact-filters, .mini, .ops-card, .country-card, .book-tab, .tag-card,
.price-card, .geo-panel, .autosave-bar, .worker-geo-search-card, .user-visual-panel, .activity-summary-card,
.home-test-card, .kpi-detail-panel, .assign-dialog, .calc-panel, .ad-group-card, .test-card, .expanded-block,
.ops-user-card, .office-panel, .office-desk, .calc-offer-card, .calc-detail-card, .entity-card, .pais-card,
.validations, .filter-bar, .panel-head, .supplier-section, .test-sheet, #countryFilesPanel, #carteraPickerSection,
#carteraDataSection, .user-visual-card, .return-cost-stat {
  background: var(--t-tarjeta);
  border: 1px solid var(--t-anillo);
  border-radius: var(--t-radio);
  box-shadow: var(--t-sombra);
  margin-left: 0;
  margin-right: 0;
}
.finance-panel, .kpi-detail-panel { overflow: visible; }
.finance-panel.compact-panel { border-radius: var(--t-radio-2); }
.mini h3, .mini-head, .kpi-detail-head, .supplier-section-head, .office-panel-head, .home-tests-head {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 18px 20px 4px;
  font-size: 16px;
  font-weight: 600;
}
.mini-head h3, .kpi-detail-head h3 { font-size: 16px; }
.filters, .compact-filters { padding: 16px 20px; border-radius: var(--t-radio-2); }
.filters { border-top: 1px solid var(--t-anillo); border-bottom: 1px solid var(--t-anillo); }
.finance-panel .filters, .mini .filters, .finance-panel .table-wrap, .mini .table-wrap, .finance-panel .kpis, .mini .kpis {
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}
.finance-panel .table-wrap, .mini .table-wrap { border-top: 1px solid var(--t-linea) !important; }
.finance-panel .filters, .mini .filters { border-top: 1px solid var(--t-linea) !important; border-bottom: 0 !important; }
.summary-grid, .kpis, .ops-layout, .module-grid, .country-picker, .home-tests-grid, .ops-user-grid, .activity-summary-grid, .ad-groups-cards-grid {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 16px;
}
.finance-panel .kpis, .mini .kpis { padding: 16px 20px !important; gap: 12px; }
.mini .summary-grid { padding: 16px !important; }
.empty {
  border: 1px dashed var(--t-linea-2);
  border-radius: var(--t-radio-2);
  padding: 40px 20px;
  color: var(--t-tenue);
  font-size: 14px;
  background: transparent;
}
.kpi-detail-panel { background: var(--t-tarjeta); }
.kpi-detail-card { border: 1px solid var(--t-linea); border-radius: var(--t-radio-2); background: var(--t-tarjeta-2); }
.kpi-detail-card span { text-transform: none; font-weight: 500; }
.kpi-detail-formula code { border-radius: var(--t-radio-3); background: var(--t-suave); border-color: transparent; }
.assign-overlay { background: rgba(15, 23, 42, .45); backdrop-filter: blur(4px); }
.assign-dialog { border-radius: var(--t-radio) !important; box-shadow: var(--t-sombra-alta) !important; }
.assign-dialog-head { border-bottom-color: var(--t-linea); }
.tag-card, .ad-group-card, .test-card { border-radius: var(--t-radio-2); }
.tag-card:hover, .ad-group-card:hover, .price-card:hover, .module-card:hover, .home-test-card:hover { box-shadow: var(--t-sombra-alta); border-color: var(--t-anillo); transform: translateY(-2px); }
.tag-card.active, .ad-group-card.selected-card, .country-card.active, .kpi.selected, .clickable.selected, .session.active {
  border-color: var(--t-tinta) !important;
  box-shadow: 0 0 0 1px var(--t-tinta) !important;
  background: var(--t-tarjeta) !important;
}
.country-card { padding: 18px 20px; min-height: 96px; border-radius: var(--t-radio-2); text-align: left; }
.country-card:hover { border-color: var(--t-linea-2); background: var(--t-tarjeta); }
.book-tab, .column-pills button, .chat-country-btn, .calc-seg-btn, .calc-countrybtn {
  border-radius: 999px !important;
  padding: 8px 16px;
  min-width: 0;
  background: var(--t-tarjeta);
  border: 1px solid var(--t-linea);
  color: var(--t-tenue);
  font-weight: 500;
  box-shadow: none;
}
.book-tab.active, .column-pills button.active, .chat-country-btn.active, .calc-seg-btn.active, .calc-countrybtn.active {
  background: var(--t-negro) !important;
  color: var(--t-negro-texto) !important;
  border-color: transparent !important;
}
.book-tab strong, .book-tab span { color: inherit; }
.book-tabs, .column-pills { gap: 6px; }
.autosave-bar { border-radius: 999px; padding: 8px 16px; font-size: 12px; }
.compact-note { color: var(--t-tenue); font-size: 13px; }

/* ---------- 6. Indicadores pastel ---------- */
.kpi, .module-card {
  position: relative;
  border: 0 !important;
  border-radius: var(--t-radio) !important;
  padding: 20px !important;
  min-height: 132px;
  background: var(--t-tarjeta);
  box-shadow: var(--t-sombra);
  color: var(--t-tinta);
  display: flex;
  flex-direction: column;
}
.kpi::before { display: none !important; }
.kpi .label, .module-card > span, .kpi-l {
  color: inherit;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: .92;
  padding-right: 36px;
}
.kpi .value, .module-card > b, .kpi-v {
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-top: auto;
  padding-top: 12px;
  color: inherit !important;
}
.kpi .value.long-text { font-size: 18px !important; }
.dense-kpis .kpi .value { font-size: 24px !important; }
.kpi .hint, .module-card > small, .kpi-sub { color: inherit; opacity: .7; font-size: 12px; margin-top: 4px; }
.kpi.clickable::after, .module-card::after {
  content: "↗";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: #0F172A;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease;
}
.kpi.clickable:hover::after, .module-card:hover::after { background: #fff; }
.kpi.clickable:hover { border-color: transparent; box-shadow: var(--t-sombra-alta); transform: translateY(-2px); }
/* colores pastel rotando, como en el inicio de Leo */
.kpis .kpi:nth-child(6n+1), .module-grid .module-card:nth-child(6n+1) { background: var(--p-lima-2); color: var(--t-sobre-pastel); }
.kpis .kpi:nth-child(6n+2), .module-grid .module-card:nth-child(6n+2) { background: var(--p-azul); color: var(--t-sobre-pastel); }
.kpis .kpi:nth-child(6n+3), .module-grid .module-card:nth-child(6n+3) { background: var(--p-lila); color: var(--t-sobre-pastel); }
.kpis .kpi:nth-child(6n+4), .module-grid .module-card:nth-child(6n+4) { background: var(--p-durazno); color: var(--t-sobre-pastel); }
.kpis .kpi:nth-child(6n+5), .module-grid .module-card:nth-child(6n+5) { background: var(--p-rosa); color: var(--t-sobre-pastel); }
.kpis .kpi:nth-child(6n+6), .module-grid .module-card:nth-child(6n+6) { background: var(--p-gris); color: var(--t-sobre-pastel); }
/* los estados semánticos mandan sobre la rotación */
.kpis .kpi.good, .kpi.good { background: var(--p-lima) !important; color: var(--t-sobre-pastel); }
.kpis .kpi.bad, .kpi.bad { background: var(--p-rosa) !important; color: var(--t-sobre-pastel); }
.kpis .kpi.warn, .kpi.warn { background: var(--p-durazno) !important; color: var(--t-sobre-pastel); }
.kpi.selected, .clickable.selected { box-shadow: 0 0 0 2px var(--t-tinta) !important; border: 0 !important; }
.module-card > span, .module-card > b, .module-card > small, .kpi .label, .kpi .value, .kpi .hint { color: inherit !important; }

/* ---------- 7. Encabezado de módulo ---------- */
.module-hero { background: transparent !important; border: 0 !important; padding: 8px 4px 4px !important; gap: 6px; }
.module-hero h2, [data-module-view="inicio"] .module-hero h2 { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--t-tinta); }
.module-hero .muted { font-size: 14px; }
.module-view > * + * { margin-top: 16px !important; }
.module-view > .module-hero + * { margin-top: 12px !important; }
.module-view > .table-tools + .table-wrap, .module-view > .table-tools + .kpis { margin-top: 4px !important; }
.module-view > .toolbar { padding: 0; }
.panel-head { padding: 16px 20px; margin-bottom: 20px; }
.panel-head h2 { font-size: 16px; font-weight: 600; }
.embedded-module-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.embedded-module-shell iframe { border-radius: var(--t-radio); background: transparent; }

/* ---------- 8. Sesiones (lista de documentos en el menú) ---------- */
.side-head { border: 0 !important; padding: 14px 20px 6px !important; gap: 8px; }
.side-head h2 { font-size: 12px; font-weight: 500; color: var(--t-apagado); }
#sessionCount { font-size: 11px; }
.side-head .danger { min-height: 0; padding: 4px 10px; font-size: 11px; }
#collapseSidebarBtn { min-height: 0; width: 30px; height: 30px; padding: 0; border-radius: 999px; font-size: 14px; color: var(--t-tenue); display: grid; place-items: center; }
.sessions { padding: 0 12px 12px !important; gap: 4px; }
.session {
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  padding: 8px 12px;
  box-shadow: none !important;
  color: var(--t-texto);
}
.session:hover { background: var(--t-suave) !important; }
.session.active { background: var(--t-suave) !important; border-color: var(--t-linea) !important; box-shadow: none !important; }
.session strong { font-size: 13px; font-weight: 600; color: var(--t-tinta); }
.session span { font-size: 11px; }
.session-actions-row button { min-height: 26px; padding: 3px 10px; font-size: 11px; }

/* ---------- 9. Asistente flotante ---------- */
.floating-chat-btn { background: var(--t-negro); color: var(--t-negro-texto); box-shadow: var(--t-sombra-alta); animation: none; border-radius: 50%; }
.floating-chat-btn:hover { background: var(--t-negro-hover); }
.floating-chat-window { border-radius: var(--t-radio); border-color: var(--t-linea); box-shadow: var(--t-sombra-alta); background: var(--t-tarjeta); }
.floating-chat-header { background: var(--t-negro); color: var(--t-negro-texto); }
.floating-chat-messages { background: var(--t-tarjeta-2); }
.chat-bubble { border-radius: 18px; }
.chat-bubble.bot { background: var(--t-suave); color: var(--t-texto); border-color: transparent; border-bottom-left-radius: 6px; }
.chat-bubble.user { background: var(--t-negro); color: var(--t-negro-texto); border-bottom-right-radius: 6px; }
.floating-chat-input-container { background: var(--t-tarjeta); border-top-color: var(--t-linea); }
.floating-chat-input-container input { border-radius: 999px; }
.floating-chat-input-container button { border-radius: 999px; background: var(--t-negro); color: var(--t-negro-texto); border: 0; }

/* ==================================================================
   10. LAYOUT DE ESCRITORIO (≥ 901px): menú lateral fijo blanco a la
   izquierda, encabezado translúcido y contenido sobre fondo gris.
   ================================================================== */
@media (min-width: 901px) {
  body { --t-menu: 256px; }
  body:has(#appGrid.sidebar-collapsed) { --t-menu: 84px; }

  header {
    position: sticky !important;
    top: 0;
    z-index: 30;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 0 var(--t-menu) !important;
    padding: 0 32px !important;
    min-height: 64px;
    display: flex;
    align-items: center;
    background: rgba(241, 242, 245, .85) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--t-tinta);
    transition: margin .2s ease;
  }
  html[data-theme="dark"] header { background: rgba(11, 13, 18, .85) !important; }
  .topbar { max-width: none; width: 100%; margin: 0; display: flex; align-items: center; gap: 16px; }
  header .brand h1 { font-size: 20px; font-weight: 600; color: var(--t-tinta); }
  header .brand:empty { display: none; }
  header .t-titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--t-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header .toolbar { margin-left: auto; gap: 10px; flex-wrap: nowrap; }
  header .country-select-field { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--t-tenue); }
  header select {
    min-height: 36px;
    border-radius: 999px;
    border: 1px solid var(--t-linea);
    background: var(--t-tarjeta);
    padding: 6px 30px 6px 14px;
    font-size: 13px;
  }
  header #headerUploadLabel {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: none !important;
  }
  header .theme-toggle, header #logoutBtn { min-height: 36px; border-radius: 999px; border: 1px solid var(--t-linea) !important; background: var(--t-tarjeta) !important; color: var(--t-tenue) !important; font-size: 12px; font-weight: 500; padding: 6px 12px; }
  header .theme-toggle:hover { background: var(--t-suave) !important; color: var(--t-tinta) !important; border-color: var(--t-linea-2) !important; }
  header #authUserBadge { display: none; }
  .t-fecha {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    border: 1px solid var(--t-linea);
    background: var(--t-tarjeta);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--t-tenue);
    white-space: nowrap;
  }
  .t-fecha svg { width: 14px; height: 14px; color: var(--t-apagado); }

  main {
    width: auto !important;
    max-width: none !important;
    margin: 0 0 0 var(--t-menu) !important;
    padding: 8px 32px 40px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: margin .2s ease;
  }
  #appGrid, #appGrid.sidebar-collapsed { display: block !important; }

  /* ---- Menú lateral ---- */
  #appGrid > aside, #appGrid.sidebar-collapsed > aside {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    bottom: 0;
    width: var(--t-menu);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 40 !important;
    background: var(--t-tarjeta) !important;
    border: 0 !important;
    border-right: 1px solid var(--t-linea) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: width .2s ease;
  }
  .t-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 12px; }
  .t-logo {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 14px 14px 14px 4px;
    background: var(--t-acento);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.02em;
  }
  .t-brand-name { min-width: 0; flex: 1; line-height: 1.2; }
  .t-brand-name h1, .t-brand-name #platformBrandName {
    margin: 0;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--t-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .t-brand-sub { font-size: 12px; color: var(--t-tenue); }
  .t-brand #collapseSidebarBtn { margin-left: auto; flex-shrink: 0; }

  .platform-nav, .sidebar-collapsed .platform-nav {
    display: flex !important;
    flex-direction: column;
    gap: 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 4px 14px 10px !important;
    margin: 0;
  }
  .t-nav-group { padding: 14px 14px 6px; font-size: 12px; font-weight: 500; color: var(--t-apagado); }
  .platform-nav > .t-nav-group:first-child { padding-top: 2px; }
  .platform-nav .nav-item, .sidebar-collapsed .platform-nav .nav-item {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    width: 100%;
    min-height: 0 !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--t-tenue) !important;
    font-size: 14px;
    font-weight: 500 !important;
    text-align: left;
    box-shadow: none !important;
    transform: none !important;
    transition: background .15s ease, color .15s ease;
  }
  .platform-nav .nav-item:hover { background: var(--t-suave) !important; color: var(--t-tinta) !important; }
  .platform-nav .nav-item.active { background: var(--t-negro) !important; color: var(--t-negro-texto) !important; box-shadow: var(--t-sombra) !important; }
  .platform-nav .nav-item .nav-icon, .sidebar-collapsed .platform-nav .nav-item .nav-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: transparent !important;
    border-radius: 0;
    color: var(--t-apagado) !important;
    font-size: 15px;
    line-height: 1;
  }
  .platform-nav .nav-item .nav-icon svg { width: 18px; height: 18px; }
  .platform-nav .nav-item.active .nav-icon { color: var(--t-acento-vivo) !important; }
  .platform-nav .nav-item > span:not(.nav-icon) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .worker-mode .platform-nav .worker-only { display: flex !important; }

  /* rail angosto */
  .sidebar-collapsed .platform-nav { padding: 4px 10px 10px !important; align-items: center; }
  .sidebar-collapsed .platform-nav .nav-item { width: 44px; height: 44px; padding: 0 !important; justify-content: center; border-radius: 14px !important; }
  .sidebar-collapsed .platform-nav .nav-item > span:not(.nav-icon), .sidebar-collapsed .t-nav-group, .sidebar-collapsed .t-brand-name,
  .sidebar-collapsed .t-user-texto, .sidebar-collapsed .t-user #logoutBtn, .sidebar-collapsed .side-head h2, .sidebar-collapsed #sessionCount { display: none !important; }
  .sidebar-collapsed .t-brand { flex-direction: column; gap: 8px; padding: 18px 0 8px; }
  .sidebar-collapsed .t-brand #collapseSidebarBtn { margin: 0; }
  .sidebar-collapsed .t-user { padding: 12px 10px; }
  .sidebar-collapsed .t-user-caja { padding: 8px; display: grid; place-items: center; }
  .sidebar-collapsed .side-head { padding: 10px 0 4px !important; justify-content: center; }
  .sidebar-collapsed .sessions { padding: 0 8px 8px !important; }
  .sidebar-collapsed .session strong { width: 36px; height: 36px; border-radius: 12px; background: var(--t-suave); color: var(--t-tinta); font-size: 12px; }

  /* ---- Tarjeta de usuario al pie del menú ---- */
  .t-user { margin-top: auto; padding: 16px; }
  .t-user-caja { background: var(--t-suave); border-radius: var(--t-radio-2); padding: 12px; }
  .t-user-fila { display: flex; align-items: center; gap: 12px; }
  .t-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--t-acento-suave);
    color: #0F172A;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
  }
  .t-user-texto { min-width: 0; flex: 1; line-height: 1.25; }
  .t-user-nombre { display: block; font-size: 13px; font-weight: 600; color: var(--t-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-user-rol { display: block; font-size: 12px; color: var(--t-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-user #authUserBadge { display: none !important; }
  .t-user #logoutBtn {
    width: 100%;
    margin-top: 8px;
    padding: 8px 0 0 !important;
    min-height: 0;
    border: 0 !important;
    border-top: 1px solid var(--t-linea) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--t-tenue) !important;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    box-shadow: none !important;
  }
  .t-user #logoutBtn:hover { color: var(--t-tinta) !important; }

  /* ---- Contenido ---- */
  section.panel { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  .side-head, .panel-head { box-shadow: var(--t-sombra); }
}

/* ==================================================================
   11. MÓVIL (≤ 900px): se conserva la mecánica de la app (menú
   horizontal deslizable) con los colores y pastillas del tema.
   ================================================================== */
@media (max-width: 900px) {
  header { background: var(--t-fondo) !important; color: var(--t-tinta); border: 0 !important; box-shadow: none !important; }
  header .brand h1 { color: var(--t-tinta); font-size: 20px; }
  header .brand p { color: var(--t-tenue); }
  header .country-select-field { color: var(--t-tenue); }
  header .theme-toggle, header #logoutBtn { background: var(--t-tarjeta); color: var(--t-tenue); border: 1px solid var(--t-linea); }
  header select, header .country-select-field select { background: var(--t-tarjeta) !important; color: var(--t-tinta) !important; border: 1px solid var(--t-linea) !important; border-radius: 999px !important; }
  .t-titulo { display: none; }
  .t-fecha { display: none; }
  #appGrid > aside { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  .t-brand { display: flex; align-items: center; gap: 10px; padding: 4px 2px 8px; }
  .t-logo { width: 34px; height: 34px; border-radius: 11px 11px 11px 3px; background: var(--t-acento); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
  .t-brand-name h1, .t-brand-name #platformBrandName { margin: 0; font-size: 14px !important; font-weight: 700; color: var(--t-tinta); }
  .t-brand-sub { font-size: 11px; color: var(--t-tenue); }
  .t-brand #collapseSidebarBtn { display: none; }
  .platform-nav { background: var(--t-fondo) !important; }
  .platform-nav .nav-item {
    background: var(--t-tarjeta) !important;
    border: 1px solid var(--t-linea) !important;
    color: var(--t-tenue) !important;
    border-radius: 999px !important;
    font-weight: 500;
    box-shadow: none !important;
  }
  .platform-nav .nav-item.active { background: var(--t-negro) !important; color: var(--t-negro-texto) !important; border-color: transparent !important; }
  .platform-nav .nav-item .nav-icon { background: transparent !important; color: inherit !important; width: 18px !important; height: 18px !important; margin: 0 !important; display: grid; place-items: center; }
  .platform-nav .nav-item .nav-icon svg { width: 16px; height: 16px; }
  .platform-nav .nav-item.active .nav-icon { color: var(--t-acento-vivo) !important; }
  .t-nav-group { display: none; }
  .t-user { padding: 10px 0 4px; }
  .t-user-caja { background: var(--t-tarjeta); border: 1px solid var(--t-linea); border-radius: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
  .t-user-fila { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .t-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--t-acento-suave); color: #0F172A; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
  .t-user-nombre { display: block; font-size: 13px; font-weight: 600; color: var(--t-tinta); }
  .t-user-rol { display: block; font-size: 11px; color: var(--t-tenue); }
  .t-user #authUserBadge { display: none !important; }
  .t-user #logoutBtn { min-height: 32px; padding: 4px 12px !important; font-size: 12px; }
  main { padding: 8px 14px 32px !important; }
  section.panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  .kpi, .module-card { min-height: 112px; padding: 16px !important; }
  .kpi .value, .module-card > b { font-size: 26px !important; }
}

/* ==================================================================
   12. LOGIN: galaxia de Andrómeda a pantalla completa (tema-leo.js la
   dibuja en un solo canvas) y el ingreso centrado, de vidrio, dentro de
   ella. Al entrar, la cámara se lanza hacia el núcleo (body.t-warp).
   ================================================================== */
body.logged-out { background: #04060D !important; }
body:not(.logged-out):not(.t-warp) .login-screen { display: none !important; }
.login-screen {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid !important;
  place-items: center;
  padding: 28px 16px !important;
  background: transparent !important;
  overflow: hidden;
}
.login-screen::before, .login-screen::after { display: none !important; }
.login-screen > form.login-card {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: 410px !important;
  min-height: 0;
  margin: 0 auto;
  background: rgba(8, 11, 20, .62) !important;
  border: 1px solid rgba(214, 242, 143, .11) !important;
  border-radius: 26px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 120px rgba(31, 143, 95, .12), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  padding: 30px 28px 22px !important;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  color: #E9ECF2;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.login-screen > form.login-card > * { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.login-screen .login-brand { justify-items: center !important; text-align: center !important; gap: 18px; margin-bottom: 4px; }
.login-screen .login-logo {
  min-width: 0 !important;
  width: auto;
  display: inline-block;
  padding: 11px 17px 13px !important;
  border-radius: 18px 18px 22px 18px !important;
  background: var(--t-acento) !important;
  color: #fff !important;
  box-shadow: 0 10px 40px rgba(31, 143, 95, .35) !important;
  text-shadow: none !important;
  line-height: .88;
}
.login-screen .login-logo::after {
  right: 14px;
  bottom: -12px;
  border-width: 14px 0 0 22px;
  border-color: transparent transparent transparent var(--t-acento) !important;
  filter: none !important;
}
.login-screen .login-logo .alejo { font-size: 28px !important; }
.login-screen .login-logo .sin-jefe { font-size: 22px !important; }
.login-screen .login-logo .money { color: #D6F28F !important; text-shadow: none !important; }
.login-screen .login-card h1 { color: #F1F3F8 !important; font-size: 21px !important; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.login-screen .login-card p { color: #9AA3B5 !important; font-size: 13px !important; line-height: 1.5; }
.login-screen .login-card label { color: #C4CAD6 !important; font-size: 12.5px !important; font-weight: 500 !important; }
.login-screen .login-card > div { margin: 14px 0 0 !important; }
.login-screen .login-card input {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  color: #E9ECF2 !important;
  border-radius: 12px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
}
/* el autocompletar del navegador pintaba los campos de azul claro */
.login-screen .login-card input:-webkit-autofill,
.login-screen .login-card input:-webkit-autofill:hover,
.login-screen .login-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #E9ECF2 !important;
  -webkit-box-shadow: 0 0 0 1000px #121826 inset !important;
  caret-color: #E9ECF2;
  transition: background-color 9999s ease 0s;
}
.login-screen .login-card input::placeholder { color: #5D667A; }
.login-screen .login-card input:focus { outline: none; border-color: var(--t-acento) !important; box-shadow: 0 0 0 3px rgba(31, 143, 95, .25) !important; }
.login-screen #togglePwdBtn { background: rgba(255, 255, 255, .045) !important; border: 1px solid rgba(255, 255, 255, .10) !important; color: #8A93A6 !important; border-radius: 12px !important; height: 44px !important; min-height: 44px; padding: 0 12px !important; font-size: 15px !important; }
.login-screen #togglePwdBtn:hover { background: rgba(255, 255, 255, .08) !important; color: #E9ECF2 !important; }
.login-screen #loginError { color: #F2A39C !important; font-weight: 500 !important; }
.login-screen .login-options { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.login-screen .login-option {
  min-height: 0 !important;
  padding: 13px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: none !important;
  display: grid;
  gap: 5px;
  align-content: start;
  text-align: left;
  transform: none !important;
  color: #E9ECF2;
  transition: background .15s ease, border-color .15s ease;
}
.login-screen .login-option:hover { border-color: var(--t-acento) !important; background: rgba(255, 255, 255, .07) !important; transform: none !important; box-shadow: none !important; }
.login-screen .login-option[data-login-role="admin"] { background: var(--t-acento) !important; border-color: var(--t-acento) !important; color: #03210F; }
.login-screen .login-option[data-login-role="admin"]:hover { background: #26A46E !important; border-color: #26A46E !important; }
.login-screen .login-option .option-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .12) !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.login-screen .login-option[data-login-role="admin"] .option-icon { background: rgba(3, 33, 15, .18) !important; }
.login-screen .login-option strong { font-size: 14px !important; color: inherit !important; font-weight: 600; }
.login-screen .login-option span:not(.option-icon) { font-size: 11.5px !important; color: inherit !important; opacity: .72; font-weight: 400 !important; line-height: 1.35; }
.login-screen .t-pie { margin: 18px 0 0; font-size: 11.5px; color: #6A7387; text-align: center; }

/* el canvas vive fuera del login para poder cubrir la app durante el salto */
.t-galaxia {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, #0B1424 0%, #060A14 55%, #03050B 100%);
  transition: opacity .45s ease;
}
.t-galaxia[hidden] { display: none; }
.t-galaxia canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* el salto corre en CSS (transform/opacity): la tarjeta gráfica lo mueve
   aunque la app esté ocupada cargando datos al mismo tiempo */
.t-galaxia .t-estelas { opacity: 0; }
.t-galaxia .t-destello {
  position: absolute; inset: -20%;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(248, 255, 240, 1) 0%, rgba(190, 240, 200, .9) 30%, rgba(31, 143, 95, .45) 62%, rgba(4, 6, 13, 0) 100%);
}
.t-galaxia.t-salto .t-cielo { will-change: transform, opacity; animation: tCielo 1.15s cubic-bezier(.55, 0, .85, .35) forwards; }
.t-galaxia.t-salto .t-estelas { will-change: transform, opacity; animation: tEstelas 1.05s cubic-bezier(.5, 0, .85, .45) forwards; }
.t-galaxia.t-salto .t-destello { will-change: transform, opacity; animation: tDestello 1.15s cubic-bezier(.6, 0, .9, .5) forwards; }
.t-galaxia.t-salto .t-leyenda { opacity: 0; transition: opacity .2s ease; }
@keyframes tCielo { 0% { transform: none; opacity: 1; } 100% { transform: scale(4.2) rotate(12deg); opacity: .35; } }
@keyframes tEstelas { 0% { transform: scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(2.4); opacity: .85; } }
@keyframes tDestello { 0%, 40% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1.6); opacity: 1; } }
.t-galaxia .t-leyenda {
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  margin: 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(214, 242, 143, .38);
}
/* al hacer clic: el ingreso se asienta mientras la galaxia acelera */
body.t-impulso .login-screen > form.login-card { transform: scale(.985); }
/* el salto: la galaxia tapa la app y el ingreso se queda atrás */
body.t-warp .t-galaxia { z-index: 2147483000; }
body.t-warp .login-screen { position: fixed; inset: 0; z-index: 2147483001; pointer-events: none; }
body.t-warp .login-screen > form.login-card { transform: scale(1.35); opacity: 0; transition: transform .6s cubic-bezier(.55, 0, .8, .2), opacity .35s ease; }
.t-galaxia.t-fin { opacity: 0; transition: opacity .55s ease; }
@media (max-width: 640px) {
  .login-screen { padding: 16px !important; }
  .login-screen > form.login-card { padding: 24px 18px 18px !important; border-radius: 22px !important; }
  .login-screen .login-options { grid-template-columns: 1fr; }
  .t-galaxia .t-leyenda { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.t-warp .login-screen > form.login-card { transition: none; }
}

/* ==================================================================
   13. Páginas embebidas (campanas.html y testeos.html dentro de iframes)
   ================================================================== */
html.t-embebida body { padding: 4px !important; }
.container header { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px 4px 4px !important; margin-bottom: 12px !important; }
.container .eyebrow { background: var(--t-suave); color: var(--t-tenue); font-weight: 500; text-transform: none; letter-spacing: 0; padding: 5px 12px; }
.container h1 { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--t-tinta); }
.container .subtitle, .container .updated { color: var(--t-tenue); }
.filter-bar { border-radius: var(--t-radio) !important; padding: 18px 20px !important; }
.fb-label { text-transform: none !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--t-tenue) !important; }
.fb-input, .fb-select { border-radius: var(--t-radio-campo) !important; border: 1px solid var(--t-linea-2) !important; background: var(--t-tarjeta) !important; color: var(--t-tinta) !important; }
.chip { border-radius: 999px !important; background: var(--t-suave) !important; border-color: transparent !important; color: var(--t-tenue) !important; font-weight: 500; }
.chip:hover { color: var(--t-tinta) !important; }
.chip.on { background: var(--t-negro) !important; color: var(--t-negro-texto) !important; }
.af-pill { background: var(--t-suave); color: var(--t-tenue); }
.btn-clear { border-radius: 999px !important; border-color: #FECACA !important; color: #B91C1C !important; background: #FEF2F2 !important; font-weight: 500 !important; }
.tabs { display: inline-flex !important; gap: 4px !important; padding: 6px; background: var(--t-tarjeta); border: 1px solid var(--t-anillo); border-radius: 999px; box-shadow: var(--t-sombra); max-width: 100%; }
.tab-btn { border: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--t-tenue) !important; font-weight: 500 !important; padding: 8px 16px !important; border-radius: 999px !important; }
.tab-btn:hover { color: var(--t-tinta) !important; background: var(--t-suave) !important; }
.tab-btn.active { background: var(--t-negro) !important; color: var(--t-negro-texto) !important; }
.entity-card, .pais-card, .validations { border-radius: var(--t-radio-2) !important; }
.ec-head:hover { background: var(--t-tarjeta-2); }
.ec-icon { border-radius: 12px; background: var(--t-suave); }
.ec-stat-l { text-transform: none; letter-spacing: 0; }
.pais-card.on { background: var(--t-tarjeta) !important; border-color: var(--t-tinta) !important; box-shadow: 0 0 0 1px var(--t-tinta) !important; }
.tbl { border-radius: var(--t-radio-2) !important; border: 1px solid var(--t-anillo) !important; box-shadow: var(--t-sombra) !important; }
.tbl th { text-transform: none !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--t-tenue) !important; border-bottom: 1px solid var(--t-linea) !important; background: var(--t-tarjeta) !important; }
.tbl td { border-bottom-color: var(--t-suave) !important; }
.tbl tr:hover td { background: var(--t-tarjeta-2) !important; }
.btn { border-radius: 999px !important; font-weight: 600 !important; }
.btn-secondary { background: var(--t-tarjeta) !important; border: 1px solid var(--t-linea) !important; color: var(--t-tinta) !important; }
.btn-mini { border-radius: 999px !important; background: var(--t-suave) !important; border-color: transparent !important; color: var(--t-tenue) !important; }
.search-input { border-radius: 999px !important; background: var(--t-suave) !important; border: 1px solid transparent !important; box-shadow: none !important; color: var(--t-tinta) !important; }
.search-input:focus { background: var(--t-tarjeta) !important; border-color: var(--t-linea-2) !important; }
.sec { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--t-tinta); }
.kvb, .kvg, .kvo, .kvp, .kvr, .kvc { color: inherit !important; }
.daily-chart { background: var(--t-suave); border-radius: var(--t-radio-3); }
.dc-bar { background: var(--t-tinta); border-radius: 4px 4px 0 0; }
.dc-bar:hover { background: var(--t-acento); }
.st, .sem { font-weight: 600; }
footer { border-top-color: var(--t-linea); color: var(--t-apagado); }
/* testeos.html */
.page-topbar { background: transparent !important; border: 0 !important; position: static !important; padding: 4px 4px 8px !important; }
.page-topbar h1, .page-topbar .h1 { font-size: 20px !important; font-weight: 600 !important; }
#syncStatus { border-radius: 999px; font-weight: 600; }
.page-wrap { padding: 0 !important; }
#loginScreen:not(.login-screen) { background: var(--t-fondo) !important; }
#loginScreen:not(.login-screen) .login-card { border-radius: var(--t-radio) !important; border: 1px solid var(--t-anillo) !important; box-shadow: var(--t-sombra-alta) !important; }
.test-card, .home-test-card { border-radius: var(--t-radio-2) !important; }
.photo-upload-btn { border-radius: 999px !important; background: var(--t-negro) !important; color: var(--t-negro-texto) !important; }

/* ==================================================================
   14. Compacto, como el tablero de Meta Ads de Leo: menos aire entre
   tarjetas, números un punto más chicos, tablas más densas.
   ================================================================== */
@media (min-width: 901px) {
  main { padding: 6px 24px 32px !important; }
  .module-view > * + * { margin-top: 12px !important; }
  .module-view > .module-hero + * { margin-top: 8px !important; }
  .module-hero { padding: 4px 4px 2px !important; }
  .module-hero h2, [data-module-view="inicio"] .module-hero h2 { font-size: 21px !important; }
  .module-hero .muted { font-size: 13px; }
  .panel-head { padding: 12px 18px; margin-bottom: 12px; }
  .summary-grid, .kpis, .ops-layout, .module-grid, .country-picker, .home-tests-grid, .ops-user-grid, .activity-summary-grid, .ad-groups-cards-grid { gap: 12px; }
  .kpi, .module-card { min-height: 108px; padding: 14px 16px !important; border-radius: 20px !important; }
  .kpi .label, .module-card > span, .kpi-l { font-size: 12.5px !important; }
  .kpi .value, .module-card > b, .kpi-v { font-size: 24px !important; padding-top: 8px; }
  .dense-kpis .kpi .value { font-size: 20px !important; }
  .kpi .hint, .module-card > small, .kpi-sub { font-size: 11.5px; }
  .kpi.clickable::after, .module-card::after { width: 26px; height: 26px; top: 12px; right: 12px; font-size: 12px; }
  .finance-panel .kpis, .mini .kpis { padding: 12px 16px !important; gap: 10px; }
  .mini h3, .mini-head, .kpi-detail-head, .supplier-section-head, .office-panel-head, .home-tests-head { padding: 14px 16px 2px; font-size: 15px; }
  .filters, .compact-filters { padding: 12px 16px; }
  table { font-size: 12.5px; }
  th, td { padding: 9px 12px; }
  button, .file-label, .action-menu summary { min-height: 34px; padding: 6px 13px; font-size: 12.5px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), select, textarea, .multi-button { min-height: 36px; font-size: 12.5px; }
  .home-chart { border-radius: var(--t-radio-2); background: var(--t-tarjeta); border: 1px solid var(--t-anillo); }
  .chart-tot { font-size: 12px; gap: 14px; }
  .dev-ring { width: 68px; height: 68px; }
  .dev-ring-in { width: 51px; height: 51px; font-size: 14px; }
}

/* ==================================================================
   15. INICIO v2 · sin sugerencias, todo comprimido y más moderno:
   banner con brillo, tarjetas grandes como "bento" de 5 piezas,
   chips de totales en pastillas, gráfica más baja, todo tabular.
   ================================================================== */
/* Fuera las sugerencias del día y la frase del banner */
#briefToggle, #briefWrap, .hero-brief, #homeFrase, .hero-exec-frase { display: none !important; }

/* Números siempre alineados (tabulares) */
.kmb-main, .kpi .value, .module-card > b, .kpi-detail-card strong, .chart-tot b, .dev-ring-in b, td.num-cell, .kpi-v { font-variant-numeric: tabular-nums; }

/* ---- Banner ---- */
.hero-exec {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(214, 242, 143, .35) 0%, rgba(214, 242, 143, 0) 55%),
    radial-gradient(50% 100% at 0% 100%, rgba(74, 222, 128, .28) 0%, rgba(74, 222, 128, 0) 60%),
    linear-gradient(115deg, #0B3B2A 0%, #14603F 55%, #1F8F5F 100%) !important;
  border-radius: 22px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 10px 30px rgba(11, 59, 42, .22) !important;
  border: 1px solid rgba(255, 255, 255, .08);
}
.hero-exec::after { display: none !important; }
.hero-exec-top { align-items: center !important; gap: 14px !important; }
.hero-exec-kicker { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .12em !important; opacity: .78 !important; }
.hero-exec-mes { font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 700 !important; letter-spacing: -.02em; margin: 2px 0 0 !important; }
.hero-exec-sel label { font-size: 10px !important; font-weight: 600 !important; letter-spacing: .1em !important; opacity: .8 !important; gap: 4px !important; }
.hero-exec-sel select {
  border-radius: 999px !important;
  padding: 7px 30px 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  min-height: 34px !important;
}
.hero-exec-paises { font-size: 11px !important; margin-top: 5px !important; color: rgba(255, 255, 255, .75) !important; }

/* ---- Cinco tarjetas grandes como bento ---- */
.kpi-mega {
  gap: 10px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.kpi-mega .kmb {
  background: var(--t-tarjeta);
  border: 1px solid var(--t-anillo) !important;
  border-radius: 18px;
  padding: 12px 14px !important;
  box-shadow: var(--t-sombra);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
}
.kpi-mega .kmb.clickable:hover { background: var(--t-tarjeta); transform: translateY(-2px); box-shadow: var(--t-sombra-alta); }
.kpi-mega .kmb-title { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important; color: var(--t-tenue) !important; }
.kpi-mega .kmb-main { font-size: clamp(20px, 1.6vw, 24px) !important; font-weight: 600 !important; letter-spacing: -.02em; margin-top: 6px !important; color: var(--t-tinta); }
.kpi-mega .kmb-sub { font-size: 11.5px !important; margin-top: 2px !important; color: var(--t-tenue) !important; line-height: 1.35; }
.kpi-mega .kmb-line { font-size: 11.5px !important; margin-top: 5px !important; color: var(--t-texto); line-height: 1.35; }
.kpi-mega .kmb-line b { font-weight: 600 !important; }
.kpi-mega .kmb-line.desg-pie, .desg-pie {
  display: inline-block;
  margin-top: auto !important;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--t-suave);
  color: var(--t-tinta) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  align-self: flex-start;
  margin-top: 8px !important;
}
.kpi-mega .kmb.destacada { background: var(--p-rosa) !important; border-color: transparent !important; }
.kpi-mega .kmb.destacada:hover { background: var(--p-rosa) !important; }
.kpi-mega .kmb.destacada .kmb-main { font-size: clamp(20px, 1.6vw, 24px) !important; color: #B42318; }
.kpi-mega .kmb.destacada .kmb-line, .kpi-mega .kmb.destacada .kmb-sub { color: rgba(15, 23, 42, .75) !important; }
.kpi-mega .kmb.destacada .desg-pie { background: rgba(255, 255, 255, .7); }
.kpi-mega .kmb-pill { border-radius: 999px; padding: 3px 9px; font-size: 11px; margin-top: 6px; }
@media (max-width: 1280px) { .kpi-mega .kmb { border-bottom: 1px solid var(--t-anillo) !important; } }

/* ---- Chips de totales y gráfica ---- */
#homeGanancia .kpis { padding: 10px 0 0 !important; gap: 10px; }
#homeGanancia .kpi { min-height: 92px; padding: 12px 14px !important; border-radius: 18px !important; }
#homeGanancia .kpi .value { font-size: 22px !important; padding-top: 6px; }
#homeGanancia .kpi .hint { font-size: 11px; }
.home-chart { border-radius: 20px !important; padding: 14px 16px !important; margin-top: 10px; }
.chart-head { gap: 10px !important; align-items: center !important; }
.chart-head .label { font-size: 12.5px !important; font-weight: 600 !important; color: var(--t-tinta) !important; text-transform: none !important; }
.chart-tot { gap: 6px !important; font-size: 11.5px !important; }
.chart-tot span { display: inline-flex; align-items: center; gap: 4px; background: var(--t-suave); border-radius: 999px; padding: 3px 9px; color: var(--t-tenue); }
.chart-tot b { color: var(--t-tinta); font-weight: 600; }
.g-svg { height: 220px !important; margin-top: 8px !important; }
.chart-leg { gap: 6px !important; margin-top: 8px !important; font-size: 11px !important; }
.chart-leg span { display: inline-flex; align-items: center; gap: 5px; background: var(--t-suave); border-radius: 999px; padding: 3px 9px; color: var(--t-tenue); }
.chart-leg i { width: 8px; height: 8px; border-radius: 999px; }
.dev-donut { min-width: 88px; }
.dev-nom { font-size: 12px; font-weight: 600; }
.dev-det { font-size: 10.5px; }
.dev-bars { height: 96px; }

/* ---- Densidad general un punto más (escritorio) ---- */
@media (min-width: 901px) {
  main { padding: 4px 20px 28px !important; }
  .module-view > * + * { margin-top: 10px !important; }
  .panel-head { padding: 10px 16px; margin-bottom: 10px; }
  .panel-head h2 { font-size: 15px; }
  .module-hero h2, [data-module-view="inicio"] .module-hero h2 { font-size: 20px !important; }
  .summary-grid, .kpis, .ops-layout, .module-grid, .country-picker, .home-tests-grid, .ops-user-grid, .activity-summary-grid, .ad-groups-cards-grid { gap: 10px; }
  .kpi, .module-card { min-height: 100px; padding: 12px 14px !important; border-radius: 18px !important; }
  .kpi .value, .module-card > b, .kpi-v { font-size: 22px !important; padding-top: 6px; }
  .finance-panel, .mini { border-radius: 20px; }
  .mini h3, .mini-head, .kpi-detail-head, .supplier-section-head, .office-panel-head, .home-tests-head { padding: 12px 14px 2px; font-size: 14.5px; }
  .filters, .compact-filters { padding: 10px 14px; gap: 8px; }
  .filters label, .compact-filters label { font-size: 11.5px; gap: 3px; }
  th, td { padding: 8px 12px; }
  table { font-size: 12px; }
  .table-tools { padding: 8px 2px; }
  header { min-height: 56px; }
  header .t-titulo { font-size: 18px; }
}

/* ---- Gráfica diaria: trazos finos, barras delgadas, rejilla suave ---- */
.g-svg { height: 240px !important; overflow: visible; }
.g-grid { stroke: #E2E8F0 !important; stroke-width: 1 !important; stroke-dasharray: 2 5; }
.g-ejeI, .g-ejeD, .g-fecha { fill: #94A3B8 !important; font-size: 10.5px !important; font-family: var(--t-fuente) !important; font-weight: 500; }
.g-bar-tot { fill: #E2E8F0 !important; }
#gradVerde stop:first-child { stop-color: #4ADE80 !important; }
#gradVerde stop:last-child { stop-color: #16A34A !important; }
#gradPauta stop:first-child { stop-color: #6366F1 !important; stop-opacity: .18 !important; }
#gradPauta stop:last-child { stop-color: #6366F1 !important; }
.g-gan, .g-pau, .g-dev { fill: none !important; stroke-width: 1.75px !important; stroke-linecap: round; stroke-linejoin: round; }
.g-gan { stroke: #F59E0B !important; }
.g-pau { stroke: #6366F1 !important; }
.g-dev { stroke: #F43F5E !important; stroke-dasharray: 4 3; }
.g-pau-area { fill: url(#gradPauta); }
html[data-theme="dark"] .g-grid { stroke: #262B38 !important; }
html[data-theme="dark"] .g-bar-tot { fill: #2A303D !important; }
html[data-theme="dark"] .g-ejeI, html[data-theme="dark"] .g-ejeD, html[data-theme="dark"] .g-fecha { fill: #64748B !important; }
.chart-notas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 11px; }
.chart-notas span { background: var(--t-suave); border-radius: 999px; padding: 3px 9px; color: var(--t-tenue); }
.chart-notas span b { color: var(--t-tinta); font-weight: 600; }
.chart-notas span.mal { background: #FEE2E2; color: #991B1B; }
.chart-notas span.mal b { color: #991B1B; }

/* ==================================================================
   16. UN SOLO BANNER ARRIBA · claro y delicado. En Inicio trae el saludo,
   el mes y sus países; en los demás módulos, el nombre del módulo. A la
   derecha: mes, país, cargar Excel, tema, fecha y estado de la base.
   ================================================================== */
.hero-exec.t-oculto { display: none !important; }
.t-inicio-cab { display: none; min-width: 0; }
body.t-inicio .t-inicio-cab { display: block; }
body.t-inicio header .t-titulo { display: none; }
.t-inicio-cab .hero-exec-kicker { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .12em !important; color: var(--t-tenue) !important; opacity: 1 !important; text-transform: uppercase; }
.t-inicio-cab .hero-exec-mes { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.02em; margin: 1px 0 0 !important; color: var(--t-tinta) !important; line-height: 1.1 !important; text-transform: capitalize; }
.t-inicio-cab #homeMesInfo { font-size: 11.5px !important; color: var(--t-tenue) !important; margin-top: 2px !important; }
.t-mes { display: none !important; }
body.t-inicio .t-mes { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--t-tenue) !important; opacity: 1 !important; }
.t-mes select {
  min-height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid var(--t-linea) !important;
  background: var(--t-tarjeta) !important;
  color: var(--t-tinta) !important;
  padding: 6px 28px 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#cloudBadge.t-sync {
  position: static !important;
  z-index: auto !important;
  min-height: 34px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border: 1px solid var(--t-linea);
  white-space: nowrap;
}
#cloudBadge.t-sync::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .9; }
@media (min-width: 901px) {
  header {
    top: 8px !important;
    margin: 8px 20px 0 calc(var(--t-menu) + 20px) !important;
    min-height: 60px;
    padding: 9px 16px 9px 18px !important;
    border-radius: 20px !important;
    background: linear-gradient(115deg, #FFFFFF 0%, #F5FBF8 60%, #ECF7F1 100%) !important;
    border: 1px solid rgba(15, 23, 42, .06) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-theme="dark"] header { background: linear-gradient(115deg, #151821 0%, #161C1A 60%, #14201A 100%) !important; border-color: rgba(255, 255, 255, .06) !important; }
  header .t-titulo { font-size: 20px; }
  header .toolbar { gap: 8px; }
  header .country-select-field { gap: 6px; font-size: 11px; }
  header select, header .t-mes select { min-height: 34px !important; font-size: 12.5px !important; padding: 6px 26px 6px 12px !important; }
  header #headerUploadLabel { min-height: 34px; padding: 6px 14px; font-size: 12.5px; }
  header .theme-toggle { min-height: 34px; padding: 6px 11px; font-size: 11.5px; }
  .t-fecha { min-height: 34px; padding: 6px 12px; font-size: 11.5px; }
  main { padding-top: 10px !important; }
}
@media (max-width: 900px) {
  .t-inicio-cab .hero-exec-mes { font-size: 18px !important; }
  body.t-inicio .t-mes { width: 100%; }
}

/* ---- Gráfica v3 del Inicio: área suave y líneas finas ---- */
.g-v3 { height: 210px !important; }
.g-ent-area { fill: url(#gradEnt); }
.g-ent { fill: none !important; stroke: #16A34A !important; stroke-width: 2px !important; stroke-linecap: round; stroke-linejoin: round; }
.g-ord { fill: none !important; stroke: #94A3B8 !important; stroke-width: 1.4px !important; stroke-dasharray: 3 4; stroke-linecap: round; }
.g-v3 .g-gan { stroke-width: 1.5px !important; }
.g-v3 .g-pau { stroke-width: 1.4px !important; stroke-dasharray: 5 4; }
.g-dev-dot { fill: #F43F5E; stroke: #fff; stroke-width: 1.5; }
.g-guia { stroke: #0F172A; stroke-width: 1px; stroke-dasharray: 2 3; opacity: .45; }
.g-punto { fill: #16A34A; stroke: #fff; stroke-width: 2; }
html[data-theme="dark"] .g-guia { stroke: #E2E8F0; }
html[data-theme="dark"] .g-dev-dot, html[data-theme="dark"] .g-punto { stroke: #151821; }
.t-tip {
  position: absolute; top: 8px; z-index: 5;
  pointer-events: none;
  background: #0F172A; color: #fff;
  border-radius: 14px; padding: 9px 12px;
  font-size: 11.5px; line-height: 1.5;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .25);
  display: grid; gap: 1px; min-width: 150px;
}
.t-tip > b { font-size: 12px; margin-bottom: 3px; }
.t-tip span { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .75); }
.t-tip span b { color: #fff; margin-left: auto; font-weight: 600; }
.t-tip i { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }

/* ==================================================================
   17. INFORME DIARIO VIVO (informe-vivo.js): pestañas, navegación de
   fecha, tarjetas, dona, área, productos y conciliación.
   ================================================================== */
.iv { display: grid; gap: 12px; }
.iv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--t-tarjeta); border: 1px solid var(--t-anillo); border-radius: 999px; box-shadow: var(--t-sombra); }
.iv-tabs button { min-height: 32px; border: 0; background: transparent; color: var(--t-tenue); font-weight: 500; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; }
.iv-tabs button:hover { background: var(--t-suave); color: var(--t-tinta); }
.iv-tabs button.on { background: var(--t-negro); color: var(--t-negro-texto); }
.iv-nav { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--t-tarjeta); border: 1px solid var(--t-anillo); border-radius: 999px; box-shadow: var(--t-sombra); }
.iv-nav input[type="date"] { min-height: 30px; border: 0; background: var(--t-suave); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 500; }
.iv-flecha { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 999px; border: 0; background: var(--t-suave); color: var(--t-tinta); font-size: 16px; line-height: 1; }
.iv-flecha:disabled { opacity: .35; }
.iv-larga { font-size: 12.5px; color: var(--t-tenue); padding: 0 8px 0 4px; text-transform: capitalize; }
.iv-acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.iv-link { font-size: 12px; color: var(--t-tenue); text-decoration: underline; text-underline-offset: 3px; }
.iv-cargando, .iv-vacio { padding: 26px; text-align: center; color: var(--t-tenue); font-size: 13px; }
.iv-card { background: var(--t-tarjeta); border: 1px solid var(--t-anillo); border-radius: var(--t-radio); box-shadow: var(--t-sombra); padding: 14px 16px; min-width: 0; }
.iv-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.iv-card-h h3 { font-size: 14.5px; font-weight: 600; color: var(--t-tinta); margin: 0; }
.iv-card-h span { font-size: 11.5px; color: var(--t-tenue); }
.iv-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .iv-2col { grid-template-columns: 1fr; } }
.iv-kpis .kpi { min-height: 96px; }
.iv-aviso { border-radius: var(--t-radio-2); padding: 10px 14px; font-size: 12.5px; line-height: 1.45; }
.iv-aviso.warn { background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }
.iv-aviso.info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.iv-aviso.okey { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
html[data-theme="dark"] .iv-aviso.warn { background: #3A2412; border-color: #7C3F12; color: #FDBA74; }
html[data-theme="dark"] .iv-aviso.info { background: #172554; border-color: #1E3A8A; color: #93C5FD; }
html[data-theme="dark"] .iv-aviso.okey { background: #052E16; border-color: #14532D; color: #86EFAC; }
.iv-dona { display: flex; align-items: center; gap: 16px; }
.iv-dona-svg { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.iv-dona-svg svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.iv-dona-parte { cursor: pointer; }
.iv-dona-c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.iv-dona-c b { display: block; font-size: 16px; font-weight: 600; }
.iv-dona-c span { display: block; font-size: 10.5px; color: var(--t-tenue); margin-top: -18px; }
.iv-ley { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; gap: 4px; font-size: 12.5px; }
.iv-ley li { display: flex; align-items: center; gap: 8px; }
.iv-pt { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.iv-ley-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t-texto); }
.iv-ley-p { color: var(--t-tenue); font-variant-numeric: tabular-nums; }
.iv-ley-v { width: 84px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.iv-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iv-bars li { display: grid; grid-template-columns: minmax(0, 1.1fr) 2fr auto; align-items: center; gap: 10px; font-size: 12.5px; }
.iv-bar-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t-texto); }
.iv-bars .tag-bar { display: block; height: 8px; border-radius: 999px; background: var(--t-suave); overflow: hidden; }
.iv-bars .tag-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4ADE80, #16A34A); }
.iv-bar-v { color: var(--t-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.iv-pais { padding: 12px 14px; }
.iv-pais-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.iv-pais-h h3 { font-size: 15px; font-weight: 600; margin: 0; }
.iv-flag { font-size: 20px; }
.iv-pais-tot { margin-left: auto; font-size: 12px; color: var(--t-tenue); }
.iv-pais-tot b { color: var(--t-tinta); font-weight: 600; }
.iv-tabla { border: 0 !important; box-shadow: none; border-radius: var(--t-radio-2); max-height: none; }
.iv-tabla th { position: static; }
.iv-tabla tfoot td { border-top: 1px solid var(--t-linea); font-weight: 600; background: var(--t-tarjeta-2); }
.iv-tabla td.r, .iv-tabla th.r { text-align: right; white-space: nowrap; }
.iv-prod { font-weight: 500; }
.iv-tag { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 600; margin-left: 4px; background: var(--t-suave); color: var(--t-tenue); }
.iv-tag.wa { background: #DCFCE7; color: #166534; }
.iv-tag.web { background: #DBEAFE; color: #1E40AF; }
.iv-tag.rastro { background: #FEE2E2; color: #991B1B; margin: 0; }
.iv-tag.parcial { background: #FEF3C7; color: #92400E; margin: 0; }
.iv-tag.sn { background: #E0E7FF; color: #3730A3; margin: 0; }
.iv-tag.subida { background: #DCFCE7; color: #166534; margin: 0; }
.iv-tag.motivo { background: #E0E7FF; color: #3730A3; margin: 0; }
.iv-roas { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.iv-roas.hi { background: #DCFCE7; color: #166534; }
.iv-roas.mid { background: #FEF3C7; color: #92400E; }
.iv-roas.lo { background: #FEE2E2; color: #991B1B; }
.iv-roas.na { background: var(--t-suave); color: var(--t-apagado); }
.iv-pie { font-size: 11.5px; color: var(--t-apagado); margin: 2px 4px 0; }
.iv-vacio-card { text-align: center; padding: 26px; }
.iv-vacio-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.iv-vacio-card p { color: var(--t-tenue); font-size: 13px; margin: 0 0 10px; }
.iv-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.iv-chip { border-radius: 999px; border: 1px solid var(--t-linea); background: var(--t-tarjeta); font-size: 12px; padding: 5px 12px; min-height: 0; color: var(--t-texto); }
.iv-chip.fijo { cursor: default; }
.iv-filtros { display: grid; gap: 8px; background: var(--t-tarjeta); border: 1px solid var(--t-anillo); border-radius: var(--t-radio-2); padding: 10px 12px; box-shadow: var(--t-sombra); }
.iv-grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.iv-pill { min-height: 30px; border-radius: 999px; border: 1px solid var(--t-linea); background: var(--t-tarjeta); color: var(--t-tenue); font-size: 12px; font-weight: 500; padding: 5px 12px; }
.iv-pill.on { background: var(--t-negro); color: var(--t-negro-texto); border-color: transparent; }
.iv-pill.iv-descarga { text-decoration: none; display: inline-flex; align-items: center; }
.iv-filtros select, .iv-filtros input[type="date"] { min-height: 30px; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.iv-o { font-size: 11.5px; color: var(--t-apagado); }
.iv-area { height: 200px !important; }
.iv-a-g { fill: url(#ivGradG); }
.iv-a-i { fill: url(#ivGradI); }
.iv-l-g { fill: none !important; stroke: #6366F1 !important; stroke-width: 1.5px !important; stroke-dasharray: 5 4; stroke-linecap: round; }
.iv-l-i { fill: none !important; stroke: #16A34A !important; stroke-width: 2px !important; stroke-linecap: round; stroke-linejoin: round; }
.iv-pv { fill: #0F172A; stroke: #fff; stroke-width: 1.5; }
.iv-hit { cursor: pointer; }
.iv-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.iv-prod-card { text-align: left; background: var(--t-tarjeta-2); border: 1px solid var(--t-linea); border-radius: 18px; padding: 12px 13px; min-height: 0; display: grid; gap: 8px; transition: transform .15s ease, box-shadow .15s ease; }
.iv-prod-card:hover { transform: translateY(-2px); box-shadow: var(--t-sombra-alta); background: var(--t-tarjeta); }
.iv-prod-top { display: flex; align-items: center; gap: 9px; }
.iv-ava { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.iv-prod-n { min-width: 0; flex: 1; line-height: 1.2; }
.iv-prod-n b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-prod-n small { color: var(--t-tenue); font-size: 11px; }
.iv-spark { width: 100%; height: 24px; display: block; }
.iv-spark rect { fill: #6366F1; opacity: .55; }
.iv-prod-f { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--t-tenue); }
.iv-prod-f span { display: grid; gap: 1px; }
.iv-prod-f b { font-size: 12.5px; color: var(--t-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.iv-det-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-det-h h3 { font-size: 18px; font-weight: 600; margin: 0; }
.iv-conc-res { display: flex; gap: 18px; align-items: center; }
.iv-conc-anillo { text-align: center; flex-shrink: 0; }
.iv-conc-anillo .dev-ring { width: 84px; height: 84px; margin: 0 auto 4px; }
.iv-conc-anillo .dev-ring-in { width: 64px; height: 64px; font-size: 15px; }
.iv-conc-l { font-size: 11px; color: var(--t-tenue); }
.iv-conc-det { flex: 1; min-width: 0; display: grid; gap: 8px; }
.iv-conc-t { font-size: 13px; font-weight: 600; text-transform: none; }
.iv-conc-t::first-letter { text-transform: uppercase; }
.iv-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--t-suave); }
.iv-stack span { display: block; height: 100%; transition: width .9s cubic-bezier(.16, 1, .3, 1); }
.iv-conc-tarj { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-stat { display: grid; gap: 0; text-align: left; min-height: 0; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--t-linea); background: var(--t-tarjeta); line-height: 1.15; }
.iv-stat b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.iv-stat span { font-size: 11px; color: var(--t-tenue); }
.iv-stat.verde b { color: #15803D; }
.iv-stat.rojo b { color: #B91C1C; }
.iv-stat.lila b { color: #4338CA; }
.iv-stat.on { border-color: var(--t-tinta); box-shadow: 0 0 0 1px var(--t-tinta); }
.iv-pista { font-size: 11px; color: var(--t-tenue); margin: 0; }
.iv-prog { font-size: 12px; font-weight: 500; color: var(--t-tenue); margin: 6px 2px; }
.iv-sep { background: var(--t-suave) !important; font-size: 11px; font-weight: 600; color: #3730A3; }
.iv-ok { color: #166534; font-weight: 500; padding: 14px !important; }
.iv-det { margin-top: 10px; }
.iv-det summary { cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--t-tinta); padding: 6px 0; }
.iv-anota { min-height: 0; padding: 4px 10px; font-size: 11px; border-style: dashed; color: var(--t-tenue); }
.iv-motivo { cursor: pointer; }
.iv-editor { display: grid; gap: 6px; min-width: 220px; }
.iv-editor select, .iv-editor input { min-height: 32px; font-size: 12px; border-radius: 10px; }
.iv-ed-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.iv-ed-btns button { min-height: 28px; padding: 4px 10px; font-size: 11.5px; }
html[data-theme="dark"] .iv-tag.wa, html[data-theme="dark"] .iv-roas.hi, html[data-theme="dark"] .iv-tag.subida { background: #14321F; color: #86EFAC; }
html[data-theme="dark"] .iv-tag.web { background: #1E2A44; color: #93C5FD; }
html[data-theme="dark"] .iv-tag.rastro, html[data-theme="dark"] .iv-roas.lo { background: #3B1A1A; color: #FCA5A5; }
html[data-theme="dark"] .iv-tag.parcial, html[data-theme="dark"] .iv-roas.mid { background: #3A2C12; color: #FCD34D; }
html[data-theme="dark"] .iv-tag.sn, html[data-theme="dark"] .iv-tag.motivo { background: #26264A; color: #C7D2FE; }
html[data-theme="dark"] .iv-dona-svg circle:first-child { stroke: #262B38; }

/* Selector de país del encabezado: pastilla blanca, no verde */
header .country-select-field select, header .country-select-field select:focus, .topbar .country-select-field select {
  background: var(--t-tarjeta) !important;
  color: var(--t-tinta) !important;
  border: 1px solid var(--t-linea) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
header .country-select-field { color: var(--t-tenue) !important; }

/* El informe clásico embebido queda oculto: lo reemplaza informe-vivo.js */
#informeDiarioShell { display: none !important; }

/* ==================================================================
   18. Controles solo con ícono (barra superior e informe)
   ================================================================== */
.t-icono, header .t-icono, .iv-acciones .t-icono, #cloudBadge.t-sync {
  width: 36px !important; height: 36px !important; min-height: 36px !important; min-width: 36px;
  padding: 0 !important; display: inline-grid !important; place-items: center;
  font-size: 0 !important; line-height: 0; border-radius: 999px !important;
  overflow: hidden; white-space: nowrap; flex-shrink: 0;
}
.t-icono svg.t-ico, .iv-acciones .t-icono svg.t-ico { width: 18px; height: 18px; display: block; }
.t-icono::before, .t-icono::after { content: none !important; }
header #headerUploadLabel.t-icono { background: var(--t-negro) !important; color: var(--t-negro-texto) !important; border: 0 !important; }
header .theme-toggle.t-icono { background: var(--t-tarjeta) !important; color: var(--t-tenue) !important; border: 1px solid var(--t-linea) !important; }
header .theme-toggle.t-icono:hover { color: var(--t-tinta) !important; }
.iv-acciones .t-icono { background: var(--t-tarjeta); color: var(--t-tenue); border: 1px solid var(--t-linea); text-decoration: none; }
.iv-acciones .t-icono:hover { color: var(--t-tinta); background: var(--t-suave); }
/* sincronización: un punto de color, nada más (verde al día, ámbar guardando, rojo sin conexión) */
#cloudBadge.t-sync {
  width: 12px !important; height: 12px !important; min-width: 12px; min-height: 12px !important;
  border-radius: 50% !important; padding: 0 !important; font-size: 0 !important;
  background: #22C55E !important; color: transparent !important; border: 0 !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .18) !important; margin: 0 4px; cursor: pointer;
}
#cloudBadge.t-sync.t-sync-guardando { background: #F59E0B !important; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2) !important; }
#cloudBadge.t-sync.t-sync-mal { background: #EF4444 !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, .22) !important; animation: tLate 1.4s ease-in-out infinite; }
@keyframes tLate { 50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, .1); } }
#cloudBadge.t-sync::before { content: none !important; }
/* países como siglas con bandera */
.t-inicio-cab #homeMesInfo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.t-pais-n { font-size: 11px; color: var(--t-tenue); margin-right: 2px; }
.t-pais { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--t-texto); background: var(--t-suave); border-radius: 999px; padding: 1px 7px; letter-spacing: .02em; }
/* etiquetas "Pais" y "Mes": solo el selector, el texto se va */
header .t-etq { font-size: 0 !important; gap: 0 !important; }
header .t-etq select { font-size: 12.5px !important; }
/* la barra nunca parte un botón: los controles no se encogen y, si no caben, pasan a una segunda fila */
header .topbar { flex-wrap: wrap; row-gap: 6px; }
header .toolbar { flex-wrap: wrap !important; row-gap: 6px; }
header .toolbar > * { flex-shrink: 0; white-space: nowrap; }
header .t-inicio-cab, header .t-titulo { flex: 1 1 220px; min-width: 0; }

/* la palabra "Mes" tampoco hace falta: solo el selector */
body.t-inicio .t-mes.t-etq { font-size: 0 !important; gap: 0 !important; }
body.t-inicio .t-mes.t-etq select { font-size: 12.5px !important; }

/* ==================================================================
   19. MODO OSCURO REHECHO · reglas de tema oscuro (Material/WCAG):
   superficies gris oscuro (no negro) que se aclaran al elevarse, texto
   blanco al 90/62/42 %, colores desaturados en tintes bajos con texto
   claro del mismo tono (nunca pastel claro con texto negro), bordes
   sutiles en vez de sombras.
   ================================================================== */
html[data-theme="dark"] {
  --t-fondo: #121417;
  --t-tarjeta: #1B1E24;
  --t-tarjeta-2: #20242B;
  --t-suave: #262B33;
  --t-linea: rgba(255, 255, 255, .08);
  --t-linea-2: rgba(255, 255, 255, .14);
  --t-anillo: rgba(255, 255, 255, .07);
  --t-tinta: #E7EAF0;
  --t-texto: #D3D8E1;
  --t-tenue: #9AA3B2;
  --t-apagado: #6E7787;
  --t-negro: #E7EAF0;
  --t-negro-texto: #121417;
  --t-negro-hover: #C9CFD9;
  --t-acento-vivo: #16A34A;
  --t-acento-suave: #14532D;
  --t-sombra: none;
  --t-sombra-alta: 0 12px 32px rgba(0, 0, 0, .45);
  --t-sobre-pastel: #E7EAF0;
  --t-sobre-pastel-2: rgba(231, 234, 240, .72);
  /* tintes de los pasteles: color al 13 % sobre la tarjeta */
  --p-lima: rgba(163, 230, 53, .14); --p-lima-2: rgba(163, 230, 53, .11); --p-azul: rgba(96, 165, 250, .14); --p-azul-2: rgba(96, 165, 250, .2);
  --p-rosa: rgba(244, 114, 182, .14); --p-durazno: rgba(251, 146, 60, .14); --p-naranja: rgba(251, 146, 60, .24); --p-lila: rgba(192, 132, 252, .14);
  --p-lila-2: rgba(192, 132, 252, .22); --p-gris: rgba(148, 163, 184, .14); --p-perla: rgba(148, 163, 184, .2); --p-crema: rgba(250, 204, 21, .12);
  --p-verde: rgba(34, 197, 94, .14);
  --soft-good: rgba(34, 197, 94, .14); --soft-bad: rgba(244, 63, 94, .14); --soft-warn: rgba(245, 158, 11, .14);
  --good: #86EFAC; --bad: #FDA4AF; --warn: #FCD34D;
  --brand-soft: rgba(34, 197, 94, .14);
  --t-avatar-texto: #E7EAF0;
}
html[data-theme="dark"] body { background: var(--t-fondo) !important; color: var(--t-texto); }
html[data-theme="dark"] .t-avatar { color: #E7EAF0; }
/* superficies: tarjetas un tono más claras que el fondo, sin sombras */
html[data-theme="dark"] .finance-panel, html[data-theme="dark"] .filters, html[data-theme="dark"] .compact-filters, html[data-theme="dark"] .mini,
html[data-theme="dark"] .ops-card, html[data-theme="dark"] .country-card, html[data-theme="dark"] .tag-card, html[data-theme="dark"] .price-card,
html[data-theme="dark"] .geo-panel, html[data-theme="dark"] .panel-head, html[data-theme="dark"] .home-chart, html[data-theme="dark"] .iv-card,
html[data-theme="dark"] .iv-filtros, html[data-theme="dark"] .table-wrap, html[data-theme="dark"] .kpi-mega .kmb, html[data-theme="dark"] .assign-dialog,
html[data-theme="dark"] .multi-menu, html[data-theme="dark"] .action-menu-body { background: var(--t-tarjeta) !important; border-color: var(--t-anillo) !important; box-shadow: none !important; }
html[data-theme="dark"] .kpi-mega .kmb.clickable:hover { background: var(--t-tarjeta-2) !important; }
html[data-theme="dark"] .kpi-mega .kmb-line, html[data-theme="dark"] .kpi-mega .kmb-sub { color: var(--t-tenue) !important; }
html[data-theme="dark"] .kpi-mega .kmb-line b { color: var(--t-tinta); }
html[data-theme="dark"] .kpi-mega .kmb.destacada { background: var(--p-rosa) !important; }
html[data-theme="dark"] .kpi-mega .kmb.destacada .kmb-main { color: #FDA4AF; }
html[data-theme="dark"] .kpi-mega .kmb.destacada .kmb-line, html[data-theme="dark"] .kpi-mega .kmb.destacada .kmb-sub { color: rgba(231, 234, 240, .72) !important; }
html[data-theme="dark"] .desg-pie, html[data-theme="dark"] .kpi-mega .kmb.destacada .desg-pie { background: rgba(255, 255, 255, .08); color: var(--t-tinta) !important; }
/* indicadores: tinte + texto claro del mismo tono; jamás pastel claro con texto negro */
html[data-theme="dark"] .kpi, html[data-theme="dark"] .module-card { color: var(--t-tinta); border: 1px solid var(--t-anillo) !important; box-shadow: none; }
html[data-theme="dark"] .kpi .label, html[data-theme="dark"] .kpi .hint, html[data-theme="dark"] .module-card > span, html[data-theme="dark"] .module-card > small { color: var(--t-tenue) !important; opacity: 1; }
html[data-theme="dark"] .kpi .value, html[data-theme="dark"] .module-card > b { color: var(--t-tinta) !important; }
html[data-theme="dark"] .kpis .kpi:nth-child(6n+1) .value, html[data-theme="dark"] .module-grid .module-card:nth-child(6n+1) > b { color: #D9F99D !important; }
html[data-theme="dark"] .kpis .kpi:nth-child(6n+2) .value, html[data-theme="dark"] .module-grid .module-card:nth-child(6n+2) > b { color: #BFDBFE !important; }
html[data-theme="dark"] .kpis .kpi:nth-child(6n+3) .value, html[data-theme="dark"] .module-grid .module-card:nth-child(6n+3) > b { color: #E9D5FF !important; }
html[data-theme="dark"] .kpis .kpi:nth-child(6n+4) .value, html[data-theme="dark"] .module-grid .module-card:nth-child(6n+4) > b { color: #FED7AA !important; }
html[data-theme="dark"] .kpis .kpi:nth-child(6n+5) .value, html[data-theme="dark"] .module-grid .module-card:nth-child(6n+5) > b { color: #FBCFE8 !important; }
html[data-theme="dark"] .kpis .kpi:nth-child(6n+6) .value, html[data-theme="dark"] .module-grid .module-card:nth-child(6n+6) > b { color: #E2E8F0 !important; }
html[data-theme="dark"] .kpis .kpi.good .value, html[data-theme="dark"] .kpi.good .value { color: #86EFAC !important; }
html[data-theme="dark"] .kpis .kpi.bad .value, html[data-theme="dark"] .kpi.bad .value { color: #FDA4AF !important; }
html[data-theme="dark"] .kpis .kpi.warn .value, html[data-theme="dark"] .kpi.warn .value { color: #FCD34D !important; }
html[data-theme="dark"] .kpi.clickable::after, html[data-theme="dark"] .module-card::after { background: rgba(255, 255, 255, .1); color: var(--t-tinta); }
/* semáforo de las ganancias (.kpi.viva): la app define --vd oscuro; aquí claro */
html[data-theme="dark"] .kpi.viva.v-verde { --vd: #86EFAC; --vc: #22C55E; background: rgba(34, 197, 94, .12) !important; }
html[data-theme="dark"] .kpi.viva.v-ambar { --vd: #FCD34D; --vc: #F59E0B; background: rgba(245, 158, 11, .12) !important; }
html[data-theme="dark"] .kpi.viva.v-rojo { --vd: #FDA4AF; --vc: #F43F5E; background: rgba(244, 63, 94, .12) !important; }
html[data-theme="dark"] .kpi.viva .label, html[data-theme="dark"] .kpi.viva .hint { color: var(--t-tenue) !important; }
html[data-theme="dark"] .kpi.viva .hint b, html[data-theme="dark"] .kpi.viva .value { color: var(--vd) !important; }
/* colores que la app escribe en línea (verde, rojo, ámbar, azul, gris) → tonos claros */
html[data-theme="dark"] [style*="color:#14824f"], html[data-theme="dark"] [style*="color: #14824f"], html[data-theme="dark"] [style*="color:#1f8f5f"], html[data-theme="dark"] [style*="color:#0f9f6e"] { color: #86EFAC !important; }
html[data-theme="dark"] [style*="color:#b42318"], html[data-theme="dark"] [style*="color: #b42318"], html[data-theme="dark"] [style*="color:#ef4444"], html[data-theme="dark"] [style*="color:#e5484d"] { color: #FDA4AF !important; }
html[data-theme="dark"] [style*="color:#ca8a04"], html[data-theme="dark"] [style*="color:#e8a300"], html[data-theme="dark"] [style*="color:#f59e0b"] { color: #FCD34D !important; }
html[data-theme="dark"] [style*="color:#1d4ed8"] { color: #93C5FD !important; }
html[data-theme="dark"] [style*="color:#647184"] { color: #9AA3B2 !important; }
html[data-theme="dark"] [style*="color:var(--text-primary"] { color: var(--t-tinta) !important; }
html[data-theme="dark"] [style*="background:#fef3c7"], html[data-theme="dark"] [style*="background:#fee2e2"], html[data-theme="dark"] [style*="background:#eef2f7"], html[data-theme="dark"] [style*="background:#f6f8fa"], html[data-theme="dark"] [style*="background:rgba(0,0,0,.06)"] { background: var(--t-suave) !important; color: var(--t-texto); }
/* anillos y barras de progreso */
html[data-theme="dark"] .dev-ring { background: conic-gradient(var(--c) calc(var(--p) * 1%), #2A2F3A 0); }
html[data-theme="dark"] .dev-ring-in { background: var(--t-tarjeta); }
html[data-theme="dark"] .dev-ring-in b { filter: brightness(1.35); }
html[data-theme="dark"] .tag-bar { background: var(--t-suave); }
html[data-theme="dark"] .iv-stack { background: var(--t-suave); }
/* gráficas */
html[data-theme="dark"] .g-grid { stroke: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .g-ejeI, html[data-theme="dark"] .g-ejeD, html[data-theme="dark"] .g-fecha { fill: #6E7787 !important; }
html[data-theme="dark"] .g-ord { stroke: #6E7787 !important; }
html[data-theme="dark"] .g-ent { stroke: #4ADE80 !important; }
html[data-theme="dark"] .g-gan { stroke: #FBBF24 !important; }
html[data-theme="dark"] .g-pau, html[data-theme="dark"] .iv-l-g { stroke: #818CF8 !important; }
html[data-theme="dark"] .iv-l-i { stroke: #4ADE80 !important; }
html[data-theme="dark"] .iv-pv, html[data-theme="dark"] .g-punto { fill: #E7EAF0; stroke: #1B1E24; }
html[data-theme="dark"] .g-punto { fill: #4ADE80; }
html[data-theme="dark"] .t-tip { background: #F1F5F9; color: #121417; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .t-tip span { color: rgba(18, 20, 23, .7); }
html[data-theme="dark"] .t-tip span b { color: #121417; }
html[data-theme="dark"] .chart-notas span, html[data-theme="dark"] .chart-tot span, html[data-theme="dark"] .chart-leg span { background: var(--t-suave); color: var(--t-tenue); }
html[data-theme="dark"] .chart-notas span b, html[data-theme="dark"] .chart-tot b { color: var(--t-tinta); }
html[data-theme="dark"] .chart-notas span.mal { background: rgba(244, 63, 94, .14); color: #FDA4AF; }
html[data-theme="dark"] .chart-notas span.mal b { color: #FDA4AF; }
/* controles */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .multi-button { background: var(--t-tarjeta-2); border-color: var(--t-linea-2); color: var(--t-tinta); }
html[data-theme="dark"] button, html[data-theme="dark"] .file-label, html[data-theme="dark"] .action-menu summary { background: var(--t-tarjeta-2); border-color: var(--t-linea-2); color: var(--t-tinta); }
html[data-theme="dark"] button:hover, html[data-theme="dark"] .file-label:hover { background: var(--t-suave); }
html[data-theme="dark"] header select, html[data-theme="dark"] header .t-mes select, html[data-theme="dark"] header .country-select-field select { background: var(--t-tarjeta-2) !important; border-color: var(--t-linea-2) !important; color: var(--t-tinta) !important; }
html[data-theme="dark"] header .theme-toggle.t-icono { background: var(--t-tarjeta-2) !important; border-color: var(--t-linea-2) !important; color: var(--t-tinta) !important; }
html[data-theme="dark"] .t-fecha { background: var(--t-tarjeta-2); border-color: var(--t-linea-2); color: var(--t-tenue); }
html[data-theme="dark"] .t-pais { background: rgba(255, 255, 255, .08); color: var(--t-tinta); }
html[data-theme="dark"] .badge, html[data-theme="dark"] .semaforo-indicator, html[data-theme="dark"] .product-alias { background: var(--t-suave); color: var(--t-texto); }
html[data-theme="dark"] .badge.entregado, html[data-theme="dark"] .badge.green, html[data-theme="dark"] .semaforo-green { background: rgba(34, 197, 94, .16); color: #86EFAC; }
html[data-theme="dark"] .badge.devolucion, html[data-theme="dark"] .badge.red, html[data-theme="dark"] .semaforo-red { background: rgba(244, 63, 94, .16); color: #FDA4AF; }
html[data-theme="dark"] .badge.alerta, html[data-theme="dark"] .badge.yellow, html[data-theme="dark"] .semaforo-yellow { background: rgba(245, 158, 11, .16); color: #FCD34D; }
html[data-theme="dark"] th { background: var(--t-tarjeta); color: var(--t-tenue); border-bottom-color: var(--t-linea); }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-bottom-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] tbody tr:hover { background: var(--t-tarjeta-2); }
html[data-theme="dark"] .empty { border-color: var(--t-linea-2); }
html[data-theme="dark"] .iv-tabs, html[data-theme="dark"] .iv-nav { background: var(--t-tarjeta); border-color: var(--t-anillo); }
html[data-theme="dark"] .iv-nav input[type="date"], html[data-theme="dark"] .iv-flecha { background: var(--t-suave); color: var(--t-tinta); }
html[data-theme="dark"] .iv-prod-card { background: var(--t-tarjeta-2); border-color: var(--t-linea); }
html[data-theme="dark"] .iv-prod-card:hover { background: var(--t-suave); }
html[data-theme="dark"] .iv-stat { background: var(--t-tarjeta-2); border-color: var(--t-linea); }
html[data-theme="dark"] .iv-stat.verde b { color: #86EFAC; } html[data-theme="dark"] .iv-stat.rojo b { color: #FDA4AF; } html[data-theme="dark"] .iv-stat.lila b { color: #C7D2FE; }
html[data-theme="dark"] .iv-anota { background: transparent; color: var(--t-tenue); border-color: var(--t-linea-2); }
html[data-theme="dark"] .iv-sep { color: #C7D2FE; }
html[data-theme="dark"] .iv-ok { color: #86EFAC; }
html[data-theme="dark"] .iv-bars .tag-bar > span { background: linear-gradient(90deg, #4ADE80, #22C55E); }
html[data-theme="dark"] .iv-spark rect { fill: #818CF8; }
/* menú y usuario */
html[data-theme="dark"] #appGrid > aside { background: #15181D !important; border-right-color: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] .platform-nav .nav-item:hover { background: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] .t-user-caja { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .t-avatar { background: #14532D; color: #86EFAC; }
html[data-theme="dark"] .floating-chat-window { background: var(--t-tarjeta); }
html[data-theme="dark"] ::selection { background: #14532D; color: #E7EAF0; }
/* la app pinta claro el texto del menú en oscuro: en la pastilla activa (clara) va oscuro */
html[data-theme="dark"] .platform-nav .nav-item.active, html[data-theme="dark"] .platform-nav .nav-item.active > span:not(.nav-icon) { color: #121417 !important; }
html[data-theme="dark"] .platform-nav .nav-item > span:not(.nav-icon) { color: inherit; }

/* ==================================================================
   20. CONJUNTOS DE PRODUCTOS (Dashboard): de cajitas a texto seleccionable.
   Cada conjunto es un renglón de texto con su punto de color; el abierto
   es la pastilla negra con sus acciones al lado. Sin desplazamiento
   lateral: los conjuntos fluyen y se envuelven.
   ================================================================== */
.ad-groups-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px 4px !important;
  padding: 4px 8px 10px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}
.ad-groups-cards .ad-group-card {
  width: auto !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  padding: 6px 12px 6px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-size: 13px !important;
  color: var(--t-tinta) !important;
  animation: none !important;
  transform: none !important;
  overflow: visible !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ad-groups-cards .ad-group-card::before {
  content: '';
  position: static !important;
  width: 8px !important; height: 8px !important;
  border-radius: 999px;
  background: var(--gc, var(--t-acento)) !important;
  flex-shrink: 0;
}
.ad-groups-cards .ad-group-card::after { display: none !important; }
.ad-groups-cards .ad-group-card:hover { background: var(--t-suave) !important; box-shadow: none !important; transform: none !important; }
.ad-groups-cards .ad-group-card-head { display: inline-flex !important; align-items: center; gap: 6px; }
.ad-groups-cards .ad-group-card-head strong { display: inline !important; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap; -webkit-line-clamp: unset !important; overflow: visible !important; color: inherit; }
.ad-groups-cards .ad-group-card .badge { display: none !important; }
.ad-groups-cards .ad-group-card .badge.yellow { display: inline-block !important; font-size: 10px !important; padding: 1px 6px !important; background: var(--t-suave) !important; color: var(--t-tenue) !important; }
.ad-groups-cards .ad-group-card-sub { font-size: 11px !important; color: var(--t-apagado) !important; white-space: nowrap; }
.ad-groups-cards .ad-group-card-actions { margin: 0 0 0 2px !important; gap: 4px !important; }
#adGroupsTable .ad-group-card:not(.active-group) .ad-group-card-actions { display: none !important; }
.ad-groups-cards .ad-group-card.active-group { background: var(--t-negro) !important; color: var(--t-negro-texto) !important; box-shadow: none !important; }
.ad-groups-cards .ad-group-card.active-group::before { background: var(--t-acento-vivo) !important; }
.ad-groups-cards .ad-group-card.active-group .ad-group-card-sub { color: inherit !important; opacity: .7; }
.ad-groups-cards .ad-group-card.active-group .badge.yellow { background: rgba(255, 255, 255, .18) !important; color: inherit !important; }
.ad-groups-cards .ad-group-card-actions button.icon-btn {
  width: 24px; height: 24px; min-height: 0 !important; padding: 0 !important;
  border-radius: 999px !important; border: 0 !important;
  display: inline-grid; place-items: center; line-height: 1;
  font-size: 12px !important; background: rgba(255, 255, 255, .16) !important; color: inherit !important; box-shadow: none !important;
}
.ad-groups-cards .ad-group-card-actions button.icon-btn:hover { background: rgba(255, 255, 255, .3) !important; transform: none; }
html[data-theme="dark"] .ad-groups-cards .ad-group-card-actions button.icon-btn { background: rgba(0, 0, 0, .1) !important; }
html[data-theme="dark"] .ad-groups-cards .ad-group-card-actions button.icon-btn:hover { background: rgba(0, 0, 0, .2) !important; }
/* vista de usuario (trabajador): el botón Abrir/Cerrar sigue, pero chiquito */
#workerAdGroupsTable .ad-group-card-actions button, #dashboardWorkerAdGroupsTable .ad-group-card-actions button { min-height: 24px !important; padding: 2px 10px !important; font-size: 11px !important; border-radius: 999px !important; }
.ad-groups-empty { padding: 8px 4px !important; text-align: left !important; font-size: 12.5px; }