/* Paleta tomada de css/styles.css (la web pública) para que el área de
   clientes no rompa el branding — mismos nombres de variable que usaba la
   app (--primary, --accent, etc.) pero apuntando a los tonos del sitio. */
:root {
    /* El sitio está diseñado en claro. Sin esta línea, el "tema oscuro
       automático" de Chrome/Samsung Internet invierte los colores por su
       cuenta y el texto queda ilegible (visto en móvil 2026-08-25). */
    color-scheme: light;
    --primary: #5E3A99;
    --primary-dark: #4B2C7F;
    --primary-light: #7B5CB8;
    --primary-soft: #f1edf9;
    --accent: #B4D31F;
    --accent-dark: #8FA818;
    --bg-white: #FFFFFF;
    --bg-page: #f8fafd;
    --text-main: #0f172a;
    --text-secondary: #64748b;
    --border-soft: #e2e8f0;
    --white: #FFFFFF;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.4);

    --header-height: 68px;
    --nav-height: 72px;
    --sidebar-width: 260px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-top: env(safe-area-inset-top, 0px);

    /* Curvas de easing con más carácter que las de CSS por defecto */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Desactiva el gesto nativo del WebView de "deslizar para navegar atrás en el
       historial del navegador" — se confundía con el gesto de sistema de Android
       (ese sí está bien manejado, ver 'backButton' en app.js) y cerraba la app
       porque el WebView lo interceptaba antes de que Android lo viera. */
    overscroll-behavior-x: none;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    justify-content: center;
}

#app {
    width: 100%;
    max-width: 430px;
    /* iPhone 14-15 Pro Max size — en escritorio se amplía, ver media query abajo */
    min-height: 100vh;
    background-color: var(--bg-white);
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

/* Header — degradado sutil + brillo radial (antes morado plano liso). La marca es
   logo-header.png (el logo real, recoloreado — ver comentario junto a .header-logo). */
.app-header {
    height: calc(var(--header-height) + 50px);
    background:
        radial-gradient(120% 180% at 14% -20%, rgba(184, 214, 42, 0.22), transparent 55%),
        linear-gradient(160deg, var(--primary-light) 0%, var(--primary) 45%, var(--primary-dark) 100%);
    color: var(--white);
    display: flex;
    align-items: flex-start;
    padding: 50px 20px 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.header-content {
    display: flex;
    align-items: center;
}

/* logo-header.png: el logo real de la marca, recortado al icono+wordmark y con las
   partes moradas re-coloreadas a blanco (en el PNG original se fundían con el fondo
   morado del header y quedaban invisibles — el dibujo es el mismo, solo se ve entero). */
.header-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.18));
}

/* Main View Container */
.view-container {
    flex: 1;
    padding: 20px;
    padding-bottom: calc(var(--nav-height) + 20px + var(--safe-area-bottom));
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    height: calc(var(--nav-height) + var(--safe-area-bottom));
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 12px;
    z-index: 1000;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.2s;
    flex: 1;
}

.nav-item svg {
    margin-bottom: 4px;
    width: 24px;
    height: 24px;
}

.nav-item.active {
    color: var(--primary);
}

/* Solo existen dentro del sidebar de escritorio — ocultos en la barra móvil */
.sidebar-logo,
.nav-footer {
    display: none;
}

/* Accesos que solo tienen sentido en el menú lateral de escritorio (en la
   barra inferior de móvil solo caben los 4 esenciales: Inicio, Facturas,
   Servicios, Mis datos). */
.bottom-nav .nav-item[data-desktop-only] {
    display: none;
}

/* Common Components */
.card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    /* Larger radius for modern look */
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--primary-light);
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card:hover { transform: none; }
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 12px;
}

.bento-item {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s;
    min-width: 0; /* si no, un texto largo con nowrap (p.ej. nombre de tarifa de fibra)
                     fuerza a la columna del grid a crecer y descuadra toda la pantalla */
}

.bento-item:active {
    transform: scale(0.96);
    background: var(--primary-soft);
}

