/* styles.css */

/* ======= THEME TOKENS ======= */
/* styles.css */

/* ======= THEME TOKENS (SaaS Profesional) ======= */
:root {
  /* Colores de Marca Movistar */
  --brand-blue: #019DF4;
  --brand-blue-hover: #007bb5;
  --brand-green: #5BC500;
  --brand-green-hover: #4da600;

  /* === MODO OSCURO POR DEFECTO === */
  --bg-app: #0B0F19; 
  --bg-card: #111827; 
  --bg-sidebar: #111827;

  --text-main: #F9FAFB;
  --text-muted: #9CA3AF;

  /* Aliases para compatibilidad con el resto del CSS */
  --text: var(--text-main);
  --muted: var(--text-muted);
  --bg1: var(--bg-app);

  --border-light: #1F2937;
  --fieldBg: #1F2937;
  --fieldBd: #374151;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* === MODO CLARO === */
html[data-theme="light"] {
  /* Fondo un poco más gris/azulado para que el blanco resalte */
  --bg-app: #E2E8F0; 
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;

  --text-main: #111827;
  --text-muted: #6B7280;

  --border-light: #CBD5E1;
  --fieldBg: #F8FAFC;
  --fieldBd: #CBD5E1;

  /* Sombra un poco más marcada para "despegar" las tarjetas del fondo */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); 
}
*{ box-sizing:border-box; }
html,body{ height:100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-app);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ✅ Transición elegante tipo iOS */
body.theme-transition{
  transition: background 280ms ease, color 280ms ease;
}
body.theme-transition .glass,
body.theme-transition .card,
body.theme-transition .field,
body.theme-transition .btn,
body.theme-transition .primary,
body.theme-transition .user,
body.theme-transition .icon-btn,
body.theme-transition .table-wrap{
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, box-shadow 280ms ease;
}

/* Apagamos el fondo difuminado tipo neón */
.bg { display: none; }

/* Tarjetas sólidas y corporativas (sin blur) */
.glass {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Blur sutil solo en oscuro (se siente app moderna) */
html[data-theme="dark"] .glass{
  background: rgba(17,24,39,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ======= TOASTS ======= */
.toast-wrap{
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 120000;
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  min-width: 260px;
  max-width: 340px;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,24,32,.88);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  animation: toastIn .22s ease;
}
html[data-theme="light"] .toast{
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
.toast .t-title{ font-weight: 950; }
.toast .t-meta{ margin-top: 4px; color: var(--muted); font-weight: 650; font-size: 12px; }
@keyframes toastIn{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ======= Top Nav ======= */
.topnav{
  width: min(1100px, calc(100% - 56px));
  margin: 22px auto 0;
  padding: 14px 18px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  
  /* Le agregamos el fondo blanco y la sombra */
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);

  position: sticky;
  top: 22px;
  z-index: 9999;
}

.brand{
  display:flex;
  align-items:center;
  min-width: 240px;
  gap: 10px;
}

/* Toggle Sidebar */
.side-toggle{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  padding: 0;
}
.side-toggle .chev{
  display:inline-block;
  transition: transform .2s ease;
  font-size: 18px;
  line-height: 1;
}
body.side-collapsed .side-toggle .chev{ transform: rotate(180deg); }

.brand-bigtext{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text);
  text-shadow:
    0 0 10px rgba(201,255,47,0.18),
    0 0 22px rgba(201,255,47,0.10),
    0 0 45px rgba(201,255,47,0.06);
}

.toplinks{
  display:flex;
  gap: 18px;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
}
.toplinks a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
}
.toplinks a:hover{
  color: var(--text);
  background: rgba(255,255,255,.08);
}

.topright{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 150px;
  justify-content:flex-end;
  z-index: 10000;
}

.pill{ border-radius: 999px; padding: 10px 14px; }

.icon-btn{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
}
.icon-btn:hover{ background: rgba(255,255,255,.12); }

html[data-theme="light"] .icon-btn{
  border-color: rgba(20,30,50,.16);
  background: rgba(255,255,255,.72);
}

.user{
  display:flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
}
.user .dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.user .avatar{ opacity:.9; }

/* ======= User Dropdown ======= */
.user-menu{
  position:absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 280px;
  border-radius: 18px;
  padding: 10px;
  z-index: 20000;
  background: linear-gradient(180deg, rgba(20,24,32,.88), rgba(20,24,32,.74));
}
html[data-theme="light"] .user-menu{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
}

.user-menu-top{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 8px 8px 10px;
}
.user-menu-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
}
.user-menu-name{ font-weight: 900; }
.user-menu-role{ color: var(--muted); font-weight: 700; font-size: 13px; margin-top:2px; }

.user-menu-item{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  border-radius: 14px;
  padding: 10px 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  text-align:left;
}
.user-menu-item:hover{ background: rgba(255,255,255,.08); }
.user-menu-item .umi-ico{ width: 22px; text-align:center; opacity: .9; }
.user-menu-item.danger{ color: var(--text); }
.user-menu-sep{
  height: 1px;
  margin: 8px 6px;
  background: rgba(255,255,255,.16);
}

/* ======= Shell ======= */
.shell {
  width: min(1100px, calc(100% - 56px));
  margin: 22px auto 0;
  display: grid;
  /* Estado abierto: 200px para el menú lateral */
  grid-template-columns: 200px 1fr; 
  gap: 18px;
  align-items: start;
  transition: grid-template-columns .25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

/* Estado colapsado: se encoge a 72px (estilo Gmail) */
body.side-collapsed .shell { 
  grid-template-columns: 72px 1fr; 
}

/* ======= Left icon bar (Sidebar) - Versión Final Simétrica ======= */
.iconbar {
  border-radius: 22px;
  padding: 14px !important; 
  display: flex;
  flex-direction: column;
  gap: 10px; 
  transition: all .25s ease;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 100px; 
  height: fit-content;
  z-index: 90;
}

/* Alineación para modo colapsado */
body.side-collapsed .iconbar {
  align-items: center;
}

/* Políticas y Ajustes: Sin márgenes extra para mantener simetría */
#btnSidePolicies {
  margin-top: 0 !important;
  position: relative;
}

/* Línea divisoria minimalista que no empuja los iconos */
#btnSidePolicies::before {
  content: "";
  position: absolute;
  top: -5px; /* Exactamente en el centro del gap de 10px */
  left: 20%;
  width: 60%;
  height: 1px;
  background: rgba(120, 130, 140, 0.15);
}

/* Botones del menú lateral */
.ibtn {
  width: 100%;
  height: 40px; /* Un poco más compactos */
  border-radius: 8px;
  border: none; /* Quitamos los bordes tipo cristal */
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px;
  gap: 12px;
  transition: all 0.2s ease;
  overflow: hidden;
}

html[data-theme="light"] .ibtn {
  color: var(--text-muted);
}

.ibtn .ico { 
  width: 20px; 
  height: 20px; 
  flex-shrink: 0; 
}

/* Efecto al pasar el mouse */
.ibtn:hover {
  background: rgba(1, 157, 244, 0.05);
  color: var(--brand-blue);
  transform: translateX(4px);
}

/* Botón seleccionado (Activo) */
.ibtn.active {
  background: rgba(1, 157, 244, 0.1);
  color: var(--brand-blue);
  font-weight: 700;
}

/* Texto del botón */
.ibtn-text {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* --- Texto del botón --- */
.ibtn-text {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity .2s ease;
}

/* Comportamiento al colapsar (Solo iconos) */
body.side-collapsed .ibtn {
  width: 48px;
  padding: 0;
  justify-content: center;
}

body.side-collapsed .ibtn-text {
  display: none; /* Escondemos el texto */
}

/* ======= Main & Layout ======= */
.main { padding-bottom: 20px; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
/* Layout */
.card-big{ grid-column: 1 / span 7; min-height: 150px; display:flex; flex-direction: column; justify-content:center; }
.chart{ grid-column: 8 / span 5; grid-row: 1 / span 3; min-height: 420px; }
.grid > article:nth-of-type(3){ grid-column: 1 / span 4; }
.grid > article:nth-of-type(4){ grid-column: 5 / span 3; }
.grid > article:nth-of-type(5){ grid-column: 1 / span 4; }
.grid > article:nth-of-type(6){ grid-column: 5 / span 3; }

/* Chart UI */
.chart-head{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 14px; }
.chart-title{ font-weight: 800; }
.chip{
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
html[data-theme="light"] .chip{
  border-color: rgba(20,30,50,.14);
  background: rgba(255,255,255,.72);
}

.chart-area{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: end;
  height: 320px;
}
.axis{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}
html[data-theme="light"] .axis{ color: rgba(15,20,30,.45); }
.bars{
  height: 100%;
  display:flex;
  align-items:flex-end;
  justify-content: space-around;
  border-left: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 12px 10px;
}
html[data-theme="light"] .bars{
  border-left-color: rgba(20,30,50,.14);
  border-bottom-color: rgba(20,30,50,.14);
}
.barcol{ display:flex; flex-direction: column; align-items:center; gap: 10px; }
/* ======= BARRAS DEL GRÁFICO CORPORATIVO ======= */
.bar {
  width: 24px;
  border-radius: 6px 6px 0 0; /* Plano abajo, redondeado arriba */
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(1, 157, 244, 0.15); /* Halo azul suave */
  transition: all 0.3s ease;
}
.bar:hover {
  background: var(--brand-blue-hover);
  transform: translateY(-2px);
}

/* Barras secundarias (Meses anteriores) */
.bar.gray {
  background: var(--border-light);
  box-shadow: none;
}

html[data-theme="light"] .bar.gray {
  background: #E2E8F0; /* Gris muy suave para que el mes actual destaque más */
}
.bar.y1{ height: 12px; }
.bar.y2{ height: 120px; }
.bar.y3{ height: 190px; }
.bar.y4{ height: 260px; }
.mon{ font-size: 12px; color: rgba(255,255,255,.55); }
html[data-theme="light"] .mon{ color: rgba(15,20,30,.55); }

/* Ventas */
.section-title{ margin: 4px 0 14px; font-size: 20px; font-weight: 900; color: var(--text); }
.ventas-view{ padding: 6px 0 0; color: var(--text); }

.ventas-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
  max-width: 820px;
}
.action-card{
  border: 0;
  text-align: left;
  padding: 22px;
  border-radius: 22px;
  cursor: pointer;
  transition: transform .15s ease;
  color: var(--text);
}
.action-card:hover{ transform: translateY(-1px); }
.action-title{ font-size: 22px; font-weight: 900; color: var(--text); }
.action-sub{ margin-top: 6px; color: var(--muted); font-weight: 650; }
.ventas-back{ margin-top: 18px; }

/* ======= Animación suave entre vistas ======= */
.view-in{
  animation: viewIn .18s ease;
}
@keyframes viewIn{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ===== Empty state ===== */
.empty{
  padding: 26px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  text-align: center;
}
html[data-theme="light"] .empty{
  border-color: rgba(15,20,30,.14);
  background: rgba(15,20,30,.03);
}
.empty .ico{ font-size: 28px; margin-bottom: 8px; }
.empty .t{ font-weight: 900; color: var(--text); margin-bottom: 6px; }
.empty .s{ font-weight: 650; }

/* ===== Chips estado ===== */
.chip-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.chip-status .dot{
  width:8px; height:8px; border-radius: 50%;
}
.chip-status[data-s="Validación"] .dot{ background: rgba(34,197,94,.9); }
.chip-status[data-s="Instalación"] .dot{ background: rgba(1,157,244,.95); }
.chip-status[data-s="Exitosa"] .dot{ background: rgba(34,197,94,.95); }
.chip-status[data-s="Rechazada"] .dot{ background: rgba(239,68,68,.95); }

/* Footer */
.foot{ margin-top: 18px; color: var(--muted); font-size: 13px; padding: 4px 2px; }

/* ======= MODALES CORPORATIVOS ======= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75); /* Oscurecimiento sólido y elegante */
  backdrop-filter: blur(3px); /* Un desenfoque muy, muy sutil */
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 100000;
}

.modal {
  width: min(860px, 92vw);
  border-radius: 12px; /* Más cuadrado, menos "burbuja" */
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Sombra pesada para destacar */
  border: 1px solid var(--border-light);
}
.modal-wide { width: min(920px, 92vw); }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px; /* Un poco más de aire */
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-app); /* Cabecera sutilmente diferenciada del cuerpo */
}

.modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
}

.field-label{
  display:block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  letter-spacing:.4px;
}
.field-row{ display:flex; gap: 10px; align-items:center; }

