/* ==========================================================================
   TIGO VENTAS — COMPONENTES (2026)

   Blanco translúcido en todo. Sin degradados, sin bloques navy.
   El azul #001FB4 solo en cifras, acciones y acentos.
   Ver tigo-theme.css.
   ========================================================================== */

/* ==========================================================================
   1. BARRA SUPERIOR — blanca translúcida, logo AZUL, texto oscuro
      (igual que el navbar de tigo.com.pa)
   ========================================================================== */
/* MOBILE FIRST: las reglas base son las del celular (360 px). Desde 481 px se
   recuperan los textos de los botones (ver el @media al final de esta sección).
   Antes, en celular, logo + "Ventas" + "Portal" + nombre + "Salir" no cabían y
   se montaban unos sobre otros. */
.top-nav {
  flex-shrink: 0;
  min-height: var(--nav-top-h);
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  color: var(--ink);
  background-color: var(--glass-bar);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--edge-hair);
  box-shadow: var(--lip);
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}

/* Superficie clara -> logo AZUL (assets/tigo_logo.svg) */
.brand-logo-img {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.brand-title span {
  font-size: 12px;
  font-weight: 800;
  color: var(--tigo-blue);
  background-color: rgba(0, 31, 180, 0.08);
  border: 1px solid rgba(0, 31, 180, 0.18);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.top-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

/* En celular "Portal" y "Salir" son botones de icono de 36 px (área táctil cómoda);
   el texto sigue en el HTML y en el title, así que el lector de pantalla lo anuncia. */
.nav-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  color: var(--tigo-blue);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--edge-line);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.nav-chip:hover { background-color: #FFFFFF; }

/* Despliegue independiente: no hay portal al lado, el enlace sobra */
body[data-standalone="1"] #nav-portal-link { display: none; }
.nav-chip:active { transform: scale(0.96); }
.nav-chip svg { stroke: currentColor; flex-shrink: 0; width: 17px; height: 17px; }

/* El nombre es lo único que cede espacio: se recorta con "…" en vez de empujar a los botones */
.user-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  height: 36px;
  padding: 0 11px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;

  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--edge-line);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}

.user-status-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--tigo-green);
  border: 1px solid rgba(4, 106, 56, 0.35);
}

/* Desde 481 px (celular grande en horizontal, tableta, laptop) vuelven los textos */
@media (min-width: 481px) {
  .top-nav {
    padding: 10px 18px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    gap: 12px;
  }
  .brand-badge { gap: 10px; }
  .brand-logo-img { height: 30px; }
  .brand-title span { font-size: 13px; padding: 3px 11px; }
  .top-nav-actions { gap: 8px; }
  .nav-chip {
    width: auto;
    height: auto;
    gap: 6px;
    padding: 7px 13px;
    font-size: 12.5px;
  }
  .nav-chip svg { width: 14px; height: 14px; }
  .user-status-pill {
    gap: 8px;
    max-width: 42vw;
    height: auto;
    padding: 7px 14px;
    font-size: 12.5px;
  }
}

/* ==========================================================================
   2. ÁREA CENTRAL — la única región con scroll
   ========================================================================== */
.main-viewport {
  flex: 1 1 auto;
  min-height: 0;              /* sin esto el flex no permite hacer scroll */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 16px 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(33, 47, 64, 0.20) transparent;
}

.main-viewport::-webkit-scrollbar { width: 8px; }
.main-viewport::-webkit-scrollbar-thumb {
  background-color: rgba(33, 47, 64, 0.15);
  border-radius: var(--radius-full);
}
.main-viewport::-webkit-scrollbar-thumb:hover { background-color: rgba(33, 47, 64, 0.26); }

@media (min-width: 768px) {
  .main-viewport { padding: 22px 26px 30px; }
}

.view-section { display: none; }

.view-section.active {
  display: block;
  animation: viewFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 900px) {
  .dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 22px;
    align-items: start;
  }
}

.dashboard-col { min-width: 0; }

/* ==========================================================================
   3. SUPERFICIES
   ========================================================================== */
