/* =========================================================
   BASE GLOBAL
   ========================================================= */

body {
    /*background-color: #1E1E1E;*/
    color: #C0C0C0;
    font-family: Segoe UI, Arial, sans-serif;
    /* imagen lisa fondo + fade in jpg */
    background: rgb(33,33,33);
    /* box-shadow: inset 0 0 120px rgba(0,0,0,0.6);    Deja sombra fea debajo de los cards una franja oscura que ocupa todo el ancho solo el alto del contenido y se percibe como un “overlay fantasma” */
    position: relative;
    overflow-x: hidden;
}

    /* fondo base: SIN transición */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: var(--bg-url);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        z-index: -1;
    }

    /* SOLO cuando queremos fade */
    body.fade-bg::before {
        transition: opacity 0.6s ease;
    }

    /* estado final */
    body.bg-loaded::before {
        opacity: 1;
    }



/* =========================================================
   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;
        justify-content: flex-end;
        row-gap: 6px; /* 👈 aire vertical */
        column-gap: 6px; /* aire horizontal */
    }

        .topbar-right .home-btn {
            margin: 1px; /* que el gap haga el trabajo */
        }

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

}

.lang-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 10px; /* 🔽 más chicos */
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06); /* gris sutil */
    color: #d0d0d0; /* texto gris claro */
    font-size: 13px; /* 🔽 más chico */
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    margin-right:6px;
}

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

    /* 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: 30px;
}

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

.login-card {
    overflow: hidden;
    box-sizing: border-box;
    max-width: 340px;
    width: calc(100% - 24px);
    margin: 80px auto;
}
/* =========================================================
   BANNER PÚBLICO
   ========================================================= */

.banner {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #494949;
}

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

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


.chCont {
    padding-left: 10px;
    padding-bottom: 8px;
    height: 25px;
}

.labelGrande {
    font-size: 18px;
    display: block;
    width: 100%;
    color: #C0C0C0;
    font-weight: normal;
    text-align: center;
}

    .labelGrande .purple-text {
        color: #800080;
        font-weight: 700;
    }

.gray-text {
    color: #787878;
    font-size: 14px;
    font-weight: 400;
}

.lila-text {
    color: #b39ddb;
    font-size: 14px;
    font-weight: 400;
}

/* =========================================================
   INPUTS / TEXTBOX
   ========================================================= */
.textbox {
    background: #0a0a0a;
    border: 1px solid #494949;
    color: #c0c0c0;
    padding: 8px 10px;
    border-radius: 6px;
    outline: none;
    margin-top: 4px;
}

    .textbox.full {
        width: 100%;
        box-sizing: border-box;
    }

    .textbox.fixed {
        box-sizing: content-box;
        width: auto;
    }

    .textbox.no-borderbox {
        box-sizing: content-box;
        width: 10%;
    }

    /* foco */
    .textbox:focus {
        border-color: #800080;
        box-shadow: 0 0 0 1px rgba(128,0,128,0.5);
    }

    /* blindaje visual */
    .textbox:focus,
    .textbox:active,
    .textbox:invalid {
        background-color: #0a0a0a !important;
        color: #c0c0c0;
    }

 .container.body-content input.textbox.textbox-email-edit {
    width: 320px !important;
    max-width: 320px !important;
}


/* autofill */
input.textbox:-webkit-autofill,
input.textbox:-webkit-autofill:hover,
input.textbox:-webkit-autofill:focus,
textarea.textbox:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #0a0a0a inset !important;
    -webkit-text-fill-color: #c0c0c0 !important;
    transition: background-color 9999s ease-in-out 0s;
}

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

.btn {
    background: rgb(32, 34, 48);
    color: rgb(192,192,192);
    border: 1px solid #494949;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.2; /* 👈 evita que “crezca” */
}

    .btn:hover {
        background: rgb(48, 50, 70);
        color: rgb(192,192,192);
    }

.btn-warning {
    background: #3a2f00;
    color: #ffcc66;
    border: 1px solid #7a5a00;
}

    .btn-warning:hover {
        background: #4a3a00;
    }

.btn-cambio-pc {
    background: rgba(139, 92, 246, 0.08);
    color: #b5b9d6;
    border: 1px solid #2a2d40;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-cambio-pc:hover {
        background: #2c2f45; /* el que ya usás */
        color: #ffffff;
        border-color: #5a5f85;
    }

.btn-activar-licencia {
    background: #2a2f55; /* un poco más protagonista */
    color: #e4e6ff;
    border: 1px solid #3a3f7a;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-activar-licencia:hover {
        background: #3a4090; /* hover claro pero elegante */
        color: #ffffff;
        border-color: #6f76d8;
    }

/* =========================================================
   FORM / CHECKBOX
   ========================================================= */
.container hr {
    border: 0;
    border-top: 1px solid #494949;
}

