/* ==========================================================================
   TIGO VENTAS — LIQUID GLASS CLARO (2026)

   TRES REGLAS QUE NO SE ROMPEN
   ----------------------------
   1. SIN DEGRADADOS. Ni un linear-gradient ni un radial-gradient.
      Color plano + alfa + desenfoque. Punto.

   2. TODO CLARO. No hay paneles navy. Las superficies son blanco
      translúcido y la tinta es oscura. El azul de marca aparece solo en
      cifras, acciones y acentos — nunca como fondo de un bloque grande.

   3. LA TRANSPARENCIA TIENE QUE VERSE. Las barras superior e inferior son
      blanco al 70%: el contenido pasa desenfocado por debajo al hacer
      scroll. Ahí es donde el vidrio se nota de verdad.

   Paleta tomada del CSS de tigo.com.pa, no inventada.
   ========================================================================== */

:root {
  /* ---- Paleta oficial Tigo Panamá ---------------------------------- */
  --tigo-blue: #003DF5;         /* Azul Principal oficial Tigo */
  --tigo-blue-deep: #0029a7;    /* hover del primario */
  --tigo-cyan: #00E5FF;         /* Cian Botón */
  --tigo-cyan-edge: #00E5FF;
  --tigo-cyan-ink: #00071d;     /* Oxford Blue legible */
  --tigo-amber: #FFCC00;        /* Amarillo Título */
  --tigo-green: #7FFF00;        /* Verde Lima */
  --tigo-magenta: #FF0066;      /* Magenta Oficial */

  /* ---- Tinta ------------------------------------------------------
     Los colores vivos de marca (#00C8FF, #00F52D, #FFC200) dan menos de
     3:1 sobre blanco: van en rellenos, bordes y puntos, jamás en texto.
     Para texto se usa siempre la variante *-ink.
     ------------------------------------------------------------------ */
  --ink: #212F40;               /* foreground oficial — 12:1 sobre blanco */
  --ink-soft: #54637A;          /* 6.1:1 */
  --ink-faint: #8C9AAC;         /* 2.9:1 — solo decorativo (dígitos ocultos) */

  /* Alias heredados (compatibilidad con estilos inline existentes) */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-faint);
  --ink-on-light: var(--ink);
  --ink-on-light-soft: var(--ink-soft);
  --ink-on-light-faint: var(--ink-faint);

  /* ---- Vidrio: blanco plano + alfa. Nada más ---------------------- */
  --glass-bar: rgba(255, 255, 255, 0.70);      /* barras: se ve el fondo pasar */
  --glass-panel: rgba(255, 255, 255, 0.62);    /* tarjetas */
  --glass-panel-strong: rgba(255, 255, 255, 0.80);
  --glass-panel-soft: rgba(255, 255, 255, 0.44);
  --glass-sunken: rgba(228, 237, 250, 0.55);   /* cajas hundidas */

  /* Bordes de luz: de aquí sale el brillo del vidrio, no de un degradado */
  --edge: rgba(255, 255, 255, 0.85);
  --edge-hair: rgba(33, 47, 64, 0.10);
  --edge-line: rgba(33, 47, 64, 0.16);

  --blur-sm: blur(12px) saturate(150%);
  --blur-md: blur(22px) saturate(160%);
  --blur-lg: blur(34px) saturate(170%);

  /* ---- Fondos opacos ---------------------------------------------- */
  --bg-canvas: #EEF3FB;         /* casi blanco, con el tinte justo para que
                                   el desenfoque tenga algo que difuminar */
  --bg-surround: #DCE6F4;       /* alrededor del panel en escritorio */
  --bg-surface: #FFFFFF;

  --border-subtle: var(--edge-line);
  --border-card: var(--edge-hair);
  --border-focus: var(--tigo-cyan);

  /* ---- Estados semánticos -----------------------------------------
     ok   = generó incentivo
     warn = hubo recarga pero no alcanza el mínimo
     idle = todavía no pasa nada (neutro, NO es un error)
     ------------------------------------------------------------------ */
  --ok-ink: #046A38;                      /* 6.7:1 */
  --ok-bg: rgba(0, 245, 45, 0.12);
  --ok-edge: rgba(0, 200, 60, 0.38);
  --warn-ink: #8A5300;                    /* 5.1:1 — #FFC200 daría 1.6:1 */
  --warn-bg: rgba(255, 194, 0, 0.15);
  --warn-edge: rgba(226, 130, 0, 0.40);
  --idle-ink: #5A6B80;
  --idle-bg: rgba(33, 47, 64, 0.06);
  --idle-edge: rgba(33, 47, 64, 0.20);
  --info-ink: var(--tigo-cyan-ink);       /* 7.1:1 */
  --info-bg: rgba(70, 200, 246, 0.14);
  --info-edge: rgba(70, 200, 246, 0.42);
  --bad-ink: #A32354;
  --bad-bg: rgba(210, 48, 113, 0.10);
  --bad-edge: rgba(210, 48, 113, 0.32);

  /* ---- Sombras ----------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(33, 47, 64, 0.05), 0 3px 12px rgba(33, 47, 64, 0.05);
  --shadow-md: 0 2px 5px rgba(33, 47, 64, 0.06), 0 10px 26px rgba(33, 47, 64, 0.08);
  --shadow-lg: 0 4px 10px rgba(33, 47, 64, 0.08), 0 20px 50px rgba(33, 47, 64, 0.14);
  --lip: inset 0 1px 0 rgba(255, 255, 255, 0.9);   /* línea de luz superior */

  /* ---- Geometría --------------------------------------------------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  --nav-top-h: 60px;
  --nav-bottom-h: 66px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   RESET & SHELL
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { height: 100%; }

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background-color: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* el scroll vive dentro de .main-viewport */
}

/* --------------------------------------------------------------------------
   Contenedor de la app.
   Altura exacta de la pantalla: la barra inferior queda anclada y solo el
   área central hace scroll (nunca "se va al fondo").
   -------------------------------------------------------------------------- */
.app-container {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
  isolation: isolate;
  background-color: var(--bg-canvas);
}

.app-container > * { z-index: 1; }

.top-nav,
.main-viewport,
.bottom-nav { position: relative; }

/* Las barras van por encima para que el contenido pase desenfocado debajo */
.top-nav { z-index: 60; }
.bottom-nav { z-index: 60; }

/* ==========================================================================
   ESCRITORIO / TABLET — panel claro flotando sobre un fondo suave
   ========================================================================== */
@media (min-width: 768px) {
  body {
    padding: 22px;
    background-color: var(--bg-surround);
  }

  .app-container {
    max-width: 1240px;
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--lip), var(--shadow-lg);
  }
}

/* ==========================================================================
   FALLBACK: sin backdrop-filter, el vidrio pasa a ser opaco
   ========================================================================== */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  :root {
    --glass-bar: rgba(255, 255, 255, 0.98);
    --glass-panel: rgba(255, 255, 255, 0.96);
    --glass-panel-strong: rgba(255, 255, 255, 0.99);
    --glass-panel-soft: rgba(255, 255, 255, 0.92);
    --glass-sunken: #E9F0FA;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}