.card {
  padding: 18px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--glass-panel);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 1px solid var(--edge);
  box-shadow: var(--lip), var(--shadow-sm);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.card-subtitle {
  margin: 4px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.view-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.link-action {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--tigo-blue);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.link-action:hover { color: var(--tigo-cyan-ink); }

/* ==========================================================================
   4. SALUDO — tarjeta clara, acento azul. Sin bloque navy.
   ========================================================================== */
.hero-card {
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);

  color: var(--ink);
  background-color: var(--glass-panel-soft);
  -webkit-backdrop-filter: var(--blur-lg);
  backdrop-filter: var(--blur-lg);
  border: 1px solid var(--edge);
  box-shadow: var(--lip), var(--shadow-sm);
}

.hero-greeting {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--tigo-blue);
}

.hero-name {
  margin-top: 2px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-pda-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;

  color: var(--ink-soft);
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--edge-line);
}

.banner-corp {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;

  color: var(--info-ink);
  background-color: var(--info-bg);
  border: 1px solid var(--info-edge);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
}

/* ==========================================================================
   5. ESCÁNER
   ========================================================================== */
.scanner-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #0B1220;
  border: 1px solid var(--edge-line);
}

#camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scanner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Cuatro esquinas estáticas. Sin línea animada subiendo y bajando. */
.scanner-frame {
  position: relative;
  width: 76%;
  height: 54%;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(11, 18, 32, 0.5);
}

.scanner-corners {
  position: absolute;
  inset: 0;
}

.scanner-frame::before,
.scanner-frame::after,
.scanner-corners::before,
.scanner-corners::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--tigo-cyan);
  border-radius: var(--radius-xs);
}

.scanner-frame::before   { top: 0;    left: 0;  border-right: none; border-bottom: none; }
.scanner-frame::after    { bottom: 0; right: 0; border-left: none;  border-top: none; }
.scanner-corners::before { top: 0;    right: 0; border-left: none;  border-bottom: none; }
.scanner-corners::after  { bottom: 0; left: 0;  border-right: none; border-top: none; }

.scanner-hint {
  margin-top: 14px;
  max-width: 84%;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;

  color: #FFFFFF;
  background-color: rgba(11, 18, 32, 0.62);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.scanner-controls { display: flex; gap: 8px; }

/* Estado activo de la linterna */
.btn-torch-on {
  color: var(--warn-ink) !important;
  background-color: var(--warn-bg) !important;
  border-color: var(--warn-edge) !important;
}

/* --------------------------------------------------------------------------
   Zoom — acercar el código sin acercar el teléfono
   -------------------------------------------------------------------------- */
.zoom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--edge);
}

.zoom-step {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--edge-line);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: var(--tigo-blue);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.zoom-step:hover { background-color: #FFFFFF; }
.zoom-step:active { transform: scale(0.9); }

.zoom-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-full);
  background-color: rgba(33, 47, 64, 0.16);
  outline: none;
  cursor: pointer;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: var(--tigo-blue);
  border: 2px solid #FFFFFF;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.zoom-slider::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: var(--tigo-blue);
  border: 2px solid #FFFFFF;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.zoom-value {
  flex-shrink: 0;
  min-width: 38px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Consejo tras varios segundos sin lectura */
.scan-tip {
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--warn-ink);
  background-color: var(--warn-bg);
  border: 1px solid var(--warn-edge);
}

.scan-tip b { font-weight: 850; }

/* Control segmentado (SIM / ICC-IMEI) */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radius-full);
  background-color: rgba(33, 47, 64, 0.05);
  border: 1px solid var(--edge-hair);
  flex-shrink: 0;
}

.segmented-btn {
  padding: 6px 13px;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.segmented-btn:hover { color: var(--tigo-blue); }

.segmented-btn.active {
  color: #FFFFFF;
  background-color: var(--tigo-blue);
}

.manual-box {
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background-color: var(--glass-sunken);
  border: 1px solid var(--edge-hair);
}

/* ==========================================================================
   6. KPIs
   ========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
}

.months-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
}

@media (max-width: 768px) {
  .months-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.months-kpi-grid .kpi-card.highlight {
  grid-column: span 1;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 248, 255, 0.75) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 16px -2px rgba(0, 31, 180, 0.05), inset 0 1px 0 #FFFFFF;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

@media (hover: hover) {
  .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -2px rgba(0, 31, 180, 0.10), inset 0 1px 0 #FFFFFF;
  }
}

/* Destacada: Vidrio de alta definición con luz perimetral y acento Tigo */
.kpi-card.highlight {
  grid-column: span 2;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 246, 255, 0.90) 100%);
  border: 1px solid rgba(0, 31, 180, 0.18);
  box-shadow: 0 8px 24px -4px rgba(0, 31, 180, 0.09), inset 0 1px 0 #FFFFFF;
}