.container.body-content input.textbox,
.container.body-content textarea.textbox {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

    /* FIX overflow horizontal en ComprarLicencia */
    .container.body-content {
        max-width:max-content ;
        margin: auto;
    }

    @media (max-width: 768px) {
        .container.body-content {
            max-width: 100%;
        }
    }



    .container.body-content input.textbox,
    .container.body-content textarea.textbox {
        display: block;
    }



    /* FIX width manual */
    .container.body-content input.textbox.fixed,
    .container.body-content textarea.textbox.fixed {
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
        .container.body-content input.textbox.fixed {
            min-width: 300px !important; /*             min-width: 0 !important;  */
            flex: none !important;
        }

input[type="checkbox"] + label {
    font-weight: normal;
}

input[type="checkbox"] {
    margin-right: 6px;
    vertical-align: text-top;
}

/* =========================================================
   PANELES
   ========================================================= */

.panel-info {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #494949;
    background: #12121a;
    border-radius: 10px;
}

.panel-decision {
    border: 1px dashed #696969;
    padding: 10px;
    margin-top: 15px;
}

.labelDecision {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding-right: 15px;
    white-space: pre-line; /* respeta saltos de línea de vbCrLf */
    line-height: 1.5; /* espacio entre líneas */
    padding-bottom: 8px;
}

/* =========================================================
   LICENCIAS (listas simples)
   ========================================================= */

.licencia-item {
    padding: 6px 10px;
    margin-bottom: 4px;
    background-color: #202230;
    color: #C0C0C0;
    cursor: pointer;
    border: 1px solid #494949;
    border-radius: 4px;
}

    .licencia-item:hover {
        background-color: #2c2f45;
    }

.licencia-desactivada {
    opacity: 0.55;
    filter: grayscale(100%);
}

/* =========================================================
   ACTIVACIONES  
   ========================================================= */

/* Contenedor activaciones */
.activacion-activa {
    color: #c0c0c0;
    color: #cfcfcf;
}

.activacion-revocada {
    color: #7a7a7a;
    color: #b8b8b8;
}

.activaciones {
    font-size: 13px; /* 🔑 ACA se achica TODO */
    line-height: 1.1;
    margin-top: 16px;
    margin-left:20px;
}

/* Título */
.activaciones-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: 0.9;
}

/* Línea individual */
.activacion-linea {
    margin-left: 13px;
    margin-bottom: 4px;
}

/* =========================================================
   ADMIN – CONFIGURACIÓN GENERAL
   ========================================================= */

/* DUPLICADO intencional: html ya fue declarado arriba */
html {
    overflow-y: scroll;
}



/* =========================================================
   (SIGUE…)
   ========================================================= */

/*
A PARTIR DE ACÁ:
- empiezan overrides de ADMIN
- hay redefiniciones intencionales (.licencia-card, .col-hwid, etc.)
- el orden ES PARTE del diseño
*/
/* … el resto del archivo CONTINÚA EXACTAMENTE IGUAL … */



/* ===========================
   DASHBOARD – Glass Style
   (alineado a licencia_detalle)
   =========================== */

/* bloque dashboard */
body.admin .dash-section {
    background: rgba(20, 20, 20);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 8px;
}

body.admin .dash-title {
    font-size: 15px;
    font-weight: 600;
    color: #d6c6ff;
    white-space: nowrap;
    /*margin-bottom: 12px; /* CLAVE --- (era clave para separar los titulos de las pastillas del dashboard ) ahora se sustituye para subir los titulos del dashboard "Pulso de sistea, Trials, etc" por flag SEU778*/ 
}

body.admin .dash-filter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}


/* fila tipo */
body.admin .dash-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 6px; /*flag SEU778*/
    margin-bottom: 0px; /* flag SEU778*/
}

body.admin .container.body-content > .dash-grid:first-child {
    margin-top: 28px;
}

/* key */
body.admin .dash-kv-key {
    color: #b8b8b8;
    font-size: 13px;
}

/* value */
body.admin .dash-kv-value {
    font-weight: 600;
    font-size: 14px;
}

/* estados */
body.admin .metric-ok {
    color: #7CFF7C;
}

body.admin .metric-warn {
    color: #FFD479;
}

body.admin .metric-info {
    color: #9bbcff;
}

body.admin .dash-link {
    color: #9bbcff;
    text-decoration: none;
    font-weight: 500;
}

    body.admin .dash-link:hover {
        text-decoration: underline;
    }

/* Botón Back dentro del card */
body.admin .back-btn {
    background-color:purple;   
    padding: 4px 10px;
    font-size: 12px;
    margin-bottom: 8px;
    opacity: 0.85;
}

    body.admin .back-btn:hover {
        opacity: 1;
    }

/* ===========================
   Empty state (glass)
   =========================== */
body.admin .dash-empty {
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(6px);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 22px;
    margin-top: 28px; /* AIRE ARRIBA */
    margin-bottom: 6px; /* opcional, equilibrio */

    text-align: center;
}

body.admin .dash-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #d6c6ff;
    margin-bottom: 6px;
}

body.admin .dash-empty-text {
    font-size: 13px;
    color: #aaa;
}


/* Grid principal del dashboard */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /*margin-bottom: 28px;*/
}

    /* Cada bloque ocupa todo el alto de la celda */
    .dash-grid > .section {
        /* height: 100%; */
        display: flex;
        flex-direction: column;
    }


/* En pantallas chicas vuelve a una columna */
@media (max-width: 900px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }
}




/* fila especial ocupa todo el ancho */
.dash-row-3 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}

.dash-row-2 {
    margin-bottom : 6px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 12px;
}

    .dash-row-3 .card {
        max-width: none; /* 👈 mata el límite */
        width: 100%; /* 👈 ocupa la celda */
        margin: 0; /* 👈 evita centrado */
    }

    .dash-row-3 .glass-panel {
        max-width: none;
        width: 100%;
        margin: 0;
    }

    /* opcional: cards chicas */
    .dash-row-3 .card {
        min-height: 120px;
    }

    .dash-row-3 .glass-panel {
        box-sizing: border-box; /* 👈 CLAVE ABSOLUTA */
        max-width: none;
        width: 100%;
        margin: 0;
    }

@media (max-width: 700px) {
    .dash-row-3 {
        grid-template-columns: 1fr;
    }
}


.card-compact {
    padding: 10px 12px;
}

    .card-compact .card-title {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .card-compact .metric-row,
    .card-compact .dash-kv-row {
        font-size: 13px;
        padding: 2px 0;
    }

        .card-compact .metric-row.highlight,
        .card-compact .dash-kv-row.highlight {
            margin-top: 6px;
            padding-top: 4px;
        }
































/* =========================================================
   ADMIN – BUSCADOR / KV ROW
   ========================================================= */
/* Fondo admin */
body.admin .admin-banner-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1024px;
    background-image: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)), url('/img/banner-secundario.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: -1;
}

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

body.admin .kv-row {
    background: rgba(255,255,255,0.05);
}

/* =========================================================
   ADMIN – CONTAINER GENERAL
   ========================================================= */

