/* ══════════════════════════════════════════════════════════════
   RebootLicenses — Estilos base (Premium v2)
   ══════════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --primary:       #f59e0b;
    --primary-dim:   rgba(245, 158, 11, .13);
    --primary-glow:  rgba(245, 158, 11, .28);
    --primary-30:    rgba(245, 158, 11, .30);
    --primary-15:    rgba(245, 158, 11, .15);

    --bg-main:       #0a0e1a;
    --bg-sidebar:    #080c18;
    --bg-card:       #0d1328;
    --bg-topbar:     rgba(10, 14, 26, .92);
    --bg-glass:      rgba(13, 19, 40, .65);

    --green:         #34d399;
    --green-15:      rgba(52, 211, 153, .15);
    --green-30:      rgba(52, 211, 153, .30);
    --red:           #f87171;
    --red-12:        rgba(248, 113, 113, .12);
    --red-25:        rgba(248, 113, 113, .25);
    --amber:         #fbbf24;
    --amber-12:      rgba(251, 191, 36, .12);
    --amber-25:      rgba(251, 191, 36, .25);
    --purple:        #a78bfa;
    --purple-15:     rgba(167, 139, 250, .15);
    --cyan:          #22d3ee;

    --text-main:     #e2e8f0;
    --text-muted:    #94a3b8;
    --text-dim:      #64748b;

    --border:        rgba(245, 158, 11, .13);
    --border-md:     rgba(245, 158, 11, .20);
    --border-hi:     rgba(245, 158, 11, .30);

    --radius-sm:     8px;
    --radius-md:     12px;
    --radius-lg:     14px;
    --radius-xl:     16px;

    --sidebar-w:     220px;
    --sidebar-collapsed-w: 64px;
    --topbar-h:      56px;
    --content-max-width: 1600px;

    --font-ui:       'Rajdhani', system-ui, sans-serif;
    --font-mono:     'JetBrains Mono', 'Courier New', monospace;

    /* Gradientes */
    --grad-primary:  linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --grad-card:     linear-gradient(180deg, rgba(245,158,11,.06) 0%, transparent 40%);
    --grad-sidebar:  linear-gradient(180deg, #0c1124 0%, #080c18 100%);

    /* Sombras */
    --shadow-sm:     0 2px 8px rgba(0, 0, 0, .25);
    --shadow-md:     0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg:     0 16px 48px rgba(0, 0, 0, .45);
    --shadow-glow:   0 0 20px rgba(245, 158, 11, .15);
    --shadow-glow-sm: 0 0 12px rgba(245, 158, 11, .10);

    /* Transiciones */
    --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Tema de color: Cyan (alternativa al naranja por defecto) ─── */
[data-accent="cyan"] {
    --primary:       #00d4ff;
    --primary-dim:   rgba(0, 212, 255, .13);
    --primary-glow:  rgba(0, 212, 255, .28);
    --primary-30:    rgba(0, 212, 255, .30);
    --primary-15:    rgba(0, 212, 255, .15);

    --border:        rgba(0, 212, 255, .13);
    --border-md:     rgba(0, 212, 255, .20);
    --border-hi:     rgba(0, 212, 255, .30);

    --grad-primary:  linear-gradient(135deg, #00d4ff 0%, #0891b2 100%);
    --grad-card:     linear-gradient(180deg, rgba(0,212,255,.06) 0%, transparent 40%);

    --shadow-glow:   0 0 20px rgba(0, 212, 255, .15);
    --shadow-glow-sm: 0 0 12px rgba(0, 212, 255, .10);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family: var(--font-ui);
    background: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; transition: color .2s var(--ease-out); }
a:hover { color: #fbbf24; }

/* ── Selección de texto ─────────────────────────────────────── */
::selection {
    background: rgba(245, 158, 11, .30);
    color: #fff;
}

/* ── Scrollbar personalizado ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245, 158, 11, .20); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, .35); }

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-ui);
    letter-spacing: .4px;
    transition: all .25s var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .25s var(--ease-out);
    pointer-events: none;
}

.btn-primary { background: var(--primary-15);  color: var(--primary); border-color: var(--primary-30); }
.btn-green   { background: var(--green-15);     color: var(--green);   border-color: var(--green-30); }
.btn-red     { background: var(--red-12);        color: var(--red);     border-color: var(--red-25); }
.btn-amber   { background: var(--amber-12);      color: var(--amber);   border-color: var(--amber-25); }
.btn-gray    { background: rgba(255,255,255,.05); color: var(--text-muted); border-color: rgba(255,255,255,.10); }

.btn-sm { padding: 5px 10px; font-size: 11px; }

.btn-primary:hover { background: var(--primary-glow); box-shadow: var(--shadow-glow-sm); transform: translateY(-1px); }
.btn-green:hover   { background: rgba(52,211,153,.25); box-shadow: 0 0 12px rgba(52,211,153,.15); transform: translateY(-1px); }
.btn-red:hover     { background: rgba(248,113,113,.22); box-shadow: 0 0 12px rgba(248,113,113,.12); transform: translateY(-1px); }
.btn-amber:hover   { background: rgba(251,191,36,.22); box-shadow: 0 0 12px rgba(251,191,36,.12); transform: translateY(-1px); }
.btn-gray:hover    { background: rgba(255,255,255,.10); transform: translateY(-1px); }

.btn:active { transform: translateY(0) scale(.98); }

/* ── Alertas ─────────────────────────────────────────────────── */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: alertSlide .35s var(--ease-out) both;
}

.alert-ok {
    background: linear-gradient(135deg, rgba(52,211,153,.12) 0%, rgba(52,211,153,.06) 100%);
    border: 1px solid var(--green-30);
    color: var(--green);
}

.alert-error {
    background: linear-gradient(135deg, rgba(248,113,113,.12) 0%, rgba(248,113,113,.06) 100%);
    border: 1px solid var(--red-25);
    color: var(--red);
}

@keyframes alertSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Badge usado como botón (Grace Network, etc.) — reset de estilos nativos */
button.badge {
    font-family: var(--font-ui);
    cursor: pointer;
    line-height: 1.4;
}
button.badge:hover { filter: brightness(1.15); }

.badge-active {
    background: var(--green-15);
    color: var(--green);
    border: 1px solid var(--green-30);
    animation: badgePulse 3s ease-in-out infinite;
}

.badge-suspended {
    background: var(--amber-12);
    color: var(--amber);
    border: 1px solid var(--amber-25);
}

.badge-revoked {
    background: var(--red-12);
    color: var(--red);
    border: 1px solid var(--red-25);
}

.badge-expired {
    background: rgba(100,116,139,.12);
    color: var(--text-muted);
    border: 1px solid rgba(100,116,139,.25);
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
    50%      { box-shadow: 0 0 8px 2px rgba(52, 211, 153, .12); }
}

/* ── Check results ───────────────────────────────────────────── */
.r-ok   { color: var(--green); font-size: 11px; font-weight: 700; }
.r-fail { color: var(--red);   font-size: 11px; font-weight: 700; }

/* ── Grid helpers ────────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

@media (max-width: 640px) {
    .grid2, .grid3 { grid-template-columns: 1fr; }
    .actions-col   { flex-wrap: wrap; }
}

/* ── Animaciones globales ────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.anim-fade-in-up {
    animation: fadeInUp .5s var(--ease-out) both;
}

.anim-stagger-1 { animation-delay: .05s; }
.anim-stagger-2 { animation-delay: .10s; }
.anim-stagger-3 { animation-delay: .15s; }
.anim-stagger-4 { animation-delay: .20s; }
.anim-stagger-5 { animation-delay: .25s; }
.anim-stagger-6 { animation-delay: .30s; }
.anim-stagger-7 { animation-delay: .35s; }
.anim-stagger-8 { animation-delay: .40s; }