
:root{
  --admin-bg:#050608;
  --admin-panel:#0c0f14;
  --admin-panel-2:#11151c;
  --admin-line:#2b3038;
  --admin-gold:#e4af28;
  --admin-gold-2:#ffd45c;
  --admin-text:#f2f3f4;
  --admin-muted:#9399a3;
  --admin-green:#35df87;
  --admin-red:#ff5967;
}

*{box-sizing:border-box}
body.admin-v4-body{
  margin:0;
  min-height:100vh;
  color:var(--admin-text);
  background:
    radial-gradient(circle at 85% 0%,rgba(228,175,40,.06),transparent 30%),
    var(--admin-bg);
  font-family:Arial,Helvetica,sans-serif;
}

.admin-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:250px;
  display:flex;
  flex-direction:column;
  padding:18px 14px;
  border-right:1px solid var(--admin-line);
  background:rgba(6,8,11,.97);
  backdrop-filter:blur(14px);
  z-index:100;
}

.admin-logo{
  height:74px;
  display:block;
  margin-bottom:16px;
}
.admin-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}

.admin-menu{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:auto;
}
.admin-menu button{
  width:100%;
  min-height:43px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:9px;
  color:#b8bdc5;
  background:transparent;
  text-align:left;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}
.admin-menu button span{width:22px;text-align:center}
.admin-menu button:hover{
  color:#fff;
  background:#10141a;
}
.admin-menu button.active{
  color:#17120a;
  border-color:#c9971d;
  background:linear-gradient(180deg,#ffd95a,#dfa21c);
  box-shadow:0 8px 22px rgba(228,175,40,.18);
}

.admin-sidebar-footer{
  margin-top:auto;
  padding:14px 8px 0;
  border-top:1px solid #252a31;
}
.admin-sidebar-footer a{
  display:block;
  margin-bottom:7px;
  color:var(--admin-gold-2);
  text-decoration:none;
  font-weight:900;
}
.admin-sidebar-footer small{color:#717781}

.admin-main{
  margin-left:250px;
  min-height:100vh;
  padding:0 28px 55px;
}

.admin-topbar{
  position:sticky;
  top:0;
  z-index:70;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--admin-line);
  background:rgba(5,6,8,.91);
  backdrop-filter:blur(14px);
}
.admin-topbar span{
  color:var(--admin-gold);
  font-size:10px;
  font-weight:950;
  letter-spacing:1px;
}
.admin-topbar h1{
  margin:5px 0 0;
  font-size:29px;
}
.admin-top-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.save-indicator{
  color:var(--admin-green)!important;
  transition:.2s;
}
.save-indicator.saving{color:var(--admin-gold-2)!important}
.ghost-action,.danger-action{
  padding:10px 13px;
  border-radius:8px;
  cursor:pointer;
}
.ghost-action{
  color:#c7cbd2;
  border:1px solid #3a4049;
  background:#0d1015;
}
.danger-action{
  color:#fff;
  border:1px solid #a72b39;
  background:#5f1720;
}

.admin-view{
  display:none;
  padding-top:26px;
}
.admin-view.active{display:block}

.stats-grid-v4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}
.stats-grid-v4 article{
  min-height:128px;
  padding:18px;
  border:1px solid var(--admin-line);
  border-radius:13px;
  background:
    radial-gradient(circle at 85% 10%,rgba(228,175,40,.08),transparent 36%),
    linear-gradient(180deg,var(--admin-panel-2),var(--admin-panel));
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}
.stats-grid-v4 span{
  color:#979da7;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
}
.stats-grid-v4 strong{
  display:block;
  margin:10px 0 4px;
  color:var(--admin-gold-2);
  font-size:31px;
}
.stats-grid-v4 small{color:#747b85}

.dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}
.dashboard-panel,.admin-view[data-section="orders"]{
  padding:18px;
  border:1px solid var(--admin-line);
  border-radius:13px;
  background:linear-gradient(180deg,#10141a,#090c10);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.panel-head span{
  color:var(--admin-gold);
  font-size:10px;
  font-weight:950;
  letter-spacing:1px;
}
.panel-head h2{margin:5px 0 0}

.stock-alerts,.recent-orders{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.stock-alert,.recent-order{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px;
  border:1px solid #2b3037;
  border-radius:9px;
  background:#080b0f;
}
.stock-alert strong,.recent-order strong{font-size:13px}
.stock-alert small,.recent-order small{color:#858b95}
.stock-alert.out strong{color:var(--admin-red)}
.stock-alert.ok strong{color:var(--admin-green)}

.product-grid-v4{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.product-card-v4{
  overflow:hidden;
  border:1px solid var(--admin-line);
  border-radius:14px;
  background:
    radial-gradient(circle at 90% 0%,rgba(228,175,40,.07),transparent 34%),
    linear-gradient(180deg,#12161c,#080a0d);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  transition:.2s ease;
}
.product-card-v4:hover{
  transform:translateY(-4px);
  border-color:rgba(228,175,40,.55);
  box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 20px rgba(228,175,40,.07);
}
.product-card-v4.out{
  border-color:rgba(255,89,103,.34);
}
.product-thumb-v4{
  position:relative;
  height:165px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#07090c;
}
.product-thumb-v4 img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.product-status-v4{
  position:absolute;
  top:10px;
  right:10px;
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
}
.product-status-v4.active{
  color:#40e58a;
  background:rgba(35,190,105,.14);
}
.product-status-v4.out{
  color:#ff7582;
  background:rgba(255,69,86,.13);
}
.product-form-v4{
  display:grid;
  gap:10px;
  padding:14px;
}
.product-form-v4 label{
  display:block;
  margin-bottom:5px;
  color:#9298a1;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
}
.product-form-v4 input,
.product-form-v4 select{
  width:100%;
  height:40px;
  padding:0 10px;
  border:1px solid #353b44;
  border-radius:7px;
  color:#fff;
  background:#0c0f13;
}
.product-form-v4 .name-input{
  height:44px;
  font-size:14px;
  font-weight:950;
}
.form-row-v4{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.discount-v4{
  margin-top:5px;
  color:#ff7080;
  font-size:9px;
  font-weight:900;
}
.save-card-v4{
  width:100%;
  height:42px;
  border:0;
  border-radius:8px;
  color:#15110a;
  background:linear-gradient(180deg,#ffd95a,#dfa21c);
  font-weight:950;
  cursor:pointer;
}
.save-card-v4.saved{
  color:#062a15;
  background:linear-gradient(180deg,#54ec97,#25bf6b);
}

.orders-table-v4{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.order-row-v4{
  display:grid;
  grid-template-columns:1fr 1.5fr .7fr 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid var(--admin-line);
  border-radius:9px;
  background:#080b0f;
}
.order-row-v4 small{
  display:block;
  color:#858b95;
  margin-bottom:3px;
}
.order-row-v4 select{
  height:36px;
  padding:0 9px;
  border:1px solid #383e47;
  border-radius:7px;
  color:#fff;
  background:#11151a;
}
.empty-v4{
  padding:30px;
  color:#7e848e;
  text-align:center;
  border:1px dashed #343a42;
  border-radius:10px;
}

.settings-layout-v4{
  display:grid;
  grid-template-columns:minmax(330px,500px) 1fr;
  gap:18px;
}
.settings-panel-v4,.preview-panel-v4{
  padding:18px;
  border:1px solid var(--admin-line);
  border-radius:13px;
  background:linear-gradient(180deg,#11151a,#090c10);
}
.settings-panel-v4>span,.preview-panel-v4>span{
  color:var(--admin-gold);
  font-size:10px;
  font-weight:950;
  letter-spacing:1px;
}
.settings-panel-v4 h2{margin:6px 0 18px}
.settings-panel-v4 label{
  display:block;
  margin:13px 0 6px;
  color:#a9aeb6;
  font-size:10px;
  font-weight:900;
}
.settings-panel-v4 input[type=text]{
  width:100%;
  height:42px;
  padding:0 11px;
  border:1px solid #353b44;
  border-radius:7px;
  color:#fff;
  background:#0b0e12;
}
.toggle-row{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.toggle-row input{accent-color:var(--admin-gold)}
.range-control{
  display:grid;
  grid-template-columns:1fr 60px;
  gap:12px;
  align-items:center;
}
.range-control input{accent-color:var(--admin-gold)}
.range-control strong{
  color:var(--admin-gold-2);
  text-align:right;
}
.primary-action{
  width:100%;
  height:43px;
  margin-top:17px;
  border:0;
  border-radius:8px;
  color:#15110a;
  background:linear-gradient(180deg,#ffd95a,#dfa21c);
  font-weight:950;
  cursor:pointer;
}
.compact-settings{max-width:520px}
.appearance-preview-v4{
  position:relative;
  min-height:360px;
  margin-top:13px;
  overflow:hidden;
  border-radius:12px;
  background:#0a0d11;
}
.appearance-preview-v4 .preview-bg{
  position:absolute;
  inset:0;
  background:center/cover;
}
.appearance-preview-v4:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,9,12,.98),rgba(7,9,12,.55));
}
.preview-copy{
  position:absolute;
  z-index:3;
  left:28px;
  top:50%;
  display:flex;
  flex-direction:column;
  gap:7px;
  transform:translateY(-50%);
}
.preview-copy small,.preview-copy em{color:var(--admin-gold-2)}
.preview-copy strong{font-size:25px}
.preview-copy em{font-size:22px;font-style:normal;font-weight:950}
.preview-main{
  position:absolute;
  z-index:2;
  right:0;
  width:58%;
  height:100%;
  object-fit:cover;
}

.admin-toast-v4{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:300;
  padding:12px 18px;
  border:1px solid var(--admin-gold);
  border-radius:8px;
  color:#fff;
  background:#0a0d11;
  opacity:0;
  transform:translate(-50%,15px);
  transition:.2s;
}
.admin-toast-v4.show{
  opacity:1;
  transform:translate(-50%,0);
}

@media(max-width:1180px){
  .product-grid-v4{grid-template-columns:repeat(2,1fr)}
  .stats-grid-v4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .admin-sidebar{width:210px}
  .admin-main{margin-left:210px}
  .dashboard-grid,.settings-layout-v4{grid-template-columns:1fr}
  .order-row-v4{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .admin-sidebar{
    position:static;
    width:100%;
    height:auto;
  }
  .admin-menu{
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }
  .admin-main{
    margin-left:0;
    padding:0 14px 40px;
  }
  .admin-topbar{
    position:static;
    align-items:flex-start;
    flex-direction:column;
  }
  .product-grid-v4,.stats-grid-v4{grid-template-columns:1fr}
}


/* =========================================================
   V4.1 - MINIATURAS LIMPIAS SIN FONDOS GRANDES
   ========================================================= */

.product-grid-v4{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}

.product-card-v4{
  border-color:#303640;
  background:linear-gradient(180deg,#10141a,#080a0d) !important;
}

.product-thumb-v4{
  height:125px !important;
  background:#090c10 !important;
  border-bottom:1px solid #272d35;
}

.product-thumb-v4 img{
  width:105px !important;
  height:90px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 9px 15px rgba(0,0,0,.48));
}

.product-status-v4{
  top:9px;
  right:9px;
}

.product-form-v4{
  padding:12px !important;
  gap:8px !important;
}

.product-form-v4 input,
.product-form-v4 select{
  height:36px !important;
}

.product-form-v4 .name-input{
  height:39px !important;
  text-align:center;
}

.save-card-v4{
  height:39px !important;
}

@media(max-width:1400px){
  .product-grid-v4{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:1050px){
  .product-grid-v4{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:650px){
  .product-grid-v4{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   V4.3 - CONFIGURACIÓN DE RANGOS
   ========================================================= */
.ranks-head-v43{
  margin-bottom:18px;
}
.ranks-admin-grid-v43{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}
.rank-card-v43{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:15px;
  padding:16px;
  border:1px solid #2d333b;
  border-radius:14px;
  background:
    radial-gradient(circle at 95% 0%,var(--rank-soft),transparent 32%),
    linear-gradient(180deg,#11151a,#080b0f);
}
.rank-preview-v43{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.rank-preview-v43 img{
  width:96px;
  height:96px;
  object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));
}
.rank-preview-v43 strong{
  color:var(--rank-color);
  text-align:center;
  font-size:12px;
}
.rank-fields-v43{
  display:grid;
  gap:9px;
}
.rank-fields-v43 label{
  display:block;
  margin-bottom:5px;
  color:#9da3ac;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
}
.rank-fields-v43 input,
.rank-fields-v43 textarea{
  width:100%;
  border:1px solid #353b44;
  border-radius:7px;
  color:#fff;
  background:#0a0d11;
}
.rank-fields-v43 input{
  height:39px;
  padding:0 10px;
}
.rank-fields-v43 textarea{
  min-height:72px;
  padding:9px 10px;
  resize:vertical;
}
.rank-row-v43{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.rank-color-wrap-v43{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:7px;
}
.rank-color-wrap-v43 input[type=color]{
  padding:3px;
}
.rank-image-actions-v43{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}
.rank-image-upload-v43{
  position:relative;
  overflow:hidden;
}
.rank-image-upload-v43 input[type=file]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.rank-benefits-v43{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.rank-benefit-row-v43{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
}
.rank-benefit-row-v43 button{
  width:36px;
  border:1px solid #6d2430;
  border-radius:7px;
  color:#ff7c88;
  background:#2d1016;
  cursor:pointer;
}
.add-benefit-v43{
  height:36px;
  border:1px solid #8a6819;
  border-radius:7px;
  color:#ffd45c;
  background:#19140a;
  cursor:pointer;
}
.rank-admin-bottom-v43{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:17px;
}
.rank-info-v43{
  flex:1;
  padding:14px;
  border:1px solid #2f353d;
  border-radius:10px;
  background:#0a0d11;
}
.rank-info-v43 strong{
  color:#ffd45c;
}
.rank-info-v43 p{
  margin:5px 0 0;
  color:#8e949e;
}
.rank-save-all-v43{
  width:auto;
  min-width:220px;
  margin:0;
}
@media(max-width:1050px){
  .ranks-admin-grid-v43{grid-template-columns:1fr}
}
@media(max-width:620px){
  .rank-card-v43{grid-template-columns:1fr}
  .rank-row-v43{grid-template-columns:1fr}
  .rank-admin-bottom-v43{flex-direction:column;align-items:stretch}
  .rank-save-all-v43{width:100%}
}


/* =========================================================
   V5.0 - PEDIDOS, CLIENTES Y DASHBOARD
   ========================================================= */
.stats-grid-v5{grid-template-columns:repeat(5,1fr)}
.menu-badge{
  min-width:20px;padding:3px 6px;border-radius:999px;
  color:#170b05;background:#ffb329;font-size:9px;text-align:center;
}
.order-tools-v5,.client-tools-v5{
  display:grid;grid-template-columns:1fr 190px 170px;gap:10px;margin-bottom:12px;
}
.client-tools-v5{grid-template-columns:1fr 190px}
.order-tools-v5 input,.order-tools-v5 select,.client-tools-v5 input,.client-tools-v5 select{
  height:42px;padding:0 11px;border:1px solid #353b44;border-radius:8px;
  color:#fff;background:#090c10;
}
.order-summary-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.order-summary-chips span{
  padding:7px 10px;border:1px solid #333a43;border-radius:999px;color:#bfc4cb;background:#0a0d11;font-size:10px;font-weight:900;
}
.orders-table-v5{gap:11px}
.order-card-v5{
  display:grid;grid-template-columns:1.15fr 1.35fr .85fr .85fr auto;gap:13px;align-items:center;
  padding:14px;border:1px solid #2e343d;border-radius:11px;background:#080b0f;
}
.order-card-v5.pending{border-left:3px solid #ffb329}
.order-card-v5.processing{border-left:3px solid #4ca8ff}
.order-card-v5.delivered{border-left:3px solid #3ed887}
.order-card-v5.cancelled{border-left:3px solid #ff5967}
.order-card-v5 small{display:block;margin-bottom:4px;color:#858c96}
.order-customer-v5{display:flex;align-items:center;gap:9px}
.order-customer-v5 img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid #8d6c19;background:#11151a}
.order-actions-v5{display:flex;flex-direction:column;gap:6px}
.order-actions-v5 select,.order-actions-v5 button{
  min-width:130px;height:35px;padding:0 9px;border:1px solid #3a414a;border-radius:7px;color:#fff;background:#11151a;
}
.order-actions-v5 button{color:#ffd45c;cursor:pointer}
.empty-v5{padding:34px;border:1px dashed #343a43;border-radius:10px;color:#7f8690;text-align:center}

.clients-grid-v5{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.client-card-v5{
  padding:15px;border:1px solid #2f353d;border-radius:13px;background:
  radial-gradient(circle at 90% 0%,rgba(228,175,40,.07),transparent 34%),linear-gradient(#11151a,#080a0d);
}
.client-head-v5{display:flex;align-items:center;gap:11px}
.client-head-v5 img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:1px solid #d6a324;background:#0a0d11}
.client-head-v5 h3{margin:0 0 4px}.client-head-v5 p{margin:0;color:#8f969f;font-size:11px}
.client-rank-v5{display:inline-block;margin-top:6px;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:950}
.client-stats-v5{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}
.client-stats-v5 article{padding:9px;border:1px solid #2d333b;border-radius:8px;background:#080b0f;text-align:center}
.client-stats-v5 span,.client-stats-v5 strong{display:block}.client-stats-v5 span{color:#858c96;font-size:9px}.client-stats-v5 strong{margin-top:5px;color:#ffd45c}
.client-last-v5{padding-top:10px;border-top:1px solid #2d333b;color:#9ba1aa;font-size:11px}
.client-card-v5 button{
  width:100%;height:38px;margin-top:12px;border:1px solid #8e6a16;border-radius:7px;color:#ffd45c;background:#111008;cursor:pointer;
}

.notification-center-v5{position:relative}
.notification-button-v5{
  position:relative;width:40px;height:40px;border:1px solid #3a414a;border-radius:9px;color:#fff;background:#0d1015;cursor:pointer;
}
.notification-button-v5 b{
  position:absolute;right:-5px;top:-5px;min-width:18px;padding:3px 5px;border-radius:999px;color:#fff;background:#e43f4d;font-size:9px;
}
.notification-panel-v5{
  position:absolute;right:0;top:48px;width:340px;display:none;padding:12px;border:1px solid #363d46;border-radius:11px;background:#0a0d11;box-shadow:0 20px 45px rgba(0,0,0,.6);
}
.notification-panel-v5.open{display:block}
.notification-panel-v5>div{display:flex;justify-content:space-between;align-items:center;padding-bottom:9px;border-bottom:1px solid #2d333b}
.notification-panel-v5>div button{border:0;color:#d6a424;background:transparent;cursor:pointer}
.notification-item-v5{padding:10px 5px;border-bottom:1px solid #242a31}
.notification-item-v5:last-child{border-bottom:0}.notification-item-v5 strong,.notification-item-v5 small{display:block}.notification-item-v5 small{margin-top:4px;color:#858c96}
.notification-empty-v5{padding:18px;text-align:center;color:#858c96}

@media(max-width:1300px){
  .stats-grid-v5{grid-template-columns:repeat(3,1fr)}
  .clients-grid-v5{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:950px){
  .order-card-v5{grid-template-columns:1fr 1fr}
  .order-actions-v5{grid-column:1/-1;flex-direction:row}
}
@media(max-width:700px){
  .stats-grid-v5,.clients-grid-v5{grid-template-columns:1fr}
  .order-tools-v5,.client-tools-v5{grid-template-columns:1fr}
  .order-card-v5{grid-template-columns:1fr}
  .notification-panel-v5{position:fixed;left:10px;right:10px;top:70px;width:auto}
}
