/* =============================================
   DUBENJI — ADMIN DASHBOARD
   Layout: sidebar (desktop) / bottom-nav (mobile)
   Cards on mobile, table on desktop for listings
   ============================================= */

/* === LOGIN WALL === */
#loginWall { display:flex; position:fixed; inset:0; background:var(--bg-principal); z-index:9999; align-items:center; justify-content:center; }
#loginWall.hidden { display:none; }
#appContent { display:none; }
#appContent.visible { display:block; }

.login-wall-box { background:var(--dark-2); border:1px solid rgba(0,0,255,.2); border-radius:var(--radius); padding:40px 32px; width:100%; max-width:380px; text-align:center; }
.login-wall-box .lw-icon { width:56px; height:56px; background:linear-gradient(135deg,var(--color-acento),#0000CC); border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.login-wall-box h2 { font-family:var(--font-display); font-size:1.6rem; margin-bottom:6px; }
.login-wall-box p { color:var(--gris); font-size:.88rem; margin-bottom:24px; }
.lw-input { width:100%; background:var(--dark-3); border:1px solid rgba(0,0,255,.2); color:var(--blanco); padding:12px 16px; border-radius:8px; font-size:1rem; outline:none; margin-bottom:12px; font-family:var(--font-body); transition:border-color .2s; }
.lw-input:focus { border-color:var(--color-acento); }
.lw-btn { width:100%; background:var(--color-acento); color:white; padding:12px; border-radius:8px; font-size:1rem; font-weight:700; cursor:pointer; font-family:var(--font-body); letter-spacing:.5px; border:none; }
.lw-error { color:var(--rojo); font-size:.85rem; margin-top:10px; min-height:20px; }
.lw-back { margin-top:14px; font-size:.82rem; color:var(--gris); }
.lw-back a { color:var(--color-acento); }

/* === LAYOUT === */
.admin-layout { display:flex; min-height:100vh; }
.admin-main { flex:1; margin-left:220px; display:flex; flex-direction:column; }

/* === SIDEBAR (desktop) === */
.admin-sidebar {
  position:fixed; left:0; top:0; bottom:0; width:220px;
  background:var(--dark-2); border-right:1px solid rgba(0,0,255,.1);
  display:flex; flex-direction:column; z-index:100;
}
.sidebar-brand {
  padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.05);
  display:flex; align-items:center; gap:10px;
}
.sidebar-brand img { height:36px; width:auto; }
.sidebar-brand span { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--blanco); letter-spacing:.5px; }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:2px; }
.sidebar-nav a, .sidebar-nav button {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  font-size:.82rem; font-weight:500; color:var(--gris);
  background:none; border:none; cursor:pointer; width:100%; text-align:left;
  font-family:var(--font-body); transition:all .2s;
}
.sidebar-nav a:hover, .sidebar-nav button:hover { color:var(--blanco); background:rgba(0,0,255,.06); }
.sidebar-nav a.active, .sidebar-nav button.active { color:var(--color-acento); background:rgba(0,0,255,.1); font-weight:600; }
.sidebar-nav .nav-icon { width:18px; height:18px; flex-shrink:0; opacity:.7; }
.sidebar-nav a:hover .nav-icon, .sidebar-nav button:hover .nav-icon { opacity:1; }
.sidebar-nav a.active .nav-icon { opacity:1; }
.sidebar-divider { height:1px; background:rgba(255,255,255,.05); margin:8px 10px; }

/* === BOTTOM NAV (mobile) === */
.admin-bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:var(--dark-2); border-top:1px solid rgba(0,0,255,.12);
  z-index:100; justify-content:space-around; padding:4px 0 env(safe-area-inset-bottom,4px);
}
.admin-bottom-nav a, .admin-bottom-nav button {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color:var(--gris); font-size:.6rem; font-weight:500;
  padding:6px 10px; cursor:pointer; text-decoration:none; min-width:56px;
  font-family:var(--font-body); transition:color .2s;
}
.admin-bottom-nav a:hover, .admin-bottom-nav button:hover { color:var(--blanco); }
.admin-bottom-nav a.active, .admin-bottom-nav button.active { color:var(--color-acento); }
.admin-bottom-nav .bn-icon { width:20px; height:20px; }