.bento-item-large {
    grid-column: span 2;
}

/* ── Dashboard: mismo diseño de "portal" en móvil y escritorio ── */
.dash-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.dash-three-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.dash-chip-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.dash-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    transition: opacity .25s ease;
}

/* Al cambiar de línea, mientras se refrescan los datos reales (petición a PTV, puede tardar
   unos segundos): las tarjetas se atenúan en vez de quedarse "congeladas" sin ninguna pista
   de que algo está pasando (feedback pedido por el usuario 2026-08-07). */
.dash-summary-row.is-loading {
    opacity: .45;
    pointer-events: none;
}

.quick-access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.text-accent-grad {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.text-small {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--primary);
    border: none;
    border-radius: 999px;
    padding: 18px 24px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
    box-shadow: 0 12px 24px -6px rgba(184, 214, 42, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn-outline {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(109, 40, 217, 0.25);
}

.btn:active {
    transform: scale(0.97);
    box-shadow: 0 4px 8px -2px rgba(109, 40, 217, 0.3);
}

.btn-soft {
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: none;
}

.btn-soft:hover {
    background: #EDE9FE;
}

/* Form Elements */
input {
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.1);
}

.login-container {
    padding-top: 60px;
}

/* Splash Screen */
.splash-screen {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    height: 100%;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.splash-logo {
    height: 120px;
    width: auto;
    max-width: 80%;
    object-fit: contain;
    border-radius: 20px;
    margin-bottom: 24px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Progress Bars */
.progress-container {
    margin: 16px 0;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 600;
}

.progress-bar-bg {
    height: 10px;
    background-color: #E6E6E6;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--primary);
    border-radius: 5px;
    width: 0%;
    /* Dynamic */
    transition: width 1s ease-out;
}

/* Grid for buttons */
.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Aparición escalonada de las secciones del dashboard: cada bloque entra un
   poco después que el anterior (cascada), en vez de aparecer todo de golpe. */
.dash-stagger > * {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeIn 420ms var(--ease-out) forwards;
}
.dash-stagger > *:nth-child(1) { animation-delay: 0ms; }
.dash-stagger > *:nth-child(2) { animation-delay: 50ms; }
.dash-stagger > *:nth-child(3) { animation-delay: 100ms; }
.dash-stagger > *:nth-child(4) { animation-delay: 150ms; }
.dash-stagger > *:nth-child(5) { animation-delay: 200ms; }
.dash-stagger > *:nth-child(n+6) { animation-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
    .dash-stagger > * { animation: none; opacity: 1; transform: none; }
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
    animation: modalFadeIn 0.3s ease-out;
    /* Renamed to avoid conflict */
}

.modal-content {
    background: var(--white);
    border-radius: 20px;
    padding: 24px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.3s ease-out;
}

@keyframes modalFadeIn {

    /* Renamed to avoid conflict */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.modal-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--text-main);
}

.modal-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.4;
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    bottom: calc(var(--nav-height) + 20px + var(--safe-area-bottom));
    right: 20px;
    width: 56px;
    height: 56px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    z-index: 900;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
    animation: whatsapp-pulse 2s infinite;
}

/* When the app is centered on desktop, we need to keep the button within the frame */
@media (min-width: 431px) {
    .whatsapp-float {
        left: calc(50% + 430px / 2 - 20px - 56px);
        right: auto;
    }
}

.whatsapp-float:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-float svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Hide chat button on splash if desired */
.splash-screen~#app .whatsapp-float {
    display: none;
}

/* Password Strength Indicator */
.strength-container {
    margin-top: 8px;
}

.strength-bar-bg {
    height: 4px;
    background-color: #E6E6E6;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
    display: flex;
    gap: 4px;
}

.strength-segment {
    flex: 1;
    height: 100%;
    background-color: #E6E6E6;
    transition: background-color 0.3s;
}

.strength-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: right;
    display: block;
}

/* Strength levels */
.strength-basic .strength-segment:nth-child(1) {
    background-color: #EF4444;
}

