/* kas_admin/css/admin.css */
:root {
  --bg:       #050508;
  --sidebar:  #090b18;
  --card:     rgba(12,14,28,0.85);
  --cyan:     #00f5ff;
  --magenta:  #ff00c8;
  --purple:   #a855f7;
  --green:    #00ff88;
  --red:      #ff4f4f;
  --white:    #e8eaf6;
  --muted:    #5a5d7a;
  --border:   rgba(0,245,255,0.18);
  --font-disp:'Orbitron',monospace;
  --font-body:'Rajdhani',sans-serif;
  --font-mono:'Space Mono',monospace;
  --tr:       0.2s ease;
  --sidebar-w:240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--white);font-family:var(--font-body);font-size:15px;line-height:1.6;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
input,textarea,select,button{font-family:inherit;}

/* ── LAYOUT ─────────────────────────────────────── */
.admin-layout{display:flex;min-height:100vh;}

/* ── SIDEBAR ─────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;
  z-index:200;overflow-y:auto;
}
.sidebar-logo{
  padding:1.6rem 1.4rem 1.2rem;
  font-family:var(--font-disp);font-size:1.15rem;font-weight:900;
  letter-spacing:0.06em;border-bottom:1px solid var(--border);
}
.sidebar-logo span{color:var(--cyan);}
.sidebar-label{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);
  padding:1.4rem 1.4rem 0.5rem;
}
.sidebar nav a{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.65rem 1.4rem;
  font-size:0.88rem;color:var(--muted);
  transition:color var(--tr),background var(--tr);
  border-left:3px solid transparent;
}
.sidebar nav a i{width:16px;text-align:center;font-size:0.95rem;}
.sidebar nav a:hover{color:var(--white);background:rgba(0,245,255,0.05);}
.sidebar nav a.active{color:var(--cyan);border-left-color:var(--cyan);background:rgba(0,245,255,0.07);}
.sidebar-footer{margin-top:auto;padding:1.2rem 1.4rem;border-top:1px solid var(--border);}
.sidebar-footer a{display:flex;align-items:center;gap:0.6rem;font-size:0.82rem;color:var(--muted);transition:color var(--tr);}
.sidebar-footer a:hover{color:var(--red);}

/* ── MAIN ─────────────────────────────────────────── */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}

.topbar{
  height:60px;background:rgba(5,5,8,0.9);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;position:sticky;top:0;z-index:100;
  backdrop-filter:blur(12px);
}
.topbar-title{font-family:var(--font-disp);font-size:0.95rem;font-weight:700;letter-spacing:0.05em;}
.topbar-user{font-family:var(--font-mono);font-size:0.75rem;color:var(--muted);}
.topbar-user span{color:var(--cyan);}

.page-content{padding:2rem;flex:1;}

/* ── CARDS / WIDGETS ─────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:1.6rem;
}
.card-title{font-family:var(--font-disp);font-size:0.88rem;font-weight:700;letter-spacing:0.05em;margin-bottom:1.2rem;color:var(--cyan);}

.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-bottom:2rem;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1.2rem 1.4rem;}
.stat-card .num{font-family:var(--font-disp);font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-card .lbl{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:0.2rem;}

/* ── BOTONES ─────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:0.45rem;
  padding:0.5rem 1.2rem;border-radius:6px;
  font-family:var(--font-mono);font-size:0.76rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;border:none;transition:box-shadow var(--tr),transform var(--tr),background var(--tr);
}
.btn:hover{transform:translateY(-1px);}
.btn-cyan{background:linear-gradient(135deg,var(--cyan),var(--purple));color:#000;}
.btn-cyan:hover{box-shadow:0 0 18px rgba(0,245,255,0.45);}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted);}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-danger{background:transparent;border:1px solid rgba(255,79,79,0.4);color:var(--red);}
.btn-danger:hover{background:rgba(255,79,79,0.1);box-shadow:0 0 12px rgba(255,79,79,0.3);}
.btn-sm{padding:0.35rem 0.85rem;font-size:0.7rem;}
.btn-publish{background:linear-gradient(135deg,var(--green),var(--cyan));color:#000;}
.btn-publish:hover{box-shadow:0 0 18px rgba(0,255,136,0.4);}

/* ── TABLA ───────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);padding:0.7rem 0.9rem;text-align:left;border-bottom:1px solid var(--border);}
td{padding:0.75rem 0.9rem;border-bottom:1px solid rgba(0,245,255,0.06);font-size:0.9rem;vertical-align:middle;}
tr:hover td{background:rgba(0,245,255,0.03);}
.badge{display:inline-block;padding:0.2rem 0.6rem;border-radius:100px;font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;}
.badge-on{background:rgba(0,255,136,0.12);color:var(--green);border:1px solid rgba(0,255,136,0.3);}
.badge-off{background:rgba(90,93,122,0.2);color:var(--muted);border:1px solid rgba(90,93,122,0.3);}

/* ── FORMULARIOS ─────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.form-grid.single{grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:0.45rem;}
.field label{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.field input,.field textarea,.field select{
  background:rgba(0,0,0,0.45);border:1px solid var(--border);
  color:var(--white);padding:0.65rem 0.9rem;border-radius:7px;
  font-size:0.92rem;outline:none;transition:border-color var(--tr),box-shadow var(--tr);
  width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,245,255,0.1);}
.field textarea{resize:vertical;min-height:90px;}
.field select option{background:#0d0f1e;color:var(--white);}
.field-hint{font-size:0.78rem;color:var(--muted);margin-top:0.2rem;}

/* ── ALERTS ─────────────────────────────────────── */
.alert{padding:0.8rem 1.1rem;border-radius:8px;margin-bottom:1.4rem;font-size:0.9rem;}
.alert-ok{background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.35);color:var(--green);}
.alert-err{background:rgba(255,79,79,0.1);border:1px solid rgba(255,79,79,0.35);color:var(--red);}

/* ── CONTENIDO DINÁMICO (temas) ──────────────────── */
.topics-list{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.6rem;}
.topic-row{display:flex;gap:0.5rem;align-items:center;}
.topic-row input{flex:1;}
.remove-topic{background:none;border:none;color:var(--red);cursor:pointer;font-size:1rem;padding:0 0.3rem;opacity:0.7;transition:opacity var(--tr);}
.remove-topic:hover{opacity:1;}

/* ── ACTIONS ROW ─────────────────────────────────── */
.actions-row{display:flex;gap:0.7rem;flex-wrap:wrap;align-items:center;}
.section-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem;}
.section-top h2{font-family:var(--font-disp);font-size:1rem;font-weight:700;letter-spacing:0.04em;}

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform 0.3s;}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .form-grid{grid-template-columns:1fr;}
}