body.admin .container.body-content {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* DUPLICADO / OVERRIDE intencional:
   se redefine el mismo selector para agregar padding y margin */
body.admin .container.body-content {
    padding: 24px;
    margin-top: 20px;
}


/* ===========================
   Badges  
   =========================== */
body.admin .tag-normal {
    color: #9bbcff;
    font-weight: 500;
}

body.admin .tag-pcchange {
    color: #FFD479;
    font-weight: 600;
}

body.admin .tag-click {
    cursor: pointer;
    text-decoration: underline;
}

body.admin .hwid-line {
    font-size: 12px;
    color: #777;
}

body.admin .dash-filter {
    display: flex;
    gap: 10px;
    margin: 14px 0 10px 0;
    align-items: center;
}

body.admin .pc-badge {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 212, 121, 0.15);
    border: 1px solid rgba(255, 212, 121, 0.35);
    color: #FFD479;
    font-size: 11px;
    font-weight: 600;
}

.badge {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-revoked {
    background: #3a3a3a;
    color: #c0c0c0;
    /*padding: 0px 10px; /* ← espacio interno */
    border-radius: 3px; /* ← suaviza bordes */
    line-height: 1.4; /* ← separa verticalmente */
    display: inline-block; /* ← evita que quede pegado */
    margin-left: 6px; /* ← separa del HWID */
}

.badge-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #e0c36a;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

.badge-ok {
    background: rgba(40, 167, 69, 0.15);
    color: #6fdc8c;
    border: 1px solid rgba(40, 167, 69, 0.35);
}

.badge-muted {
    background: rgba(160, 60, 60, 0.10);
    color: #c98c8c;
    border: 1px solid rgba(160, 60, 60, 0.22);
}
.badge-info {
    background: rgba(64, 180, 170, 0.12);
    color: #7fd8d1;
    border: 1px solid rgba(64, 180, 170, 0.35);
}







/* Pantallas grandes */
@media (min-width: 1400px) {
    body.admin .container.body-content {
        max-width: 1100px;
    }
}

/* =========================================================
   GLASS PANEL (BASE REUTILIZABLE)
   ========================================================= */

.glass-panel {
    background: rgba(20, 20, 20);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 18px 20px;
    opacity: 0.9;
}

/* =========================================================
   ADMIN – SECTIONS
   ========================================================= */

body.admin .section {
    margin-bottom: 8px;
}

/* ===========================
   Admin / Cliente Detalle
   =========================== */
.input-dark {
    width: 100%;
    padding: 8px;
    background: #121212;
    border: 1px solid #333;
    color: #eee;
    border-radius: 4px;
}
/* Aire entre card-header y el primer section */
body.admin .card-header ~ .section {
    margin-top: 24px;
}







/* =========================================================
   ADMIN – FILAS DE LICENCIAS (BÁSICO)
   ========================================================= */

body.admin .lic-row {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
}

/* Header de filas */
body.admin .lic-row-header {
    background: rgba(255,255,255,0.08);
    font-weight: 600;
}

/* =========================================================
   ADMIN – LICENCIA DETALLE
   ========================================================= */

/* DUPLICADO intencional:
   .section ya fue definida arriba, se refuerza spacing */
.section {
    margin-bottom: 28px;
}

    .section h3 {
        margin-bottom: 10px;
    }

/* Aire superior solo al primer bloque del admin */
body.admin .container.body-content > .section:first-child {
    margin-top: 28px;
}

/* =========================================================
   PANEL DE LICENCIAS (SCROLL)
   ========================================================= */

.panel-licencias {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #494949;
    border-radius: 8px;
    background: #0f0f14;
}

/* =========================================================
   LICENCIA CARD – BASE (REDEFINIDA MÁS ADELANTE)
   ========================================================= */

.licencia-card {
    /*box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 12px rgba(128, 0, 128, 0.15);*/
    position: relative;
    padding: 14px;
    margin-bottom: 12px;
    background: #1a1c26;
    border: 1px solid #494949;
    border-radius: 8px;
}

    .licencia-card:hover {
        transform: translateY(-2px);
        /*box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6), 0 0 14px rgba(128, 0, 128, 0.2);*/
        transition: all 0.2s ease;
    }

    /* ActivarLicencia: panel de licencia SIN sombra ni movimiento */
    .activar-licencia-page .licencia-card {
        box-shadow: none;
    }
    .activar-licencia-page .licencia-card:hover {
        transform: none;
        box-shadow: none;
    }

.licencia-action-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: transparent;
    z-index: 10;
    display: flex; /* 👈 clave */
    justify-content: flex-end; /* 👈 derecha */
    align-items: center; /* 👈 centrado vertical */
    padding-right: 8px; /* aire contra el borde */
    right: 5px;
    left: auto;
}

/* Bloque superior de la licencia */
.licencia-info {
    font-size: 14px; /* 🔑 ACA se normaliza */
    line-height: 1.1;
    margin-bottom: 8px;
}

