/* ==========================================================================
   TWINS CREDITS CONNECT — ADMIN Theme "Nebula RED"
   Misma base Nebula que el lado usuario, pero rojo predominante.
   Se carga DESPUÉS de twins.css: redefine tokens y reemplaza lo que
   antes daban Tabler/Bootstrap-CSS (modales, botones, dropdowns, tablas).
   ========================================================================== */

/* ---------- 1. TOKENS ROJOS (light por defecto) ---------- */
:root {
    /* Escala brand = rojo (Tailwind red) */
    --brand-50: 254 242 242;  --brand-100: 254 226 226; --brand-200: 254 202 202;
    --brand-300: 252 165 165; --brand-400: 248 113 113; --brand-500: 239 68 68;
    --brand-600: 220 38 38;   --brand-700: 185 28 28;   --brand-800: 153 27 27;
    --brand-900: 127 29 29;   --brand-950: 69 10 10;

    /* Superficies cálidas (light) */
    --bg: #fdf4f4;
    --bg-soft: #f8eaea;
    --card: rgba(255, 255, 255, .74);
    --card-solid: #ffffff;
    --surface-rgb: 255 255 255;
    --text: #241014;
    --text-muted: #6d4952;
    --text-faint: #a5878e;
    --border: rgba(66, 14, 24, .10);
    --border-strong: rgba(66, 14, 24, .18);
    --input-bg: rgba(255, 255, 255, .88);

    /* Marca y efectos rojos */
    --accent-grad: linear-gradient(135deg, #dc2626 0%, #e11d48 45%, #f97316 100%);
    --accent-grad-soft: linear-gradient(135deg, rgba(220,38,38,.16), rgba(225,29,72,.12) 50%, rgba(249,115,22,.14));
    --glow-brand: rgba(239, 68, 68, .32);
    --glow-cyan: rgba(249, 115, 22, .22);   /* re-usado por keyframes Nebula como glow naranja */
    --shadow-card: 0 8px 30px rgba(66, 14, 24, .08);
    --shadow-card-hover: 0 18px 50px rgba(220, 38, 38, .20);
    --navbar-bg: rgba(255, 255, 255, .68);
    --hero-grid: rgba(66, 14, 24, .055);
    --orb-opacity: .34;
}

html.dark {
    /* Superficies cálidas oscuras */
    --bg: #0b0609;
    --bg-soft: #140a10;
    --card: rgba(28, 15, 21, .55);
    --card-solid: #180d14;
    --surface-rgb: 28 15 21;
    --text: #f6ebec;
    --text-muted: #b9a2aa;
    --text-faint: #7e6a72;
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .16);
    --input-bg: rgba(255, 255, 255, .045);

    --glow-brand: rgba(239, 68, 68, .42);
    --glow-cyan: rgba(249, 115, 22, .26);
    --shadow-card: 0 8px 30px rgba(0, 0, 0, .38);
    --shadow-card-hover: 0 18px 55px rgba(239, 68, 68, .30);
    --navbar-bg: rgba(14, 7, 11, .62);
    --hero-grid: rgba(255, 255, 255, .045);
    --orb-opacity: .5;
}

/* ---------- 2. OVERRIDES ROJOS de reglas hardcodeadas en twins.css ---------- */
::selection { background: rgba(239, 68, 68, .38); color: #fff; }
::-webkit-scrollbar-thumb { background: rgba(239,68,68,.38); }
::-webkit-scrollbar-thumb:hover { background: rgba(225,29,72,.55); }

.tw-orb-indigo { background: radial-gradient(circle, rgba(239,68,68,.55), transparent 65%); }
.tw-orb-violet { background: radial-gradient(circle, rgba(225,29,72,.48), transparent 65%); }
.tw-orb-cyan   { background: radial-gradient(circle, rgba(249,115,22,.42), transparent 65%); }

.border-brand-soft { border-color: rgba(239, 68, 68, .32); }
.tw-btn-outline:hover { border-color: rgb(var(--brand-400)); color: rgb(var(--brand-400)); background: rgba(239,68,68,.07); }
.tw-btn-ghost { background: rgba(239,68,68,.09); color: rgb(var(--brand-400)); }
.tw-btn-ghost:hover { background: rgba(239,68,68,.17); }
.tw-card-hover:hover { border-color: rgba(239,68,68,.38); }
.tw-icon-badge { border-color: rgba(239,68,68,.28); box-shadow: 0 0 22px var(--glow-brand); }
.tw-input:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.18); }
.tw-badge { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.30); }
.tw-navlink:hover { background: rgba(239,68,68,.09); }
.tw-table tbody tr:hover { background: rgba(239,68,68,.05); }
.btn-secondary { background: rgba(239,68,68,.10) !important; border-color: rgba(239,68,68,.30) !important; }
.glass-input:focus, .glass-select:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.18) !important; }
.glass-card table tbody tr:hover, .glass-strong table tbody tr:hover, .tw-card table tbody tr:hover { background: rgba(239,68,68,.05); }
.glass-card-hover:hover { border-color: rgba(239,68,68,.38); }

