/* MIDNIGHT FRAGANCE — Panel admin */
:root{
  --negro:#070b14;--panel:#0e1626;--panel-2:#13203a;--linea:rgba(120,150,210,.16);
  --azul:#2f5fe0;--azul-claro:#5b8def;--oro:#d4af37;--oro-claro:#f1d27a;
  --texto:#e8ecf4;--tenue:#93a0b8;--ok:#1faf54;--err:#e0556b;
  --fuente:'Outfit',system-ui,sans-serif;--display:'Cormorant Garamond',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--fuente);background:
  radial-gradient(900px 500px at 80% -5%,rgba(47,95,224,.16),transparent 60%),var(--negro);
  color:var(--texto);min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,select,textarea,button{font-family:inherit;font-size:1rem}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(420px,100%);background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--linea);border-radius:22px;padding:44px 38px;
  box-shadow:0 25px 70px rgba(0,0,0,.55)}
.login-card .logo{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:block;
  border:1px solid var(--linea);box-shadow:0 0 40px rgba(47,95,224,.4)}
.login-card h1{font-family:var(--display);text-align:center;font-size:1.9rem;margin-bottom:4px}
.login-card .sub{text-align:center;color:var(--tenue);font-size:.85rem;margin-bottom:28px;
  letter-spacing:.2em;text-transform:uppercase}

.field{margin-bottom:18px}
.field label{display:block;font-size:.8rem;color:var(--tenue);margin-bottom:7px;letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:11px;background:rgba(255,255,255,.04);
  border:1px solid var(--linea);color:var(--texto);transition:.25s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--azul-claro);background:rgba(47,95,224,.08)}