.kpi-badge {
  display: inline-block;
  width: fit-content;
  margin-bottom: 8px;
  padding: 3.5px 9px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  color: var(--ink-soft);
  background-color: rgba(33, 47, 64, 0.06);
  border: 1px solid var(--edge-hair);
}

.kpi-badge.tone-info { color: var(--info-ink); background-color: var(--info-bg); border-color: var(--info-edge); }
.kpi-badge.tone-warn { color: var(--warn-ink); background-color: var(--warn-bg); border-color: var(--warn-edge); }
.kpi-badge.tone-ok   { color: var(--ok-ink);   background-color: var(--ok-bg);   border-color: var(--ok-edge); }

.kpi-card.highlight .kpi-badge {
  color: var(--tigo-blue);
  background-color: rgba(0, 31, 180, 0.08);
  border-color: rgba(0, 31, 180, 0.20);
}

/* Leyenda de meses: M0/M1/M2 no se entienden solos */
.mes-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.mes-leyenda-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  color: var(--ink-soft);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--edge-line);
}

.mes-leyenda-item b {
  font-weight: 850;
  color: var(--tigo-blue);
  font-variant-numeric: tabular-nums;
}

.kpi-value {
  font-size: 23px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--tigo-blue);
  font-variant-numeric: tabular-nums;
}

.kpi-value.value-sm { font-size: 17px; color: var(--ink); }

.kpi-card.highlight .kpi-value { font-size: 34px; }

.kpi-label {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.kpi-subtext {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
}

/* Compatibilidad y estilos de alta definición para Hero KPI y tarjetas */
.kpi-hero-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--glass-panel-strong);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 1px solid rgba(0, 31, 180, 0.22);
  box-shadow: var(--lip), var(--shadow-md);
  margin-bottom: 14px;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.kpi-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lip), var(--shadow-lg);
}

.kpi-hero-label {
  display: inline-block;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tigo-blue);
  background-color: rgba(0, 31, 180, 0.08);
  border: 1px solid rgba(0, 31, 180, 0.20);
}

.kpi-hero-val {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tigo-blue);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 4px 0;
}

.kpi-hero-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.kpi-hero-corte {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 750;
  color: var(--ink-faint);
}

.kpi-val {
  font-size: 23px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--tigo-blue);
  font-variant-numeric: tabular-nums;
}

.kpi-sub {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
}

/* ==========================================================================
   7. FORMULARIOS
   ========================================================================== */
.form-group { margin-bottom: 13px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--ink);
}

