/* ══════════════════════════════════════════════════════════════
   RebootDigital License Server — Estilos base compartidos
   ══════════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --bg-main:      #0a0e1a;
    --bg-card:      #0d1328;
    --cyan:         #00d4ff;
    --cyan-15:      rgba(0, 212, 255, .15);
    --cyan-20:      rgba(0, 212, 255, .20);
    --cyan-30:      rgba(0, 212, 255, .30);
    --purple:       #7c3aed;
    --green:        #34d399;
    --green-15:     rgba(16, 185, 129, .15);
    --green-30:     rgba(16, 185, 129, .30);
    --amber:        #fbbf24;
    --amber-12:     rgba(251, 191, 36, .12);
    --amber-25:     rgba(251, 191, 36, .25);
    --red:          #f87171;
    --red-12:       rgba(239, 68, 68, .12);
    --red-25:       rgba(239, 68, 68, .25);
    --text-main:    #e2e8f0;
    --text-muted:   #94a3b8;
    --text-dim:     #64748b;
    --border:       rgba(0, 212, 255, .15);
    --border-md:    rgba(0, 212, 255, .20);
    --border-hi:    rgba(0, 212, 255, .30);
    --radius-sm:    7px;
    --radius-md:    10px;
    --radius-lg:    12px;
    --radius-xl:    14px;
}

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

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
}

a {
    color: var(--cyan);
    text-decoration: none;
}

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

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

.btn-cyan:hover  { background: rgba(0,212,255,.25); }
.btn-green:hover { background: rgba(16,185,129,.25); }
.btn-amber:hover { background: rgba(251,191,36,.22); }
.btn-red:hover   { background: rgba(239,68,68,.22); }
.btn-gray:hover  { background: rgba(255,255,255,.10); }

/* ── Alertas ─────────────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 18px;
}

.alert-ok    { background: rgba(16,185,129,.1);  border: 1px solid var(--green-30); color: var(--green); }
.alert-error { background: rgba(239,68,68,.1);   border: 1px solid var(--red-25);   color: var(--red); }

/* ── Badges de estado ────────────────────────────────────────── */
.badge {
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.badge-active    { background: var(--green-15); color: var(--green); border: 1px solid var(--green-30); }
.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); }

/* ── Resultados de checks ────────────────────────────────────── */
.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: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

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