.field textarea{resize:vertical;min-height:80px}
/* fix: opciones de los desplegables (antes texto claro sobre fondo blanco del SO) */
select{color:var(--texto)}
select option,select optgroup{background:#0e1626;color:#e8ecf4}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b8def' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:12px 22px;border-radius:11px;font-weight:600;cursor:pointer;border:0;transition:.25s}
.btn-primary{background:linear-gradient(120deg,var(--azul),var(--azul-claro));color:#fff;width:100%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(47,95,224,.4)}
.btn-gold{background:linear-gradient(120deg,var(--oro-claro),var(--oro));color:#231a00}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(212,175,55,.4)}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--linea);color:var(--texto)}
.btn-ghost:hover{border-color:var(--azul-claro)}
.btn-danger{background:rgba(224,85,107,.14);border:1px solid rgba(224,85,107,.4);color:#ff9aa9}
.btn-danger:hover{background:var(--err);color:#fff}
.btn-sm{padding:8px 14px;font-size:.85rem;border-radius:9px}

.alert{padding:13px 16px;border-radius:11px;margin-bottom:20px;font-size:.9rem}
.alert-err{background:rgba(224,85,107,.12);border:1px solid rgba(224,85,107,.4);color:#ff9aa9}
.alert-ok{background:rgba(31,175,84,.12);border:1px solid rgba(31,175,84,.4);color:#7ce6a3}

/* layout admin */
.admin{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-right:1px solid var(--linea);padding:26px 18px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column}
.sidebar .brand{display:flex;align-items:center;gap:11px;margin-bottom:32px;padding:0 6px}
.sidebar .brand img{width:42px;height:42px;border-radius:50%;border:1px solid var(--linea)}
.sidebar .brand b{font-family:var(--display);font-size:1.2rem;line-height:1}
.sidebar .brand small{display:block;font-size:.55rem;letter-spacing:.3em;color:var(--tenue)}
.menu{display:flex;flex-direction:column;gap:4px;flex:1}
.menu a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;
  color:var(--tenue);font-weight:500;font-size:.94rem;transition:.2s}
.menu a:hover{background:rgba(255,255,255,.04);color:var(--texto)}
.menu a.active{background:linear-gradient(120deg,rgba(47,95,224,.25),rgba(47,95,224,.08));
  color:#fff;border:1px solid var(--linea)}
.menu a .i{width:22px;text-align:center}
.sidebar .foot{border-top:1px solid var(--linea);padding-top:16px;margin-top:16px}
.sidebar .foot a{display:block;padding:9px 14px;border-radius:9px;color:var(--tenue);font-size:.9rem}
.sidebar .foot a:hover{color:#ff9aa9}

.main{padding:30px clamp(20px,4vw,46px)}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;flex-wrap:wrap;gap:14px}
.topbar h1{font-family:var(--display);font-size:2rem;font-weight:600}
.topbar .sub{color:var(--tenue);font-size:.9rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-bottom:32px}
.stat{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--linea);
  border-radius:16px;padding:22px}
.stat .n{font-family:var(--display);font-size:2.4rem;font-weight:700;color:var(--oro-claro);line-height:1}
.stat .l{color:var(--tenue);font-size:.85rem;margin-top:4px}

/* tabla */
.panel{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--linea);
  border-radius:18px;overflow:hidden}
.panel-head{padding:18px 22px;border-bottom:1px solid var(--linea);display:flex;
  align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-head h2{font-size:1.15rem;font-weight:600}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--linea);font-size:.92rem}
th{color:var(--tenue);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(255,255,255,.02)}
.t-img{width:52px;height:52px;border-radius:10px;object-fit:cover;border:1px solid var(--linea)}
.tag{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.72rem;font-weight:600}
.tag-cat{background:rgba(91,141,239,.14);color:var(--azul-claro);border:1px solid var(--linea)}
.tag-on{background:rgba(31,175,84,.14);color:#7ce6a3}
.tag-off{background:rgba(224,85,107,.14);color:#ff9aa9}
.tag-star{background:linear-gradient(120deg,var(--oro-claro),var(--oro));color:#231a00}
.row-actions{display:flex;gap:8px;justify-content:flex-end}

/* form editar */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid .full{grid-column:1/-1}
.card-form{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--linea);
  border-radius:18px;padding:28px}
.card-form h3{font-size:1rem;margin-bottom:18px;color:var(--oro);letter-spacing:.06em;
  text-transform:uppercase;font-size:.85rem}
.img-preview{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;border:1px solid var(--linea);
  background:#000;margin-bottom:14px}
.var-editor .var-line{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;margin-bottom:10px;align-items:center}
.var-editor input{padding:10px 12px}
.var-del{width:40px;height:40px;border-radius:10px;background:rgba(224,85,107,.14);
  border:1px solid rgba(224,85,107,.35);color:#ff9aa9;cursor:pointer;font-size:1.1rem}
.var-del:hover{background:var(--err);color:#fff}
.form-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.muted{color:var(--tenue);font-size:.82rem}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;padding:12px 14px;
  border:1px solid var(--linea);border-radius:11px;background:rgba(255,255,255,.03)}
.check input{width:18px;height:18px;accent-color:var(--azul)}

/* tabla de costos */
.tbl-costos td,.tbl-costos th{white-space:nowrap}
.tbl-costos tr.grp td{background:rgba(47,95,224,.08);color:var(--oro-claro);
  font-size:.82rem;letter-spacing:.04em;padding-top:16px;padding-bottom:10px}
.tbl-costos .in-costo{width:100px;padding:8px 10px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--linea);color:var(--texto)}
.tbl-costos .in-costo:focus{outline:0;border-color:var(--azul-claro);background:rgba(47,95,224,.08)}
.tbl-costos .in-costo.mejor{border-color:var(--ok);background:rgba(31,175,84,.12);color:#7ce6a3;font-weight:600}
.tbl-costos .venta{color:var(--oro-claro);font-weight:600}
.tbl-costos .c-mejor{font-weight:600}
.tbl-costos .c-gan.pos{color:#7ce6a3;font-weight:700}
.tbl-costos .c-gan.neg{color:#ff9aa9;font-weight:700}
.tbl-costos .c-margen{font-weight:600;color:var(--azul-claro)}

@media(max-width:820px){
  .admin{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .menu{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;margin-top:14px}
  .form-grid{grid-template-columns:1fr}
  .var-editor .var-line{grid-template-columns:1fr 1fr;}
  table{display:block;overflow-x:auto;white-space:nowrap}
}