/* ============================================================
   panel.css — shared hero + pill-tabs visual system (rb-*).
   Extracted from the RealBank ("Bancos") design the owner approved:
   blue gradient hero, white title/subtitle, pill tabs, action buttons.

   Used by: RealBank (inline copy), AdminDashboard, GestionCompras,
   VueltosPendientesManager, AnulationManager, AISystemReports.

   NOTE: theme.css forces h1..h6 { color: ... !important } inside a CSS
   layer. Hero TITLES use <div role="heading"> instead of <h1> so that
   rule never matches and .rb-hero-title keeps them WHITE always.
   (Do NOT wrap this file in @layer — Tailwind compiles UNLAYERED, and
   layered rules would lose to its button resets.) */

.rb-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    color: #fff;
    box-shadow: 0 10px 30px -12px rgba(37, 99, 235, .45);
}

.rb-hero-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

.rb-hero-sub {
    font-size: .82rem;
    margin: .25rem 0 0;
    max-width: 46rem;
    color: rgba(255, 255, 255, .92) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

.rb-hero-muted,
.rb-hero .hero-muted {
    color: rgba(255, 255, 255, .85) !important;
}

.rb-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    color: #ffffff !important;
}

.rb-hero-icon i { color: #ffffff !important; }

/* ---------------- pill tabs ---------------- */
.rb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.rb-tab {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85) !important;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    cursor: pointer;
    transition: all .18s;
}

.rb-tab:hover {
    background: rgba(255, 255, 255, .22);
    color: #ffffff !important;
}

.rb-tab-active,
.rb-hero .rb-tab-active,
.rb-hero .rb-tab-active i {
    background: #fff;
    color: #1e3a8a !important;
    border-color: #fff;
}

/* ---------------- hero action buttons ---------------- */
.rb-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.05rem;
    border-radius: .85rem;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all .18s;
}

.rb-btn-light { background: #fff; color: #1e3a8a !important; }
.rb-btn-light i { color: #1e3a8a !important; }
.rb-btn-light:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); }

.rb-btn-amber { background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff !important; }
.rb-btn-amber i { color: #ffffff !important; }
.rb-btn-amber:hover { filter: brightness(1.06); transform: translateY(-1px); }

.rb-btn-pdf { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #ffffff !important; }
.rb-btn-pdf i { color: #ffffff !important; }
.rb-btn-pdf:hover { filter: brightness(1.07); transform: translateY(-1px); }

.rb-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* hero-scoped light chips stay readable on the gradient */
.rb-hero .rb-chip,
.rb-hero span.bg-purple-100,
.rb-hero span.bg-green-100 {
    font-size: .72rem;
}