/* ============================================================
   MUTANT TEAM® — Admin Panel CSS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700&family=Barlow:wght@300;400;500;600&display=swap');

:root {
  --red:       #D41920; --red-dim: rgba(212,25,32,0.6); --red-glow: rgba(212,25,32,0.1);
  --bg-deep:   #080808; --bg-dark: #0f0f0f; --bg-mid:  #161616;
  --bg-card:   rgba(20,20,20,0.9); --bg-hover: rgba(212,25,32,0.06);
  --silver:    #C8C8C8; --silver-dk: #888; --silver-lt: #E8E8E8;
  --border:    rgba(212,25,32,0.15); --border-lt: rgba(255,255,255,0.06);
  --success:   #2ecc71; --danger: #e74c3c; --warning: #f39c12; --info: #3498db;
  --sidebar-w: 260px;
  --font-disp: 'Bebas Neue', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-cond: 'Barlow Condensed', sans-serif;
  --radius: 6px; --transition: all 0.25s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; }
body { font-family:var(--font-body); background:var(--bg-deep); color:var(--silver); min-height:100vh; display:flex; }
a { color:var(--red); text-decoration:none; transition:var(--transition); }
a:hover { color:white; }
img { max-width:100%; }

/* ═══ SIDEBAR ═══════════════════════════════════════════════ */
.admin-sidebar {
  width:var(--sidebar-w); background:linear-gradient(180deg,var(--bg-dark) 0%,#120000 100%);
  border-right:1px solid var(--border); height:100vh;
  position:fixed; top:0; left:0; overflow-y:auto; z-index:100;
  display:flex; flex-direction:column; transition:var(--transition);
}
.sidebar-brand { padding:20px; border-bottom:1px solid var(--border); text-align:center; }
.sidebar-brand-logo { height:64px; width:auto; mix-blend-mode:screen; filter:drop-shadow(0 0 10px rgba(212,25,32,0.5)); }
.sidebar-brand-sub { font-family:var(--font-cond); font-size:9px; letter-spacing:3px; color:var(--silver-dk); text-transform:uppercase; margin-top:6px; }

.sidebar-nav { flex:1; padding:12px 0; }
.sidebar-section { font-family:var(--font-cond); font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--red-dim); padding:14px 18px 6px; }
.sidebar-link {
  display:flex; align-items:center; gap:11px; padding:11px 18px;
  color:var(--silver-dk); font-size:13px; font-weight:500;
  transition:var(--transition); border-left:3px solid transparent;
}
.sidebar-link:hover { background:var(--red-glow); color:var(--silver); border-left-color:rgba(212,25,32,0.3); }
.sidebar-link.active { background:rgba(212,25,32,0.12); color:white; border-left-color:var(--red); }
.sidebar-link .icon { font-size:16px; width:20px; flex-shrink:0; }
.sidebar-badge { margin-left:auto; background:rgba(231,76,60,0.85); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }

