/* ═══════════════════════════════════════════════════════════════
   FIBERGLOBAL OS v2.0 — Theme override (cargar después del CSS base)
   Convención: definiciones globales con peso suficiente para
   sobrescribir estilos inline existentes sin tocar templates.
   Aplicado en DEV el 2026-05-25.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fg-bg:           #e7ecf3;   /* antes #f4f6fb — más tono, no parece blanco */
  --fg-bg-elevated:  #ffffff;
  --fg-text:         #0f172a;   /* antes #1f2937 — más contraste */
  --fg-text-muted:   #475569;   /* antes #6b7280 — más legible */
  --fg-text-faint:   #64748b;
  --fg-border:       #cbd5e1;   /* antes #e5e7eb — más definido en cards */
  --fg-border-soft:  #e2e8f0;
  --fg-primary:      #2563eb;
  --fg-primary-hover:#1d4ed8;
  --fg-primary-soft: #dbeafe;
  --fg-success:      #10b981;
  --fg-warning:      #f59e0b;
  --fg-danger:       #ef4444;
  --fg-shadow-sm:    0 1px 2px rgba(15,23,42,.06);
  --fg-shadow:       0 4px 14px rgba(15,23,42,.09);
  --fg-shadow-lg:    0 10px 28px rgba(15,23,42,.14);
  --fg-radius:       12px;
  --fg-radius-sm:    8px;
  --fg-radius-lg:    16px;
  --fg-sidebar-w:    220px;
}

html, body{
  background: var(--fg-bg) !important;
  color: var(--fg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Override de --bg / --text legacy en templates antiguos.
   Estos vars están definidos en cada template; mi rule gana por orden. */
:root{
  --bg: #e7ecf3;
  --bg2: #ffffff;
  --bg3: #f1f5f9;
  --text: #0f172a;
  --text2: #475569;
  --text3: #64748b;
}

/* Subir contraste del texto que usa --text2/--text3 directo (legacy) */
.text-muted, [style*="color:var(--text2)"], [style*="color:var(--text3)"]{
  color: #475569 !important;
}

/* Contenido principal — desktop con espacio del sidebar */
.main, main.main, #main, .content-main, .layout-main{
  background: var(--fg-bg);
  padding: 24px;
  min-height: 100vh;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card, .v2-card, .metric-card, .panel, .box,
.dashboard-card, .stat-card, .info-card{
  background: var(--fg-bg-elevated) !important;
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  box-shadow: var(--fg-shadow);
  padding: 18px;
  margin: 0 0 16px 0;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover, .v2-card:hover, .metric-card:hover{
  box-shadow: var(--fg-shadow-lg);
}

.card-title, .panel-title, .v2-card-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 8px 0;
}

.card-value, .metric-value, .stat-value{
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-text);
  margin: 0;
  letter-spacing: -.01em;
}

/* ── Grids responsive ──────────────────────────────────────── */
.metrics-grid, .cards-grid, .grid-cards,
.grid-3, .grid-4, .grid-auto{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* ── Botones primarios ─────────────────────────────────────── */
.btn-primary, button.primary, .btn.btn-primary,
.btn-blue, .v2-btn-primary, button[type="submit"].primary{
  background: var(--fg-primary) !important;
  border: 1px solid var(--fg-primary) !important;
  color: #fff !important;
  border-radius: var(--fg-radius-sm) !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn-primary:hover, button.primary:hover, .btn.btn-primary:hover,
.btn-blue:hover, .v2-btn-primary:hover{
  background: var(--fg-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--fg-shadow);
}
.btn-primary:active, .v2-btn-primary:active{ transform: translateY(0); }

/* Botones secundarios */
.btn-secondary, .v2-btn-secondary{
  background: var(--fg-bg-elevated) !important;
  border: 1px solid var(--fg-border) !important;
  color: var(--fg-text) !important;
  border-radius: var(--fg-radius-sm) !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
}
.btn-secondary:hover, .v2-btn-secondary:hover{
  border-color: var(--fg-primary) !important;
  color: var(--fg-primary) !important;
}

/* ── Inputs ────────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"],
select, textarea{
  background: var(--fg-bg-elevated);
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--fg-text);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--fg-primary);
  box-shadow: 0 0 0 3px var(--fg-primary-soft);
}

/* ── Tables ────────────────────────────────────────────────── */
table.v2, table.data-table, .table-clean{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--fg-bg-elevated);
  border-radius: var(--fg-radius);
  overflow: hidden;
  box-shadow: var(--fg-shadow-sm);
}
table.v2 th, table.data-table th{
  background: var(--fg-border-soft);
  color: var(--fg-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--fg-border);
}
table.v2 td, table.data-table td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--fg-border-soft);
  font-size: 14px;
}
table.v2 tbody tr:hover, table.data-table tbody tr:hover{
  background: var(--fg-border-soft);
}

