/*
 * NOVAOption — css/nova-admin.css
 * Fase 5: Tokenización de paneles de administración.
 *
 * CÓMO USAR:
 * Añadir en layout/head.php (después de nova-tokens.css):
 *   <link rel="stylesheet" href="css/nova-admin.css">
 *
 * Afecta a: admin_news.php, admin_tactic.php, subscriptions.php,
 *           users.php, admin_brain.php, admin_novamail.php
 */

/* ── Página wrapper ────────────────────────────────────────── */
#subscriptions-management-page,
#user-management-page,
[id$="-admin-page"],
[id$="-management-page"] {
    background-color: var(--nova-bg) !important;
}

/* ── Fondo general admin ───────────────────────────────────── */
.pt-24.w-full.min-h-screen,
.pt-24.min-h-screen {
    background-color: var(--nova-bg) !important;
}

/* ── Títulos H1 — eliminar Cinzel en contexto admin ───────── */
#subscriptions-management-page h1,
#user-management-page h1,
.pt-24 h1,
.pt-24 h2 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    color: var(--nova-text) !important;
    letter-spacing: -.01em !important;
}

/* ── KPI cards ────────────────────────────────────────────── */
#kpi-total, #kpi-vip, #kpi-premium, #kpi-basic {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: var(--nova-text) !important;
}

/* ── Cards / contenedores ─────────────────────────────────── */
.bg-gray-800,
.bg-gray-800\/80,
.bg-gray-800\/50 {
    background-color: var(--nova-surface) !important;
}
.bg-gray-900,
.bg-gray-900\/50,
.bg-gray-900\/80 {
    background-color: var(--nova-elevated) !important;
}
[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-800\/80,
[data-theme="light"] .bg-gray-800\/50 {
    background-color: var(--nova-surface) !important;
}
[data-theme="light"] .bg-gray-900,
[data-theme="light"] .bg-gray-900\/50 {
    background-color: var(--nova-elevated) !important;
}

/* ── Bordes ────────────────────────────────────────────────── */
.border-gray-700 { border-color: var(--nova-border) !important; }
.border-gray-600 { border-color: var(--nova-border) !important; }
.border-gray-800 { border-color: var(--nova-border-soft) !important; }

/* ── Textos ────────────────────────────────────────────────── */
.text-gray-400 { color: var(--nova-text-3) !important; }
.text-gray-300 { color: var(--nova-text-2) !important; }
.text-gray-500 { color: var(--nova-text-4) !important; }
.text-white    { color: var(--nova-text)   !important; }

/* ── Acento principal cyan → blue ─────────────────────────── */
.text-cyan-400  { color: var(--nova-blue, #1A5FE8) !important; }
.text-cyan-300  { color: var(--nova-cyan, #00D4E8) !important; }
.bg-cyan-600,
.bg-cyan-500    { background-color: var(--nova-blue) !important; }
.hover\:bg-cyan-500:hover { background-color: var(--nova-blue) !important; filter: brightness(1.1); }
.focus\:ring-cyan-500:focus { box-shadow: 0 0 0 3px rgba(26,95,232,.2) !important; }
.border-cyan-500 { border-color: var(--nova-blue) !important; }

/* ── Inputs ────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    background-color: var(--nova-elevated) !important;
    border-color: var(--nova-border) !important;
    color: var(--nova-text) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
input::placeholder,
textarea::placeholder { color: var(--nova-text-4) !important; }
input:focus,
select:focus,
textarea:focus {
    border-color: var(--nova-blue) !important;
    box-shadow: 0 0 0 3px rgba(26,95,232,.12) !important;
    outline: none !important;
}

/* ── Tablas ────────────────────────────────────────────────── */
table th {
    background-color: var(--nova-elevated) !important;
    color: var(--nova-text-4) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-bottom-color: var(--nova-border) !important;
}
table td {
    border-bottom-color: var(--nova-border-soft) !important;
    color: var(--nova-text-2) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
table tr:hover td {
    background-color: var(--nova-elevated) !important;
}

/* ── Badges de plan en tablas ─────────────────────────────── */
[class*="bg-purple"] { background-color: var(--nova-vip-bg)     !important; color: var(--nova-vip-text)     !important; border-color: var(--nova-vip-border)     !important; }
[class*="bg-cyan-9"] { background-color: var(--nova-premium-bg) !important; color: var(--nova-premium-text) !important; border-color: var(--nova-premium-border) !important; }

/* ── Botones de acción ─────────────────────────────────────── */
.bg-indigo-600,
.bg-blue-600 { background-color: var(--nova-blue) !important; }
.bg-indigo-600:hover,
.bg-blue-600:hover { filter: brightness(1.1); }

/* ── Overflow de tablas en mobile ─────────────────────────── */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
table { min-width: 600px; }
.overflow-x-auto table { min-width: unset; width: 100%; }

/* ── Scrollbar en paneles admin ───────────────────────────── */
.overflow-y-auto::-webkit-scrollbar { width: 4px; }
.overflow-y-auto::-webkit-scrollbar-thumb { background: var(--nova-border); border-radius: 2px; }