/* =========================================================
   BARRA DE MENU TAB
   ========================================================= */
html, body {
    margin: 0;
    padding: 0;
}

.body-content {
    padding-top: 48px; /* un poco más que 38px */
}

.app-topbar {
    height: 38px;
    background: #0f1020;
    border-bottom: 1px solid #2a2d45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    position: fixed; /* 👈 CLAVE */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 8px 16px; /* 🔧 aire general */
    gap: 12px; /* separación interna */
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px; /* 🔧 espacio ENTRE botones */
}













@media (max-width: 768px) {
    .topbar-right {
        flex-wrap: wrap;
        display: flex;
        justify-content: flex-end;
        column-gap: 2px;
        row-gap: 12px; /* separación entre filas */
    }
        .topbar-right .home-btn {
            margin: 4px; /* que el gap haga el trabajo */
            font-size:12px; 
            padding: 5px 8px 5px 8px;
        }


    .app-topbar {
        padding-top: 8px;
        padding-bottom: 8px;
        height: auto; /* importante */
        margin-bottom: 6px;
        position: fixed;
    }
}



@media (max-width: 768px) {

    .hero-header {
        align-items: flex-start;
        padding-top: 10px;
    }
}

placeholder {
    font-size: 12px;
    color: #9aa0b5;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

    .lang-placeholder:hover {
        background: #1e2140;
        color: #ffffff;
    }

.home-logo {
    height: 20px; /* ajustá a gusto */
    width: auto;
    display: block;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 5px 12px; /* 🔽 más chicos */
    border-radius: 5px;
    font-size: 13px; /* 🔽 más chico */
    font-weight: 500;
    text-decoration: none;
    margin-right: 6px;
    background: rgba(78,92,160,.20);
    border: 1px solid rgba(125,105,220,.25);
    color: #d0d0d0; /* texto gris claro */
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .home-btn:hover {
        background: rgba(78,92,160,.30);
        border-color: rgba(125,105,220,.45);
        box-shadow: 0 0 12px rgba(125,105,220,.18);
    }

    /* Variante para logout */
    .home-btn.btn-danger {
        background: rgba(255, 80, 80, 0.12);
        color: #ff9a9a;
    }

        .home-btn.btn-danger:hover {
            background: rgba(255, 80, 80, 0.25);
            color: #ffffff;
        }



/* Botones en topbar (admin y público) */
.app-topbar a,
.app-topbar a:visited,
.app-topbar a:hover,
.app-topbar a:active {
    text-decoration: none;
}


/* =========================================================
   LAYOUT PÚBLICO
   ========================================================= */
.page-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.card {
    width: 620px;
    padding: 25px;
    background-color: #111;
    /*border: 1px solid #494949;*/
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    margin-bottom: 18px;
    box-sizing: border-box;
}


/* =========================================================
   TÍTULOS / LABELS
   ========================================================= */

.app-title {
    font-size: 26px;
    font-weight: bold;
    color: #C0C0C0;
}

    .app-title span.purple {
        color: #800080;
    }

.label {
    color: #C0C0C0;
    font-size: 14px;
    font-weight: normal;
}





/* =========================================================
   BOTONES BASE
   ========================================================= */

.btn {
    background: rgba(78,92,160,.20);
    color: #d0d0d0; /* texto gris claro */
    border: 1px solid rgba(125,105,220,.25);
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.2;
}

    .btn:hover {
        background: rgba(78,92,160,.30);
        color: rgb(192,192,192);
        border-color: rgba(125,105,220,.45);
        box-shadow: 0 0 12px rgba(125,105,220,.18);
    }




/* CSS de las pastillas (CLAVE) */
.info-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px;
    max-width: 900px;
    margin: 18px auto 22px auto;
}

.info-pill {
    background: #181A2D;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 14px 14px 14px 24px;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
}

/* Responsive de las pastillas (mobile / notebook chico) */
@media (max-width: 768px) {
    .info-pills

{
    grid-template-columns: 1fr;
}

}



/* Media query dedicada */
@media (max-width: 1280px) and (max-height: 720px) {
    .sales-header .app-title

    {
        font-size: 30px;
    }

    .sales-header .label {
        font-size: 14px;
    }

    .plans-grid {
        gap: 12px;
    }

    .license-card {
        padding: 13px;
        position: relative;
    }

    .license-card strong {
        font-size: 16px;
    }

}


/*Mobile */
@media (max-width: 768px) {

    .sales-header .app-title {
        font-size: 26px;
    }

    .sales-header .label {
        font-size: 14px;
    }

    .plans-grid {
        gap: 12px;
    }

}

/* Tablet */
@media (max-width: 1024px) {

    .plans-grid {
        max-width: 100%;
    }
}



/* Wrapper de la página */
.sales-page {
    padding-top: 36px;
    padding-bottom: 36px; 
    padding-left: 36px;
    padding-right: 36px; 
    display: block;
    font-size: 14px; 
    margin-top: 20px;
}




/* Grid de ofertas */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    justify-content: center; 
    gap: 14px;
    max-width: 900px;
    margin: 0 auto 14px;
}