/* Campos de formulario B2B */
.field {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px; /* Más cuadrado y formal */
  border: 1px solid var(--fieldBd);
  background: var(--fieldBg);
  color: var(--text-main);
  outline: none;
  font-size: 14px; /* Tamaño estándar en software de escritorio */
  transition: all 0.2s ease;
}

/* Anillo azul cuando haces clic para escribir */
.field:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(1, 157, 244, 0.15);
}

.field::placeholder { 
  color: var(--text-muted); 
}

/* 👇 Arreglo para las opciones del select 👇 */
option {
  background-color: var(--bg1);
  color: var(--text);
}

html[data-theme="light"] option {
  background-color: #ffffff;
  color: var(--text);
}
/* 👆 Fin del arreglo 👆 */

/* (bloque duplicado .primary eliminado) */
.primary{
  border: 1px solid rgba(201,255,47,.35);
  background: rgba(201,255,47,.14);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  cursor:pointer;
  font-weight: 900;
}
.primary:hover{ background: rgba(201,255,47,.20); }

.btn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.12); }
html[data-theme="light"] .btn{
  border-color: rgba(20,30,50,.14);
  background: rgba(255,255,255,.72);
}

.hint{ margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.mini-hint{ margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }

/* Form */
.form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-field label{
  display:block;
  margin-bottom: 6px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.form-field.wide{ grid-column: span 2; }

.form-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 14px; }
.wide-primary{ min-width: 180px; }

/* ======= TABLAS CORPORATIVAS ======= */
.table-wrap {
  overflow: auto;
  border-radius: 8px; /* Bordes más cuadrados */
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

.table th, .table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  font-size: 14px;
  color: var(--text-main);
  transition: background 0.2s ease;
}

.table th {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-app); /* Fondo sutil para diferenciar el encabezado */
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* Efecto hover al pasar el mouse por una fila */
.table tr:hover td {
  background: rgba(1, 157, 244, 0.04); /* Un toque del azul Movistar muy transparente */
}

.table td .row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* Search row */
.search-row{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

/* Avisos list */
.avisos-list{ display:flex; flex-direction: column; gap: 10px; }
.aviso-item{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px 12px;
}
.aviso-title{ font-weight: 900; }
.aviso-meta{ margin-top: 4px; color: var(--muted); font-weight: 650; font-size: 13px; }

/* ======= SPLASH INTRO ======= */
.splash{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(900px 600px at 50% 30%, rgba(201,255,47,.10), transparent 60%),
              rgba(10,14,20,.92);
  z-index: 999;
}
html[data-theme="light"] .splash{
  background: radial-gradient(900px 600px at 50% 30%, rgba(201,255,47,.14), transparent 60%),
              rgba(245,247,251,.92);
}
.splash-inner{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 14px;
  animation: splashWrap 1.6s ease forwards;
}
.splash-logo{
  width: 92px;
  height: 92px;
  border-radius: 26px;
  display:grid;
  place-items:center;
  font-weight: 1000;
  font-size: 54px;
  color: var(--text);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
  animation: popIn .65s ease forwards;
}
.splash-title{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: .6px;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  animation: titleIn .7s ease .35s forwards;
}
@keyframes popIn{
  from{ opacity:0; transform: scale(.85); filter: blur(2px); }
  to{ opacity:1; transform: scale(1); filter: blur(0); }
}
@keyframes titleIn{ to{ opacity: 1; transform: translateY(0); } }
@keyframes splashWrap{
  0%{ opacity: 1; }
  70%{ opacity: 1; }
  100%{ opacity: 0; pointer-events:none; }
}

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: var(--lime);
  animation: spin 1s ease-in-out infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   🔥 LOGIN & REGISTER PREMIUM (ESTILO APPLE / VERCEL) 🔥
   ========================================================================== */

/* Fondo oscuro, suave y elegante que tapa todo atrás */
.auth-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 18, 0.90); /* Negro casi puro pero transparente */
  backdrop-filter: blur(8px); /* Desenfoque sutil del fondo */
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
}
html[data-theme="light"] .auth-backdrop { background: rgba(241, 245, 249, 0.90); }

/* La Tarjeta Principal del Login (Flotante) */
.auth-card {
  width: 100%;
  max-width: 440px; /* Un poco más angosta y esbelta */
  border-radius: 24px;
  background: rgba(17, 24, 39, 0.7); /* Azul/Gris oscuro semitransparente */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Sombra dramática abajo */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
html[data-theme="light"] .auth-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Brillo superior tipo "Luz de Neón" (Micro-detalle) */
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(1, 157, 244, 0.5), transparent);
  z-index: 1;
}

/* Cabecera (Logo y Texto) */
.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.auth-logo-box {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(1, 157, 244, 0.1);
  border: 1px solid rgba(1, 157, 244, 0.2);
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(1, 157, 244, 0.15);
  margin-bottom: 8px;
}
.auth-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Pestañas Elegantes (Ingresar / Soy Nuevo) */
.auth-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.2); /* Fondo hundido */
  margin: 0 24px;
  border-radius: 12px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
html[data-theme="light"] .auth-tabs { background: rgba(0, 0, 0, 0.03); border-color: transparent; }

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-tab.active {
  background: var(--bg-card); /* Se "levanta" */
  color: var(--text-main);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
html[data-theme="light"] .auth-tab.active { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }

/* Cuerpo del Formulario */
.auth-body {
  padding: 24px;
}

/* Campos de Texto Minimalistas */
.form-field-modern { display: flex; flex-direction: column; }
.form-field-modern label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  margin-left: 4px;
}
.form-field-modern .field {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--text-main);
  transition: all 0.2s ease;
}
html[data-theme="light"] .form-field-modern .field {
  background: #ffffff;
  border-color: #cbd5e1;
}
.form-field-modern .field:focus {
  background: rgba(1, 157, 244, 0.05);
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(1, 157, 244, 0.1);
}

/* Botón Principal de Acción (Azul Brillante) */
.auth-btn-main {
  width: 100%;
  margin-top: 24px;
  background: var(--brand-blue);
  color: white;
  border: none;
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(1, 157, 244, 0.3);
  transition: all 0.3s ease;
}
.auth-btn-main:hover {
  transform: translateY(-2px);
  background: var(--brand-blue-hover);
  box-shadow: 0 12px 25px rgba(1, 157, 244, 0.5);
}

/* Link de "Olvidé mi clave" */
.linkbtn {
  background: none; border: none; padding: 0;
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s;
}
.linkbtn:hover { color: var(--brand-blue-hover); text-decoration: underline; }

/* Caja especial para subir el carnet en el Registro */
.auth-upload-box {
  background: rgba(1, 157, 244, 0.05);
  border: 1px dashed rgba(1, 157, 244, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-top: 10px;
  text-align: center;
}
.auth-upload-box .upload-title { color: var(--brand-blue); font-weight: 800; font-size: 13px; margin-bottom: 4px; }
.auth-upload-box .upload-desc { color: var(--text-muted); font-size: 11px; margin: 0 0 12px 0; }
.upload-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);
}
html[data-theme="light"] .upload-btn { background: white; border-color: #cbd5e1; }
.upload-btn span { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.upload-btn input { font-size: 11px; width: 100%; border: none; background: transparent; padding: 0; }

.checkline{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
}

/* ======= SETTINGS ======= */
.settings-title{ font-weight: 1000; font-size: 16px; }
.settings-sub{ margin-top: 4px; color: var(--muted); font-weight: 650; font-size: 13px; }
.settings-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}
.settings-left{ min-width: 0; }
.settings-label{ font-weight: 900; }
.settings-hint{ margin-top: 3px; color: var(--muted); font-weight: 650; font-size: 12px; }
.settings-divider{ height: 1px; background: rgba(255,255,255,.14); margin: 10px 0 4px; }
html[data-theme="light"] .settings-divider{ background: rgba(20,30,50,.12); }

/* ✅ iOS switch */
.ios-switch{
  position: relative;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
}
.ios-switch input{ opacity: 0; width: 0; height: 0; }
.ios-switch .track{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(140,140,140,.35);
  border: 1px solid rgba(255,255,255,.16);
  transition: background 220ms ease, border-color 220ms ease;
}
.ios-switch .track::after{
  content:"";
  position:absolute;
  width: 26px;
  height: 26px;
  top: 1px;
  left: 1px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  transition: transform 220ms ease;
}
.ios-switch input:checked + .track{
  background: rgba(34,197,94,.90);
  border-color: rgba(34,197,94,.55);
}
.ios-switch input:checked + .track::after{ transform: translateX(22px); }

/* ======= SUPPORT CHAT ======= */
.support-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: var(--text);
  cursor: pointer;
  z-index: 99999;
  box-shadow: 0 18px 35px rgba(0,0,0,.25);
  font-size: 22px;
  display:grid;
  place-items:center;
}
.support-fab:hover{ background: rgba(255,255,255,.14); }

.badge{
  position:absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 12px;
  font-weight: 950;
  background: rgba(239,68,68,.92);
  color: #fff;
  border: 2px solid rgba(20,24,32,.85);
}

.support-panel{
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: min(380px, calc(100vw - 36px));
  height: 520px;
  border-radius: 22px;
  overflow: hidden;
  z-index: 99999;
  display:flex;
  flex-direction: column;
}
.support-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.support-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 1000;
}
.support-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}
.support-actions{ display:flex; gap: 8px; }

.support-body{
  flex: 1;
  padding: 12px 14px;
  overflow:auto;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.msg{
  max-width: 92%;
  border-radius: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.msg.me{
  align-self: flex-end;
  background: rgba(201,255,47,.14);
  border-color: rgba(201,255,47,.28);
}
.msg .meta{
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 700;
}

.support-compose{
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:flex;
  gap: 10px;
  align-items:center;
}
.support-mini{
  padding: 10px 10px;
  border-radius: 14px;
  font-size: 14px;
}
.support-hintline{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Details */
.detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.detail-box{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 12px 12px;
}
.detail-h{ font-weight: 950; }
.detail-c{ margin-top: 8px; color: var(--text); font-weight: 650; font-size: 14px; }
.detail-chat{
  margin-top: 8px;
  height: 320px;
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px;
  background: rgba(0,0,0,.12);
}
html[data-theme="light"] .detail-chat{ background: rgba(255,255,255,.55); }

/* Responsive */
@media (max-width: 980px){
  .card-big{ grid-column: 1 / span 12; }
  .chart{ grid-column: 1 / span 12; grid-row:auto; min-height: 360px; }
  .grid > article:nth-of-type(3),
  .grid > article:nth-of-type(4),
  .grid > article:nth-of-type(5),
  .grid > article:nth-of-type(6){
    grid-column: 1 / span 6;
  }
}

@media (max-width: 700px){
  .topnav{
    width: calc(100% - 24px);
    margin: 12px auto 0;
    padding: 10px 12px;
    border-radius: 22px;
    gap: 10px;
  }
  .brand{ min-width: 0; flex: 1; gap: 8px; }
  .brand-bigtext{
    font-size: 22px;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .topright{ min-width: 0; gap: 8px; }
  .pill{ padding: 8px 10px; }
  .user{ padding: 8px 10px; }
  .side-toggle{ width: 36px; height: 36px; }

  .glass{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
  }

  .bg{ filter: blur(10px); opacity: .40; }

  .shell{ grid-template-columns: 1fr; transition:none; }
  .iconbar{
    position: sticky;
    top: 90px;
    flex-direction: row;
    justify-content: space-between;
    transition: transform .2s ease, opacity .2s ease;
    z-index: 2;
  }
  body.side-collapsed .iconbar{
    transform: translateY(-140%);
    opacity: 0;
    pointer-events: none;
  }

  /* === NUEVA GRILLA MÓVIL (Tarjetas 2x2 y gráfico al final) === */
  .grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; 
    display: grid;
  }
  
  /* Botones superiores ocupan todo el ancho (las 2 columnas) */
  .mobile-main-actions { 
    grid-column: 1 / span 2 !important; 
  }
  
  /* Tarjeta principal (Instaladas) ocupa todo el ancho como cabecera */
  #cardInstaladas { 
    grid-column: 1 / span 2 !important; 
  }
  
  /* Las otras 4 tarjetas ocupan 1 columna (se forma la grilla 2x2) */
  .grid > article { 
    grid-column: span 1 !important; 
    padding: 16px 12px; /* Un poco menos de espacio interno para que quepan bien */
  }
  
  /* El gráfico ocupa todo el ancho y se va mágicamente al final */
  .chart { 
    grid-column: 1 / span 2 !important; 
    order: 99; /* Esto le dice al navegador: "Manda este bloque al final de todo" */
    margin-top: 10px;
  }
  
  /* Achicamos un poco los números de las tarjetas 2x2 para que no se desborden */
  .kpi-value.small { 
    font-size: 30px !important; 
  }
  .kpi-label { 
    font-size: 12px !important; 
    margin-top: 6px;
  }
  .form-grid{ grid-template-columns: 1fr; }
  .form-field.wide{ grid-column: span 1; }
  .toplinks{ display:none; }
  .ventas-actions{ grid-template-columns: 1fr; }

  .table{ min-width: 760px; }

  .support-panel{
    right: 12px;
    bottom: 80px;
    width: calc(100vw - 24px);
    height: 560px;
  }
  .support-fab{ right: 12px; bottom: 12px; }

  .detail-grid{ grid-template-columns: 1fr; }
}/* Tarjeta de Venta Individual */
.sale-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 12px; /* Más corporativo */
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.sale-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-blue); /* Se ilumina el borde en azul al pasar el mouse */
}