/* === ADMIN HEADER (top bar inside main area) === */
.admin-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; border-bottom:1px solid rgba(255,255,255,.05);
  background:var(--bg-principal);
}
.admin-topbar h1 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; }
.admin-topbar-actions { display:flex; gap:10px; align-items:center; }
.admin-topbar-actions .view-site-btn { color:var(--gris); font-size:.82rem; display:flex; align-items:center; gap:6px; transition:color .2s; }
.admin-topbar-actions .view-site-btn:hover { color:var(--color-acento); }
.topbar-badge { font-size:.72rem; color:var(--gris); background:var(--dark-2); padding:3px 10px; border-radius:20px; }

/* === ADMIN BODY === */
.admin-body {
  padding:28px; display:block; flex:1; width:100%;
}

/* === ADMIN VIEW (tabs) === */
.admin-view { display:none; }
.admin-view.active { display:block; }

/* === TOOLBAR (search + filter + sort) === */
.admin-toolbar {
  display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center;
}
.admin-toolbar select, .admin-toolbar input {
  background:var(--dark-3); border:1px solid rgba(0,0,255,.18);
  color:var(--blanco); padding:9px 14px; border-radius:8px;
  font-size:.85rem; font-family:var(--font-body); outline:none;
  transition:border-color .2s;
}
.admin-toolbar select:focus, .admin-toolbar input:focus { border-color:var(--color-acento); }
.admin-toolbar .toolbar-search { flex:1; min-width:180px; }
.admin-toolbar .toolbar-select { min-width:150px; }
.admin-toolbar select {
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}

/* === FORM PANEL — standalone centered === */
.form-panel {
  max-width:800px; margin:0 auto; padding:24px 22px;
}
.form-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;
}
.form-header h2 {
  font-family:var(--font-display); font-size:1.2rem; font-weight:700;
  color:var(--blanco); letter-spacing:-.3px; margin:0;
}
.btn-volver {
  background:transparent; border:1px solid rgba(255,255,255,.1); color:var(--gris);
  padding:8px 16px; border-radius:6px; font-size:.82rem; font-weight:500;
  cursor:pointer; font-family:var(--font-body); transition:all .2s;
}
.btn-volver:hover { border-color:var(--color-acento); color:var(--blanco); }
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:.72rem; font-weight:600; color:var(--gris);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.6px;
  font-family:var(--font-body);
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:var(--dark-3); border:1px solid rgba(0,0,255,.15);
  color:var(--blanco); padding:0 14px; border-radius:8px; font-size:.95rem;
  font-family:var(--font-body); outline:none; transition:border-color .2s, box-shadow .2s;
  min-height:46px; -webkit-appearance:none; appearance:none;
}
.form-group textarea { padding:12px 14px; min-height:90px; resize:vertical; line-height:1.5; }
.form-group select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--color-acento); box-shadow:0 0 0 2px rgba(0,0,255,.1);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(148,163,184,.5); }
.form-group select option { background:var(--dark-2); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

/* === CHECKBOX === */
.form-checkbox {
  display:flex; align-items:center; gap:10px; padding:8px 0; margin:4px 0;
}
.form-checkbox input[type=checkbox] {
  width:20px; height:20px; accent-color:var(--color-acento);
  cursor:pointer; margin:0; flex-shrink:0;
}
.form-checkbox label {
  font-size:.88rem; color:var(--gris-claro); cursor:pointer;
  text-transform:none; letter-spacing:0; font-weight:400; margin:0;
}

/* === UPLOAD ZONE (drag & drop) === */
.upload-zone {
  width:100%; min-height:100px; border:2px dashed rgba(0,0,255,.25);
  border-radius:10px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  padding:20px; cursor:pointer; transition:border-color .2s, background .2s;
  background:transparent; color:var(--gris); text-align:center;
}
.upload-zone:hover, .upload-zone.dragover { border-color:var(--color-acento); background:rgba(0,0,255,.04); }
.upload-zone-icon { width:32px; height:32px; opacity:.5; }
.upload-zone-text { font-size:.85rem; font-weight:500; color:var(--gris); }
.upload-zone-hint { font-size:.72rem; color:rgba(148,163,184,.5); }
.upload-zone.has-image { border-style:solid; border-color:var(--color-acento); background:rgba(0,0,255,.04); min-height:80px; flex-direction:row; gap:14px; padding:14px 18px; }
.upload-zone.has-image .upload-zone-icon { width:24px; height:24px; }
.upload-zone-preview { width:48px; height:36px; border-radius:4px; object-fit:cover; background:var(--dark-3); flex-shrink:0; }
.upload-zone-filename { font-size:.82rem; color:var(--blanco); font-weight:500; }

/* === FORM CARDS (grouped blocks inside form) === */
.form-card {
  background:var(--dark-2); border-radius:var(--radius);
  border:1px solid rgba(0,0,255,.12); padding:22px;
  margin-bottom:16px;
}
.form-card-title {
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  color:var(--color-acento); margin-bottom:18px; letter-spacing:-.2px;
}

/* === LIST PANEL HEADER (title + button row) === */
.list-panel-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px;
}
.list-panel-header h2 {
  font-family:var(--font-display); font-size:1.1rem; font-weight:700;
  color:var(--blanco); margin:0;
}
.btn-nuevo-producto {
  background:var(--color-acento); color:white; border:none;
  padding:10px 20px; border-radius:8px; font-size:.85rem; font-weight:700;
  cursor:pointer; font-family:var(--font-body); white-space:nowrap;
  transition:opacity .2s, transform .15s; letter-spacing:.3px;
}
.btn-nuevo-producto:hover { opacity:.9; transform:translateY(-1px); }