/* ── Badges sidebar (notificación inbox, etc) ──────────────── */
#sidebar .ni .badge, #sidebar .badge, .sidebar-badge{
  margin-left: auto;
  background: var(--fg-danger);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar, .top-bar, header.topbar, .v2-topbar{
  background: var(--fg-bg-elevated);
  border-bottom: 1px solid var(--fg-border);
  box-shadow: var(--fg-shadow-sm);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Estado pill ───────────────────────────────────────────── */
.estado, .status-pill, .v2-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.estado.activo, .status-pill.online, .v2-pill.success{
  background: rgba(16,185,129,.12); color: var(--fg-success);
}
.estado.cortado, .status-pill.offline, .v2-pill.danger{
  background: rgba(239,68,68,.12); color: var(--fg-danger);
}
.estado.pendiente, .v2-pill.warning{
  background: rgba(245,158,11,.12); color: var(--fg-warning);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile / Tablet
   ════════════════════════════════════════════════════════════ */
@media (max-width: 860px){
  .main, main.main, #main, .content-main{
    padding: 16px;
    margin-left: 0 !important;
  }
  /* Stack vertical de cards */
  .metrics-grid, .cards-grid, .grid-cards,
  .grid-3, .grid-4, .grid-auto{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .card, .v2-card, .metric-card, .panel, .box{
    padding: 14px;
    margin-bottom: 12px;
  }
  .card-value, .metric-value{ font-size: 24px; }
  /* Tablas: scroll horizontal */
  table.v2, table.data-table, .table-clean{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* Botones más grandes para touch */
  .btn-primary, button.primary, .btn.btn-primary,
  .btn-blue, .v2-btn-primary,
  .btn-secondary, .v2-btn-secondary{
    padding: 11px 18px !important;
    width: 100%;
  }
  /* Forms: stack labels */
  .form-row, .row{ flex-direction: column !important; gap: 8px !important; }
  /* Topbar más compacta + espacio para hamburguesa */
  .topbar, .top-bar, header.topbar{
    padding: 10px 16px 10px 60px;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px){
  .card-value, .metric-value{ font-size: 22px; }
  .main, main.main, #main{ padding: 12px; }
  h1, h2{ font-size: 20px !important; }
}

/* ════════════════════════════════════════════════════════════
   ONT STATUS CHIP — selector por data-estado
   Aplicable a #ont-status-banner y cualquier elemento con
   data-estado="online|offline|no_registrada|error"
   ════════════════════════════════════════════════════════════ */
[data-estado="online"]{        border-left: 4px solid #22c55e; }
[data-estado="offline"]{       border-left: 4px solid #ef4444; }
[data-estado="no_registrada"]{ border-left: 4px solid #475569; }
[data-estado="error"]{         border-left: 4px solid #f59e0b; }

.ont-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ont-chip[data-estado="online"]{        background: rgba(34,197,94,.12);  color: #166534; }
.ont-chip[data-estado="offline"]{       background: rgba(239,68,68,.12);  color: #991b1b; }
.ont-chip[data-estado="no_registrada"]{ background: rgba(71,85,105,.12);  color: #1e293b; }
.ont-chip[data-estado="error"]{         background: rgba(245,158,11,.15); color: #92400e; }

/* ════════════════════════════════════════════════════════════
   PAGE HEADER (saludo + acciones)
   !important para escapar de reglas inline que comprimen el header
   ════════════════════════════════════════════════════════════ */
.page-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 22px 0 !important;
  width: 100%;
}
.page-title{
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--fg-text) !important;
  letter-spacing: -.01em;
  margin: 0 !important;
  line-height: 1.2;
}
.page-subtitle{
  font-size: 13px !important;
  color: var(--fg-text-muted) !important;
  margin-top: 4px;
}
/* Botones dentro del page-header — asegurar tamaño consistente y que no se aplasten */
.page-header .btn-primary,
.page-header .btn-secondary,
.page-header a.btn-primary,
.page-header a.btn-secondary{
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Page header en card (look v2) */
.v2-pageheader-card{
  background: #ffffff;
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  box-shadow: var(--fg-shadow-sm);
  padding: 16px 22px;
  margin: 18px 0 18px 0;       /* respiración arriba — separa del topbar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
/* Variante limpia (solo título + fecha, sin botones) */
.v2-pageheader-clean{
  margin-top: 22px;
}
.v2-pageheader-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.v2-pageheader-actions .btn-primary,
.v2-pageheader-actions .btn-secondary{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}

/* Estado spinning al refrescar */
.v2-pageheader-actions .btn-secondary.is-loading{
  pointer-events: none;
  opacity: .6;
}
.v2-pageheader-actions .btn-secondary.is-loading #db-refresh-icon,
#db-refresh-icon.spin{
  display: inline-block;
  animation: v2-spin 1s linear infinite;
}
@keyframes v2-spin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Botón Diagnóstico — destaca cuando hay alertas */
.v2-btn-diag{
  position: relative;
}
.v2-btn-diag.has-alerts{
  border-color: #f59e0b !important;
  background: #fef3c7 !important;
  color: #92400e !important;
}
.v2-diag-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════
   HERO DARK (saludo del día con KPIs inline + IA radar)
   ════════════════════════════════════════════════════════════ */
.v2-hero-dark{
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.v2-hero-dark::before{
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(37,99,235,.32), transparent);
  border-radius: 50%; pointer-events: none;
}
.v2-hero-inner{
  position: relative; display: flex; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap; gap: 16px;
}
.v2-hero-greet{ font-size: 13px; opacity: .7; }
.v2-hero-title{ font-size: 22px; font-weight: 700; margin: 4px 0 0; }
.v2-hero-kpis{ display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.v2-hero-kpi-label{ font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .04em; }
.v2-hero-kpi-value{ font-size: 20px; font-weight: 700; margin-top: 2px; }
.v2-hero-kpi-value.green{ color: #10b981; }
.v2-hero-kpi-value.cyan { color: #22d3ee; }
.v2-hero-kpi-value.amber{ color: #fbbf24; }
.v2-hero-kpi-value.red  { color: #ef4444; }

/* IA radar card (glassmorphism) */
.v2-ia-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 14px 16px;
  max-width: 360px;
  font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.v2-ia-card .v2-ia-label{
  font-size: 11px; opacity: .8; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.v2-ia-card ul{ margin: 6px 0 10px 0; padding: 0; list-style: none; line-height: 1.6; }
.v2-ia-card li{ display: flex; align-items: flex-start; gap: 6px; }
.v2-ia-card li::before{ content: '▸'; color: #93c5fd; flex-shrink: 0; }
.v2-ia-btn{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.v2-ia-btn:hover{ background: rgba(255,255,255,.28); }

/* ════════════════════════════════════════════════════════════
   KPI GRID + KPI CARD — clickable + responsive
   !important porque dashboard.html y otros templates tienen
   estilos inline que pisan estas reglas.
   ════════════════════════════════════════════════════════════ */
.kpi-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  margin-bottom: 22px;
}

/* La card es un <a>: bloque flex columna con espacios definidos. */
.kpi-card,
a.kpi-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px;
  min-width: 0;
  width: auto !important;
  background: var(--fg-bg-elevated) !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: var(--fg-shadow-sm);
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative;
  overflow: visible !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Apagar el ::after que pintaba la barra de color al pie de las cards viejas */
.kpi-card::after, a.kpi-card::after{ display: none !important; content: none !important; }
.kpi-card:hover,
a.kpi-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06);
  border-color: var(--fg-primary-soft);
}
.kpi-card:focus-visible,
a.kpi-card:focus-visible{
  outline: 2px solid var(--fg-primary);
  outline-offset: 2px;
}
.kpi-card:active,
a.kpi-card:active{ transform: translateY(-1px); }

/* Header de la card: icono a la izquierda, sparkline a la derecha,
   misma fila pero sin colisionar nunca con el value/label de abajo. */
.kpi-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  min-height: 36px;             /* reserva alto del icono así el value no salta */
}
.kpi-sparkline{
  flex-shrink: 0;
  width: 80px; height: 30px;
  display: block;
}

.kpi-icon{
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.kpi-icon-blue  { background: rgba(37,99,235,.12);  color: #2563eb; }
.kpi-icon-green { background: rgba(16,185,129,.12); color: #10b981; }
.kpi-icon-orange{ background: rgba(245,158,11,.15); color: #f59e0b; }
.kpi-icon-cyan  { background: rgba(6,182,212,.12);  color: #06b6d4; }
.kpi-icon-red   { background: rgba(239,68,68,.12);  color: #ef4444; }

.kpi-label{
  font-size: 12px;
  color: var(--fg-text-muted);
  font-weight: 500;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.kpi-value{
  font-size: 26px;
  font-weight: 700;
  color: var(--fg-text);
  margin: 2px 0 0 0;
  letter-spacing: -.01em;
  line-height: 1.1;
  overflow-wrap: anywhere;        /* permite cortar valores largos $XX.XXX.XXX */
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.kpi-trend{
  font-size: 11px;
  color: var(--fg-text-muted);
  margin: 4px 0 0 0;
  font-weight: 500;
  line-height: 1.4;
  word-wrap: break-word;
}
.kpi-trend.up    { color: #10b981; }
.kpi-trend.down  { color: #ef4444; }
.kpi-trend.neutral{ color: var(--fg-text-muted); }

/* KPI card con tinte rojo (conexiones cortadas / alertas) */
.kpi-card.danger{
  background: linear-gradient(135deg, #fee2e2, #fff);
  border-color: #fecaca;
}
.kpi-card.danger:hover{ border-color: #f87171; }

/* Mobile: cards full-width, sparkline más chica, valores más comprimidos */
@media (max-width: 560px){
  .kpi-grid{ gap: 14px; }
  .kpi-card{ padding: 14px; }
  .kpi-value{ font-size: 22px; }
  .kpi-sparkline{ width: 60px; height: 24px; }
}

/* ════════════════════════════════════════════════════════════
   BANNER LOGROS DEL DÍA + estilos varios
   ════════════════════════════════════════════════════════════ */
.v2-cinta-logros{
  background: linear-gradient(90deg, #f1f5f9, #f8fafc);
  border: 1px solid #cbd5e1;
  padding: 12px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: #475569;
  transition: background .2s, border-color .2s;
}
.v2-cinta-logros strong{ color: #1e293b; }
.v2-cinta-logros .resumen-item{ font-weight: 500; }
.v2-cinta-logros.good{
  background: linear-gradient(90deg, #f0fdf4, #ecfdf5);
  border-color: #a7f3d0; color: #047857;
}
.v2-cinta-logros.good strong{ color: #065f46; }
.v2-cinta-logros.warn{
  background: linear-gradient(90deg, #fffbeb, #fef3c7);
  border-color: #fde68a; color: #92400e;
}
.v2-cinta-logros.warn strong{ color: #78350f; }
.v2-cinta-logros.danger{
  background: linear-gradient(90deg, #fef2f2, #fee2e2);
  border-color: #fecaca; color: #991b1b;
}
.v2-cinta-logros.danger strong{ color: #7f1d1d; }

/* ════════════════════════════════════════════════════════════
   SECTION HEADER (Estado de Red, Facturación, etc.)
   ════════════════════════════════════════════════════════════ */
.v2-section-head{
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 10px;
}
.v2-section-head h3{
  font-size: 13px; font-weight: 600;
  color: var(--fg-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 0;
}
.v2-section-head a.v2-section-link{
  font-size: 12px; color: var(--fg-primary);
  text-decoration: none; font-weight: 500;
}
.v2-section-head a.v2-section-link:hover{ text-decoration: underline; }

.pulse-dot{
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16,185,129,.6);
  animation: v2-pulse 1.6s infinite;
  vertical-align: middle;
}
@keyframes v2-pulse{
  0%  { box-shadow: 0 0 0 0   rgba(16,185,129,.55); }
  70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
  100%{ box-shadow: 0 0 0 0    rgba(16,185,129,0); }
}

/* ════════════════════════════════════════════════════════════
   TABLAS GLOBALES — limpio y moderno
   ════════════════════════════════════════════════════════════ */
.v2-table-wrap{
  background: var(--fg-bg-elevated);
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  overflow: hidden;
  box-shadow: var(--fg-shadow-sm);
  margin-bottom: 16px;
}
.v2-table-wrap table{ margin: 0; box-shadow: none; border-radius: 0; border: 0; }

/* Aplicar a TODAS las tablas que no opten out con .raw-table */
table:not(.raw-table):not(.leaflet-control-attribution){
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--fg-bg-elevated);
  border-radius: var(--fg-radius);
  overflow: hidden;
  box-shadow: var(--fg-shadow-sm);
  font-size: 13px;
  color: var(--fg-text);
}
table:not(.raw-table) thead th,
table:not(.raw-table) > thead > tr > th{
  background: var(--fg-border-soft);
  color: var(--fg-text-muted) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--fg-border);
  border-top: none;
}
table:not(.raw-table) tbody td,
table:not(.raw-table) > tbody > tr > td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--fg-border-soft);
  border-top: none;
  border-left: none;
  border-right: none;
  background: var(--fg-bg-elevated);
  color: var(--fg-text);
}
table:not(.raw-table) tbody tr:last-child td{ border-bottom: none; }
table:not(.raw-table) tbody tr:hover td{ background: var(--fg-border-soft); }

/* ════════════════════════════════════════════════════════════
   GLOBAL OVERRIDES — unifica look v2 en todos los módulos
   Los templates legacy definen su :root con --bg:#eef2f7 y
   .topbar con gradient dark-navy. Acá normalizamos a v2.
   ════════════════════════════════════════════════════════════ */

/* Body con tono visible (no blanco puro) — cards blancas destacan */
html, body{ background: #e7ecf3 !important; }

/* Topbar oscura legacy → barra blanca con sombra suave.
   Mantiene el espacio (height:56px) y el contenido pero cambia look. */
.topbar, .top-bar, header.topbar,
.hdr, .toolbar-top, .header-bar{
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--fg-border) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.04) !important;
  color: var(--fg-text) !important;
}
/* Tipografía de items dentro del topbar */
.topbar a, .topbar span, .topbar .nav-item,
.hdr a, .hdr span,
header.topbar a, header.topbar span{
  color: var(--fg-text) !important;
}
.topbar .nav-item.active,
.hdr .nav-item.active{
  color: var(--fg-primary) !important;
  font-weight: 600;
}

/* Áreas principales: bg transparente para que el body se vea */
.main, main.main, #main,
.content, .content-main, .layout-main,
.page, .page-content,
.panel-detail, .panel-list{
  background: transparent !important;
}

/* Paneles internos a card */
.panel, .module-panel, .filter-panel, .search-panel, .toolbar,
.list-panel, .detail-panel, .info-panel,
.sub-content, .form-card{
  background: #ffffff !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius) !important;
  box-shadow: var(--fg-shadow-sm) !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
}

/* Filtros / search bar — barra blanca limpia */
.filters, .filter-bar, .search-bar,
.tb-filters, .toolbar-filters{
  background: #ffffff !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius) !important;
  padding: 14px 18px !important;
  margin: 16px 24px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--fg-shadow-sm);
}
/* Chips de filtro con look v2 */
.filter-chip, .chip{
  background: #f1f5f9 !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--fg-text-muted) !important;
  cursor: pointer;
  transition: all .15s;
}
.filter-chip:hover, .chip:hover{
  border-color: var(--fg-primary) !important;
  color: var(--fg-primary) !important;
}
.filter-chip.active, .chip.active, .chip-active{
  background: var(--fg-primary) !important;
  border-color: var(--fg-primary) !important;
  color: #ffffff !important;
}

/* Search input wrap blanco con icono */
.search-wrap{
  background: #f8fafc !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius-sm) !important;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-wrap input, input.search-input{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 6px 0 !important;
  font-size: 14px;
  flex: 1;
}

/* Tablas dentro del main: agregar margen para que se vean como cards aisladas */
.main > table, main > table,
.main > div > table:only-child{
  margin: 16px 24px !important;
}

/* ── Table-wrap / table containers a card ────────────────── */
.table-wrap, .table-container, .data-table-wrap{
  background: #ffffff !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius) !important;
  margin: 16px 24px !important;
  overflow: hidden !important;
  box-shadow: var(--fg-shadow-sm) !important;
}
.table-wrap > table, .table-container > table{
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Paginación */
.pagination{
  background: #ffffff !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius) !important;
  padding: 10px 16px !important;
  margin: 0 24px 24px 24px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

/* Toolbar adaptado (morosos, otros) */
.toolbar, .module-toolbar{
  background: #ffffff !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius) !important;
  padding: 12px 16px !important;
  margin: 16px 24px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: var(--fg-shadow-sm);
}

/* Tablas con padding interno consistente (varios templates definen
   font-size:13px;border-collapse:collapse inline — los respeta pero
   añade el chrome del wrapper) */
.main table:not(.raw-table){
  margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   MÓDULO CAJA — paneles, cajas abiertas, tabla movimientos
   ════════════════════════════════════════════════════════════ */
.v2-caja-panel{
  background: #ffffff !important;
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  box-shadow: var(--fg-shadow-sm);
  padding: 16px 20px;
  margin: 12px 16px;
}
.v2-caja-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.v2-caja-panel-title{
  font-size: 15px; font-weight: 700; color: var(--fg-text);
}
.v2-caja-panel-sub{
  font-size: 12px; color: var(--fg-text-muted); margin-left: 8px;
}
.v2-caja-link{
  font-size: 12px; color: var(--fg-primary);
  text-decoration: none; font-weight: 500;
}
.v2-caja-link:hover{ text-decoration: underline; }
.v2-caja-total{
  font-size: 20px; font-weight: 800; color: #10b981;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.v2-empty{
  text-align: center;
  padding: 22px 12px;
  color: var(--fg-text-muted);
  font-size: 13px;
}

/* Tabla de movimientos limpia */
.v2-caja-table-wrap{
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--fg-border-soft);
  border-radius: 8px;
}
table.v2-caja-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff !important;
  font-size: 13px;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
table.v2-caja-table thead th{
  background: var(--fg-border-soft) !important;
  color: var(--fg-text-muted) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--fg-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
table.v2-caja-table tbody td{
  padding: 9px 12px;
  border-bottom: 1px solid var(--fg-border-soft);
  color: var(--fg-text);
}
table.v2-caja-table tbody tr:hover td{
  background: var(--fg-border-soft);
}

/* Grid de cajas abiertas — tarjetitas por cajero/sesión (paleta azul CRM v2) */
.v2-cajas-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.v2-caja-card{
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.v2-caja-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,.08);
  border-color: #93c5fd;
}
.v2-caja-card-head{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--fg-text);
}
.v2-caja-card-cajero{ display: inline-flex; align-items: center; gap: 6px; }
.v2-caja-card-status{
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(37,99,235,.12); color: #1e40af;
  font-weight: 600;
}
.v2-caja-card-status.cerrada{ background: rgba(107,114,128,.12); color: #4b5563; }
.v2-caja-card-totals{
  display: flex; gap: 12px; margin-top: 6px;
  font-size: 11px; color: var(--fg-text-muted);
}
.v2-caja-card-totals .val{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; color: var(--fg-text);
  display: block;
  font-size: 13px;
}
.v2-caja-card{
  padding: 14px 16px !important;
  gap: 6px;
}
.v2-caja-card.cerrada{
  background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
  border-color: #e2e8f0 !important;
  opacity: .82;
}
.v2-caja-card-meta{
  font-size: 11px; color: var(--fg-text-muted);
}
.v2-caja-card-grand{
  margin-top: 6px;
  font-size: 22px; font-weight: 800; color: #2563eb;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.v2-caja-card-totals{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15,23,42,.10);
}
.v2-caja-card-totals > div{ display:flex; flex-direction:column; gap:2px; }
.v2-caja-card-totals > div > span:first-child{
  font-size: 10px; color: var(--fg-text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.v2-caja-card-totals > div > .val{
  font-size: 13px; font-weight: 700; color: var(--fg-text);
  font-family: 'JetBrains Mono', monospace;
}

/* Botones de acción de cada caja */
.v2-caja-card-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.v2-caja-act{
  background: #ffffff;
  border: 1px solid var(--fg-border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-text);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.v2-caja-act:hover{ transform: translateY(-1px); box-shadow: var(--fg-shadow-sm); }
.v2-caja-act.ingreso{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.v2-caja-act.ingreso:hover{ background:#d1fae5; }
.v2-caja-act.egreso{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.v2-caja-act.egreso:hover{ background:#fee2e2; }
.v2-caja-act.cerrar{ background:#fef3c7; border-color:#fde68a; color:#92400e; }
.v2-caja-act.cerrar:hover{ background:#fde68a; }
.v2-caja-act.ver{ background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.v2-caja-act.ver:hover{ background:#dbeafe; }

/* Detalle expandible inline por cajero */
.v2-caja-detail{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #dbeafe;
  font-size: 12px;
  color: var(--fg-text);
  animation: v2-detail-in .18s ease;
}
@keyframes v2-detail-in{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.v2-caja-detail-row{
  display: flex; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(15,23,42,.06);
}
.v2-caja-detail-row:last-child{ border-bottom: 0; }
.v2-caja-detail-row .meta{ color: var(--fg-text-muted); font-size: 11px; }
.v2-caja-detail-row .amt{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; color: var(--fg-text);
}
.v2-caja-detail-header{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: #1e40af;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px;
}
.v2-caja-detail-empty{
  text-align: center; padding: 10px; color: var(--fg-text-muted);
  font-size: 12px; font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   DRAWER CLIENTE (modal) — v2
   ════════════════════════════════════════════════════════════ */
.v2-cli-drawer{
  background: #ffffff !important;
  border-radius: 16px !important;
  overflow: hidden;
  max-width: 880px !important;
  width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

/* HERO */
.v2-cli-hero{
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}
.v2-cli-hero::after{
  content:''; position:absolute; right:-40px; top:-40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(37,99,235,.35), transparent);
  border-radius: 50%; pointer-events: none;
}
.v2-cli-close{
  position: absolute; top: 12px; right: 14px;
  background: rgba(255,255,255,.12); border: 0;
  color: #fff; font-size: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background .15s;
}
.v2-cli-close:hover{ background: rgba(255,255,255,.25); }
.v2-cli-avatar{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 22px; font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 1;
}
.v2-cli-head{ flex: 1; min-width: 0; position: relative; z-index: 1; }
.v2-cli-name{
  font-size: 20px; font-weight: 700;
  color: #fff; line-height: 1.1;
  letter-spacing: -.01em;
}
.v2-cli-meta{
  font-size: 12px; color: rgba(255,255,255,.7);
  margin-top: 4px;
  word-break: break-word;
}
.v2-cli-pills{
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
}
.v2-cli-pill{
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.v2-cli-pill.green { background: rgba(16,185,129,.20);  border-color: rgba(16,185,129,.45); }
.v2-cli-pill.red   { background: rgba(239,68,68,.20);   border-color: rgba(239,68,68,.45); }
.v2-cli-pill.amber { background: rgba(245,158,11,.22);  border-color: rgba(245,158,11,.50); }
.v2-cli-pill.gray  { background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.30); }

/* SCROLL body */
.v2-cli-drawer > *:not(.v2-cli-hero){ flex-shrink: 0; }
.v2-cli-drawer{ overflow-y: auto; }

/* STATS */
.v2-cli-stats{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 16px 22px;
  background: #f8fafc;
  border-bottom: 1px solid var(--fg-border-soft);
}
.v2-cli-stat{ min-width: 0; }
.v2-cli-stat-label{
  font-size: 10px; color: var(--fg-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 2px;
}
.v2-cli-stat-val{
  font-size: 15px; font-weight: 700; color: var(--fg-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-cli-stat-val.mono{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* SECTION wrapper */
.v2-cli-section{ padding: 14px 22px; }
.v2-cli-section-title{
  font-size: 11px; font-weight: 700;
  color: var(--fg-text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.v2-cli-section-sub{
  text-transform: none; letter-spacing: 0;
  font-weight: 500; color: var(--fg-text-muted);
  font-size: 10px; opacity: .8;
}

/* TOPOLOGÍA (cliente → ONT → NAP → OLT → MK) */
.v2-cli-topology{
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 0 8px 0;
}
.v2-topo-node{
  flex: 1;
  min-width: 110px;
  background: #ffffff;
  border: 1px solid var(--fg-border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.v2-topo-node:hover{ transform: translateY(-2px); box-shadow: var(--fg-shadow-sm); }
.v2-topo-node.missing{
  background: #f8fafc;
  border-style: dashed;
  color: var(--fg-text-muted);
}
.v2-topo-icon{ font-size: 20px; }
.v2-topo-label{
  font-size: 9px; font-weight: 700;
  color: var(--fg-text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.v2-topo-value{
  font-size: 12px; font-weight: 600;
  color: var(--fg-text);
  word-break: break-word;
  line-height: 1.2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.v2-topo-node.missing .v2-topo-value{ font-family: inherit; }
.v2-topo-arrow{
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e1;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  padding: 0 2px;
}

/* ACCIONES PRIMARIAS (Cobrar / Reconectar / Cortar) */
.v2-cli-actions-primary{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 22px 14px 22px;
}
.v2-cli-act-big{
  border: 1px solid var(--fg-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  color: var(--fg-text);
  font-family: inherit;
}
.v2-cli-act-big:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.v2-cli-act-big .ic{
  font-size: 26px;
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.v2-cli-act-big .lbl{ display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.v2-cli-act-big .lbl strong{ font-size: 15px; font-weight: 700; }
.v2-cli-act-big .lbl small{ font-size: 11px; color: var(--fg-text-muted); }
.v2-cli-act-big.cobrar      { background: linear-gradient(135deg, #dcfce7, #fff); border-color: #bbf7d0; }
.v2-cli-act-big.cobrar .ic  { background: #d1fae5; color: #047857; }
.v2-cli-act-big.cobrar strong{ color: #065f46; }
.v2-cli-act-big.reconectar    { background: linear-gradient(135deg, #eff6ff, #fff); border-color: #bfdbfe; }
.v2-cli-act-big.reconectar .ic{ background: #dbeafe; color: #1e40af; }
.v2-cli-act-big.reconectar strong{ color: #1e3a8a; }
.v2-cli-act-big.cortar      { background: linear-gradient(135deg, #fee2e2, #fff); border-color: #fecaca; }
.v2-cli-act-big.cortar .ic  { background: #fecaca; color: #991b1b; }
.v2-cli-act-big.cortar strong{ color: #991b1b; }

/* ACCIONES SECUNDARIAS (mini buttons) */
.v2-cli-actions-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 0 22px 14px 22px;
}
.v2-cli-act-mini{
  background: #fff;
  border: 1px solid var(--fg-border);
  border-radius: 10px;
  padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  font-size: 11px; font-weight: 600;
  color: var(--fg-text);
  text-decoration: none !important;
  transition: all .15s;
  font-family: inherit;
}
.v2-cli-act-mini:hover{
  border-color: var(--fg-primary);
  color: var(--fg-primary);
  transform: translateY(-1px);
  box-shadow: var(--fg-shadow-sm);
}
.v2-cli-act-mini .ic{ font-size: 18px; }

/* COLLAPSIBLES (ONT / NAP) */
.v2-cli-collapse{
  margin: 0 22px 10px 22px;
  background: #ffffff;
  border: 1px solid var(--fg-border);
  border-radius: 10px;
  overflow: hidden;
}
.v2-cli-collapse > summary{
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-text);
  display: flex; align-items: center; justify-content: space-between;
  background: #f8fafc;
}
.v2-cli-collapse > summary::-webkit-details-marker{ display: none; }
.v2-cli-collapse > summary::after{
  content: '▾';
  color: var(--fg-text-muted);
  transition: transform .2s;
}
.v2-cli-collapse[open] > summary::after{ transform: rotate(180deg); }
.v2-cli-collapse-body{ padding: 12px 14px; }
.v2-cli-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  font-size: 12px;
}
.v2-cli-row-label{ color: var(--fg-text-muted); }
.v2-cli-row-val{ font-weight: 600; color: var(--fg-text); }
.v2-cli-row-val.mono{ font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.v2-cli-input-row{
  display: flex; gap: 6px; margin: 8px 0;
}
.v2-cli-input-row input,
.v2-cli-collapse .v2-cli-select{
  flex: 1;
  background: #fff !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius-sm) !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-family: 'JetBrains Mono', monospace;
  color: var(--fg-text);
  outline: none;
}
.v2-cli-input-row input:focus,
.v2-cli-collapse .v2-cli-select:focus{
  border-color: var(--fg-primary) !important;
  box-shadow: 0 0 0 3px var(--fg-primary-soft) !important;
}
.v2-cli-input-btn{
  padding: 8px 14px;
  background: var(--fg-primary);
  color: #fff;
  border: 0;
  border-radius: var(--fg-radius-sm);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.v2-cli-input-btn:hover{ background: var(--fg-primary-hover); }
.v2-cli-input-btn.full{ width: 100%; margin-top: 6px; }
.v2-cli-mini-link{
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-text-muted);
  text-decoration: none;
}
.v2-cli-mini-link:hover{ color: var(--fg-primary); text-decoration: underline; }

/* FOOTER */
.v2-cli-footer{
  padding: 14px 22px;
  background: #f8fafc;
  border-top: 1px solid var(--fg-border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.v2-cli-foot{
  flex: 1;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-text);
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  min-width: 120px;
}
.v2-cli-foot:hover{ border-color: var(--fg-primary); color: var(--fg-primary); }
.v2-cli-foot.primary{
  background: var(--fg-primary);
  color: #fff !important;
  border-color: var(--fg-primary);
  flex: 2;
}
.v2-cli-foot.primary:hover{ background: var(--fg-primary-hover); color: #fff !important; }
.v2-cli-foot.danger:hover{ border-color: #ef4444; color: #ef4444; }

/* Responsive (mobile) */
@media (max-width: 720px){
  .v2-cli-stats{ grid-template-columns: repeat(2, 1fr); }
  .v2-cli-actions-primary{ grid-template-columns: 1fr; }
  .v2-cli-actions-grid{ grid-template-columns: repeat(3, 1fr); }
  .v2-cli-topology{ flex-direction: column; }
  .v2-topo-arrow{ transform: rotate(90deg); padding: 4px 0; }
}

/* Botón eliminar movimiento en tabla */
.v2-mov-del{
  background: none;
  border: 0;
  color: #ef4444;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .15s;
}
.v2-mov-del:hover{ background: #fee2e2; }

/* h1 dentro del topbar legacy ahora se ve sobre fondo blanco */
.topbar h1, .hdr h1, header.topbar h1,
.topbar > h1, .hdr > h1{
  color: var(--fg-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Botones del topbar legacy ajustados */
.topbar .btn, .topbar button.btn,
.hdr .btn, .hdr button{
  background: #f1f5f9 !important;
  color: var(--fg-text) !important;
  border: 1px solid var(--fg-border) !important;
}
.topbar .btn.btn-teal, .topbar .btn-primary,
.topbar .btn.btn-blue,
.hdr .btn-primary{
  background: var(--fg-primary) !important;
  color: #fff !important;
  border-color: var(--fg-primary) !important;
}
.topbar .btn-ghost, .hdr .btn-ghost{
  background: transparent !important;
  border-color: transparent !important;
  color: var(--fg-text-muted) !important;
}

/* Toolbar de filtros con look más liviano (sin sombra) */
.toolbar, .filters-bar{
  box-shadow: none !important;
  padding: 12px 16px !important;
}

/* Container universal del módulo */
.module-container, .wrap-module, .v2-module{
  padding: 18px 24px;
  max-width: 100%;
}

/* ────────────────────────────────────────────────────────────
   Header de página universal (no requiere clase específica):
   primer h1/h2 en main + subtítulo + acciones a la derecha.
   ──────────────────────────────────────────────────────────── */
.main > h1, main > h1,
.main > h2:first-of-type, main > h2:first-of-type{
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fg-text) !important;
  margin: 18px 24px 8px 24px !important;
  letter-spacing: -.01em !important;
}

/* ────────────────────────────────────────────────────────────
   Forms / inputs heredan look v2 (ya definido arriba, lo subimos
   en specificity con !important para escapar de inline templates).
   ──────────────────────────────────────────────────────────── */
.main input[type="text"], .main input[type="number"],
.main input[type="search"], .main input[type="tel"],
.main select, .main textarea,
main input[type="text"], main input[type="number"],
main input[type="search"], main input[type="tel"],
main select, main textarea{
  background: #fff !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius-sm) !important;
  color: var(--fg-text) !important;
}
.main input:focus, .main select:focus, .main textarea:focus,
main input:focus, main select:focus, main textarea:focus{
  border-color: var(--fg-primary) !important;
  box-shadow: 0 0 0 3px var(--fg-primary-soft) !important;
}

/* Botones de acción que tienen "btn" genérico → look azul v2 */
.btn.primary, .btn-primary, button.primary,
button.btn-blue, .btn-blue{
  background: var(--fg-primary) !important;
  border-color: var(--fg-primary) !important;
  color: #fff !important;
  border-radius: var(--fg-radius-sm) !important;
}
.btn.primary:hover, .btn-primary:hover, button.primary:hover{
  background: var(--fg-primary-hover) !important;
}

/* ────────────────────────────────────────────────────────────
   Container "content" que muchas plantillas usan dentro del
   módulo: padding generoso + bg transparente para layering.
   ──────────────────────────────────────────────────────────── */
.content{
  padding: 18px 24px !important;
}

/* Si una tabla está fuera de un wrapper, agregarle margin para que respire */
.main > table, main > table{
  margin: 14px 24px !important;
}

/* ── Modo print (recibos / facturas) — restaurar fondo blanco ─ */
@media print{
  body{ background: #fff !important; }
  #sidebar, #sb-hamburger, .topbar{ display: none !important; }
  .main{ margin-left: 0 !important; padding: 0 !important; }
  .card, .v2-card{ box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FG V2 — RESPONSIVE GLOBAL (2026-05-26)
   Reglas universales para que TODAS las páginas se adapten a cualquier pantalla.
   Aplicado a 72+ templates que cargan fg_v2_theme.css.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Box-sizing border-box global — padding y border NO se suman al width */
*, *::before, *::after { box-sizing: border-box !important; }

/* 2. HTML/Body sin márgenes raros */
html, body { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; }

/* 3. .main responsive (todos los templates lo usan con margin-left:220px) */
.main, main.main, #main, body > .main, body > main, body > #main, .layout-main, .content-main {
  margin-left: 220px !important;
  width: calc(100vw - 220px) !important;
  max-width: calc(100vw - 220px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* 4. Anular containers viejos que centraban con max-width fijo */
.container { max-width: none !important; width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }

/* 5. Wizards / paneles internos sin centrado en columna estrecha */
.panel, .wizard-body, .content, .step-content, .ajustes-content {
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* 6. Grids comunes adaptativos por defecto (auto-fit) */
.fgrid, .fgrid3, .res-grid, .wifi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

/* 7. MOBILE — sidebar oculto, main full width */
@media (max-width: 860px) {
  .main, main.main, #main, body > .main, body > main, body > #main, .layout-main, .content-main {
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-top: 56px !important;
  }
  /* Grids colapsan a 1 columna en mobile */
  .fgrid, .fgrid3, .res-grid, .wifi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 8. Inputs/selects/textareas — ancho completo del contenedor (no se salen) */
input.fi, select.fs, textarea.ft, input.form-input, select.form-select, textarea.form-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 9. Tablas dentro de cards — scroll horizontal si no entran */
table { max-width: 100% !important; }
.table-wrap, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* 10. Cards/cards-grid — usar todo el ancho disponible */
.card { box-sizing: border-box !important; }

/* RESPONSIVE GLOBAL END */

/* ═══════════════════════════════════════════════════════════════
   FG V2 — TOPBAR TRANSLÚCIDO + STICKY (2026-05-26)
   El topbar superior (reloj, status, avatar, bell) ya no se nota fuerte
   al hacer scroll — semi-transparente con blur.
   ═══════════════════════════════════════════════════════════════ */

/* Aplica a todos los topbars conocidos en el CRM */
.topbar, header.topbar, .top-bar, .dashboard-topbar {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* Cuando hay scroll, agregar sombra sutil */
.topbar.scrolled, header.topbar.scrolled {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

/* Para topbars OSCUROS (dashboard, agente, etc.) */
.topbar-dark, .dashboard-topbar {
  background: rgba(15, 23, 42, 0.72) !important;
  color: #e2e8f0 !important;
}

/* TOPBAR TRANSLÚCIDO END */

/* ═══════════════════════════════════════════════════════════════
   FG V2 — NET SUMMARY BAR PRO (ficha cliente · header de red)
   ═══════════════════════════════════════════════════════════════ */

.net-summary-pro {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(167, 139, 250, 0.16) 0%, transparent 50%),
    linear-gradient(135deg, #0b1220 0%, #1e293b 60%, #0f172a 100%);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
  color: #fff;
  font-size: 13px;
  border: 1px solid rgba(34, 211, 238, 0.12);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.20),
    0 8px 24px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.net-summary-pro:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 14px 32px rgba(34, 211, 238, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* línea brillante sutil arriba */
.net-summary-pro::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.6), transparent);
}

/* Dot PPPoE con pulse cuando está online (verde) */
.net-summary-pro #ns-pppoe-dot {
  position: relative;
  box-shadow: 0 0 0 0 currentColor;
  animation: ns-pulse 2.4s infinite;
}
@keyframes ns-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

/* Mejorar tipografía de números */
.net-summary-pro #ns-rx, .net-summary-pro #ns-tx, .net-summary-pro #ns-devices, .net-summary-pro #ns-ont-rx, .net-summary-pro #ns-uso-pct {
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
  letter-spacing: -0.3px;
}

/* Barra de uso del plan con glow */
.net-summary-pro #ns-uso-bar {
  background: linear-gradient(90deg, #22d3ee, #06b6d4) !important;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}

/* Apps DPI chips con estilo */
.net-summary-pro #ns-apps-container > * {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Mobile: stack vertical */
@media (max-width: 700px) {
  .net-summary-pro > div { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
}

/* NET SUMMARY BAR PRO END */