/* Título de licencia */
.licencia-titulo {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Línea genérica */
.licencia-linea {
    margin-bottom: 4px;
    color: #cfcfcf;
}

/* Header */
.lic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Título */
.lic-title {
    font-size: 14px;
}

/* Body */
.lic-body {
    font-size: 13px;
    color: #ccc;
    line-height: 1.6;
}

/* Footer */
.lic-footer {
    margin-top: 10px;
}

/* ADMIN Licencias  */
/* Fila base */
.lic-row {
    display: grid;
    grid-template-columns:
    60px /* id */
    1.6fr /* email */
    110px /* fecha */
    140px /* hwid */
    110px /* tipo */
    90px; /* action */

    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
    transition: background 0.15s ease;
}
/* Header */
.lic-row-header {
    background: none;
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

    .lic-row-header > .col-status-left {
        padding-left: 6px; /* compensa el margin-left del badge */
    }


/* Licencias – grid extendido */
.licencias-list .lic-row {
    grid-template-columns:
    60px /* ID */
    140px /* GeneratedAt */
    80px /* Meses */
    60px /* PCs */
    140px /* Últ. activación */
    140px /* Expira */
    70px /* Estado */
    1fr /* Email */
    90px; /* Acción */
}



/* boton secundario RESTAURAR LICENCIA */
.licencia-actions-secondary {
    margin-top: 4px;
    text-align: right;
}

.licencia-restore-link {
    font-size: 12px;
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
}

    .licencia-restore-link:hover {
        color: #ddd;
        text-decoration: underline;
    }




/* ===========================
   Activaciones – grid ajustado
   =========================== */

.activaciones-list .lic-row {
    grid-template-columns:
        60px /* col id item */
        1.1fr /* col 2: Email (menos ancho) */
        120px /* col 3: Fecha */
        1.1fr /* 180px  col 4: HWID (más aire) */
        0.5fr /* col 5: Tipo */
        90px; /* col 6: Acción */
}

    .activaciones-list .lic-row > div:nth-child(4) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hover */
    .activaciones-list .lic-row:hover {
        background: rgba(255,255,255,0.10);
    }



/* =========================
   Activaciones - Grid
   ========================= */
.licdetalle-row {
    grid-template-columns:
        2.0fr /* HWID (ancho protagonista) */
        140px /* Activada */
        0.5fr /* Estado */
        0.5fr /* Revocada */
        0.5fr; /* Revocada x Lic */
}

.activaciones-title {
    margin-bottom: 10px;
    color: #ffcc66;
    font-weight: 600;
}



/* =========================================================
   FILAS / COLUMNAS ACTIVACIONES (BASE)
   ========================================================= */

/* HWID compacto y legible */
.col-hwid {
    flex: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    font-size: 12px;
    color: #777;
}

.col-act,
.col-status,
.col-rev {
    width: 150px;
    text-align: center;
}


/* Columnas */
.col-id {
    font-family: Consolas, monospace;
    color: #aaa;
}

.col-productid {
    /*width: 250px;*/
    font-size: 12px;
    color: #aaa;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.col-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-months,
.col-exp,
.col-status {
    text-align: center;
}

.col-status-left {
    text-align: left;
}

/*.col-action {
    text-align: right;
}*/

.col-date {
    color: #bbb;
    font-size: 12px;
}

.col-source {
    color: #9bbcff;
    font-size: 12px;
}

.hwid {
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
}


/* KV genérico */
.kv-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    font-size: 13px;
    grid-template-columns: 180px 1fr;
    align-items: center; /* 👈 CLAVE */
}

.kv-key {
    color: #aaa;

}

.kv-value {
    color: #eee;
}

/* cliente detalle */
.kv-value-action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-link {
    font-size: 13px;
    opacity: 0.85;
    text-decoration: none;
}

    .action-link:hover {
        text-decoration: underline;
    }



/* editar email */
.email-edit-panel {
    margin-top: 14px;
    /*padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);*/
}

.email-edit-row {
    margin-bottom: 8px;
}

.email-edit-actions {
    display: flex;
    gap: 10px;
}












/* =========================================================
   MISCELANIAS
   ========================================================= */
.titulo-resultados {
    font-size: 16px;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #e6e6e6;
}


.subtitulo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.subtitulo {
    display: block;
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #e6e6e6;
}

.subtitulo-sin {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #787878;
}

/* HWID con ellipsis en el medio */
.hwid-ellipsis {
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

    .hwid-ellipsis::before {
        content: attr(data-hwid-start);
    }

    .hwid-ellipsis::after {
        content: attr(data-hwid-end);
        position: absolute;
        right: 0;
        background: linear-gradient(to right, transparent, rgba(20,20,20,0.75) 30%);
        padding-left: 20px;
    }
/* truncado elegante */
.truncate {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mono {
    font-family: Consolas, monospace;
    font-size: 12px;
    color: #ddd;
}

.lbl-error {
    color: #f0a020; /* naranja warning */
    font-weight: 500;
}






















/* Email destacado en alertas */
.alert-email {
    color: #FFD479; /* amarillo */
    font-weight: 600;
}

/* Botón chico dentro de alertas */
.alert-btn {
    margin-left: 8px;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 6px;
}








/* Paneles estilo Numeros del Dis / Salud Mental */
.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-row {
    display: grid;
    grid-template-columns: 1fr auto; /* texto / valor */
    align-items: center;
    font-size: 14px;
    width: 100%;
}

    .metric-row span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .metric-row strong {
        text-align: right;
        white-space: nowrap;
    }

    .metric-row.highlight {
        margin-top: 8px;
        padding-top: 6px;
        border-top: 1px solid rgba(255,255,255,.1);
        color: #f3b6ff;
    }


/* --- Graficas --- */
.chart-wrap {
    margin-top: 10px;
}

    .chart-wrap canvas {
        display: block;
        width: 100% !important;
    }





/* --- boton action de - Resumen General --- */
.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* columna derecha fija */
.metric-action-slot {
    min-width: 48px; /* 👈 MISMO ancho siempre */
    text-align: right;
}

/* botón normal */
.btn-mini {
    padding: 3px 8px;
    font-size: 12px;
    min-width: 32px;
    text-align: center;
}

/* botón fantasma (sin acción) */
.btn-ghost {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,.65);
    cursor: default;
    pointer-events: none;
}

.metric-action-slot {
    min-width: 48px; /* columna fija */
    display: flex;
    justify-content: flex-end;
}

    .metric-action-slot .home-btn {
        min-width: 32px; /* 👈 ancho uniforme del botón */
        height: 22px;
        display: inline-flex; /* 👈 clave */
        align-items: center; /* 👈 centro vertical */
        justify-content: center; /* 👈 centro horizontal */
        padding: 0 6px;
        text-align: center;
        box-sizing: border-box;
    }

.metric-group-title {
    margin: 10px 0 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.45);
}

.metric-action-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 80px;
}

.metric-subtitle {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: .7;
}

.metric-divider {
    margin: 6px 0;
    border-top: 1px solid rgba(255,255,255,.1);
}

.chart-container {
    margin-top: 8px;
}

/* botón fantasma */
.btn-ghost {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,.65);
    cursor: default;
    pointer-events: none;
}



