/*
 * BBS Comunicaciones — Custom Brand CSS
 * Tema: Lagom2 Futuristic / Orange → BBS Gold
 * Colores corporativos: Dorado #db9500 · Oscuro #0f1117 · Texto claro #e8eaf0
 */

/* ── VARIABLES DE MARCA BBS ─────────────────────────────────── */
:root {
    /* Primario BBS — Dorado */
    --brand-primary:                  #db9500;
    --brand-primary-lighter:          #f0b030;
    --brand-primary-lighter-2:        #f5cc70;
    --brand-primary-lighter-3:        #fae3aa;
    --brand-primary-lighter-4:        #fdf3dc;
    --brand-primary-darker:           #a97518;
    --brand-primary-gradient-start:   #db9500;
    --brand-primary-gradient-end:     #f0b030;
    --brand-primary-gradient-h:       linear-gradient(90deg, #db9500 0%, #f0b030 100%);
    --brand-primary-gradient-v:       linear-gradient(0deg, #f0b030 0%, #db9500 100%);

    /* Secundario BBS — Dorado oscuro */
    --brand-secondary:                #b87d00;
    --brand-secondary-lighter:        #db9500;
    --brand-secondary-darker:         #8a5e00;
    --brand-secondary-gradient-start: #db9500;
    --brand-secondary-gradient-end:   #8a5e00;
    --brand-secondary-gradient-h:     linear-gradient(90deg, #db9500 0%, #8a5e00 100%);
    --brand-secondary-gradient-v:     linear-gradient(0deg, #8a5e00 0%, #db9500 100%);

    /* Fondos oscuros BBS */
    --body-bg:                        #0f1117;
    --card-bg:                        #161920;
    --panel-bg:                       #1a1e28;
    --sidebar-bg:                     #12151d;
    --navbar-bg:                      #0d1018;
    --footer-bg:                      #0a0c12;

    /* Botón primario */
    --btn-primary-bg:                 #db9500;
    --btn-primary-border:             #b87d00;
    --btn-primary-color:              #0f1117;
    --btn-primary-hover-bg:           #f0b030;

    /* Bordes */
    --border-color:                   rgba(219, 149, 0, 0.25);
    --border-color-light:             rgba(219, 149, 0, 0.12);
}

/* ── NAVBAR / HEADER ────────────────────────────────────────── */
.navbar,
.navbar-main,
.site-header,
header.header {
    background: #0d1018 !important;
    border-bottom: 1px solid rgba(219,149,0,0.3) !important;
}

.navbar-brand img,
.logo img {
    filter: brightness(1.1);
}

/* ── BOTONES ────────────────────────────────────────────────── */
.btn-primary,
.btn-order,
button[type="submit"].btn-primary,
.package-footer .btn,
a.btn-primary {
    background: linear-gradient(135deg, #db9500 0%, #f0b030 100%) !important;
    border-color: #b87d00 !important;
    color: #0f1117 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 12px rgba(219,149,0,0.35) !important;
    transition: all 0.25s ease !important;
}
.btn-primary:hover,
.btn-order:hover,
a.btn-primary:hover {
    background: linear-gradient(135deg, #f0b030 0%, #ffc84a 100%) !important;
    box-shadow: 0 4px 18px rgba(219,149,0,0.55) !important;
    transform: translateY(-1px);
}

.btn-default,
.btn-secondary {
    border-color: rgba(219,149,0,0.4) !important;
    color: #db9500 !important;
    background: transparent !important;
}
.btn-default:hover {
    background: rgba(219,149,0,0.1) !important;
    border-color: #db9500 !important;
}

/* ── TARJETAS DE PRODUCTO ────────────────────────────────────── */
.package,
.package-wrapper,
.product-card {
    background: #161920 !important;
    border: 1px solid rgba(219,149,0,0.2) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    overflow: hidden;
}
.package:hover,
.package-wrapper:hover {
    border-color: rgba(219,149,0,0.6) !important;
    box-shadow: 0 8px 30px rgba(219,149,0,0.2) !important;
    transform: translateY(-3px);
}

/* Header de tarjeta */
.package-header,
.package-name,
.package-title {
    background: linear-gradient(135deg, #1a1e28 0%, #12151d 100%) !important;
    border-bottom: 1px solid rgba(219,149,0,0.25) !important;
}

.package-name h3,
.package-title,
.package h2 {
    color: #f0b030 !important;
    font-weight: 700 !important;
}

/* Precio en tarjeta (el precio WHMCS por defecto) */
.package-price .price,
.package-footer .price,
.price-amount,
.package-price-amount {
    color: #db9500 !important;
    font-weight: 700 !important;
}
.price-cycle,
.price-per {
    color: rgba(219,149,0,0.7) !important;
}

/* Descripción HTML interna de BBS ya usa sus propios colores */
.package-content,
.package-body {
    background: transparent !important;
}

/* Íconos check verdes dentro de la descripción */
.package-features li::before {
    color: #36C055 !important;
}

/* ── PRECIOS DESTACADOS ──────────────────────────────────────── */
.price-main,
.price-value,
.package-price-value {
    color: #db9500 !important;
}

/* ── NAVEGACIÓN / MENÚ ───────────────────────────────────────── */
.nav-link:hover,
.nav-item.active > .nav-link,
.main-menu .active > a {
    color: #db9500 !important;
}

.dropdown-menu {
    background: #161920 !important;
    border: 1px solid rgba(219,149,0,0.25) !important;
}
.dropdown-item:hover {
    background: rgba(219,149,0,0.1) !important;
    color: #f0b030 !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar .panel,
.sidebar .box,
.sidebar-widget {
    background: #161920 !important;
    border: 1px solid rgba(219,149,0,0.15) !important;
    border-radius: 8px !important;
}
.sidebar .panel-heading {
    background: linear-gradient(90deg, rgba(219,149,0,0.15) 0%, rgba(219,149,0,0.05) 100%) !important;
    border-bottom: 1px solid rgba(219,149,0,0.2) !important;
    color: #f0b030 !important;
}

/* ── PANELES / CARDS ─────────────────────────────────────────── */
.panel,
.card {
    background: #161920 !important;
    border: 1px solid rgba(219,149,0,0.15) !important;
    border-radius: 8px !important;
}
.panel-heading,
.card-header {
    background: linear-gradient(90deg, rgba(219,149,0,0.12) 0%, rgba(219,149,0,0.04) 100%) !important;
    border-bottom: 1px solid rgba(219,149,0,0.2) !important;
    color: #f0b030 !important;
    font-weight: 600 !important;
}

/* ── TABLAS ──────────────────────────────────────────────────── */
.table thead th {
    background: rgba(219,149,0,0.1) !important;
    color: #f0b030 !important;
    border-bottom: 2px solid rgba(219,149,0,0.3) !important;
    font-weight: 600 !important;
}
.table tbody tr:hover td {
    background: rgba(219,149,0,0.05) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255,255,255,0.02) !important;
}

/* ── BADGES Y LABELS ─────────────────────────────────────────── */
.label-primary,
.badge-primary,
span.badge {
    background: rgba(219,149,0,0.2) !important;
    color: #f0b030 !important;
    border: 1px solid rgba(219,149,0,0.35) !important;
}
.label-success,
.badge-success {
    background: rgba(54,192,85,0.15) !important;
    color: #36C055 !important;
}
.label-danger,
.badge-danger {
    background: rgba(220,53,69,0.15) !important;
    color: #ff6b7a !important;
}

/* ── STATUS ACTIVO ───────────────────────────────────────────── */
.text-success,
.status-active {
    color: #36C055 !important;
}
.text-danger,
.status-suspended {
    color: #ff6b7a !important;
}
.text-warning {
    color: #f0b030 !important;
}
.text-primary {
    color: #db9500 !important;
}

/* ── FORMULARIOS ─────────────────────────────────────────────── */
.form-control {
    background: #12151d !important;
    border: 1px solid rgba(219,149,0,0.25) !important;
    color: #e8eaf0 !important;
    border-radius: 6px !important;
}
.form-control:focus {
    border-color: #db9500 !important;
    box-shadow: 0 0 0 3px rgba(219,149,0,0.2) !important;
    background: #0f1117 !important;
}
select.form-control option {
    background: #161920 !important;
}

/* ── ALERTAS ─────────────────────────────────────────────────── */
.alert-success {
    background: rgba(54,192,85,0.12) !important;
    border-color: rgba(54,192,85,0.3) !important;
    color: #70d786 !important;
}
.alert-info {
    background: rgba(219,149,0,0.1) !important;
    border-color: rgba(219,149,0,0.3) !important;
    color: #f0b030 !important;
}
.alert-warning {
    background: rgba(240,176,48,0.12) !important;
    border-color: rgba(240,176,48,0.3) !important;
    color: #f5cc70 !important;
}
.alert-danger {
    background: rgba(220,53,69,0.12) !important;
    border-color: rgba(220,53,69,0.3) !important;
    color: #ff6b7a !important;
}

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.breadcrumb {
    background: rgba(219,149,0,0.08) !important;
    border: 1px solid rgba(219,149,0,0.15) !important;
}
.breadcrumb-item a {
    color: #db9500 !important;
}
.breadcrumb-item.active {
    color: #f0b030 !important;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer,
footer {
    background: #0a0c12 !important;
    border-top: 1px solid rgba(219,149,0,0.25) !important;
}
.footer-primary a:hover {
    color: #db9500 !important;
}

/* ── PAGINACIÓN ──────────────────────────────────────────────── */
.pagination .page-item.active .page-link {
    background: #db9500 !important;
    border-color: #b87d00 !important;
    color: #0f1117 !important;
}
.pagination .page-link {
    background: #161920 !important;
    border-color: rgba(219,149,0,0.25) !important;
    color: #db9500 !important;
}
.pagination .page-link:hover {
    background: rgba(219,149,0,0.15) !important;
    color: #f0b030 !important;
}

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.page-header,
.pagetitle {
    border-bottom: 2px solid rgba(219,149,0,0.3) !important;
}
.page-header h1,
.pagetitle h1 {
    color: #f0b030 !important;
}

/* ── LINKS GENERALES ─────────────────────────────────────────── */
a {
    color: #db9500;
}
a:hover {
    color: #f0b030 !important;
}

/* ── SCROLLBAR PERSONALIZADO ─────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0f1117;
}
::-webkit-scrollbar-thumb {
    background: rgba(219,149,0,0.4);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(219,149,0,0.7);
}

/* ── CHECKOUT / CARRITO ──────────────────────────────────────── */
.order-summary,
.panel-summary {
    background: #1a1e28 !important;
    border: 1px solid rgba(219,149,0,0.25) !important;
}
.panel-summary .panel-heading {
    background: rgba(219,149,0,0.12) !important;
}

/* Precio en el resumen del carrito */
.total-price,
.order-total {
    color: #f0b030 !important;
    font-weight: 700 !important;
}

/* ── TABS ────────────────────────────────────────────────────── */
.nav-tabs .nav-link.active {
    background: rgba(219,149,0,0.15) !important;
    border-bottom-color: #db9500 !important;
    color: #f0b030 !important;
}
.nav-tabs .nav-link:hover {
    color: #db9500 !important;
}

/* ── INPUT GROUPS ────────────────────────────────────────────── */
.input-group-addon,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    background: rgba(219,149,0,0.1) !important;
    border-color: rgba(219,149,0,0.25) !important;
    color: #db9500 !important;
}

/* ── DISPONIBILIDAD (10 disponibles) ─────────────────────────── */
.package-stock,
.qty-available,
.stock-count {
    color: rgba(219,149,0,0.7) !important;
    font-size: 11px !important;
}

/* ── STORE ORDER PAGE ────────────────────────────────────────── */
.store-order-container {
    background: #161920 !important;
    border: 1px solid rgba(219,149,0,0.2) !important;
    border-radius: 12px !important;
    padding: 24px !important;
}
.section-title {
    color: #f0b030 !important;
    border-bottom: 1px solid rgba(219,149,0,0.2) !important;
    padding-bottom: 8px !important;
}

/* ── DESTACAR PLAN POPULAR ───────────────────────────────────── */
.package.featured,
.package.highlight,
.package-popular {
    border-color: #db9500 !important;
    box-shadow: 0 0 0 2px rgba(219,149,0,0.4), 0 8px 30px rgba(219,149,0,0.25) !important;
}

/* ── COOKIE BANNER ───────────────────────────────────────────── */
.cookie-box {
    background: #161920 !important;
    border: 1px solid rgba(219,149,0,0.3) !important;
    border-radius: 10px !important;
}
.cookie-box .btn-primary {
    background: #db9500 !important;
    color: #0f1117 !important;
}