.strength-basic .strength-text {
    color: #EF4444;
}

.strength-moderate .strength-segment:nth-child(1),
.strength-moderate .strength-segment:nth-child(2) {
    background-color: #F59E0B;
}

.strength-moderate .strength-text {
    color: #F59E0B;
}

.strength-excellent .strength-segment {
    background-color: #10B981;
}

.strength-excellent .strength-text {
    color: #10B981;
}

/* ── Escritorio: layout de app con menú lateral en vez de barra inferior ──
   Colocado al final del archivo a propósito: con la misma especificidad que
   las reglas base de arriba, en CSS gana la que aparece después en el código,
   así que este bloque tiene que ir el último para no ser ignorado. */
@media (min-width: 900px) {
    body { align-items: flex-start; }

    #app {
        max-width: none;
        width: 100%;
        min-height: 100vh;
        flex-direction: row;
        box-shadow: none;
        background-color: var(--bg-page);
    }

    .app-header { display: none; } /* en escritorio el logo vive en el sidebar */

    /* Mismo elemento que en móvil es la barra inferior (.bottom-nav): en
       escritorio se convierte en el menú lateral, sin duplicar HTML/JS. */
    .bottom-nav {
        order: -1; /* el <nav> va después del <main> en el HTML; en escritorio debe pintarse primero (izquierda) */
        position: sticky;
        top: 0;
        left: auto;
        transform: none;
        height: 100vh;
        max-width: none;
        width: var(--sidebar-width);
        flex: 0 0 var(--sidebar-width);
        /* Efecto cristal: un brillo diagonal suave y amplio (como luz rozando un
           panel de vidrio), no manchas puntuales. Mismo morado de marca, solo
           una veta de luz clara arriba y sombra abajo. */
        background:
            linear-gradient(125deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 22%, transparent 45%),
            radial-gradient(140% 90% at 10% -10%, rgba(155, 122, 214, 0.35) 0%, transparent 60%),
            linear-gradient(165deg, var(--primary) 0%, var(--primary-dark) 70%, #2e1a4f 100%);
        backdrop-filter: none;
        border-top: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 28px 16px;
        gap: 4px;
        overflow-y: auto;
    }

    .sidebar-logo {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 0 12px 28px;
    }

    .sidebar-logo img { height: 46px; width: auto; }

    .bottom-nav .nav-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        color: rgba(255, 255, 255, 0.75);
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .bottom-nav .nav-item svg { margin-bottom: 0; }

    .bottom-nav .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

    .bottom-nav .nav-item.active {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
    }

    .bottom-nav .nav-item[data-desktop-only] {
        display: flex;
    }

    #nav-logout {
        color: #FFD9D9;
    }
    #nav-logout:hover {
        background: rgba(239, 68, 68, 0.25);
        color: #fff;
    }

    .nav-footer {
        display: block !important;
        margin-top: auto;
        padding: 12px 14px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .nav-footer a {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.8rem;
        text-decoration: none;
        font-weight: 600;
    }

    .nav-footer a:hover { color: #fff; }

    .view-container {
        flex: 1;
        max-width: 1180px;
        margin: 0 auto;
        padding: 40px 40px calc(40px + var(--safe-area-bottom));
    }

    .whatsapp-float { left: auto !important; right: 28px !important; }

    /* El splash estaba pensado para el ancho de app móvil (max-width:430px);
       en escritorio dejaba ver el sidebar detrás mientras cargaba. */
    .splash-screen { max-width: none; }

    .dash-two-col { grid-template-columns: 1.3fr 1fr; }
    .dash-three-col { grid-template-columns: repeat(3, 1fr); }
    .dash-summary-row { grid-template-columns: repeat(4, 1fr); }

    .quick-access-grid { grid-template-columns: repeat(4, 1fr); }
    .quick-access-grid--5 { grid-template-columns: repeat(5, 1fr); }
    .quick-access-grid--6 { grid-template-columns: repeat(6, 1fr); }
}