/**
 * CIMA — Coordinador Inteligente de Monitoreo Avanzado
 * Archivo  : app/style/upsell.css
 * Función  : Estilos del upsell contextual (modal de oferta Pro) y el contador/banner de
 *            prueba. Reusa las variables del tema activo (--primary/--accent/--glass-*) —
 *            cero colores hardcodeados, cero degradados.
 * Autores  : CIMA Development Group
 * Copyright: © 2024–2026 CIMA Development Group. Todos los derechos reservados.
 */

/* ══ Oferta dentro del modal de upsell (reusa .cima-modal-box/.cima-modal-title/.cima-modal-body) ══ */
.cima-upsell-offer {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    color: var(--text-main, #fff);
    font-size: 0.86rem;
    line-height: 1.5;
    text-align: left;
}
.cima-upsell-offer i { color: var(--accent); margin-right: 6px; }
.cima-upsell-offer strong { color: var(--accent); }
.cima-upsell-offer-sub {
    display: block;
    margin-top: 2px;
    color: var(--text-muted, rgba(255,255,255,0.68));
    font-size: 0.78rem;
}
[data-theme="light"] .cima-upsell-offer-sub { color: rgba(0,0,0,0.55); }

/* ══ Contador/banner de prueba — chip flotante superior, sutil, no tapa contenido ══ */
.cima-trial-banner {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99980;   /* debajo de .cima-modal-overlay (99999) */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--glass-bg, rgba(20,20,30,0.92)) 92%, transparent);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.14));
    backdrop-filter: blur(var(--glass-blur, 16px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 16px));
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
    color: var(--text-main, #fff);
    font-size: 0.8rem;
    max-width: calc(100vw - 24px);
    animation: cima-trial-in .22s ease both;
}
@keyframes cima-trial-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.cima-trial-banner i.bi-hourglass-split { color: var(--primary); flex-shrink: 0; }
.cima-trial-banner.is-urgent i.bi-exclamation-triangle-fill,
.cima-trial-banner.is-expired i.bi-exclamation-triangle-fill { color: var(--accent); flex-shrink: 0; }
.cima-trial-banner.is-urgent {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border, rgba(255,255,255,0.14)));
}
.cima-trial-banner.is-expired {
    background: color-mix(in srgb, var(--accent) 22%, var(--glass-bg, rgba(20,20,30,0.92)));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.cima-trial-banner-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cima-trial-banner-cta {
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    background: color-mix(in srgb, var(--primary) 65%, transparent);
    color: #fff;
    white-space: nowrap;
    transition: opacity .15s;
}
.cima-trial-banner-cta:hover { opacity: 0.85; }
.cima-trial-banner.is-expired .cima-trial-banner-cta {
    background: color-mix(in srgb, var(--accent) 70%, transparent);
}
.cima-trial-banner-x {
    border: none;
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,0.68));
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px;
    line-height: 1;
    flex-shrink: 0;
}
.cima-trial-banner-x:hover { color: var(--text-main, #fff); }
[data-theme="light"] .cima-trial-banner-x { color: rgba(0,0,0,0.55); }
[data-theme="light"] .cima-trial-banner-x:hover { color: #1a1a2e; }

@media (max-width: 560px) {
    .cima-trial-banner-txt { max-width: 130px; }
}