.sidebar-footer { padding:14px 18px; border-top:1px solid var(--border); }
.sidebar-user { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sidebar-avatar { width:34px; height:34px; background:linear-gradient(135deg,var(--red),#800); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-size:14px; color:white; flex-shrink:0; }
.sidebar-user-name { font-family:var(--font-cond); font-size:14px; font-weight:700; color:white; }
.sidebar-user-role { font-size:11px; color:var(--silver-dk); }
.logout-btn { display:flex; align-items:center; gap:8px; padding:9px 12px; background:rgba(200,50,50,0.1); border:1px solid rgba(200,50,50,0.25); border-radius:4px; color:#FF9999; font-size:12px; width:100%; cursor:pointer; font-family:var(--font-body); transition:var(--transition); }
.logout-btn:hover { background:rgba(200,50,50,0.2); }

/* ═══ MAIN ═══════════════════════════════════════════════════ */
.admin-main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.admin-topbar {
  height:58px; background:rgba(8,8,8,0.95); border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:50;
}
.topbar-title { font-family:var(--font-disp); font-size:22px; letter-spacing:3px; color:white; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-notif { position:relative; cursor:pointer; font-size:18px; }
.topbar-notif-badge { position:absolute; top:-5px; right:-6px; background:var(--red); color:white; font-size:9px; font-weight:700; padding:2px 5px; border-radius:8px; }
.topbar-admin { font-family:var(--font-cond); font-size:13px; color:var(--silver-dk); }

.hamburger-admin { display:none; background:none; border:none; color:white; font-size:22px; cursor:pointer; }

.admin-content { padding:26px; flex:1; }

/* ═══ STAT CARDS ═════════════════════════════════════════════ */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border-lt);
  border-left:3px solid var(--red); padding:18px 20px;
  display:flex; align-items:center; gap:16px; transition:var(--transition);
}
.stat-card:hover { border-left-color:var(--red); background:rgba(212,25,32,0.05); transform:translateY(-2px); }
.stat-icon { font-size:28px; flex-shrink:0; }
.stat-value { font-family:var(--font-disp); font-size:32px; color:white; line-height:1; }
.stat-label { font-family:var(--font-cond); font-size:11px; color:var(--silver-dk); letter-spacing:1.5px; text-transform:uppercase; margin-top:3px; }
.stat-change { font-family:var(--font-cond); font-size:11px; color:var(--silver-dk); margin-top:4px; }

/* ═══ PANEL CARDS ═══════════════════════════════════════════ */
.panel-card { background:var(--bg-card); border:1px solid var(--border-lt); margin-bottom:20px; }
.panel-header { padding:14px 20px; border-bottom:1px solid var(--border-lt); display:flex; align-items:center; justify-content:space-between; }
.panel-title { font-family:var(--font-disp); font-size:18px; letter-spacing:2px; color:white; }
.panel-body { padding:0; }
.panel-body-pad { padding:20px; }

/* ═══ TABLES ════════════════════════════════════════════════ */
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { background:rgba(212,25,32,0.15); color:var(--silver); font-family:var(--font-cond); font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); }
.admin-table td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,0.03); color:var(--silver); vertical-align:middle; }
.admin-table tbody tr:hover { background:var(--bg-hover); }
.admin-table td strong { color:white; }