.chart-tall {
    height: 150px;
}































/* ===============================
   CLIENTES – GRID DE COLUMNAS
   =============================== */

.clientes-list .lic-row {
    display: grid;
    grid-template-columns: 60px /* ID */
    1.6fr /* Email */
    1.2fr /* Nombre */
    110px /* Licencias */
    110px /* Activas */
    120px /* Alta */
    150px; /* Acción */
    align-items: center;
    column-gap: 12px;
}

/* Header mantiene el mismo grid */
.clientes-list .lic-row-header {
    font-weight: 600;
    opacity: .85;
}

/* Evitar desbordes feos */
.clientes-list .lic-row > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Acción alineada prolija */
.clientes-list .col-action {
    text-align: right;
}
.clientes-list .lic-row[data-licencias="0"] {
    opacity: .55;
}












/*🎨 CSS MÍNIMO (solo para los ...)
    Esto es lo único nuevo, y es chico.*/

.btn-edit-dots {
    background: none;
    border: 1px solid transparent;
    padding: 0 6px;
    margin-left: 4px;
    color: #999;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
}

    .btn-edit-dots:hover {
        border-color: #555; /* gris suave */
        color: #c084fc; /* violeta */
    }






.home-btn-soft {
    font-weight: 400; /* normal */
    color: #AAA9AB;
}

/*  Solo aseguramos que el texto explicativo sea discreto:  */
.muted {
    color: #8a8a8a;
    font-size: 13px;
}
/* MisLicencias - Tarjeta de Licencias - Si querés que el (+Y) se vea más “placeholder” */ 
.licencia-linea {
    opacity: 0.95;
}




/* PanelNombre – legacy inline (solo página vieja) */
#MainContent_PanelNombre {
    text-align: center;
}

    /* Label inline */
    #MainContent_PanelNombre .labelGrande,
    #MainContent_PanelNombre .labelChica {
        display: inline;
    }

    /* Inputs inline y chicos */
    #MainContent_PanelNombre input.textbox,
    #MainContent_PanelNombre input.btn {
        display: inline-block;
        vertical-align: middle;
        width: 300px;
        max-width: 300px;
    }

.container.body-content #MainContent_PanelNombre input.textbox {
    width: 300px !important;
    max-width: 300px !important;
    display: inline-block !important;
}

/* =========================
   Amplificador Cambios PC
   ========================= */

#MainContent_PanelNombre .pc-amplificador-inline,
.pc-amplificador-inline {
    margin-top: 6px; 
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* textbox chico (3 dígitos) */
/* =========================
   FIX DEFINITIVO: textbox amplificador
   ========================= */
/* Gana a .container.body-content input.textbox */
.container.body-content #MainContent_txtAmplificador {
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    text-align: center;
    padding: 6px 4px;
}
/* botones compactos */
.pc-amplificador-btn {
    padding: 4px 8px;
    font-size: 13px;
}



/* estilos de MisLicencias: */
.licencia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-bottom: 8px;*/
}


.licencia-title {
    font-size: 18px;
    font-weight: 600;
}
.licencia-actions {
    display: flex;
    gap: 6px;
}
.licencia-resumen {
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.lic-resumen-item {
    background: rgba(255,255,255,0.03); /* mucho más sutil */
    /* border: 1px solid rgba(255,255,255,0.08); */
    padding: 8px 20px; /* ↑ más alto */
    line-height: 1.6; /* ↑ aire interno */
    border-radius: 6px; /* 999px; / badge real */
    font-size: 13px;
    color: #cfcfcf;
    cursor: default; /* CLAVE */
    user-select: none;
    margin-bottom: 5px;
}

.licencia-subinfo {
    font-size: 13px;
    color: #9a9a9a;
    margin-bottom: 0px;
}

    .licencia-subinfo.precio {
        color: #c7b7ff; /* #b9bbd6; /*color: #c7b7ff; /* lila suave */
        font-size: 13px;
        margin-top: 2px;
        margin-bottom: 18px;
    }

.licencia-datos {
    margin: 10px 0 12px;
}

.lic-dato-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
}

.lic-dato-key {
    color: #9a9a9a;
}

.lic-dato-value {
    color: #dcdcdc;
}

    .lic-dato-value.estado {
        font-weight: 600;
    }

/* Estado por color (usa tus clases existentes) */
.licencia-card.active .lic-dato-value.estado {
    color: #4caf50;
}

.licencia-card.expired .lic-dato-value.estado {
    color: #e57373;
}

.licencia-card.pending .lic-dato-value.estado {
    color: #ffb74d;


}
/* =========================
   Estados de Licencia
   ========================= */

/* 🟢 Activa */
.estado-activa {
    /*color: #4caf50;*/
    font-weight: 500;
}

/* 🟡 Pendiente de activación */
.estado-pendiente {
    /*color: #ffc107;*/
    font-weight: 500;
}

/* 🟠 Por expirar (warning fuerte) */
.estado-por-expirar {
    /*color: #ffb74d;*/
    font-weight: 500;
}

/* 🔴 Expirada */
.estado-expirada {
    /* color: #e57373; */
    font-weight: 500;
}

/* 🔴 Revocada (más dura que expirada) */
.estado-revocada {
    /*color: #ef5350;*/
    font-weight: 500;
}


/*  boton cambioPC */
.licencia-resumen-action {
    margin-top: 5px;
}

.btn-cambio-pc.inline {
    padding: 4px 10px;
    font-size: 13px;
}


/*======================================
    Soporte.vb
========================================*/
.label-msg-ok {
    color: #7CFFB2;
}