/* === COLORES SECTION === */
.colores-section { padding-top:8px; }
.colores-section h3 { font-family:var(--font-display); font-size:1rem; margin-bottom:12px; color:var(--color-acento); display:none; }
.color-card { background:var(--dark-3); border-radius:8px; padding:14px; margin-bottom:12px; border:1px solid rgba(0,0,255,.12); }
.color-card-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.color-picker-wrap { display:flex; align-items:center; gap:6px; }
.color-picker-wrap input[type=color] { width:36px; height:36px; border-radius:6px; border:1px solid rgba(255,255,255,.12); padding:2px; background:var(--dark-3); cursor:pointer; }
.color-picker-wrap input[type=text] { width:100px; background:var(--dark-2); border:1px solid rgba(0,0,255,.18); color:var(--blanco); padding:7px 10px; border-radius:6px; font-size:.82rem; outline:none; }
.color-picker-wrap input[type=text]:focus { border-color:var(--color-acento); }
.btn-remove-color { background:rgba(244,63,94,.1); color:var(--rojo); border:none; width:28px; height:28px; border-radius:6px; font-size:.8rem; cursor:pointer; margin-left:auto; transition:background .2s; }
.btn-remove-color:hover { background:rgba(244,63,94,.22); }
.color-imgs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0; }
.color-img-slot { position:relative; aspect-ratio:1; }
.color-img-preview { width:100%; height:100%; background:var(--dark-2); border-radius:6px; border:1px dashed rgba(0,0,255,.2); display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; font-size:.6rem; color:var(--gris); text-align:center; transition:border-color .2s; }
.color-img-preview:hover { border-color:var(--color-acento); }
.color-img-preview img { width:100%; height:100%; object-fit:cover; }
.color-img-remove { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%; background:var(--rojo); color:white; border:none; font-size:.55rem; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:5; }
.color-img-remove.show { display:flex; }
.talles-grid { display:grid; gap:4px; margin-top:6px; }
.talle-cell { text-align:center; }
.talle-cell label { font-size:.65rem; font-weight:600; color:var(--gris); display:block; margin-bottom:2px; text-transform:none; letter-spacing:0; }
.talle-cell input[type=number] { width:100%; background:var(--dark-2); border:1px solid rgba(0,0,255,.12); color:var(--blanco); padding:5px; border-radius:4px; font-size:.78rem; text-align:center; outline:none; }
.talle-cell input[type=number]:focus { border-color:var(--color-acento); }
.talle-cell .talle-toggle { display:flex; align-items:center; justify-content:center; gap:3px; margin-top:3px; }
.talle-cell .talle-toggle input[type=checkbox] { width:14px; height:14px; accent-color:var(--color-acento); cursor:pointer; margin:0; }
.talle-cell .talle-toggle label { font-size:.6rem; color:var(--gris); cursor:pointer; }
.btn-add-color { width:100%; padding:8px; background:transparent; color:var(--gris); border:1px dashed rgba(0,0,255,.25); border-radius:8px; font-size:.82rem; cursor:pointer; transition:all .2s; margin-bottom:8px; }
.btn-add-color:hover { border-color:var(--color-acento); color:var(--blanco); }

/* === BUTTONS === */
.btn-guardar, .btn-primary {
  width:100%; background:var(--color-acento); color:white; padding:12px;
  border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer;
  transition:opacity .2s, transform .15s; margin-top:6px;
  font-family:var(--font-body); letter-spacing:.5px; border:none;
}
.btn-guardar:hover, .btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.btn-nuevo, .btn-secondary {
  width:100%; background:transparent; color:var(--gris); padding:11px;
  border-radius:8px; font-size:.88rem; font-weight:500;
  border:1px solid rgba(255,255,255,.1); cursor:pointer; margin-top:6px;
  transition:all .2s; font-family:var(--font-body);
}
.btn-nuevo:hover, .btn-secondary:hover { border-color:var(--color-acento); color:var(--blanco); }