.form-hint {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;      /* iOS ignora user-scalable=no: bajo 16px hace zoom */
  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--edge-line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.form-control::placeholder { color: var(--ink-faint); }
.form-control:hover { border-color: rgba(33, 47, 64, 0.28); }

.form-control:focus {
  background-color: #FFFFFF;
  border-color: var(--tigo-blue);
  box-shadow: 0 0 0 3.5px rgba(0, 31, 180, 0.14);
}

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354637A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

input[type="file"].form-control {
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ==========================================================================
   8. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:active { transform: scale(0.975); }
.btn svg { stroke: currentColor; flex-shrink: 0; }

.btn-primary {
  color: #FFFFFF;
  background-color: var(--tigo-blue);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover { background-color: var(--tigo-blue-deep); }

/* Cian sólido con texto azul: el botón "Ver más" del sitio oficial */
.btn-accent {
  color: var(--tigo-blue-deep);
  background-color: var(--tigo-cyan);
  box-shadow: var(--shadow-sm);
}

.btn-accent:hover { background-color: #2ED2FF; }

.btn-secondary {
  color: var(--tigo-blue);
  background-color: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border-color: var(--edge);
  box-shadow: var(--lip), var(--shadow-sm);
}

.btn-secondary:hover { background-color: #FFFFFF; }

.btn-ghost {
  color: var(--ink-soft);
  background: none;
  border-color: var(--edge-line);
}

.btn-ghost:hover { color: var(--tigo-blue); background-color: rgba(255, 255, 255, 0.6); }

.btn-danger {
  color: var(--bad-ink);
  background-color: var(--bad-bg);
  border-color: var(--bad-edge);
}

.btn-danger:hover {
  color: #FFFFFF;
  background-color: var(--tigo-magenta);
  border-color: transparent;
}

.btn-sm { width: auto; padding: 7px 13px; font-size: 12px; border-radius: var(--radius-full); }
.btn-auto { width: auto; }
.btn-stack { margin-bottom: 9px; }

/* ==========================================================================
   9. LISTA DE SIMCARDS
   El estado lo marca el INCENTIVO, no que exista un rango de recarga:
   "<$3" significa que recargó por debajo del mínimo y no califica.
   ========================================================================== */
.sim-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sim-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 17px;
  border-radius: var(--radius-sm);

  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--edge);
  box-shadow: var(--lip), var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}

@media (hover: hover) {
  .sim-item:hover { box-shadow: var(--lip), var(--shadow-md); }
}

/* Riel de estado a la izquierda */
.sim-item::before {
  content: '';
  position: absolute;
  top: 10px; bottom: 10px; left: 7px;
  width: 3px;
  border-radius: var(--radius-full);
  background-color: var(--idle-edge);
}

.sim-item.state-ok::before   { background-color: var(--ok-edge); }
.sim-item.state-warn::before { background-color: var(--warn-edge); }
.sim-item.state-info::before { background-color: #0084d6; }

.sim-item-main { flex: 1 1 auto; min-width: 0; }

.sim-id {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.sim-number {
  font-family: 'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  word-break: break-all;
}

.sim-number .mask {
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

/* Línea de datos: fecha · operación · recarga · línea. Todo texto. */
.sim-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.sim-meta-item { white-space: nowrap; }

/* Separador "·" generado por CSS: no ensucia el HTML */
.sim-meta-item + .sim-meta-item::before {
  content: '·';
  margin: 0 7px;
  color: var(--ink-faint);
}

.sim-recarga b {
  font-weight: 800;
  color: var(--ink);
}

.sim-recarga-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Insignias de Recarga Intuitivas */
.recarga-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 9.5px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.recarga-pill .pill-icon { font-size: 12px; line-height: 1; }
.recarga-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }

.recarga-pill.pill-success {
  color: var(--ok-ink);
  background-color: var(--ok-bg);
  border: 1px solid var(--ok-edge);
}

.recarga-pill.pill-info {
  color: var(--tigo-blue);
  background-color: rgba(0, 31, 180, 0.08);
  border: 1px solid rgba(0, 31, 180, 0.22);
}

.recarga-pill.pill-warn {
  color: var(--warn-ink);
  background-color: var(--warn-bg);
  border: 1px solid var(--warn-edge);
}

.recarga-pill.pill-premium {
  color: #6b21a8;
  background-color: #f3e8ff;
  border: 1px solid #d8b4fe;
}

.recarga-pill.pill-none {
  color: var(--ink-faint);
  background-color: rgba(33, 47, 64, 0.05);
  border: 1px solid var(--edge-hair);
}

/* Teléfono enmascarado protegido */
.sim-phone-masked {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-lte {
  color: var(--info-ink);
  background-color: var(--info-bg);
  border: 1px solid var(--info-edge);
}

.tag-porta {
  color: var(--bad-ink);
  background-color: var(--bad-bg);
  border: 1px solid var(--bad-edge);
}

/* Cohortes de Mes de Liquidación */
.tag-mes-m0 {
  color: #047857;
  background-color: #d1fae5;
  border: 1px solid #6ee7b7;
  font-variant-numeric: tabular-nums;
}

.tag-mes-m1 {
  color: var(--tigo-blue);
  background-color: rgba(0, 31, 180, 0.08);
  border: 1px solid rgba(0, 31, 180, 0.22);
  font-variant-numeric: tabular-nums;
}

.tag-mes-m2 {
  color: var(--warn-ink);
  background-color: var(--warn-bg);
  border: 1px solid var(--warn-edge);
  font-variant-numeric: tabular-nums;
}

.tag-mes {
  color: var(--tigo-blue);
  background-color: rgba(0, 31, 180, 0.07);
  border: 1px solid rgba(0, 31, 180, 0.2);
  font-variant-numeric: tabular-nums;
}

/* Lado derecho: el monto y por qué es ese monto */
.sim-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
  text-align: right;
}

.sim-amount {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.sim-item.state-ok .sim-amount { color: var(--ok-ink); }

.sim-reason {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--idle-ink);
}

.sim-item.state-ok .sim-reason   { color: var(--ok-ink); }
.sim-item.state-warn .sim-reason { color: var(--warn-ink); }
.sim-item.state-info .sim-reason { color: #0084d6; }

/* Estado vacío */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 20px;
  text-align: center;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px dashed var(--edge-line);
}

.empty-state svg { width: 30px; height: 30px; stroke: var(--ink-faint); }

.empty-state-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

.empty-state-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ==========================================================================
   10. PAGOS DE VALES
   ========================================================================== */
.pago-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 14px 17px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);

  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--edge);
  box-shadow: var(--lip), var(--shadow-sm);
}

.pago-item::before {
  content: '';
  position: absolute;
  top: 12px; bottom: 12px; left: 7px;
  width: 3px;
  border-radius: var(--radius-full);
  background-color: var(--warn-edge);
}

.pago-item.is-received::before { background-color: var(--ok-edge); }

.pago-item-main { min-width: 0; }

.pago-date {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pago-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.pago-estado {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--warn-ink);
}

.pago-item.is-received .pago-estado { color: var(--ok-ink); }

.pago-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex-shrink: 0;
}

.pago-amount {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tigo-blue);
}