.label-msg-error {
    color: #FF8A8A;
}

.info-adicional-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-size: 13px;
    opacity: 0.85;
    gap: 16px;
}



/* ActivarLicencias - panelNombreVertical */
.info-text {
    max-width: 70%;
    line-height: 1.4;
}


.form-vertical {
    text-align: left;
    width: 100%;
}

    .form-vertical .label {
        display: block;
        margin-bottom: 4px;
    }

    .form-vertical .textbox {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }












/* Cliente_detalle boton "editar email" */
.kv-value-split {
    display: grid;
    grid-template-columns: 1fr auto; /* email | botón */
    align-items: center;
    gap: 12px;
}

.kv-value-split span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kv-value-split {
    position: relative; /* referencia */
    padding-right: 90px; /* espacio para el botón */
}

    .kv-value-split .home-btn-2 {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

.home-btn-2 {
    align-items: center;
    gap: 6px;
    padding: 2px 10px; /* 🔽 más chicos */
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06); /* gris sutil */
    color: #d0d0d0; /* texto gris claro */
    font-size: 13px; /* 🔽 más chico */
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.home-btn-2:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}


/* Solo el renglón que tiene acción a la derecha */
.kv-row.kv-row-action {
    position: relative;
}

/* Solo el botón de cambiar email */
.kv-row-action .btn-email-action {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}



















/* =========================
    Comprar Licencias 
    =======================*/

/* Micro-animación suave al entrar (muy sutil, pro)
    Nada exagerado.
    Solo “aparecer flotando”. */
@keyframes fadeUp {
    from
{
    opacity: 0;
    transform: translateY(12px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* 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); /* rgba(255,255,255,0.18); */
    border-radius: 14px;
    padding: 14px 14px 14px 24px;
    font-size: 15px;
    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: 12px;
        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;
    }

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

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

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



/* Wrapper de la página */
.sales-page {
    padding-top: 36px; /* 👈 aire visual superior */
    padding-bottom: 36px; /* 👈 aire visual superior */
    padding-left: 36px; /* 👈 aire visual superior */
    padding-right: 36px; /* 👈 aire visual superior */
    display: block;
    /*width: 100%;   👈 esto queda mal  */
    font-size: 14px; /* antes ~13–14px percibido */
}

/* Header Liviano */
.sales-header {
    text-align: center;
    margin-bottom: 10px;
}
    .sales-header .label {
        font-size: 15px; /* antes ~13px */
        opacity: 0.9;
    }
    
    .sales-header .app-title {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 8px;
    }


.banner-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px; /* separación logo ↔ título */
}


/* Lista humana (bullets suaves) */
.bullet-list {
    list-style: none;
    padding-left: 0;
    margin: 12px auto 18px auto;
    max-width: 720px;
    margin-bottom: 18px;
}

    .bullet-list li {
        position: relative;
        padding-left: 13px;
        margin-bottom: 7px;
        font-size: 14px;
        opacity: 0.9;
    }

        .bullet-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #8f5bff; /* purple */
        }
/* Grid de ofertas */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 14px;
}

/* Cards de Licencias */
.license-card {
    background: rgba(255,255,10,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 13px 13px 27px 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;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 14px 0;
    font-size: 14px;
    opacity: .9;
}

    .plan-features li {
        margin: 4px 0;
    }

        .plan-features li::before {
            content: "• ";
            color: #9c6cff;
        }




@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;
    }
}

.license-card.auto-hover {
    animation: autoHover 0.8s ease-out both;
}
/* BONUS (opcional)
Si querés solo una vez por sesión:
if (!sessionStorage.getItem("pricingHoverShown")) {
    sessionStorage.setItem("pricingHoverShown", "1");
    // disparar animación
}*/


.badge-recommended {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(128,0,128,0.15);
    color: #cfa8ff;
    border: 1px solid rgba(128,0,128,0.35);
    opacity: 0; /* 👈 arranca invisible */
    transform: translateY(-4px); /* 👈 leve offset */
    animation: badgeIn .3s ease-out forwards;
    animation-delay: 1.1s; /* 👈 después del fade + autoHover */
}
@keyframes badgeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Validar Token*/
.box-actions {
    margin-top: 16px; /* separación respecto al mensaje */
    text-align: center; /* opcional, si querés centrar el botón */
}

.lic-plan-title {
    font-size: 16px;
    font-weight: 600;
    color: #d0d0d0;
    margin-bottom: 6px;
    color: #8fb7ff; /* AZUL CLARO muy bueno */
                    /* color: #9fe0b3; /* VERDE SUAVE */
                    /* color: #b38cff;   /* púrpura suave */  
    line-height: 1.3;
}


.lic-plan-wrapper {
    padding: 0px 0px 8px 0px;
}




/* Licencias – grid extendido */
.ofertas-list .lic-row {
    grid-template-columns:
    60px /* ID */
    250px /* PRODUCT ID */
    150px /* PLAN */
    35px /* MESES */
    40px /* PCS */
    60px /* Licencias inc */
    100px /* PRECIO */
    80px /* ESTADO */
    100px /* Accion */
    1fr /* Accion */
    130px; /* Acción */
}
.col-lics {
    text-align: center;
}