/* Encabezado de la tarjeta */
.sc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
}

.sc-rut { font-weight: 800; font-size: 14px; color: var(--text-main); }
.sc-name { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.sc-date { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

/* Bloque "Agenda de Instalación" */
.sc-agenda-box {
  background: var(--bg-app); /* Fondo gris claro u oscuro sólido, sin transparencias raras */
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px;
  flex: 0.8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sc-agenda-title { font-size: 11px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.sc-agenda-text { font-size: 11px; color: var(--text-muted); }

/* Footer de la tarjeta */
.sc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.sc-code { font-size: 12px; font-weight: 700; color: var(--text-muted); }
/* Encabezado de la tarjeta */
.sc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 12px;
}
.sc-client-info { display: flex; flex-direction: column; gap: 4px; }
.sc-rut { font-weight: 900; font-size: 15px; color: var(--text); }
.sc-name { font-size: 13px; color: var(--muted); font-weight: 600; }
.sc-date { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }

/* Cuerpo de la tarjeta */
.sc-body {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.sc-info-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* Insignias de estado (Badges) */
.sc-badge {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sc-badge.pendiente { background: rgba(234, 179, 8, 0.15); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.3); }
.sc-badge.terminada { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.sc-badge.cancelada { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Colores de los bordes según estado */
.sale-card.border-pendiente { border-left-color: #facc15 !important; }
.sale-card.border-terminada { border-left-color: #22c55e !important; }
.sale-card.border-cancelada { border-left-color: #ef4444 !important; }

/* Detalles (Dirección, etc) */
.sc-detail { font-size: 12px; color: var(--muted); display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }

/* Bloque tipo "Agenda de Instalación" */
.sc-agenda-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 12px;
  flex: 0.8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
html[data-theme="light"] .sc-agenda-box { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); }

.sc-agenda-title { font-size: 11px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.sc-agenda-text { font-size: 11px; color: var(--muted); }

/* Footer de la tarjeta */
.sc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sc-code { font-size: 12px; font-weight: 800; opacity: 0.6; }
/* ======= FIX: Cards + KPI (restaura look original) ======= */

.card{
  border-radius: 24px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}/* Texto KPI corporativo */
.kpi-value {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text-main);
}

.kpi-value.small {
  font-size: 44px;
}

.kpi-label {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Ocultamos la línea neón brillante */
.glowline {
  display: none;
}
/* Ajuste del card grande para que se vea como antes */
.card-big{
  align-items: flex-start;
}
/* ======= NUEVO LOGO WIFI MULTIRED ======= */
.wifi-logo {
  width: 120px; /* Tamaño fijo perfecto para el Splash */
  height: 120px;
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  overflow: visible;
}

/* Tamaño chiquito para el inicio de sesión */
.wifi-logo.small {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 5px; /* Lo separa un poquito de la palabra Multired */
}
/* Colores corporativos (Minimalista) */
.wifi-dot { fill: var(--brand-blue) !important; filter: none !important; }
.wifi-arc-1 { stroke: var(--brand-blue) !important; filter: none !important; }
.wifi-arc-2 { stroke: var(--brand-blue) !important; filter: none !important; opacity: 0.7; }
.wifi-arc-3 { stroke: var(--brand-blue) !important; filter: none !important; opacity: 0.4; }

/* Modificación del Splash para quitar el cuadrado antiguo ("F") */
.splash-logo {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  background: transparent !important; 
  border: none !important;            
  box-shadow: none !important;        
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: popIn .65s ease forwards;
}

/* Texto de "Multired" Sólido y Sobrio */
.multired-gradient {
  background: none !important;
  -webkit-text-fill-color: var(--text-main) !important;
  color: var(--text-main) !important;
  text-shadow: none !important;
  display: inline-block;
}

/* Estilos de la cabecera en el Modal de Login */
.auth-header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 18px 16px;
  text-align: center;
}
.auth-header-logo h2 {
  margin: 12px 0 4px;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0.5px;
}
.auth-subtitle {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
}
/* Ajustes para el logo en la barra superior (Topbar) */
.wifi-logo.topbar-logo {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0; /* ¡Agrega esto para que el ícono no se aplaste en celulares! */
}

.brand-bigtext.multired-gradient {
  text-shadow: none !important; /* Quitamos la sombra verde antigua */
  font-size: 26px; /* Lo ajustamos para que encaje perfecto con el ícono */
}
/* ======= ACCIONES RÁPIDAS DESTACADAS (TOPBAR) ======= */
.btn-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px; /* Forma de píldora */
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.ico-action {
  width: 18px;
  height: 18px;
}

/* Botón Primario: Registrar Venta (Azul Brillante) */
.btn-action.primary-neon {
  background: #019DF4; /* Azul corporativo */
  color: #ffffff; /* Letra blanca para que resalte */
  border: 1px solid #019DF4;
  box-shadow: 0 0 15px rgba(1, 157, 244, 0.35); /* Brillo azul sutil */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Sombra suave al texto */
  transition: all 0.2s ease;
}

.btn-action.primary-neon:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(1, 157, 244, 0.65); /* Brillo azul más intenso al pasar el mouse */
  background: #1eb0fb; /* Un azul apenas más claro para dar efecto de luz */
  border-color: #1eb0fb;
}
/* Botón Secundario: Revisar Factibilidad (Cristal) */
.btn-action.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-action.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Ajuste del botón secundario para el modo claro */
html[data-theme="light"] .btn-action.secondary {
  background: rgba(20, 30, 50, 0.05);
  border-color: rgba(20, 30, 50, 0.15);
  color: var(--text);
}

html[data-theme="light"] .btn-action.secondary:hover {
  background: rgba(20, 30, 50, 0.1);
}
/* Botones Planos (Soporte y Ventas) */
.btn-action.flat {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}

.btn-action.flat:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

/* Ajuste de botones planos para modo claro */
html[data-theme="light"] .btn-action.flat:hover {
  background: rgba(20, 30, 50, 0.05);
  color: var(--text);
}
/* ======= FIX PARA MANTENER TODOS LOS BOTONES EN UNA LÍNEA ======= */
.toplinks {
  flex-wrap: nowrap !important; /* Obliga a que nada se caiga a la segunda línea */
  gap: 10px !important; /* Reduce un poquitito el espacio entre ellos para que quepan perfectos */
}

.btn-action {
  white-space: nowrap !important; /* Evita que el texto dentro del botón se parta en dos */
}
/* ===================== MOBILE TOPBAR FIX (NO CAMBIA DISEÑO) ===================== */
@media (max-width: 720px){

  /* Topbar: pasa a 2 filas ordenadas */
  .topnav{
    width: calc(100% - 20px);
    margin: 12px auto 0;
    padding: 10px 12px;
    border-radius: 22px;
    gap: 10px;

    /* clave: permitir “stack” */
    flex-wrap: wrap;
    justify-content: center;
    top: 10px;
  }

  /* Brand arriba centrado */
  .brand{
    width: 100%;
    min-width: 0;
    justify-content: center;
    gap: 10px;
  }

  /* Acciones rápidas: estilo “barra desplazable” tipo iOS */
  .toplinks.quick-actions{
    width: 100%;
    justify-content: flex-start;

    /* en móvil: scroll horizontal elegante */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 6px;
    gap: 10px;

    /* IMPORTANTE: en móvil no obligamos a que “quepa sí o sí” */
    flex-wrap: nowrap !important;
  }

  /* Ocultar scrollbar (queda limpio) */
  .toplinks.quick-actions::-webkit-scrollbar{ height: 0; }
  .toplinks.quick-actions{ scrollbar-width: none; }

  /* Botones: un poquito más compactos pero mismos estilos */
  .btn-action{
    padding: 8px 12px;
    font-size: 13px;
  }
  .ico-action{
    width: 17px;
    height: 17px;
  }

  /* Iconos derecha: abajo o al lado, pero sin chocar */
  .topright{
    width: 100%;
    min-width: 0;
    justify-content: center;
    gap: 10px;
  }

  /* ✅ Esto “corre hacia abajo” el contenido (incluye tu KPI grande 7,345) */
  .shell{
    width: calc(100% - 20px);
    margin: 14px auto 0;
  }

  /* En móvil: sidebar + contenido en una columna (para que no se vea apretado) */
  .shell{
    grid-template-columns: 1fr;
  }
  .iconbar{
    position: sticky;
    top: 84px; /* queda bajo topbar */
    z-index: 10;
  }

  /* KPI: leve ajuste para que no “grite” en móvil */
  .kpi-value{
    font-size: 44px;
  }
}
/* ===================== MOBILE: ICONBAR SOLO ICONOS (como tu screenshot) ===================== */
@media (max-width: 700px){

  /* Barra lateral -> barra horizontal */
  .iconbar{
    top: 86px;                 /* bajo la topbar */
    padding: 10px 10px;
    gap: 12px;

    flex-direction: row;
    justify-content: flex-start;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    z-index: 5;
  }
  .iconbar::-webkit-scrollbar{ height: 0; }
  .iconbar{ scrollbar-width: none; }

  /* Botones: cuadraditos/rounded, centrados, SOLO icono */
  .iconbar .ibtn{
    width: 56px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    gap: 0;
    transform: none;          /* evita saltos en móvil */
  }

  /* Icono tamaño cómodo */
  .iconbar .ibtn .ico{
    width: 22px;
    height: 22px;
  }

  /* ❗ Ocultamos texto SIEMPRE en móvil */
  .iconbar .ibtn-text{
    display: none !important;
  }

  /* Por si tienes side-collapsed guardado: mantenemos el mismo tamaño */
  body.side-collapsed .iconbar .ibtn{
    width: 56px !important;
    height: 44px !important;
    padding: 0 !important;
  }

  /* Aire para que el KPI 7,345 no quede pegado */
  .grid{ margin-top: 12px; }
}
/* ===================== MOBILE: TOPBAR ORDENADA (Multired centrado) ===================== */
@media (max-width: 700px){

  .topnav{
    height: auto;
    flex-wrap: wrap;
    padding: 12px 12px;
    gap: 10px;
  }

  /* Fila 1: Brand centrado real */
  .brand{
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
  }

  /* Botón volver fijo a la izquierda (ajusta si tu clase es distinta) */
  .brand .back,
  .brand .backbtn,
  .brand .btn-back,
  .brand .icon-back{
    position: absolute;
    left: 10px;
  }

  /* Logo + texto */
  .brand img,
  .brand .logo{
    flex: 0 0 auto;
  }

  .brand .brand-name,
  .brand .title,
  .brand h1,
  .brand .appname{
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  /* Fila 2: iconos del lado derecho centrados */
  .topright{
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
  }
}
/* ===================== MOBILE TOPBAR: 1 SOLA LINEA, ORDENADA ===================== */
@media (max-width: 700px){

  /* Topbar SIEMPRE en una sola fila */
  .topnav{
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    height: 58px !important;          /* compacta */
    padding: 10px 12px !important;
  }

  /* Izquierda: solo el wifi (sin "Multired") */
  .brand{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .brand .brand-bigtext{ display: none !important; }  /* oculta "Multired" */
  .toplinks.quick-actions{ display: none !important; } /* oculta botones extra (si existen) */

  /* Tamaño logo wifi */
  .wifi-logo.topbar-logo{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 auto !important;
  }

  /* Derecha: los iconos redondos SIEMPRE en línea */
  .topright{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  /* Evita que cualquier botón empuje o se vaya abajo */
  .topright *{
    flex: 0 0 auto !important;
  }
}
/* ===================== BARRA DE ICONOS OSCURA ===================== */
.iconbar.glass {
  background: #0f1319 !important; /* Tono negro/gris muy oscuro */
  border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borde más sutil */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Sombra fuerte */
}

/* Ajuste opcional para que los botones hagan mejor contraste */
.iconbar .ibtn {
  background: rgba(255, 255, 255, 0.03); 
  border-color: rgba(255, 255, 255, 0.05);
}
.iconbar .ibtn.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}
/* ===================== BARRA FLOTANTE Y BOTÓN DE CHAT (MÓVIL) ===================== */
@media (max-width: 700px) {
  /* 1. La barra de navegación (Pastilla flotante despegada) */
  .iconbar.glass {
    position: fixed !important;
    top: auto !important;
    bottom: 35px !important; /* <--- Despegada del fondo */
    left: 50% !important;
    transform: translateX(-50%) !important; /* La centra perfectamente */
    width: calc(100% - 40px) !important; /* Separada de los lados izquierdo y derecho */
    flex-direction: row !important;
    justify-content: space-around !important;
    border-radius: 999px !important; /* Redondeada total estilo pastilla */
    padding: 8px 12px !important;
    z-index: 99999 !important;
    background: rgba(15, 19, 25, 0.85) !important; /* Oscura pero con un leve efecto cristal */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* 2. El botón de Soporte (💬) mucho más arriba */
  .support-fab {
    bottom: 115px !important; /* <--- Lo sube muy por encima de la barra */
    right: 20px !important;
    z-index: 99998 !important;
  }

  /* 3. La ventana de chat también sube para que no la tape la barra */
  .support-panel {
    bottom: 115px !important; 
    z-index: 99998 !important;
  }

  /* 4. Espacio extra al final de la página para hacer scroll cómodo */
  .main {
    padding-bottom: 150px !important;
  }

  /* Forma circular de los botones por dentro */
  .iconbar .ibtn {
    width: 46px !important;
    height: 46px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
  }
  .iconbar .ibtn.active {
    background: rgba(255, 255, 255, 0.15) !important;
  }
}
/* ===================== OCULTAR FLECHA EN MÓVIL ===================== */
@media (max-width: 700px) {
  #btnSideToggle {
    display: none !important;
  }
  
  /* Esto ajusta el espacio para que el logo del WiFi quede bien alineado al borde sin la flecha */
  .brand {
    padding-left: 4px !important; 
  }
}
/* ===================== MOSTRAR "MULTIRED" EN MÓVIL ===================== */
@media (max-width: 700px) {
  /* Hacemos que el texto vuelva a aparecer */
  .brand .brand-bigtext { 
    display: inline-block !important; 
    font-size: 20px !important; /* Un poco más pequeño que en PC para que quepa perfecto */
    margin-left: 4px !important; /* Separación sutil del logo WiFi */
  }
  
  /* Achicamos un milímetro el logo WiFi para que haga buen juego con la letra */
  .wifi-logo.topbar-logo {
    width: 32px !important;
    height: 32px !important;
  }
}
/* ===================== BOTONES PRINCIPALES MÓVIL (MITAD Y MITAD) ===================== */
.mobile-main-actions {
  display: none; /* Oculto en PC por defecto */
}

@media (max-width: 700px) {
  .mobile-main-actions {
    display: flex !important;
    grid-column: 1 / span 12 !important; /* Ocupa todo el ancho disponible */
    gap: 12px !important; /* Separación clara entre los dos botones */
    margin-bottom: 2px !important; /* Empuja la tarjeta de 7,345 suavemente hacia abajo */
    width: 100%;
  }

  .mobile-main-actions .btn-action {
    flex: 1 !important; /* Se dividen el espacio 50/50 exacto */
    justify-content: center !important; /* Todo centradito como pediste */
    padding: 16px 8px !important; /* Botones más gorditos, perfectos para el dedo */
    border-radius: 18px !important;
    font-size: 14px !important;
  }
  
  /* Ajuste de emergencia por si el celular es muy angosto */
  @media (max-width: 380px) {
    .mobile-main-actions .btn-action {
      font-size: 12px !important;
      gap: 4px !important;
    }
  }
}
/* ============================= */
/* SIDEBAR CENTRADO (FINAL PRO)  */
/* ============================= */

/* Queremos que el "píldora" mida SOLO lo necesario, pero centrado */
.iconbar{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centra el grupo */
  gap: 12px;

  height: fit-content;       /* <-- clave: NO se estira */
  min-height: unset;         /* <-- elimina el 560px */
  max-height: unset;

  padding: 14px 10px;
}

/* Asegura que nadie empuje hacia abajo */
#btnSidePolicies{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* No usamos spacer */
.flex-spacer{ display: none !important; }
/* --- Estilos Base para Escritorio (Texto Centrado) --- */
.modal-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 25px;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar { display: none; }

.modal-tabs .tab {
  flex: 0 0 auto;
  min-width: 150px; /* Un poco más de ancho para que el texto respire */
  height: 42px;    /* Altura fija para asegurar simetría total */
  
  /* Forzamos el centrado absoluto del texto */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 1px solid var(--border-light) !important;
  background: var(--bg-app) !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
}

.modal-tabs .tab.active {
  background: var(--brand-blue) !important;
  color: white !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 4px 12px rgba(1, 157, 244, 0.3);
}

/* --- 📱 CAMBIO EXCLUSIVO PARA MÓVIL (Simetría Perfecta) --- */
@media (max-width: 700px) {
  .modal-tabs {
    background: rgba(255, 255, 255, 0.05);
    padding: 5px !important;
    border-radius: 999px;
    justify-content: space-between;
    margin: 15px 10px 25px 10px !important;
    gap: 5px !important;
  }

  .modal-tabs .tab {
    flex: 1 !important;
    min-width: 0 !important;
    height: 40px !important; /* Altura cómoda para el dedo */
    font-size: 13px !important;
    padding: 0 5px !important;
    border: none !important;
    background: transparent !important;
  }

  .modal-tabs .tab.active {
    background: var(--brand-blue) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  html[data-theme="light"] .modal-tabs {
    background: rgba(0, 0, 0, 0.06);
  }
}
/* ======= TARJETAS INTERACTIVAS (KPIs) ======= */
.clickable-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.clickable-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(1, 157, 244, 0.15) !important;
  border-color: var(--brand-blue) !important;
}
/* ===================== REDISEÑO TARJETAS DE VENTA (ESTILO MOVISTAR PRO) ===================== */
.sales-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sale-card {
  display: flex;
  flex-direction: column;
  padding: 0 !important; /* Quitamos el padding global para hacer bloques internos */
  border-radius: 12px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-left: 6px solid var(--text-muted) !important; /* Borde izquierdo dinámico */
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  overflow: hidden; /* Para que los bordes redondeados contengan los fondos */
}

.sale-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

/* Colores de los bordes según estado */
.sale-card.border-pendiente { border-left-color: #facc15 !important; }
.sale-card.border-validacion { border-left-color: #38bdf8 !important; }
.sale-card.border-instalacion { border-left-color: #c9ff2f !important; } /* Tu verde lima */
.sale-card.border-exitosa { border-left-color: #22c55e !important; }
.sale-card.border-rechazada { border-left-color: #ef4444 !important; }

/* Encabezado de la Tarjeta */
.sc-head-pro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-light);
}
html[data-theme="light"] .sc-head-pro { background: rgba(0, 0, 0, 0.02); }

.sc-rut-pro { font-weight: 900; font-size: 15px; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.sc-date-pro { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Cuerpo Dividido (Información Izquierda | Agenda Derecha) */
.sc-body-pro {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* 60% izquierda, 40% derecha */
}

.sc-info-left {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-row-id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-id-text { font-weight: 800; font-size: 14px; color: var(--text-main); }
.sc-venta-tipo { font-size: 11px; font-weight: 800; color: var(--brand-blue); background: rgba(1, 157, 244, 0.1); padding: 4px 8px; border-radius: 4px; }

.sc-address-box {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sc-address-box svg { flex-shrink: 0; margin-top: 2px; color: var(--brand-blue); }

/* Bloque Oscuro de Agenda (Estilo Referencia) */
.sc-agenda-right {
  background: rgba(10, 15, 25, 0.4); /* Fondo azul muy oscuro */
  border-left: 1px solid var(--border-light);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
html[data-theme="light"] .sc-agenda-right { background: #f1f5f9; }

.sc-agenda-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sc-agenda-content { font-size: 13px; color: var(--text-muted); font-weight: 600; line-height: 1.4; }
.sc-agenda-content.highlight { color: #38bdf8; font-weight: 800; }

/* Footer y Botón */
.sc-foot-pro {
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sc-client-name { font-size: 13px; color: var(--text-muted); font-weight: 600; }

/* Adaptación a Móviles (Se pone uno debajo de otro) */
@media (max-width: 600px) {
  .sc-body-pro { grid-template-columns: 1fr; }
  .sc-agenda-right { border-left: none; border-top: 1px dashed var(--border-light); padding: 12px; }
}
/* ===================== BARRA DE FILTROS PREMIUM ===================== */
.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  margin-top: 14px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.03); /* Fondo de cristal muy sutil */
  border: 1px solid var(--border-light);
}

html[data-theme="light"] .filter-toolbar {
  background: rgba(0, 0, 0, 0.02);
}

.search-wrapper {
  flex: 1; /* Hace que la barra de búsqueda ocupe el espacio principal */
  min-width: 250px;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none; /* Para que no moleste al hacer clic */
}

.filter-input, .filter-select {
  width: 100%;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.2s ease;
  outline: none;
}

.filter-input {
  padding-left: 40px; /* Deja espacio para la lupita */
}

.filter-input:focus, .filter-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(1, 157, 244, 0.15);
}

.filter-wrapper {
  position: relative;
  min-width: 200px;
  display: flex;
  align-items: center;
}

.filter-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.filter-select {
  padding-left: 38px;
  cursor: pointer;
  appearance: none; /* Quita la flecha nativa fea del navegador */
  -webkit-appearance: none;
}

/* Flechita personalizada para el select */
.filter-wrapper::after {
  content: "▼";
  font-size: 10px;
  color: var(--text-muted);
  position: absolute;
  right: 14px;
  pointer-events: none;
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Botón de exportar con toque verde (estilo Excel) */
.export-btn {
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
}
.export-btn:hover {
  background: rgba(34, 197, 94, 0.15) !important;
  transform: translateY(-2px);
}

/* Adaptación para celular */
@media (max-width: 700px) {
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }
  .search-wrapper, .filter-wrapper {
    min-width: 100%;
  }
  .filter-actions {
    justify-content: flex-end; /* Botones a la derecha en celular */
  }
}
/* ===================== INDICADOR DE RED (MODO OFFLINE) ===================== */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #ef4444, #f97316); /* Degradado Rojo a Naranja */
  color: white;
  text-align: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 999999;
  /* 🪄 LA MAGIA: Subimos -120% en lugar de -100% para esconderlo totalmente */
  transform: translateY(-120%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* Clase que inyecta JS cuando se corta el internet */
.offline-banner.show {
  transform: translateY(0);
}

/* Empujamos suavemente la barra superior para que el banner no la tape */
body.is-offline .topnav {
  margin-top: 40px !important;
  transition: margin-top 0.35s ease;
}

@media (max-width: 700px) {
  body.is-offline .topnav { 
    margin-top: 36px !important; 
  }
}
/* ============================= */
/* Autocomplete Direcciones */
/* ============================= */
.addr-sug{
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(20,24,32,.88);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
html[data-theme="light"] .addr-sug{
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.addr-sug button{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}
.addr-sug button:hover{
  background: rgba(255,255,255,.08);
}
/* ===================== SISTEMA DE ROLES MULTIPLES ===================== */
.admin-only, .backoffice-only, .staff-only { display: none !important; }

/* 1. Vistas exclusivas de Supervisor (Admin) */
body.is-admin .admin-only { display: inherit !important; }

/* 2. Vistas exclusivas de BackOffice */
body.is-backoffice .backoffice-only { display: inherit !important; }

/* 3. Vistas compartidas (Admin + BackOffice) */
body.is-admin .staff-only, body.is-backoffice .staff-only { display: inherit !important; }

/* Flex overrides para mantener los botones y filas ordenados */
body.is-admin .btn-action.admin-only, body.is-admin .action-card.admin-only,
body.is-backoffice .btn-action.backoffice-only, body.is-backoffice .action-card.backoffice-only,
body.is-admin div.field-row.staff-only, body.is-backoffice div.field-row.staff-only {
    display: flex !important;
}

body.is-admin .freelancer-only, body.is-backoffice .freelancer-only {
  display: none !important;
}

/* Botón Verde (BackOffice) */
.btn-action.primary-green {
  background: #22c55e;
  color: #ffffff !important;
  border: 1px solid #22c55e;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
  font-weight: 800;
  transition: all 0.2s ease;
}
.btn-action.primary-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(34, 197, 94, 0.65);
  background: #4ade80;
  border-color: #4ade80;
}
/* ===================== BARRA DE PROGRESO DE VENTA (TIMELINE) ===================== */
.sale-timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 10px 0;
  max-width: 600px;
  margin: 0 auto;
}

/* La línea gris de fondo que conecta los círculos */
.sale-timeline::before {
  content: "";
  position: absolute;
  top: 26px; /* Centrado con los iconos */
  left: 10%;
  right: 10%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  z-index: 1;
}

html[data-theme="light"] .sale-timeline::before {
  background: rgba(0, 0, 0, 0.08);
}

.timeline-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* El círculo de cada paso */
.step-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--text-muted);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="light"] .step-icon {
  border-color: rgba(0, 0, 0, 0.15);
}

.step-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  transition: all 0.3s ease;
}

/* ESTADO 1: PASO ACTUAL (Activo - Azul) */
.timeline-step.active .step-icon {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
  box-shadow: 0 0 15px rgba(1, 157, 244, 0.4);
  transform: scale(1.1);
}
.timeline-step.active .step-label { color: var(--brand-blue); }

/* ESTADO 2: PASO COMPLETADO (Verde) */
.timeline-step.completed .step-icon {
  background: #22c55e;
  border-color: #22c55e;
  color: white;
}
.timeline-step.completed .step-label { color: #22c55e; }

/* ESTADO 3: VENTA RECHAZADA (Rojo Alerta) */
.timeline-step.rejected .step-icon {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
  transform: scale(1.1);
}
.timeline-step.rejected .step-label { color: #ef4444; }
/* 🔥 ESTILOS PARA EL BOTÓN DORADO DEL ADMIN 🔥 */

/* Arreglo para que los botones de la barra superior no se peguen */
.top-nav {
  gap: 12px !important; /* Añade espacio entre los botones */
  justify-content: flex-end; /* Alinea todo a la derecha */
}

.btn-gold-admin {
  background: linear-gradient(135deg, #facc15 0%, #b48a04 100%); /* Degradado oro metálico */
  color: #000 !important; /* Texto negro para contraste */
  border: none;
  padding: 8px 16px;
  border-radius: 20px; /* Bordes redondeados profesionales */
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 5px rgba(250, 204, 21, 0.2); /* Sombra suave */
  transition: 0.3s;
  text-transform: uppercase; /* Texto en mayúsculas */
  letter-spacing: 0.5px;
}

.btn-gold-admin:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #c29509 100%); /* Brillo al pasar el mouse */
  transform: translateY(-1px); /* Se eleva ligeramente */
  box-shadow: 0 4px 8px rgba(250, 204, 21, 0.4); /* Sombra más fuerte al hover */
}

/* Ajuste para que el ícono de corona se vea bien */
.btn-gold-admin span {
  font-size: 16px;
}
/* 🔥 BOTÓN FLOTANTE DE SOPORTE PARA ADMIN (MINIMALISTA) 🔥 */
.admin-support-fab {
  bottom: 86px !important; 
  background: var(--brand-blue) !important; /* Azul corporativo limpio */
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 20px rgba(1, 157, 244, 0.35) !important;
  z-index: 99998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.3s ease;
}

.admin-support-fab:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 25px rgba(1, 157, 244, 0.5) !important;
  background: var(--brand-blue-hover) !important;
}

/* Estilo del nuevo ícono de Soporte */
.admin-fab-icon {
  width: 26px;
  height: 26px;
  color: #ffffff; 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-support-fab:hover .admin-fab-icon {
  transform: scale(1.1);
}

@media (max-width: 700px) {
  .admin-support-fab {
    bottom: 185px !important; 
  }
}
/* Botón Panel de Supervisor (Estilo Sólido Dorado tipo Registrar Venta) */
.btn-action.primary-gold {
  background: #facc15; /* Dorado sólido */
  color: #111827 !important; /* Texto negro/oscuro para máximo contraste */
  border: 1px solid #facc15;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.35); /* Resplandor dorado */
  font-weight: 800;
  transition: all 0.2s ease;
}

.btn-action.primary-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(250, 204, 21, 0.65); /* Resplandor más fuerte al pasar el mouse */
  background: #fde047; /* Se aclara un poco */
  border-color: #fde047;
}
/* ======= TIMELINE MINIATURA (CON ÍCONOS MINIMALISTAS) ======= */
.mini-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  position: relative;
}
.mini-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  width: 80px;
}
.mini-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(150, 150, 150, 0.3) !important;
  background: var(--bg-card) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(150, 150, 150, 0.5) !important;
  transition: all 0.3s ease !important;
}
html[data-theme="light"] .mini-icon { color: rgba(20, 30, 50, 0.3) !important; }

.mini-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  transition: all 0.3s ease;
}

.mini-line {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 -15px;
  margin-top: -26px !important;
  z-index: 1;
  border-radius: 2px;
  transition: background 0.3s;
}
html[data-theme="light"] .mini-line { background: rgba(0, 0, 0, 0.08); }

/* 1. PENDIENTE (Amarillo) */
.mini-step.active .mini-icon, 
.mini-step.completed .mini-icon {
  border-color: #facc15 !important;
  background: #facc15 !important;
  color: #000000 !important;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.4) !important;
}
.mini-step.active .mini-label, .mini-step.completed .mini-label { color: #facc15; }

/* 2. TERMINADA (Verde) */
.mini-step.completed-green .mini-icon {
  border-color: #22c55e !important;
  background: #22c55e !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4) !important;
}
.mini-step.completed-green .mini-label { color: #22c55e; }

/* 3. CANCELADA (Rojo) */
.mini-step.completed-red .mini-icon {
  border-color: #ef4444 !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}
.mini-step.completed-red .mini-label { color: #ef4444; }

/* Puente cuando se cancela */
.mini-step.skipped-red .mini-icon {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.05) !important;
  color: rgba(239, 68, 68, 0.4) !important;
}
.mini-step.skipped-red .mini-label { color: rgba(239, 68, 68, 0.6); }

/* Colores de las líneas conectadas */
.mini-line.line-green { background: linear-gradient(90deg, #facc15, #22c55e) !important; }
.mini-line.line-red { background: rgba(239, 68, 68, 0.5) !important; }
.mini-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  width: 70px;
}
.mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--text-muted);
  transition: all 0.3s ease;
}
html[data-theme="light"] .mini-icon { border-color: rgba(0, 0, 0, 0.15); }

.mini-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}
.mini-line {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 -15px;
  margin-top: -18px; /* Sube la línea para conectar los círculos */
  z-index: 1;
  border-radius: 2px;
  transition: background 0.3s;
}
html[data-theme="light"] .mini-line { background: rgba(0, 0, 0, 0.08); }

/* Estados Activos (PENDIENTE - AMARILLO FORZADO) */
.mini-step.active .mini-icon {
  background: #facc15 !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.5) !important;
}
.mini-step.active .mini-label { 
  color: #facc15 !important; 
}

/* Estados Completados */
.mini-step.completed .mini-icon { background: #22c55e; border-color: #22c55e; color: white; }
.mini-step.completed .mini-label { color: #22c55e; }
.mini-line.completed { background: #22c55e; }

/* Estado Rechazado */
.mini-step.rejected .mini-icon {
  background: #ef4444; border-color: #ef4444; color: white;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}
.mini-step.rejected .mini-label { color: #ef4444; }
/* ===================== CARGA FANTASMA (SKELETON) ===================== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.skeleton-anim {
  /* Fondo base con el brillo pasando por encima */
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 6px;
}

/* Adaptación para el modo claro */
html[data-theme="light"] .skeleton-anim {
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%);
  background-size: 200% 100%;
}

.sk-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.sk-line { height: 14px; width: 40%; }
.sk-line.short { width: 20%; }
.sk-line.long { width: 70%; height: 12px; }
.sk-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.sk-box { height: 80px; width: 100%; border-radius: 8px; }

@media (max-width: 600px) {
  .sk-body { grid-template-columns: 1fr; }
}
/* ===================== ACADEMIA INTERACTIVA (GRILLA INTELIGENTE) ===================== */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 4px 30px 4px;
}

.tour-card {
  width: 100%;
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}

.tour-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--brand-blue);
  box-shadow: 0 10px 25px rgba(1, 157, 244, 0.15);
  z-index: 10;
}

html[data-theme="light"] .tour-card {
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.cap-thumb {
  width: 100%;
  height: 135px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  position: relative;
}

.cap-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 60%);
}

.cap-badge-netflix {
  position: relative;
  z-index: 2;
  background: var(--brand-blue);
  color: white;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.cap-info-netflix {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cap-title-netflix {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cap-btn-netflix {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  transition: all 0.2s ease;
}

.cap-btn-netflix:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
/* ===== Micro-interacciones premium ===== */
.btn, .primary, .icon-btn, .user, .ibtn, .action-card{
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn:active, .primary:active, .icon-btn:active, .user:active{
  transform: translateY(1px) scale(.99);
}

.glass:hover{
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* ===== Transición entre vistas ===== */
.view{
  animation: viewIn .18s ease;
}
@keyframes viewIn{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}
/* ===== Señal de estado sutil ===== */
.sale-card[data-status="Validación"]{ border-left: 4px solid rgba(34,197,94,.55); }
.sale-card[data-status="Instalación"]{ border-left: 4px solid rgba(1,157,244,.65); }
.sale-card[data-status="Exitosa"]{ border-left: 4px solid rgba(34,197,94,.95); }
.sale-card[data-status="Rechazada"]{ border-left: 4px solid rgba(239,68,68,.85); }
.sale-card{
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sale-card:hover{ transform: translateY(-1px); }
/* ===== Toast tipos ===== */
.toast{ border-left: 4px solid rgba(1,157,244,.65); }
.toast-success{ border-left-color: rgba(34,197,94,.85); }
.toast-warning{ border-left-color: rgba(234,179,8,.85); }
.toast-danger{ border-left-color: rgba(239,68,68,.85); }
/* ===== Empty state ===== */
.empty{
  padding: 26px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  text-align: center;
}
html[data-theme="light"] .empty{
  border-color: rgba(15,20,30,.14);
  background: rgba(15,20,30,.03);
}
.empty .ico{ font-size: 28px; margin-bottom: 8px; }
.empty .t{ font-weight: 900; color: var(--text); margin-bottom: 6px; }
.empty .s{ font-weight: 650; }
/* ===== Chips estado ===== */
.chip-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.chip-status .dot{
  width:8px; height:8px; border-radius: 50%;
}
.chip-status[data-s="Validación"] .dot{ background: rgba(34,197,94,.9); }
.chip-status[data-s="Instalación"] .dot{ background: rgba(1,157,244,.95); }
.chip-status[data-s="Exitosa"] .dot{ background: rgba(34,197,94,.95); }
.chip-status[data-s="Rechazada"] .dot{ background: rgba(239,68,68,.95); }
/* ===== Chips estado ===== */
.chip-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.chip-status .dot{
  width:8px; height:8px; border-radius: 50%;
}
.chip-status[data-s="Validación"] .dot{ background: rgba(34,197,94,.9); }
.chip-status[data-s="Instalación"] .dot{ background: rgba(1,157,244,.95); }
.chip-status[data-s="Exitosa"] .dot{ background: rgba(34,197,94,.95); }
.chip-status[data-s="Rechazada"] .dot{ background: rgba(239,68,68,.95); }
/* ===== KPI Animación Premium ===== */
.kpi-value{
  transition: transform .25s ease, text-shadow .25s ease;
}

.kpi-up{
  transform: scale(1.08);
  text-shadow: 0 0 14px rgba(34,197,94,.7);
}
/* ===================== BOTONES DE SELECCIÓN DE PRODUCTO ===================== */
.prod-toggle-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.prod-toggle {
  flex: 1;
  min-width: 110px;
  cursor: pointer;
  position: relative;
}
.prod-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.prod-toggle span {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s ease;
}
.prod-toggle input:checked + span {
  background: var(--brand-blue);
  color: white;
  border-color: var(--brand-blue);
  box-shadow: 0 4px 12px rgba(1, 157, 244, 0.3);
  transform: translateY(-2px);
}
/* ===================== PARCHE DE SEGURIDAD PARA PESTAÑAS ===================== */
/* Obliga a ocultar los botones admin del menú de pestañas si el usuario no es jefe */
body:not(.is-admin) .modal-tabs .tab.admin-only {
  display: none !important;
}
/* ==========================================================================
   REDISEÑO DE SELECTS (Región, Comuna, etc.)
   ========================================================================== */

select.field {
  /* Ocultamos la flecha fea nativa del sistema operativo */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* Creamos nuestra propia flecha moderna con SVG */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2338bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  
  /* Espaciado para que el texto no pise la flecha */
  padding-right: 40px;
  
  /* Colores modernos adaptados al Dark Mode */
  background-color: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Efecto al pasar el mouse */
select.field:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 189, 248, 0.4); /* Brillo azul claro */
}

/* Efecto al hacer clic/abrir */
select.field:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Cuando la caja está desactivada (ej: esperando que elijas región) */
select.field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
}

/* Fondo oscuro para las opciones de la lista desplegable */
select.field option {
  background-color: #0B0F19; /* Tu color de fondo */
  color: #ffffff;
  padding: 12px;
  font-size: 14px;
}


/* ocultar panel supervisor grande en escritorio */
@media (min-width: 981px) {
  .mobile-staff-actions {
    display: none !important;
  }
}
/* solo móvil */
@media (max-width: 980px) {
  .mobile-staff-actions {
    display: block;
  }
}

/* solo escritorio */
@media (min-width: 981px) {
  .mobile-staff-actions {
    display: none !important;
  }
}
/* OCULTAR BOTON PANEL SUPERVISOR GRANDE EN PC */
@media (min-width: 981px) {

  .mobile-staff-actions.admin-only{
    display: none !important;
  }

}
@media (min-width:981px){

.mobile-staff-actions button{
display:none !important;
}

}
/* ====================================================
   REGLAS LIMPIAS PARA OCULTAR BOTONES MÓVILES EN PC
   ==================================================== */
@media (min-width: 981px) {
  body.is-admin .mobile-staff-actions,
  body.is-backoffice .mobile-staff-actions,
  .mobile-staff-actions,
  .mobile-main-actions {
    display: none !important;
  }
}
/* ===================== RANKING DE VENTAS (LEADERBOARD) ===================== */
.ranking-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Mitad Podio, Mitad Lista */
  gap: 24px;
  align-items: end;
  margin-top: 10px;
}
@media (max-width: 850px) { .ranking-wrapper { grid-template-columns: 1fr; } }

/* --- EL PODIO --- */
.podium-container {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 12px; height: 280px; padding-bottom: 10px;
}
.podium-item {
  display: flex; flex-direction: column; align-items: center; width: 30%; position: relative;
}

.podium-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg-app); border: 3px solid;
  display: grid; place-items: center; font-size: 24px;
  color: white; margin-bottom: 12px; z-index: 2;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.podium-name {
  font-size: 12px; font-weight: 800; color: var(--text-main);
  text-align: center; margin-bottom: 8px; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.podium-bar {
  width: 100%; border-radius: 12px 12px 0 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  padding-top: 12px; color: white; font-weight: 900;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Colores y alturas de cada puesto */
.podium-1 .podium-bar { background: linear-gradient(135deg, #facc15 0%, #b48a04 100%); height: 180px; }
.podium-1 .podium-avatar { border-color: #facc15; }

.podium-2 .podium-bar { background: linear-gradient(135deg, #94a3b8 0%, #475569 100%); height: 130px; }
.podium-2 .podium-avatar { border-color: #94a3b8; }

.podium-3 .podium-bar { background: linear-gradient(135deg, #b45309 0%, #78350f 100%); height: 90px; }
.podium-3 .podium-avatar { border-color: #b45309; }

.podium-medal {
  width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.2);
  display: grid; place-items: center; margin-bottom: 8px; font-size: 14px; border: 1px solid rgba(255,255,255,0.4);
}
.podium-sales { font-size: 24px; line-height: 1; }
.podium-label { font-size: 10px; text-transform: uppercase; opacity: 0.8; margin-top: 4px; }

/* --- LA LISTA (4to lugar en adelante) --- */
.ranking-list {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(0,0,0,0.1); padding: 16px; border-radius: 16px; border: 1px solid var(--border-light);
  height: 280px; overflow-y: auto;
}
html[data-theme="light"] .ranking-list { background: rgba(255,255,255,0.5); }

.ranking-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg-card); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.2s ease;
}
.ranking-row:hover { transform: translateX(4px); border-color: var(--brand-blue); }

.rank-pos { font-size: 14px; font-weight: 900; color: var(--text-muted); width: 24px; }
.rank-info { display: flex; align-items: center; gap: 10px; flex: 1; }
.rank-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-blue); display: grid; place-items: center; font-size: 12px; font-weight: 900; color: white; }
.rank-name { font-size: 14px; font-weight: 700; color: var(--text-main); }
.rank-score { font-size: 16px; font-weight: 900; color: var(--brand-blue); }
/* ===================== ACORDEÓN COMISIONES ===================== */
.comisiones-details {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.comisiones-summary {
  padding: 16px 20px;
  font-weight: 900;
  font-size: 16px;
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.02);
}
.comisiones-summary::-webkit-details-marker { display: none; } /* Oculta flecha por defecto */
.comisiones-summary::after {
  content: "▼";
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}
.comisiones-details[open] .comisiones-summary::after {
  transform: rotate(180deg);
  color: var(--brand-blue);
}
.comisiones-details[open] {
  border-color: var(--brand-blue);
  box-shadow: 0 4px 15px rgba(1, 157, 244, 0.15);
}
.comisiones-content {
  padding: 0 20px 20px;
  animation: viewIn 0.3s ease; /* Usa tu misma animación de entrada */
}
/* ========================================================
   DISEÑO DASHBOARD EXACTO (GRILLA BLINDADA 12 COLUMNAS)
   ======================================================== */

#viewDashboard {
  display: grid; /* ¡SIN !important para que JS pueda ocultarlo al cambiar de pestaña! */
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* --- FILA 1: FORZAR LAS 4 TARJETAS ARRIBA --- */
.dash-kpi {
  padding: 20px;
  width: 100%;
}

/* Colocamos cada tarjeta manualmente en su posición (3 columnas cada una) */
#cardInstaladas   { grid-column: 1 / span 3; grid-row: 1; }
#cardVentasTotales{ grid-column: 4 / span 3; grid-row: 1; }
#cardReagendadas  { grid-column: 7 / span 3; grid-row: 1; }
#cardPendientes   { grid-column: 10 / span 3; grid-row: 1; }

/* Estilos de texto e iconos para los KPIs */
.kpi-value-new {
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-main);
}
.kpi-label-new {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 8px;
}
.kpi-neon-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- FILA 2 Y 3: GRÁFICO (IZQ) Y TABLAS (DER) --- */

/* Gráfico a la izquierda (Ocupa 4 columnas de ancho y 2 de alto) */
.dash-chart {
  grid-column: 1 / span 4;
  grid-row: 2 / span 2; 
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Botón Comisiones alargado (Obligado a tocar el borde derecho) */
.dash-comisiones {
  grid-column: 5 / -1 !important; /* El "-1" le dice: "estírate hasta el final sí o sí" */
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important; /* Esto destruye cualquier límite de ancho antiguo */
  white-space: nowrap !important; /* Evita que el texto se parta en dos líneas */
}

/* Tabla Ventas Recientes debajo de comisiones */
.dash-recent {
  grid-column: 5 / span 8;
  grid-row: 3;
  width: 100%;
}

/* --- RESPONSIVO PARA PANTALLAS PEQUEÑAS Y MÓVILES --- */
@media (max-width: 1100px) {
  /* En tablets o pantallas más chicas, ponemos 2 KPIs por fila */
  #cardInstaladas   { grid-column: 1 / span 6; grid-row: 1; }
  #cardVentasTotales{ grid-column: 7 / span 6; grid-row: 1; }
  #cardReagendadas  { grid-column: 1 / span 6; grid-row: 2; }
  #cardPendientes   { grid-column: 7 / span 6; grid-row: 2; }
  
  /* Gráfico y tablas ocupan todo el ancho hacia abajo */
  .dash-chart { grid-column: 1 / span 12; grid-row: 3; }
  .dash-comisiones { grid-column: 1 / span 12; grid-row: 4; }
  .dash-recent { grid-column: 1 / span 12; grid-row: 5; }
}

@media (max-width: 600px) {
  .dash-kpi { padding: 16px 14px; }
  .kpi-value-new { font-size: 30px; }
}
/* ==========================================================================
   ACTUALIZACIÓN: MODO CLARO CORPORATIVO (Fondo Blanco y Logo Sólido)
   ========================================================================== */

/* Barra Lateral Blanca en Modo Claro */
html[data-theme="light"] .iconbar {
  background: #ffffff !important; 
  border-color: #e5e7eb !important; 
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .iconbar .ibtn {
  color: #4b5563 !important; 
}

html[data-theme="light"] .iconbar .ibtn:hover,
html[data-theme="light"] .iconbar .ibtn.active {
  background: rgba(1, 157, 244, 0.08) !important; 
  color: var(--brand-blue) !important;
}

/* Logo Multired Sólido (Quitar Arcoíris en modo claro) */
html[data-theme="light"] .multired-gradient {
  background: none !important; 
  -webkit-text-fill-color: #111827 !important; 
  text-shadow: none !important;
}

/* Opcional: Quitar arcoíris también en modo oscuro (descomenta si lo deseas) */
/* .multired-gradient { background: none !important; -webkit-text-fill-color: var(--text-main) !important; } */

/* Icono WiFi Sólido en Modo Claro */
html[data-theme="light"] .wifi-dot { fill: var(--brand-blue); filter: none; }
html[data-theme="light"] .wifi-arc-1 { stroke: var(--brand-blue); filter: none; }
html[data-theme="light"] .wifi-arc-2 { stroke: var(--brand-blue); filter: none; opacity: 0.7; }
html[data-theme="light"] .wifi-arc-3 { stroke: var(--brand-blue); filter: none; opacity: 0.4; }

/* Asegurar fondos blancos limpios en las tarjetas */
html[data-theme="light"] .glass, 
html[data-theme="light"] .card, 
html[data-theme="light"] .sale-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Tarjeta de Comisiones Limpia */
.dash-comisiones {
  padding: 20px 24px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.0) 100%) !important;
}
html[data-theme="light"] .dash-comisiones {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
/* ==========================================================================
   ACTUALIZACIÓN: TOPBAR LIMPIA, BUSCADOR CENTRADO Y BOTONES RESTAURADOS
   ========================================================================== */
.topnav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
}
.brand {
  justify-content: flex-start !important;
}
.topright {
  justify-content: flex-end !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Buscador Falso en el centro */
.top-search-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.search-fake-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px; /* Ancho máximo para que no aplaste a los botones */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: text;
  transition: all 0.2s ease;
}
html[data-theme="light"] .search-fake-input {
  background: rgba(0, 0, 0, 0.03);
}
.search-fake-input:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand-blue);
}
html[data-theme="light"] .search-fake-input:hover {
  background: rgba(0, 0, 0, 0.06);
}
.search-shortcut {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  background: rgba(120,130,140,0.15);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}

/* Ocultar buscador en celulares, mantener botones */
@media (max-width: 980px) {
  .top-search-center { display: none; } 
  .topnav { grid-template-columns: auto 1fr !important; }
}
/* ==========================================================================
   ACTUALIZACIÓN: SOMBRAS PREMIUM Y EMPTY STATES
   ========================================================================== */

/* 1. Sombras suaves, extensas y modernas (Estilo Apple/Vercel) */
:root {
  --shadow-sm: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="light"] {
  --shadow-sm: 0 12px 35px rgba(0, 0, 0, 0.06) !important;
}

/* 2. Efecto de "Levitación" suave al pasar el mouse por las tarjetas */
.sale-card:hover, .clickable-card:hover, .action-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(1, 157, 244, 0.12) !important; /* Sombra sutilmente azulada */
  border-color: var(--brand-blue) !important;
}

/* 3. Diseño del nuevo Empty State Ilustrado */
.empty-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-light);
  border-radius: 16px;
  margin-top: 10px;
}
html[data-theme="light"] .empty-modern {
  background: rgba(0, 0, 0, 0.01);
}
.empty-modern svg {
  width: 70px;
  height: 70px;
  color: var(--border-light);
  margin-bottom: 16px;
}
.empty-modern .title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}
.empty-modern .subtitle {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 280px;
}
/* ==========================================================================
   FIX DEFINITIVO: DISEÑO MÓVIL PERFECTO (SIN TOCAR PC)
   ========================================================================== */
@media (max-width: 850px) {
  /* 1. Ocultar botones de la barra superior - solo en pantallas muy pequeñas */
  /* .hide-on-mobile { display: none !important; } */ /* DESACTIVADO - conflicto con regla de 768px */
  
  /* 2. Arreglar contenedor lateral */
  .shell { grid-template-columns: 1fr !important; }

  /* 3. FORZAMOS EL DASHBOARD A SER EXACTAMENTE DE 2 COLUMNAS EN MÓVIL */
  #viewDashboard {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  /* 4. Botones superiores ocupan todo el ancho (Las 2 columnas) */
  .mobile-main-actions {
    display: flex !important;
    grid-column: 1 / -1 !important; /* Ocupa 100% */
    grid-row: 1 !important;
    gap: 12px !important;
    margin-bottom: 8px;
    margin-top: 6px;
  }
  
  .mobile-main-actions .btn-action {
    flex: 1 !important;
    justify-content: center !important;
    padding: 14px 8px !important;
    font-size: 14px !important;
  }

  /* 5. TARJETAS 50/50 (1 columna para cada una, cero aplastamientos) */
  #cardInstaladas   { grid-column: 1 !important; grid-row: 2 !important; }
  #cardVentasTotales{ grid-column: 2 !important; grid-row: 2 !important; }
  #cardReagendadas  { grid-column: 1 !important; grid-row: 3 !important; }
  #cardPendientes   { grid-column: 2 !important; grid-row: 3 !important; }
/* 6. Gráficos y Tablas grandes ocupan el 100% (Jerarquía Máxima) */
  #viewDashboard article.dash-chart       { grid-column: 1 / span 2 !important; grid-row: 4 !important; width: 100% !important; max-width: none !important; }
  #viewDashboard article.dash-comisiones  { grid-column: 1 / span 2 !important; grid-row: 5 !important; width: 100% !important; max-width: none !important; }
  #viewDashboard article.dash-recent      { grid-column: 1 / span 2 !important; grid-row: 6 !important; width: 100% !important; max-width: none !important; }
}
/* ===================== PODIO DE RANKING GAMIFICADO ===================== */
.podium-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
  height: 200px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.podium-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 90px;
  border-radius: 12px 12px 0 0;
  position: relative;
  color: white;
  font-weight: 900;
  padding-top: 15px;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
  animation: popUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: bottom;
}
@keyframes popUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.podium-1 { height: 140px; background: linear-gradient(135deg, #facc15, #b48a04); z-index: 3;}
.podium-2 { height: 100px; background: linear-gradient(135deg, #94a3b8, #475569); z-index: 2;}
.podium-3 { height: 70px; background: linear-gradient(135deg, #b45309, #78350f); z-index: 1;}

.podium-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid var(--bg-card);
  position: absolute;
  top: -25px;
  background: var(--bg-app);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.podium-name { font-size: 13px; margin-top: 25px; text-align: center; line-height: 1.1; }
.podium-score { font-size: 20px; margin-top: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
/* ==========================================================================
   PULIDO VISUAL: TABS FACTIBILIDAD Y BOTONES
   ========================================================================== */
.modal-tabs .tab {
  opacity: 0.6;
  transition: all 0.3s ease;
}
.modal-tabs .tab.active {
  opacity: 1 !important;
  background: var(--brand-blue) !important;
  color: white !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 4px 15px rgba(1, 157, 244, 0.4) !important;
}
/* ==========================================================================
   🔥 FORZAR BORDES DE TARJETAS A LOS 3 COLORES EXACTOS 🔥
   ========================================================================== */
.sale-card.border-pendiente { border-left: 6px solid #facc15 !important; }
.sale-card.border-terminada { border-left: 6px solid #22c55e !important; }
.sale-card.border-cancelada { border-left: 6px solid #ef4444 !important; }

/* Evitamos que al pasar el mouse por encima se vuelva a poner azul */
.sale-card.border-pendiente:hover { 
  border-left: 6px solid #facc15 !important; 
  border-color: rgba(250, 204, 21, 0.4) !important; 
}
.sale-card.border-terminada:hover { 
  border-left: 6px solid #22c55e !important; 
  border-color: rgba(34, 197, 94, 0.4) !important; 
}
.sale-card.border-cancelada:hover { 
  border-left: 6px solid #ef4444 !important; 
  border-color: rgba(239, 68, 68, 0.4) !important; 
}
/* ==========================================================================
   🔥 FIX: LÍNEAS DEL TIMELINE Y TEXTO SELECTS (MODO CLARO) 🔥
   ========================================================================== */

/* 1. Evitar que el modo claro borre el degradado de las líneas conectadas */
.mini-line.line-green { background: linear-gradient(90deg, #facc15, #22c55e) !important; }
.mini-line.line-red { background: rgba(239, 68, 68, 0.5) !important; }

/* 2. Obligar a los Selects a tener texto oscuro y fondo claro en Modo Claro */
html[data-theme="light"] select.field,
html[data-theme="light"] .filter-select {
  color: #111827 !important; /* Texto negro/oscuro */
  background-color: #ffffff !important; /* Fondo blanco */
  border-color: #cbd5e1 !important; /* Borde gris suavecito */
  /* Flechita gris oscura en lugar de la celeste brillante para que contraste */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%234b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') !important;
}

/* 3. Arreglar las opciones desplegables por dentro para que también se lean */
html[data-theme="light"] select.field option,
html[data-theme="light"] .filter-select option {
  background-color: #ffffff !important;
  color: #111827 !important;
}
/* ==========================================================================
   🔥 FIX NUCLEAR: BORDES DE TARJETAS (PISA CUALQUIER REGLA ANTERIOR) 🔥
   ========================================================================== */

/* Añadimos 'div' al principio para aumentar la prioridad (especificidad) del CSS */
div.sale-card.border-pendiente { 
  border-left-color: #facc15 !important; 
  border-left-width: 6px !important; 
  border-left-style: solid !important; 
}
div.sale-card.border-terminada { 
  border-left-color: #22c55e !important; 
  border-left-width: 6px !important; 
  border-left-style: solid !important; 
}
div.sale-card.border-cancelada { 
  border-left-color: #ef4444 !important; 
  border-left-width: 6px !important; 
  border-left-style: solid !important; 
}

/* Efectos al pasar el ratón (Hover) */
div.sale-card.border-pendiente:hover { border-color: rgba(250, 204, 21, 0.5) !important; }
div.sale-card.border-terminada:hover { border-color: rgba(34, 197, 94, 0.5) !important; }
div.sale-card.border-cancelada:hover { border-color: rgba(239, 68, 68, 0.5) !important; }
/* ==========================================================================
   🔥 ESTILOS PARA EL TUTORIAL INTERACTIVO (INTRO.JS) 🔥
   ========================================================================== */
.introjs-tooltip {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;
  border-radius: 16px !important;
  color: var(--text-main) !important;
}

.introjs-tooltiptext {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.introjs-tooltip-title {
  color: var(--brand-blue) !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  margin-bottom: 8px !important;
}

/* Botones de "Siguiente" y "Atrás" */
.introjs-button {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-main) !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
}

html[data-theme="light"] .introjs-button {
  background: #f1f5f9 !important;
  color: #111827 !important;
}

.introjs-button:hover {
  background: var(--brand-blue) !important;
  color: white !important;
  border-color: var(--brand-blue) !important;
  transform: translateY(-1px);
}

/* Las flechitas del globo de diálogo */
.introjs-arrow.top { border-bottom-color: var(--bg-card) !important; }
.introjs-arrow.bottom { border-top-color: var(--bg-card) !important; }
.introjs-arrow.left { border-right-color: var(--bg-card) !important; }
.introjs-arrow.right { border-left-color: var(--bg-card) !important; }

/* Barra de progreso */
.introjs-progress {
  background-color: var(--border-light) !important;
  border-radius: 4px !important;
  margin: 10px 0 !important;
}
.introjs-progressbar {
  background-color: var(--brand-blue) !important;
  border-radius: 4px !important;
}

/* Los puntitos indicadores */
.introjs-bullets ul li a {
  background: var(--border-light) !important;
  border-radius: 50% !important;
}
.introjs-bullets ul li a.active {
  background: var(--brand-blue) !important;
}

/* Quitar el borde blanco feo al hacer focus */
.introjs-tooltipbuttons a:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(1, 157, 244, 0.4) !important;
}/* ==========================================================================
   🔥 FIX DEFINITIVO: LOGIN & REGISTER PREMIUM 🔥
   ========================================================================== */

/* 1. Fondo difuminado que ocupa toda la pantalla */
.auth-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(8, 12, 18, 0.85) !important; 
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
html[data-theme="light"] .auth-backdrop { background: rgba(241, 245, 249, 0.85) !important; }

/* 2. La Tarjeta de Cristal (Centrada y elegante) */
.auth-card {
  width: 100% !important;
  max-width: 460px !important; /* Ancho perfecto para celular y PC */
  max-height: 95vh !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  background: var(--bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: auto !important; /* Asegura que quede al medio */
}
.auth-card::-webkit-scrollbar { width: 0px; } /* Oculta la barra de scroll fea */

/* 3. Cabecera y Logo */
.auth-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 32px 24px 20px !important;
  text-align: center !important;
}
.auth-logo-box {
  width: 64px !important; 
  height: 64px !important;
  border-radius: 16px !important;
  background: rgba(1, 157, 244, 0.1) !important;
  border: 1px solid rgba(1, 157, 244, 0.3) !important;
  display: grid !important; 
  place-items: center !important;
  box-shadow: 0 8px 20px rgba(1, 157, 244, 0.2) !important;
  margin-bottom: 12px !important;
}
.auth-logo-box svg { width: 36px !important; height: 36px !important; margin: 0 !important; }

.auth-subtitle {
  color: var(--text-muted) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* 4. Pestañas (Ingresar / Soy Nuevo) */
.auth-tabs {
  display: flex !important;
  background: rgba(0, 0, 0, 0.2) !important; 
  margin: 0 24px !important;
  border-radius: 12px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.auth-tab {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  padding: 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
}
.auth-tab.active {
  background: var(--bg-app) !important; 
  color: var(--text-main) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 5. Campos de Formulario */
.auth-body { padding: 24px !important; }

.auth-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 12px !important;
}
.form-field-modern { 
  display: flex !important; 
  flex-direction: column !important; 
  margin-bottom: 16px !important;
  text-align: left !important;
}
.form-field-modern.wide { grid-column: span 2 !important; }

.form-field-modern label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  margin-bottom: 8px !important;
  margin-left: 4px !important;
}
.form-field-modern .field {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  color: var(--text-main) !important;
  width: 100% !important;
}
.form-field-modern .field:focus {
  background: rgba(1, 157, 244, 0.05) !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(1, 157, 244, 0.15) !important;
}

/* 6. Botón Principal (Mata al verde oliva) */
.auth-btn-main {
  width: 100% !important;
  margin-top: 10px !important;
  background: var(--brand-blue) !important;
  color: white !important;
  border: none !important;
  padding: 16px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(1, 157, 244, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
}
.auth-btn-main:hover {
  transform: translateY(-2px) !important;
  background: var(--brand-blue-hover) !important;
  box-shadow: 0 12px 25px rgba(1, 157, 244, 0.5) !important;
}

.linkbtn {
  background: none !important; 
  border: none !important; 
  padding: 0 !important;
  color: var(--brand-blue) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* 7. Zona de Subida de Archivos */
.auth-upload-box {
  background: rgba(1, 157, 244, 0.05) !important;
  border: 1px dashed rgba(1, 157, 244, 0.3) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  text-align: center !important;
}
.auth-upload-box .upload-title { color: var(--brand-blue) !important; font-weight: 800 !important; font-size: 14px !important; margin-bottom: 6px !important; }
.auth-upload-box .upload-desc { color: var(--text-muted) !important; font-size: 12px !important; margin-bottom: 12px !important; }
.upload-btn {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  background: rgba(0,0,0,0.2) !important; padding: 12px !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.05) !important;
  cursor: pointer !important; width: 100% !important;
}
.upload-btn span { font-size: 12px !important; font-weight: 700 !important; color: var(--text-muted) !important; margin-bottom: 6px !important; }

@media (max-width: 500px) {
  .auth-grid { grid-template-columns: 1fr !important; }
  .form-field-modern.wide { grid-column: span 1 !important; }
}

/* Modal Recuperar Clave */
#forgotBackdrop .auth-card { max-width: 420px !important; padding-bottom: 20px !important; }
/* ==========================================================================
   🔥 VISTA KANBAN (EMBUDO VISUAL) Y ALERTAS SLA 🔥
   ========================================================================== */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 20px;
  min-height: 60vh;
  scrollbar-width: thin;
}
.kanban-board::-webkit-scrollbar { height: 8px; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }

.kanban-col {
  flex: 0 0 300px; /* Ancho fijo de las columnas */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
html[data-theme="light"] .kanban-col { background: rgba(0,0,0,0.03); }

.kanban-col-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kanban-col-body {
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* Tarjeta miniatura dentro del Kanban */
.k-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.k-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(1, 157, 244, 0.15); border-color: var(--brand-blue); }

/* 🔥 ALERTA SLA: Ventas Pendientes por más de 48 hrs */
.sla-fire {
  border: 1px solid #ef4444 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3) !important;
  animation: pulseFire 2s infinite;
}
.sla-fire::after {
  content: "🔥 URGENTE (>48h)";
  position: absolute;
  top: 0; right: 0;
  background: #ef4444; color: white;
  font-size: 9px; font-weight: 900;
  padding: 3px 8px; border-radius: 0 0 0 8px;
}
@keyframes pulseFire {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Colores de cabeceras Kanban */
.k-col-pen .kanban-col-head { border-top: 4px solid #facc15; border-radius: 16px 16px 0 0; }
.k-col-val .kanban-col-head { border-top: 4px solid #38bdf8; border-radius: 16px 16px 0 0; }
.k-col-ins .kanban-col-head { border-top: 4px solid #c9ff2f; border-radius: 16px 16px 0 0; }
.k-col-exi .kanban-col-head { border-top: 4px solid #22c55e; border-radius: 16px 16px 0 0; }
.k-col-rec .kanban-col-head { border-top: 4px solid #ef4444; border-radius: 16px 16px 0 0; }
/* ==========================================================================
   🔥 FIX: BOTONES MULTI-VISTA Y DESBORDAMIENTO KANBAN 🔥
   ========================================================================== */
.btn-view {
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}
.btn-view:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme="light"] .btn-view:hover { background: rgba(0, 0, 0, 0.05); }

/* Fix de seguridad para que el Kanban se pueda scrollear hacia el lado */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 20px;
  min-height: 60vh;
  width: 100%;
  max-width: 100%; /* Evita que estire la pantalla completa */
  scroll-snap-type: x mandatory; /* Movimiento suave en celulares */
  -webkit-overflow-scrolling: touch;
}

.kanban-col {
  flex: 0 0 300px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  scroll-snap-align: start;
}
html[data-theme="light"] .kanban-col { background: rgba(0,0,0,0.03); }
/* ==========================================================================
   🔥 FIX: TABLERO KANBAN ENVOLVENTE (MULTILÍNEA) 🔥
   ========================================================================== */
.kanban-board {
  display: grid; /* <-- ¡LE QUITAMOS EL !important A ESTA LÍNEA! */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  padding-bottom: 20px !important;
  width: 100% !important;
  align-items: start !important; 
  overflow: visible !important; /* Quitamos el scroll horizontal feo */
}

.kanban-col {
  width: 100% !important;
  flex: none !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 16px !important;
  border: 1px solid var(--border-light) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 480px !important; /* Le damos una altura fija a las cajas */
}
html[data-theme="light"] .kanban-col { background: rgba(0,0,0,0.03) !important; }

.kanban-col-body {
  overflow-y: auto !important; /* Ahora el scroll está SOLO DENTRO de la cajita */
  padding: 12px !important;
  flex: 1 !important;
}

/* Diseño de los botones de vista */
.view-toggles {
  display: flex; 
  gap: 4px; 
  background: rgba(0,0,0,0.2); 
  padding: 4px; 
  border-radius: 12px; 
  border: 1px solid rgba(255,255,255,0.05);
}
html[data-theme="light"] .view-toggles { background: rgba(0,0,0,0.05); }

.btn-view {
  background: transparent; border: none; color: var(--text-muted);
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  transition: all 0.2s ease; font-size: 16px;
}
.btn-view:hover { background: rgba(255, 255, 255, 0.08); }
.btn-view.active { background: var(--brand-blue) !important; color: white !important; }
/* ==========================================================================
   🔥 PULIDO VISUAL: INPUTS DE ARCHIVO Y KANBAN CARDS 🔥
   ========================================================================== */

/* Transforma TODOS los botones de subir archivo del sistema */
input[type="file"]::file-selector-button {
  background: var(--brand-blue);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 12px;
  box-shadow: 0 4px 10px rgba(1, 157, 244, 0.2);
}
input[type="file"]::file-selector-button:hover {
  background: var(--brand-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(1, 157, 244, 0.3);
}
html[data-theme="light"] input[type="file"] { color: var(--text-muted); font-size: 12px; }

/* Evita que el RUT se corte en el tablero Kanban */
.k-card {
  min-height: 90px; /* Obliga a la tarjeta a tener espacio para respirar */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* ==========================================================================
   🔥 FIX: TUTORIALES ADAPTADOS AL CELULAR (INTRO.JS) 🔥
   ========================================================================== */
@media (max-width: 700px) {
  .introjs-tooltip {
    max-width: 90vw !important;
    min-width: 280px !important;
    width: auto !important;
    border-radius: 12px !important;
    padding: 10px !important;
  }
  .introjs-tooltiptext {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .introjs-tooltip-title {
    font-size: 16px !important;
  }
  .introjs-button {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  /* Ajuste para que el fondo oscuro no se descuadre */
  .introjs-overlay {
    height: 100vh !important;
    position: fixed !important;
  }
}
/* ==========================================================================
   🔥 FIX: BOTONES DE STAFF EN MÓVIL Y BURBUJAS DE SOPORTE 🔥
   ========================================================================== */

/* 1. Ocultar los botones gigantes de Admin/Backoffice en PC (Solo para celular) */
@media (min-width: 851px) {
  .mobile-staff-actions {
    display: none !important;
  }
}

/* 2. En celular, hacer que el contenedor de acciones ocupe todo el ancho */
@media (max-width: 850px) {
  .mobile-staff-actions {
    grid-column: 1 / -1 !important;
  }
  
  /* 3. Acomodar las burbujas flotantes para que NO se pisen */
  
  /* El Robot Azul (Asistente) va un poquito más arriba y a la derecha */
  #botFab {
    bottom: 150px !important;
    right: 18px !important;
    width: 50px !important;
    height: 50px !important;
  }
  
  /* La Burbuja Gris (Soporte Humano) va abajo a la izquierda (O al lado) */
  #supportFab {
    bottom: 150px !important;
    right: 80px !important; /* Lo movemos hacia la izquierda para que estén lado a lado */
    width: 50px !important;
    height: 50px !important;
    background: rgba(40, 45, 55, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Arreglar la posición de los paneles de chat cuando se abren */
  #botPanel, #supportPanel {
    bottom: 210px !important;
    right: 15px !important;
    width: calc(100vw - 30px) !important;
    z-index: 999999 !important;
  }
}
/* ==========================================================================
   🔥 FIX: BURBUJAS APILADAS Y BOTÓN ADMIN MÓVIL 🔥
   ========================================================================== */

@media (max-width: 850px) {
  /* 1. Burbuja Gris (Soporte Humano) - Abajo en la esquina */
  #supportFab {
    bottom: 80px !important;
    right: 18px !important;
    width: 54px !important;
    height: 54px !important;
    background: rgba(40, 45, 55, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* 2. Burbuja Azul (Robot) - Justo arriba de la gris */
  #botFab {
    bottom: 150px !important; /* Más arriba para que no se pisen */
    right: 18px !important;
    width: 54px !important;
    height: 54px !important;
  }
  
  /* Paneles de Chat flotantes ajustados */
  #supportPanel, #botPanel {
    bottom: 220px !important;
    right: 15px !important;
    width: calc(100vw - 30px) !important;
    z-index: 999999 !important;
  }

  /* Ocultar el botón admin móvil si estás en PC */
  .mobile-admin-zone { display: flex !important; }
}

@media (min-width: 851px) {
  .mobile-admin-zone { display: none !important; }
}

/* Mostramos la zona admin SOLO si el usuario es administrador */
body.is-admin .mobile-admin-zone { display: flex !important; }
.mobile-admin-zone { display: none !important; }
/* ==========================================================================
   🔥 FIX: OCULTAR BOTONES MÓVILES EN PC (MODO APP) 🔥
   ========================================================================== */

/* Esta clase es la que envuelve al botón dorado que agregamos al final del HTML */
@media (min-width: 851px) {
  .mobile-admin-zone { 
    display: none !important; 
  }
}

/* Y nos aseguramos de que el botón de arriba (Topbar) DESAPAREZCA en celulares */
@media (max-width: 850px) {
  #btnTopAdminPanel,
  #btnSecureAdminPanel {
    display: none !important;
  }
}
/* REPARACIÓN DE BOTONES EN MÓVIL - MULTIRED */
@media (max-width: 768px) {
    /* Hacemos que los botones dejen de estar escondidos */
    .topnav .hide-on-mobile {
        display: flex !important; /* Forzamos la aparición */
        padding: 8px 10px !important;
        font-size: 12px !important;
        height: 36px !important;
    }

    /* Ocultamos el texto largo para que quepan solo los íconos o texto corto */
    /* Si quieres que se vea el texto completo, borra estas 3 líneas de abajo */
    .topnav #btnFactibilidad { width: auto; }
    .topnav #btnTopRegistrarVenta { width: auto; }

    /* Ajustamos el contenedor de la derecha para que no se amontonen */
    .topright {
        gap: 8px !important;
        margin-right: 5px;
    }

    /* Opcional: Si el logo estorba mucho en móvil, lo achicamos un poco más */
    .brand-bigtext {
        display: none; /* Oculta la palabra 'Multired' solo en móvil para dar espacio a los botones */
    }
}
/* ============================================================
   FIX FINAL: FORZAR VISIBILIDAD DE BOTONES FACTIBILIDAD Y NUEVA VENTA
   ============================================================ */
header.topnav #btnFactibilidad,
header.topnav #btnTopRegistrarVenta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 480px) {
  header.topnav #btnFactibilidad .btn-text,
  header.topnav #btnTopRegistrarVenta .btn-text {
    display: none !important; /* En pantallas muy pequeñas oculta solo el texto, no el botón */
  }
}

/* ============================================================
   FIX DEFINITIVO v3 - BOTONES FACTIBILIDAD Y NUEVA VENTA EN MÓVIL
   ============================================================ */

/* En móvil, la topnav necesita espacio para los botones */
@media (max-width: 700px) {
  /* Anulamos el nowrap y height fijo para dar espacio a los botones */
  .topnav {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Fila 1: Logo a la izquierda, iconos a la derecha */
  .brand {
    flex: 0 0 auto !important;
    order: 1 !important;
  }
  .topright {
    flex: 0 0 auto !important;
    order: 2 !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  /* Fila 2: Botones principales ocupan todo el ancho */
  header.topnav #btnFactibilidad,
  header.topnav #btnTopRegistrarVenta {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 3 !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    height: 36px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* Contenedor que agrupe los 2 botones en fila 2 */
  header.topnav #btnFactibilidad {
    border-radius: 12px !important;
  }
  header.topnav #btnTopRegistrarVenta {
    border-radius: 12px !important;
  }
}

/* En pantallas medianas (701px - 980px) también mostrarlos */
@media (min-width: 701px) and (max-width: 980px) {
  header.topnav #btnFactibilidad,
  header.topnav #btnTopRegistrarVenta {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   BOTONES MÓVIL EN DASHBOARD - SOLO VISIBLES EN MÓVIL
   ============================================================ */

/* En PC: ocultamos los botones del dashboard (los del topnav ya se ven) */
@media (min-width: 701px) {
  #mobileMainActions {
    display: none !important;
  }
}

/* En móvil: ocultamos los del topnav para no duplicarlos */
@media (max-width: 700px) {
  header.topnav #btnFactibilidad,
  header.topnav #btnTopRegistrarVenta {
    display: none !important;
  }
  #mobileMainActions {
    display: flex !important;
  }
  /* Topnav vuelve a su forma compacta de 1 sola fila */
  .topnav {
    flex-wrap: nowrap !important;
    height: 58px !important;
    padding: 10px 12px !important;
  }
}

/* ============================================================
   FIX: OCULTAR PANEL BACKOFFICE/ADMIN DEL TOPNAV EN MÓVIL
   Estos botones solo aparecen en el dashboard (mobile-staff-actions)
   ============================================================ */
@media (max-width: 700px) {
  header.topnav #btnSecureAdminPanel,
  header.topnav #btnTopBackofficePanel {
    display: none !important;
  }
}