/* ═══ BADGES ════════════════════════════════════════════════ */
.badge { display:inline-block; padding:3px 10px; border-radius:3px; font-family:var(--font-cond); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.badge-success  { background:rgba(46,204,113,0.15); color:#2ecc71; border:1px solid rgba(46,204,113,0.3); }
.badge-danger   { background:rgba(231,76,60,0.15);  color:#e74c3c; border:1px solid rgba(231,76,60,0.3); }
.badge-warning  { background:rgba(243,156,18,0.15); color:#f39c12; border:1px solid rgba(243,156,18,0.3); }
.badge-info     { background:rgba(52,152,219,0.15); color:#3498db; border:1px solid rgba(52,152,219,0.3); }
.badge-gray     { background:rgba(255,255,255,0.06);color:var(--silver-dk); border:1px solid var(--border-lt); }
.badge-red      { background:rgba(212,25,32,0.15);  color:var(--red); border:1px solid rgba(212,25,32,0.3); }

/* ═══ FORMS ══════════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-family:var(--font-cond); font-size:10px; letter-spacing:2px; color:var(--silver-dk); text-transform:uppercase; margin-bottom:6px; }
.form-control {
  width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  color:white; padding:10px 14px; font-family:var(--font-body); font-size:14px;
  outline:none; transition:border-color .2s; -webkit-appearance:none; border-radius:var(--radius);
}
.form-control:focus { border-color:var(--red); background:rgba(212,25,32,0.04); }
.form-control option { background:#1a1a1a; }
textarea.form-control { resize:vertical; min-height:100px; }

/* Rich text editor area */
.plan-editor {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1);
  color:white; padding:14px; font-size:14px; min-height:200px;
  line-height:1.7; outline:none; border-radius:var(--radius);
}
.plan-editor:focus { border-color:var(--red); }
.editor-toolbar {
  display:flex; gap:4px; padding:8px; flex-wrap:wrap;
  background:rgba(212,25,32,0.06); border:1px solid var(--border); border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;
}
.editor-btn {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:var(--silver); padding:5px 10px; cursor:pointer; font-size:12px;
  border-radius:3px; transition:var(--transition); font-family:var(--font-body);
}
.editor-btn:hover { background:var(--red); color:white; border-color:var(--red); }
.editor-toolbar .separator { width:1px; background:rgba(255,255,255,0.1); margin:2px 4px; }
.editor-wrap { border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
.editor-wrap .plan-editor { border-radius:0; border-top:none; }

/* Competition warning */
.comp-warning-box { background:rgba(212,25,32,0.08); border:1px solid rgba(212,25,32,0.3); border-left:4px solid var(--red); padding:14px 18px; margin-bottom:16px; border-radius:0 var(--radius) var(--radius) 0; }
.comp-warning-box p { font-family:var(--font-cond); font-size:13px; color:var(--silver); line-height:1.6; }

/* ═══ BUTTONS ════════════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; font-family:var(--font-cond); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; cursor:pointer; border:none; border-radius:var(--radius); transition:var(--transition); text-decoration:none; }
.btn-primary { background:var(--red); color:white; }
.btn-primary:hover { background:#FF2A31; box-shadow:0 4px 16px rgba(212,25,32,0.4); color:white; }
.btn-outline { background:transparent; border:1px solid rgba(255,255,255,0.15); color:var(--silver); }
.btn-outline:hover { border-color:var(--red); color:var(--red); }
.btn-success { background:rgba(46,204,113,0.15); color:#2ecc71; border:1px solid rgba(46,204,113,0.3); }
.btn-success:hover { background:#2ecc71; color:#fff; }
.btn-danger  { background:rgba(231,76,60,0.15); color:#e74c3c; border:1px solid rgba(231,76,60,0.3); }
.btn-danger:hover  { background:#e74c3c; color:#fff; }
.btn-sm { padding:6px 12px; font-size:11px; }
.btn-lg { padding:12px 26px; font-size:14px; }
.btn-block { width:100%; justify-content:center; }
.btn-whatsapp { background:rgba(37,211,102,0.12); color:#25D366; border:1px solid rgba(37,211,102,0.3); }
.btn-whatsapp:hover { background:#25D366; color:white; }
.btn-pdf { background:rgba(231,76,60,0.12); color:#e74c3c; border:1px solid rgba(231,76,60,0.3); }
.btn-pdf:hover { background:#e74c3c; color:white; }

/* ═══ ALERTS ════════════════════════════════════════════════ */
.alert { padding:12px 18px; margin-bottom:18px; border-radius:var(--radius); font-family:var(--font-cond); font-size:13px; display:flex; align-items:center; gap:10px; }
.alert-success { background:rgba(46,204,113,0.1);  border:1px solid rgba(46,204,113,0.3); color:#2ecc71; }
.alert-danger  { background:rgba(231,76,60,0.1);   border:1px solid rgba(231,76,60,0.3); color:#e74c3c; }
.alert-warning { background:rgba(243,156,18,0.1);  border:1px solid rgba(243,156,18,0.3); color:#f39c12; }
.alert-info    { background:rgba(52,152,219,0.1);   border:1px solid rgba(52,152,219,0.3); color:#3498db; }

/* ═══ FILTERS ════════════════════════════════════════════════ */
.filters-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px; padding:14px 16px; background:var(--bg-card); border:1px solid var(--border-lt); }
.filter-search { flex:1; min-width:200px; position:relative; }
.filter-search input { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:white; padding:9px 14px 9px 36px; font-family:var(--font-body); font-size:13px; outline:none; border-radius:var(--radius); }
.filter-search input:focus { border-color:var(--red); }
.filter-search::before { content:'🔍'; position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:13px; pointer-events:none; }
.filter-select { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:var(--silver); padding:9px 14px; font-size:13px; outline:none; border-radius:var(--radius); -webkit-appearance:none; cursor:pointer; }
.filter-select:focus { border-color:var(--red); }

/* ═══ PAGINATION ════════════════════════════════════════════ */
.pagination { display:flex; gap:6px; align-items:center; justify-content:center; padding:16px 0; flex-wrap:wrap; }
.page-btn { padding:7px 13px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:var(--silver); border-radius:var(--radius); font-size:13px; cursor:pointer; transition:var(--transition); text-decoration:none; }
.page-btn:hover { border-color:var(--red); color:var(--red); }
.page-btn.active { background:var(--red); border-color:var(--red); color:white; }

/* ═══ MODAL ══════════════════════════════════════════════════ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg-mid); border:1px solid var(--border); max-width:800px; width:100%; max-height:90vh; overflow-y:auto; border-radius:var(--radius); position:relative; }
.modal-header { padding:18px 22px; border-bottom:1px solid var(--border-lt); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--bg-mid); z-index:1; }
.modal-title { font-family:var(--font-disp); font-size:22px; letter-spacing:2px; color:white; }
.modal-close { background:none; border:none; color:var(--silver-dk); font-size:20px; cursor:pointer; padding:4px; line-height:1; }
.modal-close:hover { color:var(--red); }
.modal-body { padding:22px; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--border-lt); display:flex; gap:10px; justify-content:flex-end; }

/* ═══ PLAN PREVIEW ══════════════════════════════════════════ */
.plan-preview-section { margin-bottom:18px; }
.plan-preview-section h4 { font-family:var(--font-disp); font-size:16px; letter-spacing:2px; color:var(--red); margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid rgba(212,25,32,0.2); }
.plan-preview-content { font-family:var(--font-cond); font-size:13px; color:var(--silver); line-height:1.8; background:rgba(255,255,255,0.02); padding:14px; border-radius:var(--radius); min-height:60px; }
.plan-preview-content:empty::after { content:'Sin contenido'; color:var(--silver-dk); font-style:italic; }

/* Plan tabs */
.plan-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.plan-tab { padding:10px 20px; font-family:var(--font-cond); font-size:12px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; color:var(--silver-dk); transition:var(--transition); background:none; border-left:none; border-right:none; border-top:none; }
.plan-tab:hover { color:var(--silver); }
.plan-tab.active { color:var(--red); border-bottom-color:var(--red); }
.plan-tab-content { display:none; }
.plan-tab-content.active { display:block; }

/* ═══ FICHA ATLETA (view in admin) ══════════════════════════ */
.ficha-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ficha-section { background:rgba(255,255,255,0.02); border:1px solid var(--border-lt); padding:16px 18px; }
.ficha-section-title { font-family:var(--font-disp); font-size:16px; letter-spacing:2px; color:var(--red); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(212,25,32,0.2); }
.ficha-row { display:flex; gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.ficha-row:last-child { border-bottom:none; }
.ficha-label { font-family:var(--font-cond); font-size:10px; letter-spacing:2px; color:var(--silver-dk); text-transform:uppercase; min-width:120px; flex-shrink:0; padding-top:2px; }
.ficha-val { font-family:var(--font-cond); font-size:14px; color:var(--silver-lt); }

/* ═══ QUICK ACTIONS ══════════════════════════════════════════ */
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; padding:16px 20px; }

/* ═══ PRODUCT GRID ══════════════════════════════════════════ */
.product-grid-admin { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:16px; }
.product-admin-card { background:rgba(255,255,255,0.02); border:1px solid var(--border-lt); overflow:hidden; transition:var(--transition); }
.product-admin-card:hover { border-color:rgba(212,25,32,0.3); }
.product-admin-img { height:130px; background:linear-gradient(135deg,rgba(212,25,32,0.1),rgba(30,30,30,0.6)); display:flex; align-items:center; justify-content:center; font-size:40px; }
.product-admin-info { padding:12px; }
.product-admin-name { font-family:var(--font-cond); font-size:14px; font-weight:700; color:white; margin-bottom:4px; }
.product-admin-price { font-family:var(--font-disp); font-size:20px; color:var(--red); }
.product-admin-actions { display:flex; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-lt); }

/* ═══ SEND PLAN SECTION ═════════════════════════════════════ */
.send-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-lt); }
.whatsapp-preview { background:rgba(37,211,102,0.06); border:1px solid rgba(37,211,102,0.2); padding:14px 18px; border-radius:var(--radius); margin-top:12px; }
.whatsapp-preview p { font-family:var(--font-cond); font-size:13px; color:var(--silver); line-height:1.7; }

/* ═══ LOGIN PAGE ═════════════════════════════════════════════ */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:radial-gradient(ellipse at center,#1a0000 0%,var(--bg-deep) 70%); }
.login-box { background:var(--bg-card); border:1px solid var(--border); padding:40px; width:380px; max-width:100%; }
.login-logo { text-align:center; margin-bottom:24px; }
.login-logo img { height:80px; mix-blend-mode:screen; }
.login-title { font-family:var(--font-disp); font-size:24px; letter-spacing:3px; text-align:center; margin-bottom:4px; }
.login-sub { font-family:var(--font-cond); font-size:11px; letter-spacing:2px; color:var(--silver-dk); text-align:center; margin-bottom:28px; text-transform:uppercase; }

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:99; }

@media (max-width:1100px) {
  .stat-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  :root { --sidebar-w: 260px; }
  .admin-sidebar { transform:translateX(-100%); }
  .admin-sidebar.open { transform:translateX(0); }
  .sidebar-overlay.show { display:block; }
  .admin-main { margin-left:0; }
  .hamburger-admin { display:block; }
  .admin-content { padding:16px; }
  .stat-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .ficha-grid { grid-template-columns:1fr; }
  .admin-table { display:block; overflow-x:auto; }
  .filters-bar { flex-direction:column; }
  .filter-search { width:100%; }
  .plan-tabs { flex-wrap:wrap; }
}

@media (max-width:480px) {
  .stat-grid { grid-template-columns:1fr; }
  .modal { border-radius:0; max-height:100vh; }
}