.col-pcs {
    text-align: center;
}
.ofertas-list .col-plan {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ofertas-list .col-action {
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    text-align: left; /* 👈 CLAVE */
}

.lic-row-header > .col-action {
    padding-left: 6px; /* compensa el margin-left del badge */
}



.oferta-title {
    font-size: 15px;
    font-weight: 600;
    color: #b38cff; /* mismo púrpura que licencias */
    margin-bottom: 2px;
}

/*   Solicitar Acceso */
.actions-split {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

    .actions-split > :last-child {
        margin-left: auto; /* 👈 empuja el segundo a la derecha */
    }


































/* ========================= */
/* CONFIRM MODAL (DARK UI)   */
/* ========================= */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

    .confirm-overlay.hidden {
        display: none;
    }

.confirm-modal {
    width: 420px;
    max-width: calc(100% - 40px);
    background: rgba(20, 20, 24, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 18px 20px 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: confirmPop 0.18s ease-out;
}

/* Header */
.confirm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.confirm-icon {
    font-size: 18px;
}

.confirm-title {
    font-size: 16px;
    font-weight: 600;
    color: #eee;
}

/* Body */
.confirm-body {
    margin-bottom: 18px;
}

.confirm-message {
    font-size: 14px;
    color: #ddd;
    margin-bottom: 6px;
}

.confirm-detail {
    font-size: 13px;
    color: #aaa;
}

/* Actions */
.confirm-actions {
    display: flex;
    gap: 10px;
}

    .confirm-actions .btn {
        min-width: 110px;
    }

    .confirm-actions .btn-primary {
        margin-left: auto;
    }

/* Animation */
@keyframes confirmPop {
    from {
        transform: scale(0.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}





/* ======================================= */
/* TOAST FLOTANTE   arriba derecha         */
/* ======================================= */
.toast {
    position: fixed;
    top: 56px; /* app-topbar.heigth-> 38px + aire-> 18px = 56px*/
    right: 18px;
    background: rgba(20, 20, 24, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #eaeaea;
    font-size: 13px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    z-index: 9999;
    animation: toastIn 0.25s ease-out;
    padding: 14px 18px; /* antes 10px 14px */
    font-size: 14px; /* antes 13px */
    line-height: 1.35;
}

    .toast.hidden {
        display: none;
    }

    .toast.success {
        border-left: 3px solid #a78bfa; /* púrpura suave */   /*  #7a6cff; /* violeta SUPERBOX */
    }

    .toast.error {
        border-left: 3px solid #ff5c5c;
    }

/* Animación */
@keyframes toastIn {
    from {
        transform: translateY(-6px);
        opacity: 0;
    }

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





/* ======================================= */
/*  🔥 FORZAR TOAST COMO MODAL CENTRADO    */
/* ======================================= */
#modalMsg {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 99999;
}

    #modalMsg.hidden {
        display: none;
    }

    /* Caja modal */
    #modalMsg .modalMsg-content {
        width: 420px;
        max-width: calc(100% - 40px);
        background: rgba(20, 20, 24, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 18px 20px 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        animation: modalPop 0.18s ease-out;
        text-align: center;
    }

/* Icono */
.modalMsg-icon {
    font-size: 25px;
    margin-bottom: 18px;
}

/* Texto */
.modalMsg-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 28px;
    white-space: pre-line; /* 👈 permite saltos de línea */
}

/* Botón */
.modalMsg-btn {
    min-width: 140px;
}

/* Animación */
@keyframes modalPop {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}









/* Trials */
/* download trial*/
.page-container {
    max-width: 900px;
    margin: 0 auto;
    color: #C0C0C0;
    padding-top: 70px; /* ajustá si querés */
}

.title {
    font-size: 30px;
    font-weight: 800;
    color: white;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 16px;
    margin-bottom: 25px;
    color: #bfbfbf;
}

.trial-box {
    border: 1px solid rgba(255,255,255,0.18);
    padding: 28px 32px; /* ⬅ más aire */
    border-radius: 14px; /* ⬅ como license-card */
    margin-top: 30px;
    max-width: 820px; /* ⬅ más presencia */
    margin-left: auto;
    margin-right: auto;
}

    .trial-box h3 {
        font-size: 18px;
        margin-top: 18px;
        margin-bottom: 10px;
        color: white;
    }

    .trial-box ul {
        font-size: 15px; /* antes parecía 13–14 */
        line-height: 1.5;
    }


ul li {
    margin-bottom: 6px;
}

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

.btn-big {
    display: inline-block;
    padding: 14px 22px;
    margin: 6px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    border: 1.5px solid #494949;
}

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

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

.btn-big:hover {
    background: rgb(48, 50, 70);
}

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

page-container.page-downloadtrial {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 20px 30px 20px; /* el padding-top que antes te molestaba */
}

form {
    background: transparent !important;
    backdrop-filter: none !important;
}




























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


/* botones en panel licencia, editar nombre cliente, botones debajo textbox con aire */
@media (max-width: 768px) {

    .edit-nombre {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        .edit-nombre .textbox {
            margin-bottom: 8px;
        }

        .edit-nombre .home-btn {
            margin-top: 0px;
        }
}


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

.user-email {
    font-size: 12px;
    color: #b39ddb;
    white-space: normal; /* 🔥 permite varias líneas */
    word-break: break-word; /* rompe palabras largas */
    font-weight: 400;
    opacity: 0.60;
}

#topbarSession {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* 🔥 permite salto de línea */
}

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

@media (max-width: 768px) {

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

    #topbarSession {
        gap: 6px;
    }
}


.lang-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.8;
}

.lang-link {
    text-decoration: none;
    color: #b39ddb;
}

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

.lang-separator {
    opacity: 0.5;
}













/* ADMIN Comentarios */
.com-row {
    display: grid;
    grid-template-columns:
    60px /* id */
    120px /* nombre */
    0.8fr /* comentario */
    120px /* fecha */
    80px /* estado */
    80px; /* accion */

    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
    transition: background 0.15s ease;
}
/* Header */
.com-row-header {
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

    .com-row-header > .col-status-left {
        padding-left: 6px; /* compensa el margin-left del badge */
    }

.com-row div:nth-child(3) {
    word-break: break-word;
}
















/* VENDEDORES Dashboard cards */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.dash-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.dash-title {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-value {
    font-size: 20px;
    font-weight: 600;
    margin-top: 4px;
}

/* Dashboard performance colors */

.dash-neutral {
    border-color: rgba(255,255,255,0.08);
}

.dash-ok {
    border-color: #2ecc71;
}

.dash-good {
    border-color: #4aa3ff;
}
.dash-value {
    font-size: 26px;
    font-weight: 700;
}
/* Lead conversion indicator */

.lead-ok {
    color: #2ecc71;
    font-weight: 600;
}

.lead-none {
    color: #777;
}

.panel-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.panel-scroll-big {
    max-height: 70vh;
    overflow-y: auto;
}

    /* Chrome / Edge / Brave */
.panel-scroll::-webkit-scrollbar,
.panel-scroll-big::-webkit-scrollbar {
    width: 10px;
}

.panel-scroll::-webkit-scrollbar-track,
.panel-scroll-big::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.panel-scroll::-webkit-scrollbar-thumb,
.panel-scroll-big::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 6px;
}

    .panel-scroll::-webkit-scrollbar-thumb:hover,
    .panel-scroll-big::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

/*.panel-scroll,               Esto era para FireFox pero queda con error de sintaxys verde
.panel-scroll-grande {
    scrollbar-width: thin;
    scrollbar-color: #444 #1e1e1e;
}*/





/* ADMIN Vendedores */
.ven-row {
    display: grid;
    /* id | nombre | email | comisión | leads | licencias | total | estado | acción */
    grid-template-columns: 60px 160px 220px 60px 50px 60px 120px 60px 100px;

    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
    transition: background 0.15s ease;
}
/* Header */
.ven-row-header {
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

    .ven-row-header > .col-status-left {
        padding-left: 6px; /* compensa el margin-left del badge */
    }

.ven-row div:nth-child(3) {
    word-break: break-word;
}
.col-id {
    text-align: center;
}


.col-leads {
    text-align: center;
}

.col-licencias {
    text-align: center;
}

.col-total {
    text-align: right;
}

.col-fecha {
    text-align: center;
}

.col-vendedor {
    text-align: left;
}

.col-metodopago {
    text-align: center;
}

.badge-aladerecha {
    display: inline-block;
    margin-left: 0px;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap;
}






/* ADMIN Comisiones */
.comi-row {
    display: grid;
    grid-template-columns:
        220px /* vendedor */
        90px /* licencias */
        120px /* ventas */
        120px /* comisión */
        180px; /* acción */

    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
    transition: background 0.15s ease;
}

/* Header */
.comi-row-header {
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

    .comi-row-header > .col-status-left {
        padding-left: 6px; /* compensa el margin-left del badge */
    }







/* columnas comisiones */
.col-vendedor {
    font-weight: 600;
}

.col-licencias {
    text-align: center;
}

.col-ventas {
    text-align: right;
}
.col-comision {
    text-align: right;
    font-weight: 600;
    color: #2ecc71;
}
.col-action {
    margin-left:10px; 
    text-align: left;
    white-space: nowrap;
}




/* =========================
   Comisiones pagadas historial
========================= */
.comihist-row {
    display: grid;
    grid-template-columns: 140px 220px 90px 120px 150px 50px 120px;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
}

.comihist-row-header {
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
}






/* =========================
   Leads del vendedor
========================= */
.lead-row {
    display: grid;
    grid-template-columns:
        400px /* email */
        240px /* fecha */
        80px; /* compró */

    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
}

.lead-row-header {
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.lead-row div:nth-child(1) {
    word-break: break-word;
}




/* =========================
   Licencias vendidas
========================= */
.licvend-row {
    display: grid;
    grid-template-columns:
        60px /* id */
        1fr /* email */
        150px /* fecha */
        140px /* Venta ID */
        100px /* precio */
        110px /* estado */
        120px; /* acción */

    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
}

.licvend-row-header {
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.licvend-row div:nth-child(2) {
    word-break: break-word;
}


/* =========================
   Comisiones detalle
========================= */
.comidet-row {
    display: grid;
    grid-template-columns:
        60px
        1fr
        140px
        140px
        100px
        100px
        140px;

    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
}


/* =========================
   Comisiones pagadas
========================= */
.comipag-row {
    display: grid;
    grid-template-columns: 140px 90px 120px 140px;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
}

.comipag-row-header {
    background:rgba(255,255,255,0.08);
    font-size:11px;
    color:#999;
    font-weight:600;
    text-transform:uppercase;
}



/* =========================
   Comisiones pagadas detalle
========================= */
.comipdet-row {
    display:grid;
    grid-template-columns:
        60px
        1fr
        140px
        140px 
        100px
        100px
        140px;

    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 13px;
    color: #ddd;
}

.comipdet-row-header {
    background:rgba(255,255,255,0.08);
    font-size:11px;
    color:#999;
    font-weight:600;
    text-transform:uppercase;
}

.search-row {
    margin-bottom: 10px;
}

.label-msg {
    display: block;
    margin-top: 6px;
    margin-bottom: 12px;
}

.title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.badge-anulada-big {
    background: rgba(160,60,60,0.18);
    color: #ffb3b3;
    border: 1px solid rgba(200,80,80,0.35);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.pago-anulado {
    opacity: 0.75;
}

.section-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.btn-small {
    padding: 4px 10px;
    font-size: 12px;
}
.preview-box {
    font-size: 13px;
    color: #ccc;
    background: rgba(255,255,255,0.05);
    padding: 8px 10px;
    border-radius: 6px;
    line-height: 1.4;
}
.pill-founder {
    display: inline-block;
    margin-left: 8px;
    margin-top: 19px;
    padding: 3px 10px;
    font-size: 12px;
    /*font-weight: bold;*/
    border-radius: 5px;
    background: rgba(108,60,255,0.70);
    /*color: #a78bfa;*/
    color: whitesmoke;
    vertical-align: middle;
}
.pill-founder-SOLO {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    background: rgba(108,60,255,0.50);
    color: #a78bfa;
    vertical-align: middle;
}
.plan-hook {
    font-size: 12px;
    color: #a78bfa;
    text-align: center;
    margin-bottom: 10px;
    opacity: 0.9;
}
.plan-note {
    font-size: 11px;
    text-align: center;
    opacity: 0.7;
    margin-top: 3px;
    margin-bottom: 3px;
}