:root {
    --bg: #000000;
    --t: #F1F9F4;
    --t2: #999;
    --t3: #666;
    --p: #F70670;
    --pd: #C50050;
    --pg: rgba(247,6,112,0.3);
    --b: #1A1A1A;
    --b2: #2A2A2A;
    --f1: 'Onest', sans-serif;
    --f2: 'Manrope', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--f2); background:var(--bg); color:var(--t); min-height:100vh; overflow-x:hidden; }

/* ========== NAV ========== */
.nav { position:fixed; top:0; left:0; right:0; height:64px; background:rgba(0,0,0,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--b); display:flex; align-items:center; padding:0 60px; z-index:1000; }
.nav-logo { font-family:var(--f1); font-size:20px; font-weight:700; color:var(--t); text-decoration:none; }
.nav-logo span { color:var(--p); }
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo-img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.nav-center { display:flex; gap:40px; position:absolute; left:50%; transform:translateX(-50%); }
.nav-link { font-size:13px; font-weight:500; color:var(--t2); text-decoration:none; transition:color .2s; }
.nav-link:hover, .nav-link.active { color:var(--t); }
.nav-link.active { border-bottom:2px solid var(--p); padding-bottom:2px; }
.nav-right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav-avatar { width:28px; height:28px; border-radius:50%; border:1px solid var(--b2); }
.nav-user { font-size:13px; color:var(--t2); }
.nav-out-icon { color:var(--t3); transition:color .2s; display:flex; align-items:center; }
.nav-out-icon:hover { color:#EF4444; }
.nav-btn { background:var(--p); color:#fff; padding:10px 24px; border-radius:50px; font-size:13px; font-weight:600; text-decoration:none; transition:all .3s; }
.nav-btn:hover { background:var(--pd); box-shadow:0 0 30px var(--pg); }

/* ========== ECG BACKGROUND ========== */
.ecg-bg { position:fixed; top:0; left:0; width:100%; height:100%; z-index:2; opacity:0.4; pointer-events:none; }

/* ========== MEDICAL SCAN ========== */
.medical-scan { position:fixed; top:-100%; left:0; width:100%; height:200%; background:linear-gradient(transparent 0%, rgba(247,6,112,0.02) 45%, rgba(247,6,112,0.04) 50%, rgba(247,6,112,0.02) 55%, transparent 100%); z-index:2; animation:scan 8s linear infinite; pointer-events:none; }
@keyframes scan { 0%{transform:translateY(-50%);} 100%{transform:translateY(50%);} }

/* ========== CURSOR GLOW ========== */
.cursor-glow { position:fixed; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle, rgba(247,6,112,0.08) 0%, transparent 70%); pointer-events:none; z-index:9999; opacity:0; transition:opacity .3s; }

/* ========== HERO ========== */
.hero { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:60px; position:relative; overflow:hidden; }
.hero-glow { position:absolute; top:-20%; right:-15%; width:700px; height:700px; background:radial-gradient(circle, rgba(247,6,112,0.06) 0%, transparent 70%); pointer-events:none; }
.hero-wrap { display:flex; align-items:center; justify-content:center; width:100%; max-width:1200px; gap:60px; z-index:1; }
.hero-text { flex:1; max-width:520px; }
.badge { display:inline-block; font-size:10px; font-weight:600; letter-spacing:3px; color:var(--p); text-transform:uppercase; margin-bottom:28px; padding:6px 16px; border:1px solid rgba(247,6,112,0.2); border-radius:50px; }
.hero-text h1 { font-family:var(--f1); font-size:58px; font-weight:800; line-height:1.1; letter-spacing:-1.5px; margin-bottom:20px; }
.desc { font-size:14px; line-height:1.7; color:var(--t2); margin-bottom:36px; max-width:420px; }
.desc strong { color:var(--t); font-weight:600; }

/* ========== FLOATING STATS CARDS ========== */
.floating-cards { display:flex; gap:20px; margin-bottom:36px; }
.float-card { background:rgba(10,10,10,0.8); backdrop-filter:blur(20px); border:1px solid var(--b2); border-radius:16px; padding:20px 24px; display:flex; flex-direction:column; gap:4px; transition:all .3s; animation:floatCard 6s ease-in-out infinite; min-width:120px; }
.float-card:nth-child(1) { animation-delay:0s; }
.float-card:nth-child(2) { animation-delay:2s; }
.float-card:nth-child(3) { animation-delay:4s; }
.float-card:hover { border-color:var(--p); box-shadow:0 0 30px var(--pg); transform:translateY(-8px) scale(1.05); }
.n { font-family:var(--f1); font-size:28px; font-weight:700; color:var(--p); }
.float-card span:last-child { font-size:11px; color:var(--t3); line-height:1.4; }

@keyframes floatCard { 0%,100%{transform:translateY(0px);} 50%{transform:translateY(-12px);} }

/* ========== BUTTON ========== */
.btn { background:var(--p); color:#fff; padding:15px 32px; border-radius:50px; font-size:13px; font-weight:700; letter-spacing:1px; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:10px; transition:all .3s; border:none; cursor:pointer; width:100%; }
.btn:hover { background:var(--pd); box-shadow:0 8px 40px var(--pg); transform:translateY(-2px); }

/* ========== PILL HOLOGRAM 3D ========== */
.pill-hologram { width:350px; height:350px; margin:0 auto; position:relative; display:flex; align-items:center; justify-content:center; }
.pill-hologram canvas { display:block; }

/* ========== RIGHT SIDE ========== */
.hero-visual { flex:1; display:flex; align-items:center; justify-content:center; max-width:400px; position:relative; }

/* ========== PAGES ========== */
.page { padding:100px 60px 60px; min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; }
.page-box { width:100%; max-width:700px; }
.page-box h2 { font-family:var(--f1); font-size:42px; font-weight:700; letter-spacing:-1px; margin-bottom:40px; }
.hl { background:linear-gradient(135deg, var(--p), #FF4081); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.form { background:rgba(10,10,10,0.8); backdrop-filter:blur(20px); border:1px solid var(--b2); border-radius:16px; padding:40px; display:flex; flex-direction:column; gap:24px; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:11px; font-weight:600; letter-spacing:1px; color:var(--t3); text-transform:uppercase; }
.field input, .field textarea, .field select { background:var(--bg); border:1px solid var(--b2); color:var(--t); padding:14px 16px; font-family:var(--f2); font-size:14px; border-radius:10px; outline:none; transition:border .3s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--p); }
.field select option { background:#111; color:var(--t); }

/* ========== STATS ========== */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.st { background:rgba(10,10,10,0.8); border:1px solid var(--b2); border-radius:10px; padding:20px; transition:all .3s; }
.st:hover { border-color:var(--p); }
.st span { display:block; font-size:10px; font-weight:600; letter-spacing:1px; color:var(--t3); text-transform:uppercase; margin-bottom:8px; }
.st b { font-family:var(--f1); font-size:32px; font-weight:700; color:var(--p); }
.post { background:rgba(10,10,10,0.6); border:1px solid var(--b); border-radius:10px; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:13px; }
.tag { font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:50px; }
.tag.pendiente { background:rgba(234,179,8,0.15); color:#EAB308; }
.tag.aprobada { background:rgba(34,197,94,0.15); color:#22C55E; }
.tag.rechazada { background:rgba(239,68,68,0.15); color:#EF4444; }
.tag.eliminada { background:rgba(107,114,128,0.15); color:#9CA3AF; }

/* ========== SIDEBAR (PANEL) ========== */
.sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 60px;
    background: rgba(0,0,0,0.95);
    border-right: 1px solid var(--b);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    z-index: 999;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.sidebar:hover { width: 230px; }

/* Perfil en sidebar */
.sidebar-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 10px 16px;
    margin: 0 8px 10px;
    border-bottom: 1px solid var(--b);
    white-space: nowrap;
    min-height: 50px;
}
.sidebar:hover .sidebar-profile {
    justify-content: flex-start;
    padding: 0 14px 16px;
    margin: 0 10px 10px;
}
.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--p);
    flex-shrink: 0;
    transition: all 0.3s;
}
.sidebar:hover .sidebar-avatar {
    width: 40px;
    height: 40px;
}
.sidebar-profile-info {
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.sidebar:hover .sidebar-profile-info {
    display: flex;
}
.sidebar-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t);
}
.sidebar-role {
    font-size: 10px;
    color: var(--p);
    font-weight: 500;
    letter-spacing: 1px;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
    flex: 1;
}
.sidebar:hover .sidebar-menu {
    padding: 0 10px;
}
.sidebar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 0;
    border-radius: 10px;
    text-decoration: none;
    color: var(--t3);
    transition: all 0.3s;
    white-space: nowrap;
    min-height: 46px;
}
.sidebar:hover .sidebar-item {
    justify-content: flex-start;
    padding: 12px 14px;
}
.sidebar-item svg {
    flex-shrink: 0;
    opacity: 0.5;
    transition: all 0.3s;
}
.sidebar-item span {
    display: none;
    font-size: 13px;
    font-weight: 500;
}
.sidebar:hover .sidebar-item span {
    display: inline;
}
.sidebar-item:hover {
    background: rgba(247,6,112,0.1);
    color: var(--t);
}
.sidebar-item:hover svg { opacity: 1; color: var(--p); }
.sidebar-item.active {
    background: rgba(247,6,112,0.15);
    color: var(--p);
}
.sidebar-item.active svg { opacity: 1; color: var(--p); }

.sidebar-footer {
    padding: 10px 8px 0;
    margin: 0 8px;
    border-top: 1px solid var(--b);
}
.sidebar:hover .sidebar-footer {
    padding: 10px 10px 0;
    margin: 0 10px;
}
.sidebar-logout:hover {
    background: rgba(239,68,68,0.1) !important;
    color: #EF4444 !important;
}
.sidebar-logout:hover svg { color: #EF4444 !important; }

.main-panel {
    margin-left: 60px;
    margin-top: 64px;
    min-height: calc(100vh - 64px);
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== TABS ========== */
.tabs { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.tab { background:rgba(10,10,10,0.8); border:1px solid var(--b2); color:var(--t3); padding:10px 20px; border-radius:50px; font-size:12px; font-weight:500; cursor:pointer; transition:all .3s; font-family:var(--f2); }
.tab:hover { border-color:var(--p); color:var(--t); }
.tab.active { background:var(--p); color:#fff; border-color:var(--p); }

.post-info { display:flex; align-items:center; flex-wrap:wrap; }

/* ========== MODAL ========== */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:2000; display:flex; align-items:center; justify-content:center; }
.modal-box { background:var(--bg); border:1px solid var(--b2); border-radius:16px; padding:30px; max-width:450px; width:90%; }
.modal-box h3 { font-family:var(--f1); font-size:20px; margin-bottom:8px; }

/* ========== SEARCH BAR ========== */
.search-bar { position:relative; margin-bottom:16px; }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--t3); }
.search-input { width:100%; background:var(--bg); border:1px solid var(--b2); color:var(--t); padding:14px 16px 14px 42px; font-family:var(--f2); font-size:14px; border-radius:10px; outline:none; transition:border .3s; }
.search-input:focus { border-color:var(--p); }

/* ========== PAGINATION ========== */
.pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; }
.btn-action { background:rgba(10,10,10,0.8); border:1px solid var(--b2); color:var(--t); padding:10px 20px; border-radius:8px; font-size:12px; font-weight:500; cursor:pointer; transition:all .3s; font-family:var(--f2); }
.btn-action:hover:not(:disabled) { border-color:var(--p); color:var(--p); }
.btn-action:disabled { opacity:0.3; cursor:not-allowed; }

/* ========== MEMBER ROW ========== */
.member-row { cursor:pointer; }
.member-avatar { width:36px; height:36px; border-radius:50%; margin-right:12px; }
.member-roles-count { font-size:11px; color:var(--t3); background:rgba(247,6,112,0.1); padding:4px 10px; border-radius:20px; }

/* ========== ESTADO CARDS ========== */
.estado-card { text-align:center; padding:50px 30px; background:rgba(10,10,10,0.8); border:1px solid var(--b2); border-radius:16px; }
.estado-card.success { border-color:rgba(34,197,94,0.3); }
.estado-card.error { border-color:rgba(239,68,68,0.3); }
.estado-icon { font-size:48px; margin-bottom:16px; }
.estado-card h3 { font-family:var(--f1); font-size:22px; margin-bottom:12px; }
.estado-card p { color:var(--t2); font-size:14px; margin-bottom:8px; }

/* ========== ICON BUTTONS ========== */
.icon-btn { background:none; border:1px solid var(--b2); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:16px; transition:all .2s; }
.icon-btn:hover { background:rgba(247,6,112,0.1); border-color:var(--p); transform:scale(1.1); }
.icon-btn.success:hover { background:rgba(34,197,94,0.1); border-color:#22C55E; }
.icon-btn.danger:hover { background:rgba(239,68,68,0.1); border-color:#EF4444; }
.icon-btn.delete:hover { background:rgba(239,68,68,0.1); border-color:#EF4444; }
@keyframes slideIn { from{opacity:0;transform:translateX(100px);} to{opacity:1;transform:translateX(0);} }
@keyframes slideOut { from{opacity:1;transform:translateX(0);} to{opacity:0;transform:translateX(100px);} }

/* ========== SWITCH ========== */
.switch-container { display:flex; align-items:center; gap:14px; cursor:pointer; padding:8px 0; }
.switch-label { font-family:var(--f1); font-size:16px; font-weight:700; color:var(--t); min-width:50px; }
.switch-track { width:56px; height:30px; border-radius:15px; padding:3px; transition:all .5s cubic-bezier(.4,0,.2,1); position:relative; }
.switch-on { background:#22C55E; box-shadow:0 0 20px rgba(34,197,94,0.5); }
.switch-off { background:#374151; box-shadow:0 0 0px rgba(239,68,68,0); }
.switch-thumb { width:24px; height:24px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; transition:all .5s cubic-bezier(.4,0,.2,1); position:relative; }
.thumb-on { transform:translateX(26px); }
.thumb-off { transform:translateX(0); }
.switch-icon-on, .switch-icon-off { position:absolute; transition:all .4s; }
.switch-on .switch-icon-on { opacity:1; transform:scale(1); }
.switch-on .switch-icon-off { opacity:0; transform:scale(0); }
.switch-off .switch-icon-on { opacity:0; transform:scale(0); }
.switch-off .switch-icon-off { opacity:1; transform:scale(1); }
.switch-status { font-size:11px; font-weight:600; letter-spacing:1px; transition:color .4s; }

/* ========== RESPONSIVE ========== */
@media (max-width:1024px) {
    .hero-wrap { flex-direction:column; align-items:center; text-align:center; }
    .hero-text { max-width:100%; }
    .desc { max-width:100%; }
    .floating-cards { justify-content:center; flex-wrap:wrap; }
    .hero-visual { max-width:100%; }
    .hero-text h1 { font-size:42px; }
    .stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    .nav { padding:0 16px; }
    .nav-center { gap:16px; }
    .nav-link { font-size:11px; }
    .hero { padding:24px 16px 32px; min-height:unset; }
    .hero-text h1 { font-size:30px; letter-spacing:-0.5px; }
    .desc { font-size:13px; }
    .floating-cards { flex-direction:row; flex-wrap:nowrap; gap:10px; align-items:stretch; margin-bottom:20px; }
    .float-card { min-width:0; flex:1; padding:12px 10px; text-align:center; align-items:center; }
    .float-card .n { font-size:18px; }
    .float-card span:last-child { font-size:10px; }
    .hero-visual { display:none; }
    .pill-hologram { display:none; }
    .page { padding:80px 20px 40px; }
    .page-box h2 { font-size:32px; }
    .form { padding:24px; }
    .row { grid-template-columns:1fr; }
    .stats { grid-template-columns:1fr 1fr; }
    .cursor-glow { display:none; }
    body { cursor:auto; }
}