@charset "utf-8";
/* ==========================================================================
   PORTAL COMERCIAL — TOKENS LIQUID GLASS (2026)

   Mismo sistema que appsim_web/css/tigo-theme.css. Si cambia allá, cambia
   aquí: son la misma marca y deben verse igual.

   TRES REGLAS QUE NO SE ROMPEN
   ----------------------------
   1. SIN DEGRADADOS. Ni linear-gradient ni radial-gradient.
      Color plano + alfa + desenfoque.
   2. TODO CLARO. Superficies de blanco translúcido con tinta oscura.
      El azul de marca va en cifras, acciones y acentos, nunca de fondo.
   3. LA TRANSPARENCIA SE TIENE QUE VER. Las barras son blanco al 70%:
      el contenido pasa desenfocado por debajo al hacer scroll.

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

:root {
    /* ---- Paleta oficial Tigo 2026 ----------------------------------- */
    --tigo-blue: #003DF5;           /* Azul Principal */
    --tigo-blue-deep: #001A8C;   /* estado activo/hover de los botones azules; faltaba y el boton quedaba transparente con texto blanco */
    --tigo-blue-dark: #0029a7;      /* Azul Principal Oscuro / Hover */
    --tigo-gradient-blue: linear-gradient(135deg, #003DF5 0%, #0029a7 100%);
    --tigo-magenta: #FF0066;        /* Magenta Oficial */
    --tigo-lime: #7FFF00;           /* Verde Lima */
    --tigo-cyan: #00E5FF;           /* Cian Botón */
    --tigo-yellow: #FFCC00;         /* Amarillo Título */
    --tigo-white: #FFFFFF;          /* Blanco Texto */
    --tigo-oxford: #00071d;         /* Oxford Blue */
    --tigo-oxford-light: #212A37;   /* Oxford Blue Claro */
    --tigo-gradient-oxford: linear-gradient(135deg, #00071d 0%, #212A37 100%);

    --tigo-cyan-edge: #00E5FF;
    --tigo-cyan-ink: #00071d;
    --tigo-amber: #FFCC00;
    --tigo-green: #7FFF00;

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

    /* ---- Vidrio: blanco plano + alfa ------------------------------ */
    --glass-bar: rgba(255, 255, 255, 0.70);
    --glass-panel: rgba(255, 255, 255, 0.62);
    --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);

    --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 ---------------------------------------------------- */
    --bg-canvas: #EEF3FB;
    --bg-surface: #FFFFFF;

    /* ---- Estados --------------------------------------------------- */
    --ok-ink: #046A38;
    --ok-bg: rgba(0, 245, 45, 0.12);
    --ok-edge: rgba(0, 200, 60, 0.38);
    --warn-ink: #8A5300;
    --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);
    --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);

    /* ---- 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);
}

/* Sin backdrop-filter el vidrio pasa a opaco: translúcido sin desenfoque
   sería ilegible sobre contenido en movimiento. */
@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;
        transition-duration: 0.001ms !important;
    }
}