/* Cards de Licencias */
.license-card {
    background: rgba(128,0,128,0.25);
    border: 0px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 13px 13px 20px 13px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .license-card h3 {
        margin: 4px 0;
        font-size: 16px;
    }

    .license-card p {
        font-size: 13px;
        opacity: 0.8;
        margin: 4px 0 8px 0;
    }

    .license-card strong {
        display: block;
        font-size: 17px;
        margin-bottom: 18px;
    }


/* Plan destacado */
    .license-card.highlight {
        border-color: #800080;
        box-shadow: 0 0 0 1px rgba(128,0,128,0.4);
    }

    /* Hover sutil */
    .license-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    }

/* Botones (link → botón, sin underline) */
a.btn {
    text-decoration: none;
}

.sales-page .btn {
    font-size: 14px; /* tamaño ideal */
    line-height: 1.2;
}

/* Nota final liviana */
.sales-note {
    margin-top: 16px;
    font-size: 15px;
    opacity: 0.9;
    text-align: center;
}



@keyframes autoHover {
    0% {
        transform: translateY(0);
        box-shadow: none;
    }

    40% {
        transform: translateY(-4px);
        box-shadow: 0 8px 22px rgba(0,0,0,0.45);
    }

    100% {
        transform: translateY(0);
        box-shadow: none;
    }
}

.hero-quote.auto-hover,
.license-card.auto-hover,
.hero-group.auto-hover {
    animation: autoHover 0.8s ease-out both;
}








.btn-area {
    margin-top: 22px;
}

.btn-primary {
    background: #800080;
    color: white;
}

.btn-secondary {
    background: #202230;
    color: #C0C0C0;
}

.btn-big-primary:hover {
    background: #A800A8;
}

.btn-buy {
    background: #800080;
    color: white;
    border: 1px solid #494949;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.2; 
}

    .btn-buy:hover {
        background: #A800A8;
        color: white;
    }






/* ---  A T E N C I O N  
        no modificar esto para que en mobiles soporte lista larga de licencias en pagina ActivarLicencias --- */
.glass-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

* {
    box-shadow: none !important;
}
@media (max-width: 768px) {

    .glass-panel {
        backdrop-filter: none !important;
    }

    .license-card {
        box-shadow: none !important;
    }

    .activaciones {
        font-size: 13px;
    }
}


/* topo bar menu */
.topbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-email {
    font-size: 12px;
    color: #b39ddb;
    white-space: normal; 
    word-break: break-word; 
    font-weight: 400;
    opacity: 0.60;
}

#topbarSession {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; 
}

.logout-btn {
    font-size: 13px;
}

@media (max-width: 768px) {

    .user-email {
        max-width: 110px;
        font-size: 11px;
    }

    #topbarSession {
        gap: 6px;
    }
}





/* Banderitas Lang */
.lang-link {
    text-decoration: none;
    color: #b39ddb;
}

    .lang-link:hover {
        opacity: 1;
    }


.lang-link + .lang-link {
    margin-left: 4px; /* separación entre ES y EN */
}



    @media (max-width: 768px) {
        .lang-selector {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
        }
    }



    /* base */
    .flag {
        width: 18px;
        height: 12px;
        display: inline-block;
        border-radius: 2px;
        overflow: hidden;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    /* hover */
    .lang-link:hover .flag {
        transform: scale(1.1);
    }

    /* 🇪🇸 España */
    .flag-es {
        background: linear-gradient( to bottom, #c60b1e 0%, #c60b1e 25%, #ffc400 25%, #ffc400 75%, #c60b1e 75% );
    }

    /* 🇺🇸 USA (simplificado limpio) */
    .flag-en {
        background: repeating-linear-gradient( to bottom, #b22234 0%, #b22234 7.69%, /* 1/13 */
        #ffffff 7.69%, #ffffff 15.38% );
        position: relative;
    }

        .flag-en::before {
            content: "";
            position: absolute;
            width: 40%;
            height: 53.8%; /* proporción real aproximada */
            background: #3c3b6e;
            top: 0;
            left: 0;
        }

    .lang-link .flag {
        opacity: 0.6;
        transform: scale(0.95);
        transition: all 0.2s ease;
    }

    .lang-link.active .flag {
        opacity: 1;
        transform: scale(1);
    }

    .lang-link.active .flag {
        outline: 2px solid rgba(192, 132, 252, 0.5);
        outline-offset: 2px;
        box-shadow: 0 0 6px rgba(192, 132, 252, 0.4);
    }



    .changelog-text {
        font-size: 13px;
        opacity: 0.8;
        line-height: 1.4;
    }

    .changelog {
        height: 350px;
        overflow-y: auto;
        padding-right: 10px;
    }

    .changelog {
        mask-image: linear-gradient( to bottom, black 88%, transparent 100%);
    }

    .changelog-text {
        line-height: 1.8;
        font-size: 14px;
    }




    .changelog-scroll {
        height: 350px;
        overflow-y: auto;
        padding-right: 10px;
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 10px;
        padding: 14px 16px;
    }

    .changelog-text {
        line-height: 1.8;
        font-size: 14px;
        color: rgba(255,255,255,0.82);
    }


/* 🔥 SCROLLBAR */
.changelog-scroll::-webkit-scrollbar {
    width: 10px;
}

.changelog-scroll::-webkit-scrollbar-track {
    background: linear-gradient( 180deg, rgba(109,82,194,.10), rgba(74,56,140,.08) );
}

.changelog-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 20px;
}

    .changelog-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.26);
    }


/* Chrome / Edge */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: linear-gradient( 180deg, rgba(109,82,194,.10), rgba(74,56,140,.08) );
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 20px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.26);
    }