/* === FORM ACTIONS === */
.form-actions { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.btn-export {
  flex:1; min-width:100px; padding:9px; border-radius:8px;
  font-size:.82rem; font-weight:600; border:1px solid rgba(0,0,255,.18);
  background:var(--dark-3); color:var(--blanco); cursor:pointer;
  transition:all .2s; font-family:var(--font-body);
}
.btn-export:hover { border-color:var(--color-acento); background:rgba(0,0,255,.06); }
.btn-export.peligro { color:var(--rojo); border-color:rgba(244,63,94,.3); }
.btn-export.peligro:hover { background:rgba(244,63,94,.1); }

/* === LIST PANEL === */
.list-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.list-tab {
  padding:7px 18px; background:var(--dark-3); border:1px solid rgba(0,0,255,.12);
  color:var(--gris); border-radius:40px; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:all .2s; font-family:var(--font-body);
}
.list-tab.active { background:var(--color-acento); border-color:var(--color-acento); color:white; }
.counter { font-size:.82rem; color:var(--gris); font-family:var(--font-body); font-weight:400; }

/* === PRODUCT LIST: DESKTOP TABLE === */
.admin-lista-table {
  display:none; width:100%; border-collapse:collapse;
}
.admin-lista-table thead th {
  padding:16px 20px; text-align:left; font-size:.78rem; font-weight:600;
  color:var(--gris); text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--font-body);
}
.admin-lista-table tbody td {
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.04);
  font-size:15px; vertical-align:middle;
}
.admin-lista-table tbody tr { transition:background .15s; }
.admin-lista-table tbody tr:hover { background:rgba(0,0,255,.03); }
.admin-lista-table tbody tr.pausado { opacity:.55; }
.admin-lista-table tbody tr.editando { background:rgba(0,0,255,.06); }
.admin-lista-table .td-img { width:90px; }
.admin-lista-table .td-img img { width:80px; height:60px; object-fit:cover; border-radius:6px; background:var(--dark-3); }
.admin-lista-table .td-nombre { font-weight:600; color:var(--blanco); font-size:15px; }
.admin-lista-table .td-meta { font-size:.82rem; color:var(--gris); }
.admin-lista-table .td-precio { font-family:var(--font-display); font-weight:600; color:var(--color-acento-light); font-size:16px; }
.admin-lista-table .td-stock { font-size:.75rem; color:var(--gris); }
.admin-lista-table .td-color-dots { display:flex; gap:3px; flex-wrap:wrap; }
.admin-lista-table .td-color-dot { width:12px; height:12px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,.08); }
.admin-lista-table .td-actions { display:flex; gap:4px; }

