/* ============================================================
   MERCATO ABASTO ADMIN — extensión liviana sobre styles.css
   Reutiliza las variables y clases del front (--surface, --green,
   --radius, .btn, .card, .pill, .icon-btn) en vez de un tema nuevo.
   ============================================================ */

.admin-body{
  min-height:100vh;
  --bg:#f2f1ed;
  --surface:#fbfbf8;
  --surface-2:#e8e9e7;
  --border:rgba(2,23,54,.14);
  --border-strong:rgba(2,23,54,.38);
  --green:#0b345f;
  --green-strong:#021736;
  --green-glow:rgba(2,23,54,.2);
  --violet:#8b795e;
  --violet-strong:#675943;
  --text:#172437;
  --text-dim:#4f5b69;
  --text-mute:#737d86;
  --font-head:"Playfair Display", Georgia, serif;
  --font-body:"DM Sans", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.admin-body .header{
  background:rgba(251,251,248,.94);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 30px rgba(2,23,54,.06);
}
.admin-body .brand__name{ font-family:var(--font-head); color:var(--text); }
.admin-body .brand__logo, .admin-body .brand__accent{ color:var(--green); }
.admin-body .btn--primary{ color:#f5f5f2; }

.admin-badge{
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--green); background:rgba(2,23,54,.08); border:1px solid var(--border);
  padding:2px 8px; border-radius:999px; vertical-align:middle;
}

.admin-email{ font-size:.82rem; color:var(--text-dim); margin-right:6px; }

/* ---------- Login ---------- */
.admin-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(2,23,54,.11), transparent 34%),
    radial-gradient(circle at 85% 85%, rgba(139,121,94,.13), transparent 38%),
    var(--bg);
}
.admin-login__card{
  max-width:420px; width:100%; background:var(--surface);
  border:1px solid var(--border); box-shadow:0 26px 70px rgba(2,23,54,.14);
}
.admin-login__brand{
  margin:-4px 0 10px; color:var(--green); font-family:var(--font-head);
  font-size:1.18rem; font-weight:700; letter-spacing:.01em;
}
.admin-login__brand span{
  display:block; margin-top:3px; font-family:var(--font-body); font-size:.58rem;
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute);
}
.admin-login__card h2{
  max-width:100%; font-size:clamp(2.6rem, 5vw, 3rem); line-height:.94;
  letter-spacing:-.035em;
}
.admin-login .age-gate__logo{ color:var(--green); filter:drop-shadow(0 8px 12px var(--green-glow)); }
.admin-back-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:.82rem; color:var(--text-mute);
}
.admin-back-link:hover{ color:var(--green); }

/* ---------- Forms ---------- */
.admin-form{ display:flex; flex-direction:column; gap:14px; text-align:left; margin-top:18px; }
.admin-form--wide{ max-width:560px; }
.admin-form h3{ font-size:.95rem; color:var(--green); margin:10px 0 -4px; }
.admin-field{ display:flex; flex-direction:column; gap:6px; }
.admin-field span{ font-size:.8rem; color:var(--text-mute); }
.admin-field input, .admin-field select, .admin-field textarea{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:10px 12px; color:var(--text); font-family:inherit; font-size:.9rem;
  outline:none; transition: border-color var(--transition);
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus{
  border-color: var(--border-strong);
}
.admin-field input[type="color"]{ padding:4px; height:40px; }
.admin-field-row{ display:flex; gap:14px; }
.admin-field-row .admin-field{ flex:1; }
.admin-checkbox{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-dim); }

.admin-image-preview{ display:flex; align-items:center; gap:14px; }
.admin-image-preview[hidden]{ display:none; }
.admin-image-preview img{
  width:84px; height:84px; object-fit:cover; border-radius: var(--radius-sm);
  border:1px solid var(--border); background: var(--surface-2);
}

.admin-image-gallery{ display:flex; flex-wrap:wrap; gap:10px; }
.admin-image-gallery__item{ position:relative; width:72px; height:72px; }
.admin-image-gallery__item img{
  width:100%; height:100%; object-fit:cover; border-radius: var(--radius-sm);
  border:1px solid var(--border);
}
.admin-image-gallery__item button{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:#ff6b6b; color:#fff; border:none; font-size:.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

.admin-video-list{ display:flex; flex-direction:column; gap:8px; margin:0; padding:0; }
.admin-video-list li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:8px 12px; font-size:.8rem; color:var(--text-dim);
}
.admin-video-list li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-video-list li button{
  background:none; border:none; color:var(--text-mute); flex-shrink:0; font-size:.85rem;
}
.admin-video-list li button:hover{ color:#ff6b6b; }

.admin-error{ color:#ff8080; font-size:.85rem; margin:0; }
.admin-success{ color:var(--green); font-size:.85rem; margin:0; }

.admin-stats-fields{ display:flex; flex-direction:column; gap:10px; }
.admin-stat-field{ display:flex; gap:10px; }
.admin-stat-field input{ flex:1; }

/* ---------- Layout / tabs ---------- */
.admin-main{ padding:32px 24px 80px; }
#adminTabs{ justify-content:flex-start; margin-bottom:28px; }

.admin-panel__header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;
}
.admin-panel__header h2{ font-size:1.3rem; margin:0; }
.admin-search-input{
  flex:1; min-width:200px; max-width:340px;
  background: var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:10px 16px; color:var(--text); font-family:inherit; font-size:.85rem; outline:none;
  transition: border-color var(--transition);
}
.admin-search-input:focus{ border-color: var(--border-strong); }
.admin-search-input::placeholder{ color:var(--text-mute); }

/* ---------- Table ---------- */
.admin-table-wrap{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow-x:auto;
}
.admin-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.admin-table th, .admin-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.admin-table th{ color:var(--text-mute); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr.is-inactive{ opacity:.45; }
.admin-table .admin-row-actions{ display:flex; gap:8px; justify-content:flex-end; }
.admin-table .admin-row-actions button{
  background:none; border:1px solid var(--border); color:var(--text-dim);
  width:32px; height:32px; border-radius:8px; font-size:.85rem;
}
.admin-table .admin-row-actions button:hover{ border-color:var(--green); color:var(--green); }
.admin-table .admin-row-actions button.admin-danger:hover{ border-color:#ff6b6b; color:#ff6b6b; }
.admin-swatch{ display:inline-block; width:16px; height:16px; border-radius:4px; margin-right:4px; vertical-align:middle; border:1px solid rgba(255,255,255,.2); }

/* ---------- Modal ---------- */
.admin-modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.6); backdrop-filter: blur(3px); padding:24px;
}
.admin-modal-overlay[hidden]{ display:none; }
.admin-modal{
  max-width:480px; width:100%; max-height:90vh; overflow-y:auto;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:26px 26px 30px; animation: pop .3s ease;
}
.admin-modal__header{ display:flex; align-items:center; justify-content:space-between; }
.admin-modal__header h3{ margin:0; font-size:1.1rem; }
.admin-modal__actions{ margin-top:6px; }