/* =============================================
   EL ECONOMICO — ADMIN CSS
   ============================================= */
:root {
  --red:    #CC0000;
  --red-dk: #A30000;
  --black:  #111;
  --text:   #1a1a1a;
  --g-dk:   #444;
  --g-md:   #6b6b6b;
  --g-lt:   #aaa;
  --border: #e5e5e5;
  --bg:     #f3f3f1;
  --white:  #fff;
  --green:  #16a34a;
  --font-d: 'Bebas Neue', sans-serif;
  --font:   'Montserrat', sans-serif;
  --ease:   cubic-bezier(.4,0,.2,1);
  --sw:     250px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}

/* =============================================
   LOGIN
   ============================================= */
.login-screen{
  min-height:100vh;
  background:var(--black);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  position:relative;overflow:hidden;
}
.login-glow{
  position:absolute;top:-200px;right:-200px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(204,0,0,.18) 0%,transparent 65%);
  pointer-events:none;
}
.login-card{
  background:var(--white);
  border-radius:24px;
  padding:48px 44px;
  width:100%;max-width:420px;
  box-shadow:0 32px 80px rgba(0,0,0,.3);
  position:relative;z-index:1;
  animation:cardIn .5s var(--ease) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.login-logo{width:72px;height:72px;border-radius:50%;object-fit:contain;margin:0 auto 20px}
.login-title{
  font-family:var(--font-d);font-size:1.85rem;
  letter-spacing:.07em;color:var(--black);
  text-align:center;line-height:1;margin-bottom:8px;
}
.login-hint{font-size:.8rem;font-weight:500;color:var(--g-md);text-align:center;margin-bottom:32px}

.login-field{
  position:relative;display:flex;align-items:center;margin-bottom:14px;
}
.login-field>i.fa-user,.login-field>i.fa-lock{
  position:absolute;left:15px;color:var(--g-lt);font-size:.88rem;pointer-events:none;z-index:1;
}
.login-field input{
  width:100%;padding:13px 44px;
  border:2px solid var(--border);border-radius:10px;
  font-size:.875rem;font-weight:500;color:var(--text);
  background:var(--bg);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.login-field input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(204,0,0,.09);background:var(--white)}
.login-field button{
  position:absolute;right:13px;color:var(--g-lt);font-size:.88rem;padding:6px;transition:color .2s;
}
.login-field button:hover{color:var(--g-dk)}
.login-err{font-size:.78rem;font-weight:600;color:#dc2626;text-align:center;min-height:18px;margin-bottom:8px}
.btn-login{
  width:100%;margin-top:4px;
  background:var(--red);color:#fff;
  font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:15px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn-login:hover{background:var(--red-dk);transform:translateY(-1px);box-shadow:0 8px 22px rgba(204,0,0,.28)}
.btn-login:disabled{opacity:.6;cursor:not-allowed;transform:none}
.back-link{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.78rem;font-weight:600;color:var(--g-lt);
  margin-top:22px;transition:color .2s;
}
.back-link:hover{color:var(--g-dk)}

/* =============================================
   ADMIN APP
   ============================================= */
.admin-app{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{
  width:var(--sw);flex-shrink:0;
  background:var(--black);color:rgba(255,255,255,.7);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;
  z-index:200;overflow-y:auto;
  transition:transform .32s var(--ease);
}
.sb-head{
  display:flex;align-items:center;gap:12px;
  padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.sb-logo{width:40px;height:40px;border-radius:50%;object-fit:contain;flex-shrink:0}
.sb-name{font-family:var(--font-d);font-size:1rem;letter-spacing:.08em;color:#fff}
.sb-sub{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.sb-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.sb-link{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:10px 13px;border-radius:9px;
  font-size:.82rem;font-weight:700;color:rgba(255,255,255,.5);
  text-align:left;transition:background .2s,color .2s;
  position:relative;
}
.sb-link i{font-size:.95rem;width:18px;text-align:center;flex-shrink:0}
.sb-link span{flex:1}
.sb-link:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.sb-link.active{background:var(--red);color:#fff}
.sb-cnt{
  font-size:.65rem;font-weight:800;font-style:normal;
  background:rgba(255,255,255,.15);color:rgba(255,255,255,.75);
  padding:2px 8px;border-radius:50px;
}
.sb-link.active .sb-cnt{background:rgba(255,255,255,.25);color:#fff}
.sb-foot{padding:12px 10px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}
.sb-btn{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:9px 13px;border-radius:8px;
  font-size:.8rem;font-weight:600;color:rgba(255,255,255,.4);
  transition:background .2s,color .2s;margin-bottom:3px;
}
.sb-btn:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.7)}
.sb-btn i{font-size:.88rem;width:16px;text-align:center}

/* MAIN */
.admin-main{
  margin-left:var(--sw);flex:1;min-height:100vh;
  display:flex;flex-direction:column;
}
.topbar{
  background:var(--white);border-bottom:1px solid var(--border);
  height:62px;padding:0 28px;
  display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.05);flex-shrink:0;
}
.menu-toggle{display:none;width:36px;height:36px;border-radius:8px;align-items:center;justify-content:center;color:var(--g-dk);font-size:1rem;transition:background .2s}
.menu-toggle:hover{background:var(--bg)}
.page-title{font-family:var(--font-d);font-size:1.4rem;letter-spacing:.08em;flex:1}
.tb-user{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:700;color:var(--g-md)}
.tb-avatar{width:32px;height:32px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.78rem}

.sec{padding:24px 28px 56px;flex:1}

/* =============================================
   STATS
   ============================================= */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.stat-box{
  background:var(--white);border-radius:14px;padding:20px;
  display:flex;align-items:center;gap:16px;
  border:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.stat-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;flex-shrink:0}
.stat-ico.red{background:var(--red)}.stat-ico.dark{background:var(--black)}.stat-ico.green{background:#25d366}
.stat-lbl{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--g-lt);margin-bottom:4px}
.stat-val{font-size:1.7rem;font-weight:900;color:var(--text);line-height:1}
.stat-val.stat-wa{font-size:.95rem;color:#25d366}

.subsec-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--g-md);margin-bottom:14px}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.r-card{background:var(--white);border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.r-img{aspect-ratio:1;background:#f0f0f0;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:1.8rem;overflow:hidden}
.r-img img{width:100%;height:100%;object-fit:cover}
.r-info{padding:10px 12px}
.r-name{font-size:.8rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.r-price{font-size:.8rem;font-weight:700;color:var(--red)}

/* =============================================
   SECTION BAR
   ============================================= */
.sec-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;
  font-size:.65rem;font-weight:800;
  min-width:22px;height:22px;padding:0 7px;border-radius:50px;
  margin-left:8px;vertical-align:middle;
}

/* =============================================
   PANEL BOX (formularios)
   ============================================= */
.panel-box{
  background:var(--white);
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  padding:22px 24px;
  margin-bottom:18px;
}
.panel-title{font-size:.88rem;font-weight:800;color:var(--text);margin-bottom:16px;letter-spacing:.01em}

/* Fila para agregar categoría — GRID para garantizar layout */
.cat-form-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
}

/* =============================================
   FORM FIELDS
   ============================================= */
.f-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.f-group:last-child{margin-bottom:0}
.f-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--g-md)}
.f-label small{font-weight:500;text-transform:none;color:var(--g-lt);letter-spacing:0}
.f-input{
  width:100%;
  padding:11px 14px;
  border:2px solid var(--border);border-radius:9px;
  font-size:.875rem;font-weight:500;color:var(--text);
  background:#fafafa;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.f-input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(204,0,0,.08);background:var(--white)}
.f-textarea{resize:vertical;min-height:90px}
.f-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* =============================================
   BUTTONS
   ============================================= */
.btn-red{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;
  font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 20px;border-radius:9px;white-space:nowrap;flex-shrink:0;
  transition:background .2s,transform .18s,box-shadow .2s;
}
.btn-red:hover{background:var(--red-dk);transform:translateY(-1px);box-shadow:0 6px 18px rgba(204,0,0,.26)}
.btn-red.btn-lg{padding:13px 26px;font-size:.85rem}
.btn-ghost{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;color:var(--g-md);
  font-size:.8rem;font-weight:700;
  padding:11px 18px;border-radius:9px;border:2px solid var(--border);
  white-space:nowrap;flex-shrink:0;
  transition:border-color .2s,color .2s;
}
.btn-ghost:hover{border-color:var(--g-dk);color:var(--text)}
.btn-icon{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.82rem;transition:background .2s,color .2s}
.btn-icon.edit{color:var(--g-lt)}.btn-icon.edit:hover{background:#EFF6FF;color:#2563EB}
.btn-icon.del{color:var(--g-lt)}.btn-icon.del:hover{background:#FEE2E2;color:#DC2626}

.form-actions{display:flex;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}

/* =============================================
   LISTAS
   ============================================= */
.list-wrap{display:flex;flex-direction:column;gap:8px}
.empty-msg{text-align:center;color:var(--g-lt);font-size:.85rem;font-weight:500;padding:40px}

/* Item de categoría */
.cat-item{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
  animation:itemIn .25s var(--ease);
}
@keyframes itemIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cat-ico{width:34px;height:34px;border-radius:8px;background:rgba(204,0,0,.09);display:flex;align-items:center;justify-content:center;color:var(--red);font-size:.85rem;flex-shrink:0}
.cat-name{flex:1;font-size:.88rem;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cat-cnt{font-size:.72rem;font-weight:600;color:var(--g-lt);white-space:nowrap;margin-right:4px}
.cat-actions{display:flex;gap:4px;flex-shrink:0}

/* Item de producto */
.prod-item{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
  animation:itemIn .25s var(--ease);
}
.prod-thumb{
  width:58px;height:58px;border-radius:9px;
  background:#f0f0f0;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#ccc;font-size:1.3rem;
}
.prod-thumb img{width:100%;height:100%;object-fit:cover}
.prod-info{flex:1;min-width:0}
.prod-item-name{font-size:.875rem;font-weight:800;margin-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.prod-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.prod-cat-tag{font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(204,0,0,.1);color:var(--red);padding:3px 9px;border-radius:50px}
.prod-price{font-size:.85rem;font-weight:900;color:var(--red)}
.prod-stock{font-size:.7rem;font-weight:700;color:var(--g-lt)}

/* Etiqueta badges en lista admin */
.adm-badge{font-size:.62rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff}
.adm-badge.nuevo{background:#2563EB}
.adm-badge.oferta{background:#D97706}
.adm-badge.liquidacion{background:var(--red)}

.prod-actions{display:flex;gap:4px;flex-shrink:0}

/* =============================================
   DROP ZONE
   ============================================= */
.drop-zone{
  position:relative;border:2px dashed var(--border);border-radius:11px;
  min-height:130px;overflow:hidden;cursor:pointer;
  transition:border-color .2s,background .2s;background:#fafafa;
}
.drop-zone:hover,.drop-zone.drag,.drop-zone.drag-over{border-color:var(--red);background:rgba(204,0,0,.03)}
.dz-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  pointer-events:none;
}
.dz-inner i{font-size:1.8rem;color:#ccc}
.dz-inner p{font-size:.8rem;font-weight:700;color:var(--g-md)}
.dz-inner span{font-size:.7rem;color:var(--g-lt)}
.hidden-file{display:none}
.dz-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:9px}
.dz-clear{
  position:absolute;top:7px;right:7px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;z-index:2;
  transition:background .2s;
}
.dz-clear:hover{background:#dc2626}

/* Product form grid */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.prod-col{display:flex;flex-direction:column}

/* =============================================
   LIST ITEMS (universal: categorias y productos)
   ============================================= */
.list-item{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
  animation:itemIn .25s var(--ease) both;
}
.li-info{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.li-ico{font-size:.9rem;color:var(--red);flex-shrink:0;width:20px;text-align:center}
.li-thumb{width:58px;height:58px;border-radius:9px;object-fit:cover;flex-shrink:0;background:#f0f0f0}
.li-info>div{min-width:0;flex:1}
.li-name{font-size:.88rem;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.li-sub{font-size:.72rem;font-weight:600;color:var(--g-lt)}
.li-actions{display:flex;gap:4px;flex-shrink:0}

/* Recent cards on dashboard */
.recent-card{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;box-shadow:0 1px 8px rgba(0,0,0,.05);
  transition:transform .2s,box-shadow .2s;
}
.recent-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.recent-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#f0f0f0}
.rc-info{padding:10px 12px}
.rc-name{font-size:.8rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.rc-price{font-size:.8rem;font-weight:700;color:var(--red)}

/* =============================================
   TOAST
   ============================================= */
.toast-wrap{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
}
.toast{
  background:var(--black);color:#fff;
  font-size:.8rem;font-weight:600;padding:11px 20px;border-radius:50px;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  white-space:nowrap;
  opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.toast.show{opacity:1;transform:none}
.toast-success i{color:#4ade80}
.toast-error i{color:#f87171}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .prod-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:4px 0 40px rgba(0,0,0,.38)}
  .admin-main{margin-left:0}
  .menu-toggle{display:flex}
  .sec{padding:18px 16px 48px}
  .topbar{padding:0 16px}
  .stats-grid{grid-template-columns:1fr}
  .f-row-2{grid-template-columns:1fr}
  .cat-form-row{grid-template-columns:1fr;justify-items:stretch}
  .cat-form-row .btn-red,.cat-form-row .btn-ghost{width:100%;justify-content:center}
}
@media(max-width:480px){
  .login-card{padding:32px 22px}
  .prod-grid{grid-template-columns:1fr}
}

/* =============================================
   DROPZONE GRID (fotos adicionales)
   ============================================= */
.dz-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dz-sm{min-height:110px}
.dz-sm .dz-inner p{font-size:.75rem}
.dz-sm .dz-inner span{display:none}

/* =============================================
   AJUSTES
   ============================================= */
.sett-form{max-width:560px;display:flex;flex-direction:column;gap:18px}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}