/* ==========================================================================
   11. PERFIL
   ========================================================================== */
.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 900;

  color: #FFFFFF;
  background-color: var(--tigo-blue);
}

.profile-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.profile-id {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.info-panel {
  padding: 13px 15px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background-color: var(--glass-sunken);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--edge-hair);
}

.info-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.info-value {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.quick-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 14px;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  font-family: inherit;

  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--edge);
  box-shadow: var(--lip), var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.quick-tile:hover { transform: translateY(-2px); box-shadow: var(--lip), var(--shadow-md); }
.quick-tile:active { transform: scale(0.98); }

.quick-tile svg {
  width: 19px;
  height: 19px;
  stroke: var(--tigo-blue);
  stroke-width: 2.2;
}

.quick-tile-label {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.quick-tile-sub {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* ==========================================================================
   12. BARRA INFERIOR — blanca translúcida, anclada.
       El contenido pasa desenfocado por debajo: ahí se ve el vidrio.
   ========================================================================== */
.bottom-nav {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: var(--nav-bottom-h);
  padding-bottom: var(--safe-bottom);
  box-sizing: content-box;

  background-color: var(--glass-bar);
  -webkit-backdrop-filter: var(--blur-lg);
  backdrop-filter: var(--blur-lg);
  border-top: 1px solid var(--edge-hair);
  box-shadow: var(--lip);
}

.nav-item {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--nav-bottom-h);
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color var(--transition-fast);
}

.nav-item svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  transition: transform var(--transition-fast);
}

.nav-item:active svg { transform: scale(0.88); }
.nav-item.active { color: var(--tigo-blue); }

.nav-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 3px;
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  background-color: var(--tigo-blue);
  transform: translateX(-50%);
  transition: width var(--transition-smooth);
}

.nav-item.active::after { width: 34px; }

/* Login y registro: sin sesión no hay a dónde navegar */
.app-container.is-auth-view .bottom-nav,
.app-container.is-auth-view .user-status-pill { display: none; }

/* ==========================================================================
   13. TOASTS
   ========================================================================== */