/* mini buttons inside table */
.btn-sm { padding:5px 10px; border-radius:5px; font-size:.72rem; font-weight:600; border:none; cursor:pointer; transition:background .15s; font-family:var(--font-body); white-space:nowrap; }
.btn-sm-edit { background:rgba(0,0,255,.1); color:var(--color-acento); }
.btn-sm-edit:hover { background:rgba(0,0,255,.22); }
.btn-sm-toggle { background:rgba(245,158,11,.1); color:#f59e0b; }
.btn-sm-toggle:hover { background:rgba(245,158,11,.22); }
.btn-sm-toggle.activo { background:rgba(16,185,129,.1); color:var(--verde); }
.btn-sm-toggle.activo:hover { background:rgba(16,185,129,.22); }
.btn-sm-star { background:rgba(148,163,184,.1); color:#94a3b8; }
.btn-sm-star:hover { background:rgba(148,163,184,.22); }
.btn-sm-star.activo { background:rgba(250,204,21,.12); color:#facc15; }
.btn-sm-star.activo:hover { background:rgba(250,204,21,.25); }
.btn-sm-del { background:rgba(244,63,94,.1); color:var(--rojo); }
.btn-sm-del:hover { background:rgba(244,63,94,.22); }

/* === PRODUCT LIST: MOBILE CARDS === */
.admin-lista-cards { display:flex; flex-direction:column; gap:10px; }
.admin-card {
  background:var(--dark-2); border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.05); padding:14px;
  transition:border-color .2s;
}
.admin-card:hover { border-color:rgba(0,0,255,.18); }
.admin-card.editando { border-color:var(--color-acento); }
.admin-card.pausado { opacity:.6; border-style:dashed; border-color:rgba(245,158,11,.3); }
.admin-card-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.admin-card-header img { width:52px; height:39px; object-fit:cover; border-radius:6px; background:var(--dark-3); flex-shrink:0; }
.admin-card-nombre { font-weight:600; font-size:.9rem; color:var(--blanco); }
.admin-card-meta { font-size:.75rem; color:var(--gris); margin-top:2px; }
.admin-card-precio { font-family:var(--font-display); color:var(--color-acento-light); font-weight:600; font-size:.9rem; }
.admin-card-colores { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.admin-card-color-dot { width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,.08); }
.admin-card-stock-info { font-size:.7rem; color:var(--gris); margin-top:2px; }
.admin-card-actions { display:flex; gap:6px; margin-top:10px; }
.admin-card-actions button { flex:1; padding:9px; border-radius:6px; font-size:.78rem; font-weight:600; border:none; cursor:pointer; transition:background .15s; font-family:var(--font-body); text-align:center; min-width:0; }
.admin-card-actions .btn-card-edit { background:rgba(0,0,255,.1); color:var(--color-acento); }
.admin-card-actions .btn-card-edit:hover { background:rgba(0,0,255,.22); }
.admin-card-actions .btn-card-toggle { background:rgba(245,158,11,.1); color:#f59e0b; }
.admin-card-actions .btn-card-toggle:hover { background:rgba(245,158,11,.22); }
.admin-card-actions .btn-card-toggle.activo { background:rgba(16,185,129,.1); color:var(--verde); }
.admin-card-actions .btn-card-toggle.activo:hover { background:rgba(16,185,129,.22); }
.admin-card-actions .btn-card-star { background:rgba(148,163,184,.1); color:#94a3b8; }
.admin-card-actions .btn-card-star:hover { background:rgba(148,163,184,.22); }
.admin-card-actions .btn-card-star.activo { background:rgba(250,204,21,.12); color:#facc15; }
.admin-card-actions .btn-card-star.activo:hover { background:rgba(250,204,21,.25); }
.admin-card-actions .btn-card-del { background:rgba(244,63,94,.1); color:var(--rojo); }
.admin-card-actions .btn-card-del:hover { background:rgba(244,63,94,.22); }
.pausado-tag { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.25); padding:1px 6px; border-radius:4px; font-size:.65rem; font-weight:700; margin-left:6px; }

.export-bar { margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); display:flex; gap:8px; flex-wrap:wrap; }

/* === MODALS === */
.cupones-modal {
  background:var(--dark-2); border:1px solid rgba(0,0,255,.15);
  border-radius:var(--radius); width:95%; max-width:600px;
  max-height:90vh; overflow-y:auto; padding:28px 24px;
  position:relative; animation:fadeIn .25s ease backwards;
}
.cupones-modal h2 { font-family:var(--font-display); font-size:1.2rem; margin-bottom:20px; color:var(--blanco); }
.cupones-modal-close { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--gris); font-size:1.4rem; cursor:pointer; transition:color .2s; }
.cupones-modal-close:hover { color:var(--blanco); }
.cupon-form { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.06); }
.cupon-form .form-group { margin-bottom:0; }
.cupon-form label { font-size:.72rem; }
.cupon-form input { padding:8px 12px; font-size:.85rem; }
.cupon-list { display:flex; flex-direction:column; gap:8px; }
.cupon-card {
  background:var(--dark-3); border-radius:8px; border:1px solid rgba(255,255,255,.05);
  padding:12px 14px; display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center;
}
.cupon-card.pausado { opacity:.5; border-style:dashed; border-color:rgba(245,158,11,.3); }
.cupon-codigo { font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:1px; color:var(--color-acento-light); }
.cupon-pct { background:rgba(16,185,129,.1); color:var(--verde); padding:2px 8px; border-radius:4px; font-weight:700; font-size:.8rem; }
.cupon-usos { font-size:.75rem; color:var(--gris); }
.cupon-card-actions { display:flex; gap:5px; }
.cupon-card-actions button { padding:4px 9px; border-radius:5px; font-size:.7rem; font-weight:600; border:none; cursor:pointer; transition:background .15s; }
.btn-cupon-toggle { background:rgba(245,158,11,.1); color:#f59e0b; }
.btn-cupon-toggle:hover { background:rgba(245,158,11,.22); }
.btn-cupon-toggle.activo { background:rgba(16,185,129,.1); color:var(--verde); }
.btn-cupon-toggle.activo:hover { background:rgba(16,185,129,.22); }
.btn-cupon-del { background:rgba(244,63,94,.1); color:var(--rojo); }
.btn-cupon-del:hover { background:rgba(244,63,94,.22); }

/* Destacados */
.destacado-add-form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.06); }
.destacado-add-form select { width:100%; min-height:46px; background:var(--dark-3); border:1px solid rgba(0,0,255,.15); color:var(--blanco); padding:0 14px; border-radius:8px; font-size:.95rem; font-family:var(--font-body); outline:none; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.destacado-add-form select:focus { border-color:var(--color-acento); box-shadow:0 0 0 2px rgba(0,0,255,.1); }
.destacado-add-form select:disabled { opacity:.5; cursor:not-allowed; }
.destacado-card-admin { grid-template-columns:1fr auto auto !important; }
.destacado-card-admin .cupon-codigo { color:var(--blanco); }

/* Banner preview */
.banner-preview-wrap { margin-top:4px; }
.bp-toggle-group { display:flex; gap:6px; }
.bp-toggle { background:var(--dark-3); border:1px solid rgba(255,255,255,.1); color:var(--gris); font-size:.72rem; padding:5px 10px; border-radius:6px; cursor:pointer; font-family:var(--font-body); transition:all .2s; }
.bp-toggle.active { background:rgba(0,0,255,.1); border-color:var(--color-acento); color:var(--color-acento); font-weight:600; }
.banner-preview { position:relative; width:100%; border-radius:10px; overflow:hidden; background:var(--dark-2); border:1px solid rgba(255,255,255,.06); }
.banner-preview.bp-desktop { aspect-ratio:2.8/1; }
.banner-preview.bp-mobile { width:260px; max-width:100%; margin:0 auto; aspect-ratio:1.15/1; }
.bp-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bp-noimg { display:flex; align-items:center; justify-content:center; color:var(--gris); font-size:.75rem; background:var(--dark-3); }
.bp-overlay { position:absolute; inset:0; display:flex; padding:16px; }
.banner-preview.bp-mobile .bp-overlay { padding:12px; }
.bp-texto { color:#fff; }
.bp-titulo { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.15; margin-bottom:4px; }
.banner-preview.bp-mobile .bp-titulo { font-size:.85rem; }
.bp-sub { font-size:.72rem; color:rgba(255,255,255,.85); line-height:1.3; }
.banner-preview.bp-mobile .bp-sub { font-size:.62rem; }

/* Presupuesto */
.presupuesto-modal { max-width:900px !important; }
.presupuesto-wrap { font-size:.85rem; }
.presupuesto-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:16px; border-bottom:2px solid rgba(0,0,255,.18); }
.presupuesto-logo { display:flex; align-items:center; gap:6px; }
.presupuesto-fecha { font-size:.82rem; color:var(--gris); font-weight:500; }
.presupuesto-cliente { margin-bottom:16px; }
.presupuesto-items { margin-bottom:16px; }
.pres-item { display:grid; grid-template-columns:24px 1fr 60px 100px 110px 28px; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.pres-item-num { font-size:.78rem; color:var(--gris); font-weight:600; text-align:center; }
.pres-item-subtotal { text-align:right; font-weight:600; font-size:.88rem; color:var(--color-acento-light); padding-right:4px; }
.pres-item-del { background:none; border:none; color:var(--rojo); font-size:.75rem; cursor:pointer; padding:4px; opacity:.5; transition:opacity .2s; }
.pres-item-del:hover { opacity:1; }
.presupuesto-total { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:2px solid rgba(0,0,255,.25); font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:16px; }
.presupuesto-total span:last-child { color:var(--color-acento-light); font-size:1.5rem; }
.presupuesto-acciones { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:700px) {
  .pres-item { grid-template-columns:24px 1fr 50px 80px 80px 24px; gap:4px; }
  .pres-item-precio input { width:70px !important; }
  .pres-item-subtotal { font-size:.78rem; }
}

/* === STOCK PILLS === */
.stock-pill {
  display:inline-block; padding:4px 12px; border-radius:20px;
  font-size:.72rem; font-weight:700; letter-spacing:.3px;
  border:none; cursor:pointer; font-family:var(--font-body);
  transition:opacity .2s, transform .15s;
}
.stock-pill:hover { opacity:.85; transform:scale(1.04); }
.stock-pill-alto { background:rgba(16,185,129,.15); color:#10b981; }
.stock-pill-bajo { background:rgba(245,158,11,.15); color:#f59e0b; }
.stock-pill-cero { background:rgba(244,63,94,.15); color:#f43f5e; }
.stock-pill-paquete { background:rgba(0,0,255,.1); color:var(--color-acento-light); }

/* === QUICK-STOCK MODAL === */
.quick-stock-modal {
  background:var(--dark-2); border:1px solid rgba(0,0,255,.15);
  border-radius:var(--radius); width:95%; max-width:480px;
  max-height:85vh; overflow-y:auto; padding:28px 22px;
  position:relative; animation:fadeIn .2s ease backwards;
}
.quick-stock-modal h2 { font-family:var(--font-display); font-size:1rem; margin-bottom:16px; color:var(--blanco); }
.qs-color-group { margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.06); }
.qs-color-group:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.qs-color-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.qs-color-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.08); }
.qs-color-name { font-size:.82rem; font-weight:600; color:var(--blanco); }
.qs-talles-grid { display:flex; flex-direction:column; gap:6px; }
.qs-talle-row { display:grid; grid-template-columns:40px 30px 50px 30px; align-items:center; gap:6px; }
.qs-talle-label { font-size:.78rem; font-weight:600; color:var(--gris); }
.qs-btn {
  width:28px; height:28px; border-radius:6px; border:none;
  font-size:1rem; font-weight:700; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  font-family:var(--font-body); transition:background .15s;
}
.qs-btn-minus { background:rgba(244,63,94,.12); color:#f43f5e; }
.qs-btn-minus:hover { background:rgba(244,63,94,.25); }
.qs-btn-plus { background:rgba(16,185,129,.12); color:#10b981; }
.qs-btn-plus:hover { background:rgba(16,185,129,.25); }
.qs-input {
  width:50px; background:var(--dark-3); border:1px solid rgba(0,0,255,.12);
  color:var(--blanco); padding:4px; border-radius:4px; font-size:.85rem;
  text-align:center; outline:none; font-family:var(--font-body);
}
.qs-input:focus { border-color:var(--color-acento); }

/* === ALERTAS DE STOCK === */
#alertasStock {
  background:rgba(244,63,94,.08); border:1px solid rgba(244,63,94,.25);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:18px;
}
.alertas-stock-header {
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:.85rem; color:#f43f5e;
  font-family:var(--font-body); margin-bottom:12px;
}
.alertas-stock-icon {
  width:24px; height:24px; border-radius:50%;
  background:rgba(244,63,94,.2); color:#f43f5e;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:900; flex-shrink:0;
}
.alertas-stock-grid { display:flex; flex-direction:column; gap:6px; }
.alertas-stock-card {
  display:flex; align-items:center; gap:10px;
  background:rgba(244,63,94,.06); border:1px solid rgba(244,63,94,.18);
  border-radius:8px; padding:8px 12px; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.alertas-stock-card:hover { background:rgba(244,63,94,.12); border-color:#f43f5e; }
.alertas-stock-card img { width:40px; height:30px; border-radius:4px; object-fit:cover; background:var(--dark-3); flex-shrink:0; }
.alertas-stock-info { min-width:0; }
.alertas-stock-nombre { font-size:.82rem; font-weight:600; color:var(--blanco); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alertas-stock-cta { font-size:.7rem; color:#f43f5e; font-weight:500; }

/* === DEMANDA PANEL === */
.demanda-panel { max-width:700px; margin:0 auto; padding:8px 0; }
.demanda-panel h2 { font-family:var(--font-display); font-size:1.2rem; margin-bottom:6px; color:var(--blanco); }
.demanda-sub { font-size:.82rem; color:var(--gris); margin-bottom:20px; }
.demanda-card {
  display:grid; grid-template-columns:32px 48px 1fr 60px 50px;
  align-items:center; gap:10px;
  background:var(--dark-2); border-radius:var(--radius);
  border:1px solid rgba(0,0,255,.08); padding:10px 14px;
  margin-bottom:8px; transition:border-color .2s;
}
.demanda-card:hover { border-color:rgba(0,0,255,.2); }
.demanda-rank { font-family:var(--font-display); font-weight:700; font-size:.88rem; color:var(--gris); text-align:center; }
.demanda-img { width:48px; height:36px; border-radius:4px; object-fit:cover; background:var(--dark-3); }
.demanda-info { min-width:0; }
.demanda-nombre { font-weight:600; font-size:.82rem; color:var(--blanco); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demanda-meta { font-size:.7rem; color:var(--gris); }
.demanda-bar-wrap { height:6px; background:var(--dark-3); border-radius:4px; overflow:hidden; }
.demanda-bar { height:100%; background:linear-gradient(90deg,#0000FF,#00b4d8); border-radius:4px; transition:width .5s ease; }
.demanda-pct { font-size:.75rem; font-weight:600; color:var(--color-acento-light); text-align:right; }
.demanda-foot { margin-top:16px; font-size:.78rem; color:var(--gris); text-align:center; }

/* =============================================
   TRABAJOS REALES ADMIN
   ============================================= */
.trabajos-panel { max-width:800px; margin:0 auto; padding:8px 0; }
.trabajos-panel h2 { font-family:var(--font-display); font-size:1.2rem; margin-bottom:6px; color:var(--blanco); }
.trabajos-sub { color:var(--gris); font-size:.85rem; margin-bottom:16px; }
.trabajos-toolbar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.trabajos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.trabajo-card {
  background:var(--dark-2); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); overflow:hidden; transition:border-color .2s;
}
.trabajo-card:hover { border-color:rgba(0,0,255,.2); }
.trabajo-img-wrap { aspect-ratio:1/1; background:var(--dark-3); overflow:hidden; }
.trabajo-img-wrap img { width:100%; height:100%; object-fit:cover; }
.trabajo-info { padding:10px 12px 12px; }
.trabajo-desc { font-size:.78rem; color:var(--gris); margin-bottom:8px; line-height:1.3; }
.trabajo-acciones { display:flex; gap:6px; justify-content:flex-end; }
.btn-edit-mini, .btn-delete-mini {
  width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,.1);
  background:transparent; color:var(--gris); cursor:pointer; font-size:.7rem;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.btn-edit-mini:hover { border-color:var(--color-acento); color:var(--color-acento); }
.btn-delete-mini:hover { border-color:#f43f5e; color:#f43f5e; }
.empty-trabajos { text-align:center; padding:40px 20px; color:var(--gris); grid-column:1/-1; }

/* === Toast === */
.toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:#10b981; color:white; padding:12px 24px; border-radius:10px; font-size:.88rem; font-weight:600; z-index:10001; opacity:0; pointer-events:none; transition:opacity .3s; font-family:var(--font-body); }
.toast.show { opacity:1; pointer-events:auto; }

/* === RESPONSIVE === */
/* Desktop: show table, hide cards */
@media (min-width:701px) {
  .admin-lista-table { display:table; }
  #adminLista { display:none; }
}

@media (min-width:701px) {
  .form-actions { flex-direction:row; gap:10px; }
  .form-actions .btn-guardar,
  .form-actions .btn-primary { flex:1; margin:0; }
  .form-actions .btn-nuevo,
  .form-actions .btn-secondary { flex:1; margin:0; }
}

@media (max-width:800px) {
  .admin-body { padding:20px 16px; }
}

@media (max-width:700px) {
  .admin-sidebar { display:none; }
  .admin-bottom-nav { display:flex; }
  .admin-main { margin-left:0; padding-bottom:72px; }
  .admin-topbar { padding:12px 16px; flex-wrap:wrap; gap:8px; }
  .admin-topbar h1 { font-size:1rem; }
  .admin-body { padding:16px 12px; }
  .form-panel { padding:16px 12px; }
  .form-card { padding:16px; }
  .list-panel-header { flex-direction:column; align-items:stretch; }
  .list-panel-header h2 { text-align:center; }
  .btn-nuevo-producto { width:100%; text-align:center; }
  .admin-toolbar { flex-direction:column; }
  .admin-toolbar .toolbar-search,
  .admin-toolbar .toolbar-select { width:100%; min-width:0; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }
  .form-group input, .form-group select, .form-group textarea { font-size:1rem; }
  .btn-guardar, .btn-primary { padding:14px; font-size:1rem; }
  .btn-nuevo, .btn-secondary { padding:13px; font-size:.95rem; }
  .cupones-modal { padding:20px 16px; width:92%; }
  .destacado-add-form { grid-template-columns:1fr; }
  .destacado-add-form select { font-size:1rem; padding:11px 13px; }
  .destacado-add-form button { width:100%; }
  .cupon-card, .destacado-card-admin { grid-template-columns:1fr auto; row-gap:8px; }
  .cupon-card-actions { grid-column:1 / -1; justify-content:flex-end; }
  .demanda-card { grid-template-columns:28px 40px 1fr 44px 40px; gap:6px; padding:8px 10px; }
  .demanda-img { width:40px; height:30px; }
  .demanda-rank { font-size:.78rem; }
  .demanda-nombre { font-size:.76rem; }
  .qs-talle-row { grid-template-columns:36px 28px 44px 28px; }
}