/* ---------- 3. FONDOS / EFECTOS ---------- */
.bg-noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.bg-dot { background-image: radial-gradient(rgba(239,68,68,.14) 1px, transparent 1px); background-size: 26px 26px; }
.bg-dot-lg { background-image: radial-gradient(rgba(239,68,68,.18) 1.5px, transparent 1.5px); background-size: 34px 34px; }
.bg-grid { background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); background-size: 44px 44px; }
.bg-mesh-premium {
    background:
        radial-gradient(ellipse 60% 45% at 15% 0%, rgba(239,68,68,.07), transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 20%, rgba(225,29,72,.06), transparent 60%),
        radial-gradient(ellipse 55% 45% at 50% 100%, rgba(249,115,22,.05), transparent 60%);
}

/* ---------- 4. BOTONES (reemplazo del set admin legacy) ---------- */
.btn-primary-glow { box-shadow: 0 8px 28px var(--glow-brand), 0 0 44px var(--glow-cyan) !important; }
.btn-primary-glow:hover { box-shadow: 0 14px 40px var(--glow-brand), 0 0 60px var(--glow-cyan) !important; }

.btn-success {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: .9rem; font-weight: 600; font-size: .9rem;
    background: linear-gradient(135deg, #059669, #10b981); color: #fff; border: none; cursor: pointer;
    box-shadow: 0 6px 20px rgba(16,185,129,.35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,185,129,.45); color: #fff; }

.btn-outline-primary, .btn-outline-success, .btn-outline-warning, .btn-outline-secondary, .btn-outline-danger {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: .9rem; font-weight: 600; font-size: .9rem;
    background: transparent; border: 1px solid; cursor: pointer; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-outline-primary { color: rgb(var(--brand-400)); border-color: rgba(239,68,68,.4); }
.btn-outline-primary:hover { background: rgba(239,68,68,.10); transform: translateY(-2px); box-shadow: 0 8px 22px var(--glow-brand); color: rgb(var(--brand-400)); }
.btn-outline-success { color: #34d399; border-color: rgba(16,185,129,.4); }
.btn-outline-success:hover { background: rgba(16,185,129,.10); transform: translateY(-2px); color: #34d399; }
.btn-outline-warning { color: #fbbf24; border-color: rgba(245,158,11,.4); }
.btn-outline-warning:hover { background: rgba(245,158,11,.10); transform: translateY(-2px); color: #fbbf24; }
.btn-outline-secondary { color: var(--text-muted); border-color: var(--border-strong); }
.btn-outline-secondary:hover { background: rgba(239,68,68,.06); color: var(--text); transform: translateY(-2px); }
.btn-outline-danger { color: #f87171; border-color: rgba(248,113,113,.4); }
.btn-outline-danger:hover { background: rgba(248,113,113,.10); transform: translateY(-2px); color: #f87171; }

.btn-sm { padding: .45rem .95rem; font-size: .82rem; border-radius: .7rem; }
.btn-lg { padding: .95rem 2rem; font-size: 1rem; border-radius: 1rem; }

.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.3rem; height: 2.3rem; border-radius: .75rem; font-size: .9rem;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-icon:hover { transform: translateY(-2px); }
.btn-ghost-primary { background: rgba(239,68,68,.10); color: rgb(var(--brand-400)); border-color: rgba(239,68,68,.22); }
.btn-ghost-primary:hover { background: rgba(239,68,68,.20); box-shadow: 0 6px 18px var(--glow-brand); color: rgb(var(--brand-400)); }
.btn-ghost-success { background: rgba(16,185,129,.10); color: #34d399; border-color: rgba(16,185,129,.22); }
.btn-ghost-success:hover { background: rgba(16,185,129,.20); color: #34d399; }
.btn-ghost-danger { background: rgba(244,63,94,.10); color: #fb7185; border-color: rgba(244,63,94,.22); }
.btn-ghost-danger:hover { background: rgba(244,63,94,.20); color: #fb7185; }
.btn-ghost-secondary { background: var(--input-bg); color: var(--text-muted); border-color: var(--border); }
.btn-ghost-secondary:hover { color: var(--text); border-color: var(--border-strong); }
.btn-ghost-light {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: .7rem;
    background: transparent; color: var(--text-faint); border: none; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.btn-ghost-light:hover { background: rgba(239,68,68,.10); color: var(--text); }

.btn-back {
    display: inline-flex; align-items: center; gap: .5rem; border-radius: .8rem;
    background: var(--input-bg); color: var(--text-muted); border: 1px solid var(--border);
    font-weight: 600; cursor: pointer; transition: all .25s ease;
}
.btn-back:hover { color: var(--text); border-color: var(--border-strong); }
.btn-next {
    display: inline-flex; align-items: center; gap: .5rem; border-radius: .8rem;
    background: var(--accent-grad); color: #fff; border: none; font-weight: 600; cursor: pointer;
    box-shadow: 0 6px 22px var(--glow-brand); transition: transform .25s ease, box-shadow .25s ease;
}
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--glow-brand); color: #fff; }

.btn-close {
    box-sizing: content-box; width: 1em; height: 1em; padding: .3em;
    border: 0; border-radius: .5rem; cursor: pointer; opacity: .65;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707A1 1 0 01.293.293z'/%3E%3C/svg%3E") center/1em no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707A1 1 0 01.293.293z'/%3E%3C/svg%3E") center/1em no-repeat;
    color: var(--text-muted); transition: opacity .2s ease;
}
.btn-close:hover { opacity: 1; }

/* ---------- 5. FORMULARIOS ---------- */
.form-label {
    display: block; margin-bottom: .5rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--text-faint);
}

/* ---------- 6. BADGES / STATUS ---------- */
.badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 .45rem;
    border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff;
}
.badge.bg-brand-500 { background: rgb(var(--brand-500)); box-shadow: 0 0 14px var(--glow-brand); }
.text-warning { color: #fbbf24 !important; }
.text-danger { color: #f87171 !important; }

/* ---------- 7. TABLAS ---------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; color: var(--text-muted); }
.table th, .table td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.table thead th {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-faint);
}
.table-vcenter td { vertical-align: middle; }
.card-table { background: transparent; }
.table-responsive { overflow-x: auto; }
.table-premium { border-collapse: separate; border-spacing: 0; }
.table-premium tbody tr { transition: background .2s ease; }
.table-premium tbody tr:hover { background: rgba(239,68,68,.05); }
.table-row-enter { animation: tw-fade-up .45s cubic-bezier(.22,1,.36,1) both; }

/* ---------- 8. MODALES (markup Bootstrap, estilo Nebula RED) ---------- */
.modal { position: fixed; inset: 0; z-index: 1055; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal.show { display: block; }
.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(5, 2, 4, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s ease; }
.modal-backdrop.show { opacity: 1; }

.modal-dialog { position: relative; width: auto; max-width: 520px; margin: 1.75rem auto; pointer-events: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-dialog-scrollable { max-height: calc(100% - 3.5rem); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-sm { max-width: 320px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }
.modal-fullscreen { width: 100vw; max-width: none; height: 100%; margin: 0; }
.modal-fullscreen .modal-content { height: 100%; border-radius: 0; }
@media (max-width: 575.98px) { .modal-dialog { margin: .75rem; max-width: calc(100% - 1.5rem); } .modal-lg, .modal-xl { max-width: calc(100% - 1.5rem); } }

.modal.show .modal-dialog { animation: tw-admin-modal-in .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes tw-admin-modal-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.modal-content {
    position: relative; width: 100%; pointer-events: auto;
    background: var(--card-solid);
    border: 1px solid var(--border); border-radius: 1.4rem;
    box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 46px var(--glow-brand);
    color: var(--text); outline: 0;
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); }
.modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.modal-body { position: relative; padding: 1.4rem; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: 1rem 1.4rem; border-top: 1px solid var(--border); }

/* ---------- 9. DROPDOWNS ---------- */
.dropdown-menu {
    position: absolute; z-index: 1000; display: none; min-width: 12rem;
    padding: .5rem; margin: 0; list-style: none;
    background: var(--card-solid); border: 1px solid var(--border); border-radius: 1rem;
    box-shadow: 0 18px 50px rgba(0,0,0,.30), 0 0 30px var(--glow-brand);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.dropdown-menu.show { display: block; animation: tw-fade-in .18s ease both; }
.dropdown-item {
    display: flex; align-items: center; width: 100%;
    padding: .6rem .9rem; border-radius: .7rem;
    font-size: .88rem; font-weight: 500; color: var(--text-muted);
    text-decoration: none; cursor: pointer; background: transparent; border: 0;
    transition: background .18s ease, color .18s ease;
}
.dropdown-item:hover { background: rgba(239,68,68,.09); color: var(--text); }
.dropdown-divider { height: 0; margin: .45rem 0; border-top: 1px solid var(--border); }

/* ---------- 10. ALERTAS ---------- */
.alert { position: relative; }
.alert .btn-ghost-light[data-bs-dismiss] { flex-shrink: 0; }

/* ---------- 11. SIDEBAR / SHELL ADMIN ---------- */
.admin-shell .sidebar-brand {
    background: var(--card-solid) !important;
    border-right: 1px solid var(--border) !important;
}
.admin-shell .sidebar-link-active, .admin-shell a.nav-active {
    background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.18);
}
.shimmer-overlay {
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    background-size: 200% 100%; animation: tw-shimmer 2.8s linear infinite;
}

/* ---------- 12. PUENTE MODO CLARO — paneles gray-900/800 (camaras, mapa) ---------- */
html:not(.dark) .bg-gray-900 { background-color: var(--card) !important; border-color: var(--border) !important; }
html:not(.dark) .border-gray-800 { border-color: var(--border) !important; }
html:not(.dark) .bg-gray-900 .text-white { color: var(--text) !important; }
/* Las "pantallas" (video/mapa) se mantienen oscuras en ambos temas */
html:not(.dark) .bg-gray-950 .text-white { color: #fff !important; }

/* ---------- 12b. PUENTE MODO CLARO — pills semánticos *-100/*-200 (badges de estado) ---------- */
html:not(.dark) .text-emerald-100 { color: #065f46 !important; }
html:not(.dark) .text-emerald-200 { color: #047857 !important; }
html:not(.dark) .text-amber-100 { color: #92400e !important; }
html:not(.dark) .text-amber-200 { color: #b45309 !important; }
html:not(.dark) .text-rose-100, html:not(.dark) .text-rose-200 { color: #be123c !important; }
html:not(.dark) .text-blue-100 { color: #1e40af !important; }
html:not(.dark) .text-blue-200, html:not(.dark) .text-blue-300 { color: #1d4ed8 !important; }
html:not(.dark) .text-yellow-400 { color: #ca8a04 !important; }

/* ---------- 13. LOGIN ADMIN ---------- */
.admin-login-bg { background: var(--bg); }

/* ==========================================================================
   ADMIN FUTURISTIC ENHANCEMENTS
   ========================================================================== */

/* ---------- ADMIN TABLE ENHANCED ---------- */
.admin-table th {
    font-size: .7rem !important;
    letter-spacing: .1em !important;
}
.admin-table tr {
    transition: background .25s ease, transform .2s ease !important;
}
.admin-table tbody tr:hover {
    transform: scale(1.005);
    box-shadow: 0 4px 20px rgba(239,68,68,.08);
}

/* ---------- ADMIN SIDEBAR ENHANCED ---------- */
.admin-shell .sidebar-brand a:first-child {
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.admin-shell .sidebar-brand a:first-child:hover {
    transform: scale(1.03);
}
.admin-shell nav a {
    transition: all .25s cubic-bezier(.22,1,.36,1) !important;
    position: relative;
}
.admin-shell nav a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--accent-grad);
    border-radius: 0 3px 3px 0;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.admin-shell nav a:hover::before,
.admin-shell nav a.bg-brand-500\/10::before {
    transform: translateY(-50%) scaleY(1);
}

/* ---------- ADMIN CARD ENHANCED ---------- */
.admin-card {
    transition: transform .35s cubic-bezier(.22,1,.36,1),
                box-shadow .4s ease,
                border-color .35s ease;
}
.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,.25), 0 0 30px var(--glow-brand);
}

/* ---------- ADMIN BUTTON ENHANCED ---------- */
.admin-shell .btn-primary {
    position: relative;
    overflow: hidden;
}
.admin-shell .btn-primary::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, rgba(255,255,255,.2), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
}
.admin-shell .btn-primary:hover::after {
    opacity: 1;
}

/* ---------- ADMIN HEADER ENHANCED ---------- */
.admin-shell header {
    backdrop-filter: blur(28px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
    border-bottom: 1px solid var(--border) !important;
}