.toast-container {
  position: absolute;
  top: calc(var(--nav-top-h) + env(safe-area-inset-top, 0px) + 10px);
  left: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 460px;
  width: fit-content;
  padding: 11px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
  pointer-events: auto;

  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 1px solid transparent;
  box-shadow: var(--lip), var(--shadow-lg);
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: toastSlide 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Vidrio claro teñido: legible y coherente con el resto */
.toast-success { color: var(--ok-ink);   background-color: rgba(232, 255, 240, 0.92); border-color: var(--ok-edge); }
.toast-error   { color: var(--bad-ink);  background-color: rgba(255, 235, 242, 0.92); border-color: var(--bad-edge); }
.toast-warning { color: var(--warn-ink); background-color: rgba(255, 248, 230, 0.92); border-color: var(--warn-edge); }
.toast-info    { color: var(--tigo-blue); background-color: rgba(234, 240, 255, 0.92); border-color: rgba(0, 31, 180, 0.22); }

@keyframes toastSlide {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   14. VISTAS CENTRADAS (login, perfil, pagos)
   ========================================================================== */
.view-narrow {
  max-width: 620px;
  margin: 0 auto;
}

/* No se usa `min-height: 100%` porque el padre no tiene altura explícita
   y el porcentaje se resolvería como `auto`.
   En estas vistas la barra inferior está oculta (.is-auth-view). */
.view-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  min-height: calc(100vh - var(--nav-top-h) - 62px);
  min-height: calc(100dvh - var(--nav-top-h) - 62px);
}

.login-card {
  width: 100%;
  max-width: 430px;
  padding: 30px 26px;
  text-align: center;
}

.login-logo {
  height: 46px;
  width: auto;
  margin-bottom: 14px;
}

/* ==========================================================================
   15. PANEL DE ADMINISTRACIÓN Y TRAZABILIDAD FORENSE (CAJA NEGRA)
   ========================================================================== */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius-full);
  background-color: rgba(33, 47, 64, 0.06);
  border: 1px solid var(--edge-hair);
  margin-bottom: 16px;
}

.admin-tab-btn {
  padding: 7px 16px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.admin-tab-btn:hover { color: var(--tigo-blue); }

.admin-tab-btn.active {
  color: #FFFFFF;
  background-color: var(--tigo-blue);
  box-shadow: var(--shadow-sm);
}

.admin-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.admin-search-bar .form-control {
  padding: 8px 12px;
  font-size: 13px;
}

.admin-table-container {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--edge-line);
  box-shadow: var(--lip), var(--shadow-sm);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.admin-table th {
  padding: 10px 12px;
  font-weight: 800;
  color: var(--ink);
  background-color: rgba(238, 243, 251, 0.85);
  border-bottom: 1px solid var(--edge-line);
  white-space: nowrap;
}

.admin-table td {
  padding: 10px 12px;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(33, 47, 64, 0.07);
  vertical-align: middle;
}

.admin-table tbody tr:hover td {
  background-color: rgba(0, 31, 180, 0.03);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-badge.status-a {
  color: var(--ok-ink);
  background-color: var(--ok-bg);
  border: 1px solid var(--ok-edge);
}

.status-badge.status-p {
  color: var(--warn-ink);
  background-color: var(--warn-bg);
  border: 1px solid var(--warn-edge);
}

.status-badge.status-i {
  color: var(--bad-ink);
  background-color: var(--bad-bg);
  border: 1px solid var(--bad-edge);
}

.btn-action-sm {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 750;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edge-line);
  background-color: #FFFFFF;
  color: var(--tigo-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.btn-action-sm:hover {
  background-color: var(--tigo-blue);
  color: #FFFFFF;
  border-color: var(--tigo-blue);
}

/* Modales */
.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
  animation: viewFadeIn 0.25s ease both;
}

.modal-glass {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 1px solid var(--edge-line);
  box-shadow: var(--lip), var(--shadow-lg);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge-line);
}

.modal-title {
  font-size: 16px;
  font-weight: 850;
  color: var(--ink);
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--ink-soft);
}

/* Visor de Auditoría Forense */
.audit-log-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--edge-line);
  margin-bottom: 8px;
  font-size: 11.5px;
}

.audit-log-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.audit-log-action {
  font-weight: 850;
  color: var(--tigo-blue);
}

.audit-log-action.action-danger { color: #dc2626; }
.audit-log-action.action-warn   { color: #d97706; }
.audit-log-action.action-ok     { color: #16a34a; }

.audit-log-time {
  color: var(--ink-faint);
  font-family: monospace;
}

.audit-log-details {
  color: var(--ink-soft);
  word-break: break-word;
}

.audit-log-meta {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--ink-faint);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   DIAGNÓSTICO DE EFICACIA & EMBUDO DE UNIVERSO (2026)
   Relación Universo vs Subconjunto - Visualización de Contraparte
   ========================================================================== */
.efficacy-funnel-card {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 246, 255, 0.88) 100%);
  border: 1px solid rgba(0, 31, 180, 0.16);
  box-shadow: var(--lip), 0 4px 18px rgba(0, 31, 180, 0.06);
  margin-bottom: 20px;
}

.funnel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.funnel-title {
  font-size: 15px;
  font-weight: 850;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.funnel-subtitle {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.funnel-rate-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.funnel-rate-number {
  font-size: 24px;
  font-weight: 900;
  color: var(--tigo-blue);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.funnel-rate-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* Barra de desglose 100% stacked */
.funnel-bar-wrapper {
  margin-bottom: 14px;
}

.funnel-bar {
  display: flex;
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: rgba(33, 47, 64, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.funnel-segment {
  height: 100%;
  transition: width var(--transition-smooth);
}

.funnel-segment.seg-qualified {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.funnel-segment.seg-dropped {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.funnel-segment.seg-empty {
  background-color: rgba(33, 47, 64, 0.15);
}

/* Grilla de Métricas del Embudo */
.funnel-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 640px) {
  .funnel-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.funnel-metric-box {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--edge-line);
}

.funnel-metric-box.is-success {
  border-color: rgba(16, 185, 129, 0.35);
  background-color: rgba(209, 250, 229, 0.40);
}

.funnel-metric-box.is-dropped {
  border-color: rgba(245, 158, 11, 0.35);
  background-color: rgba(254, 243, 199, 0.40);
}

.metric-num {
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.funnel-metric-box.is-success .metric-num {
  color: #047857;
}

.funnel-metric-box.is-dropped .metric-num {
  color: #b45309;
}

.metric-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 3px;
}

.metric-sub {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 1px;
}

/* Mini barra de progreso en tarjetas de KPI individuales */
.kpi-mini-bar {
  width: 100%;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: rgba(33, 47, 64, 0.08);
  margin-top: 8px;
  overflow: hidden;
  display: flex;
}

.kpi-mini-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--tigo-blue);
  transition: width var(--transition-smooth);
}

.kpi-mini-fill.fill-green {
  background: #10b981;
}

/* Filtros Interactivos de SIMs */
.sim-filter-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sim-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 750;
  color: var(--ink-soft);
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--edge-line);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sim-filter-btn:hover {
  color: var(--ink);
  background-color: #FFFFFF;
  border-color: var(--edge-hair);
}

.sim-filter-btn.active {
  color: #FFFFFF;
  background-color: var(--tigo-blue);
  border-color: var(--tigo-blue);
}

.sim-filter-btn.btn-filter-ok.active {
  background-color: #059669;
  border-color: #059669;
}

.sim-filter-btn.btn-filter-warn.active {
  background-color: #d97706;
  border-color: #d97706;
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 850;
  background-color: rgba(33, 47, 64, 0.08);
  color: inherit;
}

.sim-filter-btn.active .filter-count {
  background-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* Etiquetas de estado de inventario SIM */
.tag-sim-active {
  color: #047857;
  background-color: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.tag-sim-inactive {
  color: #64748b;
  background-color: rgba(100, 116, 139, 0.12);
  border: 1px solid rgba(100, 116, 139, 0.28);
}


/* ---------------------------------------------------------------------------
   Captura manual del ICCID con prefijo fijo
   ---------------------------------------------------------------------------
   Todas las SIM de Tigo Panamá empiezan con 8950702 (verificado: 73.078 de
   73.084 registros de los últimos 60 días). Se muestra como bloque fijo y la
   persona solo digita los 12 dígitos que la tarjeta trae en grande y
   subrayados, que es justo lo que el servidor espera.
   Mobile first: en pantalla angosta el prefijo y el campo van en una sola
   línea porque juntos forman un único número.
--------------------------------------------------------------------------- */
.iccid-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.iccid-prefijo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 12px 10px;
  font-size: 16px;                 /* igual que .form-control: evita el zoom de iOS */
  font-weight: 700;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft, #48566b);
  background-color: rgba(33, 47, 64, 0.06);
  border: 1px solid var(--edge-line);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  user-select: none;
}

.form-control.iccid-resto {
  flex: 1 1 auto;
  min-width: 0;                    /* sin esto el campo desborda en móvil */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.form-control.iccid-resto:focus {
  position: relative;              /* el foco no queda tapado por el prefijo */
  z-index: 1;
}

.iccid-ayuda {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft, #48566b);
}

@media (min-width: 420px) {
  .iccid-prefijo { padding-inline: 14px; }
}


/* ===========================================================================
   Listado de SIM en pantallas estrechas
   ---------------------------------------------------------------------------
   POR QUE SE VEIA ROTO

   Cada fila es un flex de dos columnas:

       .sim-item-main  flex: 1 1 auto;  min-width: 0     <- cede todo
       .sim-item-side  flex-shrink: 0                    <- no cede nada

   La columna derecha lleva el motivo en mayusculas ("PENDIENTE DE ACTIVACION
   EN RED"). Con flex-shrink:0 reclama todo el ancho que ese texto necesita en
   una sola linea; la izquierda, que si cede, se queda con lo que sobra. En un
   telefono no sobra casi nada, y como .sim-number trae word-break:break-all,
   el ICCID se parte A UNA LETRA POR LINEA.

   Se nota mas con el esquema 2026 porque sus motivos son largos. El esquema
   actual dice "NO CALIFICA" -dos palabras- y la fila aguantaba por poco.

   Aqui no se cambia ni un dato ni una etiqueta: solo como se reparte el ancho.
=========================================================================== */

/* La columna derecha ya puede ceder, y su texto se reparte en varias lineas
   en vez de exigir una sola. */
.sim-item-side {
    flex-shrink: 1;
    min-width: 0;
    max-width: 44%;
}

.sim-reason {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
}

/* break-all parte en cualquier letra aunque quepa la palabra entera.
   break-word solo parte cuando de verdad no cabe. */
.sim-number {
    word-break: normal;
    overflow-wrap: break-word;
}

@media (max-width: 560px) {
    /* En telefono las dos columnas se apilan: el ICCID recupera el ancho
       completo y el monto con su motivo pasan abajo, en una sola linea. */
    .sim-item {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 8px;
        padding: 12px 13px 12px 16px;
    }

    .sim-item-main { flex: 1 1 100%; }

    .sim-item-side {
        flex: 1 1 100%;
        max-width: none;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        text-align: left;
        padding-top: 8px;
        border-top: 1px solid var(--edge);
    }

    .sim-reason {
        text-align: right;
        flex: 1 1 auto;
        min-width: 0;
    }

    .sim-amount { flex: 0 0 auto; }

    /* La linea de datos (fecha, operacion, telefono) se reparte en varias
       lineas en lugar de desbordar hacia el lado. */
    .sim-meta { row-gap: 2px; }
}

/* Telefonos angostos: el separador "·" entre datos gasta ancho util. */
@media (max-width: 360px) {
    .sim-meta-item + .sim-meta-item::before { margin: 0 5px; }
    .sim-number { font-size: 13px; }
    .sim-reason { font-size: 9.5px; letter-spacing: 0.03em; }
}

/* Linea evaluada sin activacion de red confirmada (esquema nuevo, EXIGIR_ACTIVACION_RED = 0).
   Ambar con texto oscuro: se lee como "pendiente", no como error. */
.tag-provisional {
    background-color: #FFF4D6;
    color: #7A4B00;
    border: 1px solid #F2C94C;
}