/* ============================================================
   DL MAISON DE LEON - Admin Panel CSS
   Luxury Dark Theme
============================================================ */

:root {
  --gold:       #C9A14A;
  --gold-light: #E8C97A;
  --gold-dark:  #8B6914;
  --chocolate:  #3A1F17;
  --caoba:      #6A2E1F;
  --blanco:     #F5F2EC;
  --dark-bg:    #0d0b08;
  --dark-card:  #120d08;
  --dark-card2: #1a1108;
  --dark-border:rgba(201,161,74,.12);
  --text-light: #E8E4DC;
  --gris:       #888880;
  --sidebar-w:  240px;
  --topbar-h:   64px;
  --radius:     2px;
  --trans:      all .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-size: 20px;
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
}

body.admin-body {
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    background: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.5;
}

/* ── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dark-bg); }
::-webkit-scrollbar-thumb { background: rgba(201,161,74,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,161,74,.5); }

/* ── SIDEBAR ───────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--dark-card);
  border-right: 1px solid var(--dark-border);
  display: flex; flex-direction: column;
  z-index: 300;
  transition: transform .3s ease;
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.25rem 1rem;
  border-bottom: 1px solid var(--dark-border);
}
.sidebar-logo { display: flex; align-items: center; gap: .75rem; }
.logo-dl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem; color: var(--gold); font-weight: 300; line-height: 1;
  letter-spacing: .1em;
}
.logo-text { display: flex; flex-direction: column; }
.logo-maison {
  font-size: .45rem; letter-spacing: .35em; color: var(--text-light);
  text-transform: uppercase; line-height: 1.4;
}
.logo-leon {
  font-size: .45rem; letter-spacing: .35em; color: var(--gris);
  text-transform: uppercase;
}
.sidebar-toggle-btn {
  background: none; border: none; color: var(--gris); cursor: pointer;
  font-size: 1rem; display: none; padding: 4px;
}
.sidebar-user {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--dark-border);
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 600; color: var(--dark-bg);
  flex-shrink: 0;
}
.user-name { display: block; font-size: .65rem; color: var(--text-light); font-weight: 500; }
.user-role { display: block; font-size: .55rem; color: var(--gris); letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav {
  flex: 1; overflow-y: auto; padding: 1rem 0;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-section-label {
  font-size: .45rem; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(201,161,74,.35); padding: .75rem 1.25rem .3rem;
}
.nav-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.25rem;
  font-size: .65rem; letter-spacing: .05em; color: var(--gris);
  text-decoration: none; transition: var(--trans);
  border-left: 2px solid transparent;
}
.nav-link i { font-size: 1rem; width: 18px; }
.nav-link:hover { color: var(--text-light); background: rgba(201,161,74,.06); }
.nav-link.active {
  color: var(--gold); border-left-color: var(--gold);
  background: rgba(201,161,74,.08);
}
.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--dark-border);
}
.logout-btn {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; background: none; border: none;
  font-size: .65rem; color: var(--gris); cursor: pointer;
  padding: .5rem 0; transition: var(--trans);
  font-family: 'Montserrat', sans-serif; letter-spacing: .05em;
}
.logout-btn:hover { color: #e87070; }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 290;
  backdrop-filter: blur(2px);
}

/* ── MAIN WRAPPER ──────────────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
  transition: margin .3s ease;
}

/* ── TOPBAR ────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 200;
  height: var(--topbar-h);
  background: rgba(13,11,8,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dark-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
}
.topbar-left { display: flex; align-items: center; gap: 1rem; }
.topbar-menu-btn {
  background: none; border: none; color: var(--gris);
  font-size: 1.3rem; cursor: pointer; padding: 4px; display: none;
  transition: var(--trans);
}
.topbar-menu-btn:hover { color: var(--gold); }
.topbar-search {
  display: flex; align-items: center; gap: .6rem;
  position: relative;
}
.topbar-search i { color: var(--gris); font-size: .9rem; }
.topbar-search input {
  background: none; border: none; outline: none;
  color: var(--text-light); font-family: 'Montserrat', sans-serif;
  font-size: .75rem; width: 260px;
}
.topbar-search input::placeholder { color: var(--gris); }
.search-results {
  position: absolute; top: calc(100% + 12px); left: 0;
  width: 320px; background: var(--dark-card);
  border: 1px solid var(--dark-border);
  z-index: 500; display: none;
}
.search-results.open { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; cursor: pointer; transition: var(--trans);
  text-decoration: none;
}
.search-result-item:hover { background: rgba(201,161,74,.06); }
.search-result-name { font-size: .7rem; color: var(--text-light); display: block; }
.search-result-sub  { font-size: .6rem; color: var(--gris); }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem; color: var(--gold); font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase;
}

/* ── MAIN CONTENT ──────────────────────────────────────── */
.main-content {
  flex: 1; padding: 2rem 1.75rem;
  max-width: 1400px; width: 100%;
}

/* ── PAGE HEADER ───────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-weight: 300; color: var(--text-light); line-height: 1;
}
.page-subtitle { font-size: .65rem; color: var(--gris); margin-top: .3rem; letter-spacing: .05em; }
.page-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn-ml {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 9px 18px; font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 600; cursor: pointer;
  border: none; text-decoration: none; transition: var(--trans);
  font-family: 'Montserrat', sans-serif; white-space: nowrap;
}
.btn-gold { background: var(--gold); color: var(--dark-bg); }
.btn-gold:hover { background: var(--gold-light); color: var(--dark-bg); }
.btn-ghost {
  background: transparent; color: var(--gris);
  border: 1px solid rgba(201,161,74,.2);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold-sm {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 7px 14px; font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 600; cursor: pointer;
  background: var(--gold); color: var(--dark-bg); border: none;
  transition: var(--trans); font-family: 'Montserrat', sans-serif;
}
.btn-gold-sm:hover { background: var(--gold-light); }
.btn-outline-ml {
  background: transparent; color: var(--gris);
  border: 1px solid rgba(201,161,74,.2);
}
.btn-outline-ml:hover { border-color: var(--gold); color: var(--gold); }

/* ── STAT CARDS ────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; margin-bottom: 1.75rem;
}
.stat-card {
  background: var(--dark-card); border: 1px solid var(--dark-border);
  padding: 1.25rem; display: flex; align-items: center; gap: 1rem;
  transition: var(--trans); position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent, rgba(201,161,74,.3), transparent);
}
.stat-card:hover { border-color: rgba(201,161,74,.25); }
.stat-card-gold::before { background: linear-gradient(to right, var(--gold-dark), var(--gold)); height: 2px; }
.stat-card-gold { border-color: rgba(201,161,74,.25); }
.stat-card-warn::before { background: #e8a030; }
.stat-card-danger::before { background: #e87070; }
.stat-icon {
  font-size: 1.5rem; color: var(--gold); opacity: .7;
  flex-shrink: 0; width: 36px; text-align: center;
}
.stat-body { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.stat-label { font-size: .5rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gris); }
.stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem; font-weight: 300; color: var(--text-light); line-height: 1;
}
.stat-trend { font-size: .5rem; color: var(--gris); margin-top: .2rem; display: flex; align-items: center; gap: .25rem; }
.stat-trend.up { color: #4caf50; }
.stat-trend.warn { color: #e8a030; }

/* ── CARDS ─────────────────────────────────────────────── */
.card-ml {
  background: var(--dark-card); border: 1px solid var(--dark-border);
  margin-bottom: 1.25rem;
}
.card-header-ml {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--dark-border);
}
.card-title-ml {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.card-body-ml { padding: 1.25rem; }

/* ── DASHBOARD GRID ────────────────────────────────────── */
.dashboard-grid {
  display: grid; grid-template-columns: 3fr 2fr; gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.best-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--dark-border);
  transition: var(--trans);
}
.best-item:last-child { border-bottom: none; }
.best-item:hover { background: rgba(201,161,74,.04); }
.best-img-wrap { width: 40px; height: 40px; overflow: hidden; flex-shrink: 0; }
.best-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.best-img-placeholder {
  width: 40px; height: 40px; background: rgba(201,161,74,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(201,161,74,.4); font-size: 1.2rem;
}
.best-info { flex: 1; min-width: 0; }
.best-name { font-size: .7rem; color: var(--text-light); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.best-units { font-size: .55rem; color: var(--gris); }
.best-revenue { font-size: .7rem; color: var(--gold); font-weight: 500; }

/* ── TABLE ─────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }
.table-ml { width: 100%; border-collapse: collapse; }
.table-ml th {
  font-size: .5rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
  padding: .75rem 1rem; text-align: left;
  border-bottom: 1px solid var(--dark-border);
  white-space: nowrap;
}
.table-ml td {
  padding: .85rem 1rem; font-size: .7rem; color: var(--gris);
  border-bottom: 1px solid rgba(201,161,74,.05);
  vertical-align: middle;
}
.table-ml tbody tr { transition: var(--trans); }
.table-ml tbody tr:hover td { background: rgba(201,161,74,.03); color: var(--text-light); }
.empty-cell { text-align: center; color: var(--gris); padding: 3rem !important; }
.order-num { font-size: .65rem; color: var(--gold); font-weight: 600; letter-spacing: .1em; }

/* ── BADGES ────────────────────────────────────────────── */
.badge-ml {
  display: inline-flex; align-items: center;
  padding: 3px 10px; font-size: .5rem;
  letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.badge-success { background: rgba(76,175,80,.12); color: #4caf50; }
.badge-danger  { background: rgba(232,112,112,.12); color: #e87070; }
.badge-warn    { background: rgba(232,160,48,.12); color: #e8a030; }
.badge-info    { background: rgba(100,160,232,.12); color: #64a0e8; }
.badge-primary { background: rgba(201,161,74,.12); color: var(--gold); }
.badge-neutral { background: rgba(136,136,128,.1); color: var(--gris); }

/* ── FILTERS BAR ───────────────────────────────────────── */
.filters-bar { margin-bottom: 1.25rem; }
.filters-form {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; background: var(--dark-card);
  border: 1px solid var(--dark-border);
}
.filter-search {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(245,242,236,.04);
  border-bottom: 1px solid rgba(201,161,74,.2);
  padding: .4rem .6rem; flex: 1; min-width: 200px;
}
.filter-search i { color: var(--gris); font-size: .85rem; }
.filter-input {
  background: none; border: none; outline: none;
  color: var(--text-light); font-family: 'Montserrat', sans-serif;
  font-size: .7rem; width: 100%;
}
.filter-input::placeholder { color: var(--gris); }
.filter-select {
  background: rgba(245,242,236,.04); border: none;
  border-bottom: 1px solid rgba(201,161,74,.2);
  color: var(--text-light); font-family: 'Montserrat', sans-serif;
  font-size: .65rem; padding: .5rem .4rem; outline: none; cursor: pointer;
}
.filter-select option { background: #1a1108; }

/* ── PRODUCT GRID ──────────────────────────────────────── */
.producto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px; margin-bottom: 2rem;
}
.producto-card {
  background: var(--dark-card); border: 1px solid var(--dark-border);
  transition: var(--trans); overflow: hidden;
}
.producto-card:hover { border-color: rgba(201,161,74,.25); }
.producto-card-img {
  aspect-ratio: 3/4; overflow: hidden; position: relative; cursor: pointer;
  background: #150d05;
}
.producto-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.producto-card:hover .producto-card-img img { transform: scale(1.04); }
.producto-card-no-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: rgba(201,161,74,.2); font-size: 3rem;
}
.producto-inactive-overlay {
  position: absolute; inset: 0; background: rgba(13,11,8,.6);
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gris);
}
.producto-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--gold); color: var(--dark-bg);
  font-size: .45rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; padding: 3px 10px;
}
.badge-danger.producto-badge { background: rgba(232,112,112,.9); color: #fff; }
.producto-card-body { padding: 1rem; }
.producto-card-cat { font-size: .5rem; color: var(--gold); letter-spacing: .2em; text-transform: uppercase; margin-bottom: .3rem; }
.producto-card-name { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 400; color: var(--text-light); margin-bottom: .6rem; }
.producto-card-footer { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.producto-card-price { font-size: .9rem; color: var(--gold); font-weight: 500; }
.precio-anterior { font-size: .65rem; color: var(--gris); text-decoration: line-through; margin-left: .4rem; }
.stock-chip {
  font-size: .5rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; padding: 3px 8px;
}
.stock-ok   { background: rgba(76,175,80,.1); color: #4caf50; }
.stock-bajo { background: rgba(232,160,48,.1); color: #e8a030; }
.stock-cero { background: rgba(232,112,112,.1); color: #e87070; }
.producto-card-actions { display: flex; gap: .5rem; }
.action-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--dark-border); background: none;
  color: var(--gris); cursor: pointer; transition: var(--trans); text-decoration: none;
  font-size: .9rem;
}
.action-btn:hover { border-color: var(--gold); color: var(--gold); }
.action-btn-danger:hover { border-color: #e87070; color: #e87070; }
.text-gold { color: var(--gold); }

/* ── FORMS ─────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 1.25rem; align-items: start; }
.form-col-main { display: flex; flex-direction: column; }
.form-col-side { display: flex; flex-direction: column; }
.form-group-ml { margin-bottom: 1.25rem; }
.form-label-ml {
  display: block; font-size: .5rem; letter-spacing: .35em;
  color: var(--gold); text-transform: uppercase; margin-bottom: .5rem;
}
.form-control-ml {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(201,161,74,.2);
  padding: 10px 0; color: var(--text-light);
  font-family: 'Montserrat', sans-serif; font-size: .78rem;
  outline: none; transition: border-color .3s;
}
.form-control-ml:focus { border-bottom-color: var(--gold); }
.form-control-ml::placeholder { color: var(--gris); }
.form-select-ml {
  width: 100%; background: rgba(245,242,236,.03); border: none;
  border-bottom: 1px solid rgba(201,161,74,.2);
  padding: 10px 0; color: var(--text-light);
  font-family: 'Montserrat', sans-serif; font-size: .78rem;
  outline: none; cursor: pointer; transition: border-color .3s;
}
.form-select-ml:focus { border-bottom-color: var(--gold); }
.form-select-ml option { background: #1a1108; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.field-error { font-size: .55rem; color: #e87070; display: block; margin-top: .3rem; }

/* ── TOGGLES ───────────────────────────────────────────── */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 0; border-bottom: 1px solid var(--dark-border); cursor: pointer;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: .65rem; color: var(--text-light); display: block; }
.toggle-sub   { font-size: .55rem; color: var(--gris); display: block; }
.toggle-input {
  width: 36px; height: 20px;
  accent-color: var(--gold);
  cursor: pointer; flex-shrink: 0;
}

/* ── UPLOAD ────────────────────────────────────────────── */
.upload-zone {
  border: 1px dashed rgba(201,161,74,.25); padding: 1.5rem;
  text-align: center; cursor: pointer; transition: var(--trans);
  min-height: 120px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem;
}
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--gold); background: rgba(201,161,74,.04); }
.upload-zone.upload-zone-sm { padding: .75rem; min-height: 60px; }
.upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.upload-placeholder i { font-size: 2rem; color: rgba(201,161,74,.3); }
.upload-placeholder span { font-size: .6rem; color: var(--gris); letter-spacing: .05em; }
.upload-preview { width: 100%; max-height: 250px; object-fit: cover; }
.img-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.img-thumb-wrap { position: relative; aspect-ratio: 1; overflow: hidden; }
.img-thumb { width: 100%; height: 100%; object-fit: cover; }
.img-thumb-del {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; background: rgba(232,112,112,.9);
  border: none; color: #fff; font-size: .7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.add-img-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px,1fr)); gap: .4rem; margin-top: .75rem; }

/* ── DETAIL LAYOUT ─────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 1.25rem; align-items: start; }
.detail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.25rem; border-bottom: 1px solid rgba(201,161,74,.05);
}
.detail-row:last-child { border-bottom: none; }
.detail-key { font-size: .55rem; color: var(--gris); letter-spacing: .15em; text-transform: uppercase; flex-shrink: 0; }
.detail-val { font-size: .7rem; color: var(--text-light); text-align: right; }
.detail-val.gold { color: var(--gold); font-weight: 500; }

/* ── PAGINATION ────────────────────────────────────────── */
.pagination-ml { display: flex; gap: .4rem; margin-top: 1.5rem; justify-content: center; flex-wrap: wrap; }
.page-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--dark-border); color: var(--gris);
  text-decoration: none; font-size: .6rem; transition: var(--trans);
}
.page-btn:hover, .page-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,161,74,.08); }

/* ── INVENTARIO ────────────────────────────────────────── */
.stock-inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.quick-stock-form { display: flex; align-items: center; gap: .3rem; }
.stock-quick-input {
  width: 60px; background: transparent; border: 1px solid var(--dark-border);
  color: var(--text-light); font-family: 'Montserrat', sans-serif;
  font-size: .65rem; padding: .3rem .4rem; outline: none;
}
.stock-quick-select {
  background: transparent; border: 1px solid var(--dark-border);
  color: var(--gold); font-family: 'Montserrat', sans-serif;
  font-size: .65rem; padding: .3rem .3rem; outline: none; cursor: pointer;
}
.stock-quick-select option { background: #1a1108; }

/* ── ESTADO SELECT ─────────────────────────────────────── */
.estado-select {
  background: rgba(245,242,236,.04); border: 1px solid var(--dark-border);
  color: var(--text-light); font-family: 'Montserrat', sans-serif;
  font-size: .6rem; padding: .35rem .5rem; outline: none; cursor: pointer; transition: var(--trans);
}
.estado-select:focus { border-color: var(--gold); }
.estado-select option { background: #1a1108; }

/* ── MODAL ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(13,11,8,.85);
  z-index: 9000; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-box {
  background: var(--dark-card); border: 1px solid rgba(201,161,74,.2);
  padding: 2.5rem; max-width: 440px; width: 90%; text-align: center;
}
.modal-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.modal-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--text-light); font-weight: 300; margin-bottom: .75rem; }
.modal-msg { font-size: .7rem; color: var(--gris); margin-bottom: 2rem; line-height: 1.8; }
.modal-actions { display: flex; gap: 1rem; justify-content: center; }

/* ── TOAST ─────────────────────────────────────────────── */
.toast-container { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; }
.toast-ml {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.25rem; font-size: .65rem; min-width: 280px;
  max-width: 380px; letter-spacing: .05em; border: 1px solid;
  margin-bottom: .5rem; animation: toastIn .3s ease;
}
.toast-ml button { background: none; border: none; cursor: pointer; margin-left: auto; padding: 0; font-size: .9rem; }
.toast-success { background: rgba(76,175,80,.1); border-color: rgba(76,175,80,.25); color: #4caf50; }
.toast-success button { color: #4caf50; }
.toast-error { background: rgba(232,112,112,.1); border-color: rgba(232,112,112,.25); color: #e87070; }
.toast-error button { color: #e87070; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ── EMPTY STATE ───────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 5rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.empty-state i { font-size: 3rem; color: rgba(201,161,74,.2); }
.empty-state p { font-size: .75rem; color: var(--gris); letter-spacing: .05em; }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .form-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle-btn { display: flex !important; }
  .sidebar-overlay.open { display: block; }
  .main-wrapper { margin-left: 0; }
  .topbar-menu-btn { display: flex !important; }
  .topbar-search input { width: 180px; }
  .form-row-3 { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .main-content { padding: 1rem; }
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
  .producto-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .topbar-search { display: none; }
  .filters-form { gap: .5rem; }
  .page-header { flex-direction: column; }
}











/* ============================================================
   DL MAISON DE LEON - Admin Panel CSS
   Luxury Dark Theme (FIX TYPOGRAPHY)
============================================================ */

:root {
    --gold: #C9A14A;
    --gold-light: #E8C97A;
    --gold-dark: #8B6914;
    --dark-bg: #0d0b08;
    --dark-card: #120d08;
    --dark-border: rgba(201,161,74,.12);
    --text-light: #E8E4DC;
    --gris: #888880;
    --sidebar-w: 240px;
    --topbar-h: 64px;
}

/* RESET */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
}

body.admin-body {
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    background: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.5;
}

/* SCROLL */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(201,161,74,.25);
}

/* SIDEBAR */
.sidebar {
    position: fixed;
    width: var(--sidebar-w);
    height: 100%;
    background: var(--dark-card);
    border-right: 1px solid var(--dark-border);
}

.sidebar-header {
    padding: 24px 20px;
}

.logo-dl {
    font-size: 28px;
    color: var(--gold);
    font-weight: 300;
    letter-spacing: 2px;
}

.logo-maison,
.logo-leon {
    font-size: 10px;
    letter-spacing: 3px;
}

/* NAV */
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 14px;
    color: var(--gris);
}

    .nav-link:hover {
        color: var(--text-light);
    }

/* TOPBAR */
.topbar {
    height: var(--topbar-h);
    padding: 0 24px;
}

.topbar-search input {
    font-size: 14px;
    width: 260px;
}

/* TITLES */
.page-title {
    font-size: 32px;
    font-weight: 300;
}

.page-subtitle {
    font-size: 13px;
    color: var(--gris);
}

/* BUTTONS */
.btn-ml {
    font-size: 12px;
    padding: 10px 18px;
    letter-spacing: 2px;
}

/* STAT CARDS */
.stat-value {
    font-size: 28px;
}

.stat-label {
    font-size: 11px;
}

.stat-trend {
    font-size: 11px;
}

/* TABLE */
.table-ml th {
    font-size: 12px;
}

.table-ml td {
    font-size: 14px;
}

/* PRODUCT */
.producto-card-name {
    font-size: 20px;
}

.producto-card-price {
    font-size: 16px;
}

.producto-card-cat {
    font-size: 11px;
}

/* FORMS */
.form-control-ml,
.form-select-ml {
    font-size: 14px;
}

.form-label-ml {
    font-size: 11px;
}

/* BADGES */
.badge-ml {
    font-size: 10px;
}

/* MODAL */
.modal-title {
    font-size: 24px;
}

.modal-msg {
    font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .page-title {
        font-size: 26px;
    }

    .stat-value {
        font-size: 24px;
    }
}

















/* =========================================
   MOBILE FIRST — MAISON DE LEON
========================================= */

html, body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* CONTENEDORES */
.container,
.micuenta-layout,
.producto-layout,
.checkout-layout,
.carrito-layout {
    width: 100%;
}

/* BOTONES */
.btn-cl,
button {
    min-height: 48px;
    touch-action: manipulation;
}

/* INPUTS */
input,
select,
textarea {
    font-size: 16px;
}

/* MOBILE */
@media (max-width:768px) {

    /* LAYOUT GENERAL */
    .micuenta-layout {
        grid-template-columns: 1fr;
        padding: calc(var(--nav-h) + 1.5rem) 1rem 5rem;
        gap: 1.5rem;
    }

    /* SIDEBAR */
    .cuenta-sidebar {
        width: 100%;
        margin-top: 0 !important;
        position: relative;
        top: auto;
    }

    /* CONTENIDO */
    .cuenta-main {
        width: 100%;
        max-width: 100%;
        margin-top: 0 !important;
    }

    /* STATS */
    .cuenta-stats {
        grid-template-columns: 1fr;
    }

    /* PEDIDOS */
    .pedido-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .8rem;
    }

    .pr-total,
    .estado-badge {
        align-self: flex-start;
    }

    /* PRODUCTOS */
    .productos-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    /* FOOTER */
    footer {
        padding-bottom: 6rem;
    }
}

/* TELÉFONOS PEQUEÑOS */
@media (max-width:480px) {

    .productos-grid {
        grid-template-columns: 1fr;
    }

    .page-cl-title {
        font-size: 1.4rem;
    }

    .btn-cl {
        width: 100%;
        justify-content: center;
    }
}

















/* =========================
CARDS DASHBOARD RESPONSIVE
========================= */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 1.2rem;
    width: 100%;
}

.stat-card {
    min-height: 140px;
    padding: 1.4rem;
    border-radius: 20px;
    background: #111;
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    transition: .25s ease;
}

    .stat-card:hover {
        transform: translateY(-4px);
        border-color: #d4af37;
    }

.stat-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.stat-card i {
    font-size: 1.5rem;
    color: #d4af37;
}

.stat-title {
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: .5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    word-break: break-word;
    line-height: 1.1;
}

.stat-extra {
    font-size: .78rem;
    color: #7CFF9D;
    margin-top: .4rem;
}

/* TABLETS */
@media(max-width:992px) {

    .dashboard-stats {
        grid-template-columns: repeat(2,1fr);
    }

    .stat-value {
        font-size: 1.7rem;
    }
}

/* MOVIL */
@media(max-width:768px) {

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .stat-card {
        min-height: auto;
        padding: 1.2rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .stat-title {
        font-size: .65rem;
    }
}















/* =========================
TABLA PREMIUM DASHBOARD
========================= */

.pedidos-modern-card {
    background: #0f0f0f;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.05);
    overflow: hidden;
}

.pedidos-head {
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.pedidos-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 14px;
    padding: 0 1rem 1rem;
}

    .pedidos-table thead th {
        color: #c8a95b;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 0 18px;
        font-weight: 700;
        text-align: left;
    }

    .pedidos-table tbody tr {
        background: #141414;
        transition: .25s ease;
    }

        .pedidos-table tbody tr:hover {
            transform: translateY(-3px);
        }

    .pedidos-table tbody td {
        padding: 18px;
        border-top: 1px solid rgba(255,255,255,.04);
        border-bottom: 1px solid rgba(255,255,255,.04);
        vertical-align: middle;
    }

        /* Bordes redondos */
        .pedidos-table tbody td:first-child {
            border-left: 1px solid rgba(255,255,255,.04);
            border-radius: 18px 0 0 18px;
        }

        .pedidos-table tbody td:last-child {
            border-right: 1px solid rgba(255,255,255,.04);
            border-radius: 0 18px 18px 0;
        }

/* Pedido */
.pedido-num {
    color: #d4af37;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: 1px;
}

/* Cliente */
.pedido-cliente {
    color: #fff;
    font-weight: 600;
}

/* Total */
.pedido-total {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

/* Metodo */
.pedido-metodo {
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,.06);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .68rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Estado */
.pedido-estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .68rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

.estado-pendiente {
    background: rgba(212,175,55,.15);
    color: #f5d77a;
}

.estado-confirmado {
    background: rgba(80,160,255,.14);
    color: #84c2ff;
}

.estado-enviado {
    background: rgba(70,255,170,.12);
    color: #8effcb;
}

.estado-cancelado {
    background: rgba(255,80,80,.12);
    color: #ff9a9a;
}

/* Fecha */
.pedido-fecha {
    color: #8c8c8c;
    font-size: .78rem;
}

/* Boton */
.pedido-action {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    transition: .25s ease;
}

    .pedido-action:hover {
        background: #d4af37;
        color: #000;
        transform: scale(1.05);
    }

/* Empty */
.pedido-empty {
    text-align: center;
    color: #777;
    padding: 2rem !important;
}

/* MOBILE */
@media(max-width:992px) {

    .table-responsive {
        overflow-x: auto;
    }

    .pedidos-table {
        min-width: 900px;
    }
}






/* =========================
GRID
========================= */

.dashboard-grid-modern {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* =========================
CARDS
========================= */

.modern-card {
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 26px;
    overflow: hidden;
    transition: .25s ease;
}

    .modern-card:hover {
        transform: translateY(-4px);
    }

/* =========================
HEADER
========================= */

.modern-head {
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.modern-subtitle {
    color: #7f7f7f;
    font-size: .75rem;
    margin-top: .35rem;
    display: block;
}

/* =========================
CHART
========================= */

.modern-chart-body {
    padding: 1.6rem;
    height: 100%;
    min-height: 380px;
}

    .modern-chart-body canvas {
        width: 100% !important;
        height: 100% !important;
    }

/* =========================
PRODUCTOS
========================= */

.modern-products-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ITEM */
.best-modern-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #151515;
    border: 1px solid rgba(255,255,255,.05);
    padding: 1rem;
    border-radius: 20px;
    transition: .25s ease;
}

    .best-modern-item:hover {
        transform: translateY(-3px);
        border-color: rgba(212,175,55,.25);
    }

/* LEFT */
.best-modern-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

/* IMG */
.best-modern-img {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    background: #1a1a1a;
}

    .best-modern-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* PLACEHOLDER */
.best-modern-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    font-size: 1.3rem;
}

/* INFO */
.best-modern-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.best-modern-name {
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.best-modern-units {
    color: #8a8a8a;
    font-size: .72rem;
    margin-top: .25rem;
}

/* PRICE */
.best-modern-price {
    color: #d4af37;
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
}

/* EMPTY */
.modern-empty {
    text-align: center;
    color: #777;
    padding: 2rem;
    font-size: .8rem;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px) {

    .dashboard-grid-modern {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .modern-chart-body {
        min-height: 260px;
        padding: 1rem;
    }

    .best-modern-item {
        padding: .85rem;
    }

    .best-modern-img {
        width: 58px;
        height: 58px;
    }

    .best-modern-name {
        font-size: .82rem;
    }

    .best-modern-price {
        font-size: .85rem;
    }
}


/* =========================
CARD
========================= */

.modern-table-card {
    background: #0f0f0f;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.05);
    overflow: hidden;
    margin-top: 1.5rem;
}

/* =========================
TABLE
========================= */

.modern-admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 14px;
    padding: 1rem;
}

    .modern-admin-table thead th {
        color: #c8a95b;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 0 18px;
        text-align: left;
        font-weight: 700;
    }

    .modern-admin-table tbody tr {
        background: #151515;
        transition: .25s ease;
    }

        .modern-admin-table tbody tr:hover {
            transform: translateY(-3px);
        }

    .modern-admin-table tbody td {
        padding: 18px;
        border-top: 1px solid rgba(255,255,255,.04);
        border-bottom: 1px solid rgba(255,255,255,.04);
        vertical-align: middle;
    }

        /* Bordes */
        .modern-admin-table tbody td:first-child {
            border-left: 1px solid rgba(255,255,255,.04);
            border-radius: 18px 0 0 18px;
        }

        .modern-admin-table tbody td:last-child {
            border-right: 1px solid rgba(255,255,255,.04);
            border-radius: 0 18px 18px 0;
        }

/* =========================
NAME
========================= */

.cat-name-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(212,175,55,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cat-info {
    display: flex;
    flex-direction: column;
}

.cat-name {
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}

.cat-slug-mobile {
    display: none;
}

/* =========================
SLUG
========================= */

.cat-slug {
    color: #888;
    font-size: .78rem;
}

/* =========================
BADGES
========================= */

.cat-badge {
    background: #1d1d1d;
    border: 1px solid rgba(255,255,255,.05);
    padding: 8px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.cat-order {
    color: #aaa;
    font-weight: 700;
}

/* =========================
STATUS
========================= */

.cat-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-active {
    background: rgba(70,255,170,.12);
    color: #8effcb;
}

.status-inactive {
    background: rgba(255,80,80,.12);
    color: #ff9f9f;
}

/* =========================
BUTTONS
========================= */

.cat-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.cat-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    text-decoration: none;
    transition: .25s ease;
}

    .cat-btn:hover {
        background: #d4af37;
        color: #000;
        transform: scale(1.05);
    }

.cat-btn-danger:hover {
    background: #ff5252;
    color: #fff;
}

/* =========================
EMPTY
========================= */

.table-empty {
    text-align: center;
    padding: 2rem;
    color: #777;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:992px) {

    .table-responsive {
        overflow-x: auto;
    }

    .modern-admin-table {
        min-width: 900px;
    }
}

@media(max-width:768px) {

    .cat-slug {
        display: none;
    }

    .cat-slug-mobile {
        display: block;
        color: #777;
        font-size: .72rem;
        margin-top: .2rem;
    }
}






/* =========================
   FILTROS MODERNOS
========================= */

.filters-modern {
    margin-bottom: 1.5rem;
}

.filters-modern-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: #111;
    border: 1px solid rgba(255,215,0,.12);
    padding: 1rem;
    border-radius: 22px;
    align-items: center;
}

.filter-modern-search {
    flex: 1;
    min-width: 260px;
    position: relative;
}

    .filter-modern-search i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #b99745;
    }

    .filter-modern-search input,
    .filters-modern-form select,
    .filters-modern-form input {
        width: 100%;
        background: #181818;
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
        border-radius: 14px;
        padding: .9rem 1rem .9rem 2.5rem;
        outline: none;
    }

.filters-modern-form select {
    min-width: 180px;
    padding-left: 1rem;
}

.btn-modern-gold {
    background: linear-gradient(135deg,#d4af37,#f7d774);
    color: #000;
    border: none;
    padding: .9rem 1.5rem;
    border-radius: 14px;
    font-weight: 700;
}

.btn-modern-dark {
    background: #1a1a1a;
    color: #fff;
    padding: .9rem 1.3rem;
    border-radius: 14px;
    text-decoration: none;
}

/* =========================
   CARD PEDIDOS
========================= */

.orders-modern-card {
    background: #111;
    border: 1px solid rgba(255,215,0,.08);
    border-radius: 28px;
    overflow: hidden;
}

.orders-modern-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .orders-modern-header h2 {
        color: #fff;
        font-size: 1.3rem;
        margin-bottom: .3rem;
    }

    .orders-modern-header span {
        color: #888;
        font-size: .8rem;
    }

.orders-modern-list {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-modern-item {
    background: #181818;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 22px;
    padding: 1.4rem;
    transition: .3s;
}

    .order-modern-item:hover {
        border-color: rgba(212,175,55,.4);
        transform: translateY(-2px);
    }

.order-modern-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.order-modern-id strong {
    color: #fff;
    font-size: 1rem;
}

.order-modern-total {
    color: #d4af37;
    font-size: 1.3rem;
    font-weight: 800;
}

.label-modern {
    display: block;
    color: #777;
    font-size: .68rem;
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.order-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 1rem;
}

    .order-modern-grid p {
        color: #fff;
        font-weight: 500;
    }

.badge-modern {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

    .badge-modern.success {
        background: rgba(0,255,140,.12);
        color: #00d27a;
    }

    .badge-modern.warning {
        background: rgba(255,193,7,.12);
        color: #ffc107;
    }

    .badge-modern.neutral {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

.estado-modern-select {
    width: 100%;
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 12px;
    padding: .7rem;
}

.order-modern-actions {
    display: flex;
    gap: .8rem;
    margin-top: 1.4rem;
}

.modern-action-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #222;
    color: #fff;
    text-decoration: none;
    padding: .8rem 1rem;
    border-radius: 12px;
    transition: .3s;
}

    .modern-action-btn:hover {
        background: #2d2d2d;
    }

    .modern-action-btn.gold {
        background: linear-gradient(135deg,#d4af37,#f7d774);
        color: #000;
        font-weight: 700;
    }

.modern-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #888;
}

    .modern-empty i {
        font-size: 3rem;
        margin-bottom: 1rem;
        display: block;
    }

/* =========================
   MOBILE
========================= */

@media(max-width:768px) {

    .filters-modern-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-modern-search {
        min-width: 100%;
    }

    .order-modern-top {
        flex-direction: column;
        align-items: flex-start;
        gap: .8rem;
    }

    .order-modern-actions {
        flex-direction: column;
    }
}


.modern-table-card {
    background: linear-gradient(145deg,#121212,#1a1a1a);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.table-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    gap: 1rem;
    flex-wrap: wrap;
}

.table-title-modern {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
}

    .table-title-modern i {
        color: var(--gold);
        font-size: 1.1rem;
    }

.table-subtitle-modern {
    color: var(--gris);
    font-size: .72rem;
    margin-top: .25rem;
}

.table-count-badge {
    background: rgba(212,175,55,.12);
    color: var(--gold);
    border: 1px solid rgba(212,175,55,.2);
    padding: .65rem 1rem;
    border-radius: 14px;
    font-size: .72rem;
    font-weight: 600;
}

.modern-table-wrap {
    overflow-x: auto;
}

.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 14px;
    min-width: 1000px;
    padding: 0 1rem 1rem;
}

    .modern-table thead th {
        color: #8f8f8f;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        border: none;
        padding: 0 1rem .5rem;
    }

    .modern-table tbody tr {
        background: #181818;
        transition: .25s ease;
    }

        .modern-table tbody tr:hover {
            transform: translateY(-2px);
            background: #1f1f1f;
        }

    .modern-table tbody td {
        padding: 1rem;
        border-top: 1px solid rgba(255,255,255,.03);
        border-bottom: 1px solid rgba(255,255,255,.03);
        vertical-align: middle;
    }

        .modern-table tbody td:first-child {
            border-left: 1px solid rgba(255,255,255,.03);
            border-radius: 18px 0 0 18px;
        }

        .modern-table tbody td:last-child {
            border-right: 1px solid rgba(255,255,255,.03);
            border-radius: 0 18px 18px 0;
        }

.customer-cell {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.customer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: linear-gradient(135deg,var(--gold),#f5d77d);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}

.customer-info {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.customer-name {
    color: #fff;
    font-weight: 600;
    font-size: .83rem;
}

.customer-email {
    color: #8f8f8f;
    font-size: .68rem;
}

.contact-cell {
    display: flex;
    flex-direction: column;
}

.contact-phone {
    color: #d5d5d5;
    font-size: .72rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .contact-phone i {
        color: var(--gold);
    }

.city-badge {
    background: #202020;
    border: 1px solid rgba(255,255,255,.06);
    color: #d7d7d7;
    padding: .55rem .8rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
}

.orders-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orders-number {
    color: var(--gold);
    font-weight: 800;
    font-size: 1rem;
}

.orders-label {
    color: #8f8f8f;
    font-size: .62rem;
}

.date-cell {
    color: #cfcfcf;
    font-size: .72rem;
    font-weight: 500;
}

.table-actions-modern {
    display: flex;
    justify-content: center;
    gap: .55rem;
}

.modern-action-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #202020;
    border: 1px solid rgba(255,255,255,.05);
    transition: .25s ease;
}

    .modern-action-btn:hover {
        transform: translateY(-2px);
        background: var(--gold);
        color: #111;
    }

.empty-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: #888;
}

    .empty-modern i {
        font-size: 2.5rem;
        color: var(--gold);
    }

@media(max-width:768px) {

    .modern-table {
        min-width: 850px;
    }

    .table-header-modern {
        padding: 1rem;
    }

    .table-title-modern {
        font-size: .9rem;
    }

    .customer-avatar {
        width: 42px;
        height: 42px;
        font-size: .85rem;
    }

    .modern-table tbody td {
        padding: .85rem;
    }
}







/* =========================
   FILTROS MODERNOS
========================= */

.filters-modern {
    margin-bottom: 1.5rem;
}

.filters-modern-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: #111;
    border: 1px solid rgba(255,215,55,.12);
    padding: 1rem;
    border-radius: 22px;
    align-items: center;
}

/* BUSCADOR */
.filter-search {
    flex: 1;
    min-width: 260px;
    position: relative;
}

    .filter-search i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #d4af37;
    }

    .filter-search input {
        width: 100%;
        background: #181818;
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
        border-radius: 14px;
        padding: .9rem 1rem .9rem 2.6rem;
        outline: none;
    }

/* SELECT */
.filter-select {
    min-width: 180px;
    background: #181818;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 14px;
    padding: .9rem 1rem;
    outline: none;
}

/* BOTONES */
.btn-gold-sm {
    background: linear-gradient(135deg,#d4af37,#f7d774);
    color: #000;
    border: none;
    padding: .55rem .9rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
}

    .btn-gold-sm:hover {
        transform: translateY(-2px);
    }

.btn-ghost {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    padding: .55rem .9rem;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* =========================
   CARD PRINCIPAL
========================= */

.products-modern-card {
    background: linear-gradient(145deg,#121212,#1a1a1a);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* HEADER */
.table-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.table-title-modern {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .table-title-modern i {
        color: #d4af37;
    }

.table-subtitle-modern {
    color: #8f8f8f;
    font-size: .75rem;
    margin-top: .2rem;
}

/* =========================
   TABLA
========================= */

.products-modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    min-width: 1000px;
    padding: 0 1rem 1rem;
}

    .products-modern-table thead th {
        color: #8f8f8f;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        padding: 0 1rem .5rem;
    }

    .products-modern-table tbody tr {
        background: #181818;
        transition: .25s ease;
    }

        .products-modern-table tbody tr:hover {
            background: #1f1f1f;
            transform: translateY(-2px);
        }

    .products-modern-table tbody td {
        padding: 1rem;
        border-top: 1px solid rgba(255,255,255,.03);
        border-bottom: 1px solid rgba(255,255,255,.03);
    }

/* =========================
   STOCK
========================= */

.stock-chip {
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.stock-ok {
    background: rgba(0,255,140,.12);
    color: #00d27a;
}

.stock-bajo {
    background: rgba(255,193,7,.12);
    color: #ffc107;
}

.stock-cero {
    background: rgba(255,0,0,.12);
    color: #ff4d4d;
}

/* =========================
   STOCK RAPIDO
========================= */

.quick-stock-form {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin-top: .5rem;
}

.stock-quick-input {
    width: 60px;
    background: #111;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 10px;
    padding: .35rem;
    outline: none;
}

.stock-quick-select {
    background: #111;
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: .35rem;
    outline: none;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px) {

    .filters-modern-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-search {
        min-width: 100%;
    }

    .products-modern-table {
        min-width: 850px;
    }

    .quick-stock-form {
        flex-direction: column;
        align-items: flex-start;
    }
}









/* =========================
   CARD HISTORIAL
========================= */

.history-modern-card {
    background: linear-gradient(145deg,#121212,#1a1a1a);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* =========================
   TABLA
========================= */

.history-modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    min-width: 1000px;
    padding: 0 1rem 1rem;
}

    .history-modern-table thead th {
        color: #8f8f8f;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        padding: 0 1rem .5rem;
    }

    .history-modern-table tbody tr {
        background: #181818;
        transition: .25s ease;
    }

        .history-modern-table tbody tr:hover {
            background: #1f1f1f;
            transform: translateY(-2px);
        }

    .history-modern-table tbody td {
        padding: 1rem;
        border-top: 1px solid rgba(255,255,255,.03);
        border-bottom: 1px solid rgba(255,255,255,.03);
    }

/* =========================
   BADGES
========================= */

.history-badge {
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    display: inline-block;
}

    .history-badge.success {
        background: rgba(0,255,140,.12);
        color: #00d27a;
    }

    .history-badge.danger {
        background: rgba(255,0,0,.12);
        color: #ff4d4d;
    }

    .history-badge.info {
        background: rgba(212,175,55,.12);
        color: #d4af37;
    }

/* =========================
   CANTIDAD
========================= */

.history-qty {
    font-weight: 800;
}

    .history-qty.up {
        color: #00d27a;
    }

    .history-qty.down {
        color: #ff4d4d;
    }

    .history-qty.fix {
        color: #d4af37;
    }

/* =========================
   TEXTOS
========================= */

.history-muted {
    color: #8f8f8f;
    font-size: .75rem;
}

.history-strong {
    color: #fff;
    font-weight: 600;
}

.history-date {
    color: #cfcfcf;
    font-size: .72rem;
}

/* =========================
   EMPTY STATE
========================= */

.empty-modern {
    text-align: center;
    padding: 3rem;
    color: #777;
}

    .empty-modern i {
        font-size: 2.5rem;
        color: #d4af37;
        display: block;
        margin-bottom: .5rem;
    }

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px) {

    .history-modern-table {
        min-width: 850px;
    }
}




/* =========================
   GRID GENERAL
========================= */

.product-grid-modern {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.2rem;
    align-items: start;
}

/* =========================
   CARD BASE (CUADRADA)
========================= */

.product-card-modern {
    background: #141414;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
}

/* HEADER SIMPLE (ERP STYLE) */
.product-card-header {
    background: #101010;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: .9rem 1rem;
}

    .product-card-header h3 {
        margin: 0;
        font-size: .8rem;
        font-weight: 700;
        color: #e6e6e6;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .product-card-header i {
        color: #d4af37;
    }

/* BODY */
.product-card-body {
    padding: 1rem;
}

/* =========================
   INPUTS (CUADRADOS ERP)
========================= */

.form-group-modern {
    display: flex;
    flex-direction: column;
    margin-bottom: .8rem;
}

    .form-group-modern label {
        font-size: .65rem;
        color: #888;
        margin-bottom: .3rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    /* INPUT CLEAN */
    .form-group-modern input,
    .form-group-modern textarea,
    .form-group-modern select {
        width: 100%;
        background: #0f0f0f;
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
        border-radius: 8px;
        padding: .7rem .8rem;
        outline: none;
        font-size: .85rem;
    }

        .form-group-modern input:focus,
        .form-group-modern textarea:focus,
        .form-group-modern select:focus {
            border-color: #d4af37;
        }

        /* PLACEHOLDER STYLE */
        .form-group-modern input::placeholder,
        .form-group-modern textarea::placeholder {
            color: #666;
            font-size: .8rem;
        }

/* =========================
   GRIDS INTERNOS
========================= */

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .8rem;
}

/* =========================
   TOGGLES (PROPIOS ERP)
========================= */

.toggle-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .2rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .8rem;
    color: #ddd;
}

    .toggle-modern:last-child {
        border-bottom: none;
    }

    .toggle-modern span {
        font-size: .75rem;
        color: #ccc;
    }

/* =========================
   UPLOAD (CUADRADO PRO)
========================= */

.upload-modern {
    background: #0f0f0f;
    border: 1px dashed rgba(255,215,55,.25);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: .2s;
}

    .upload-modern:hover {
        border-color: #d4af37;
    }

    .upload-modern img {
        width: 100%;
        border-radius: 8px;
    }

.upload-placeholder-modern {
    color: #777;
    font-size: .75rem;
}

    .upload-placeholder-modern i {
        font-size: 1.5rem;
        color: #d4af37;
        display: block;
        margin-bottom: .3rem;
    }

/* =========================
   GALERÍA
========================= */

.gallery-modern {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .4rem;
}

.gallery-item img {
    width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.06);
}

/* MINI UPLOAD */
.upload-mini {
    margin-top: .5rem;
    padding: .6rem;
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    text-align: center;
    color: #aaa;
    font-size: .75rem;
    cursor: pointer;
}

/* =========================
   BOTONES (ERP STYLE)
========================= */

.btn-gold-full {
    width: 100%;
    background: #d4af37;
    color: #111;
    border: none;
    padding: .8rem;
    border-radius: 10px;
    font-weight: 800;
    font-size: .85rem;
    cursor: pointer;
}

.btn-dark-full {
    width: 100%;
    display: block;
    text-align: center;
    padding: .8rem;
    border-radius: 10px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.08);
    font-size: .85rem;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px) {
    .product-grid-modern {
        grid-template-columns: 1fr;
    }
}


/* =========================
   GRID
========================= */

.producto-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* =========================
   CARD CUADRADA
========================= */

.producto-card-modern {
    background: #141414;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    overflow: hidden;
    transition: .2s;
}

    .producto-card-modern:hover {
        transform: translateY(-3px);
        border-color: rgba(212,175,55,.4);
    }

/* =========================
   IMAGEN (CLAVE)
========================= */

.producto-img-modern {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #0f0f0f;
    cursor: pointer;
}

    .producto-img-modern img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 🔥 IMPORTANTE: adapta sin deformar */
        object-position: center;
    }

/* NO IMAGE */
.no-img-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    font-size: 2rem;
}

/* OVERLAY INACTIVO */
.overlay-inactive {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4d4d;
    font-weight: 700;
}

/* BADGE */
.badge-modern {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(212,175,55,.9);
    color: #111;
    font-size: .65rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-weight: 700;
}

/* =========================
   BODY
========================= */

.producto-body-modern {
    padding: .8rem;
}

.categoria-modern {
    font-size: .65rem;
    color: #888;
    text-transform: uppercase;
}

.nombre-modern {
    font-size: .9rem;
    color: #fff;
    margin: .3rem 0;
}

/* PRECIO */
.precio-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
}

.precio-modern {
    color: #d4af37;
    font-weight: 800;
}

.precio-old {
    font-size: .7rem;
    color: #777;
    text-decoration: line-through;
}

/* =========================
   ACTIONS
========================= */

.acciones-modern {
    display: flex;
    gap: .4rem;
    margin-top: .8rem;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: .2s;
}

    .btn-icon:hover {
        background: #222;
        transform: translateY(-2px);
    }

    .btn-icon.danger {
        color: #ff4d4d;
    }

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px) {
    .producto-grid-modern {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .producto-img-modern {
        height: 160px;
    }
}




/* =========================
   GRID
========================= */

.detail-grid-modern {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

/* =========================
   CARD BASE
========================= */

.detail-card-modern {
    background: #141414;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    overflow: hidden;
}

/* HEADER */
.detail-card-header {
    background: #101010;
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .detail-card-header h3 {
        margin: 0;
        font-size: .8rem;
        color: #ddd;
        display: flex;
        gap: .5rem;
        align-items: center;
    }

    .detail-card-header i {
        color: #d4af37;
    }

/* BODY */
.detail-card-body {
    padding: 1rem;
}

/* =========================
   IMAGENES
========================= */

.main-image-modern {
    width: 100%;
    height: 360px;
    background: #0f0f0f;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
}

    .main-image-modern img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 🔥 clave: no se deforma */
        object-position: center;
        display: block;
    }
.thumb-grid-modern {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .4rem;
    margin-top: .5rem;
}

    .thumb-grid-modern img {
        width: 100%;
        height: 70px;
        object-fit: cover;
        border-radius: 6px;
    }

/* =========================
   DESCRIPCIÓN
========================= */

.desc-highlight {
    color: #d4af37;
    font-size: .85rem;
}

.desc-text {
    color: #aaa;
    font-size: .75rem;
    line-height: 1.6;
}

/* =========================
   INFO ROWS
========================= */

.clean .info-row {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .75rem;
    color: #ccc;
}

.gold {
    color: #d4af37;
    font-weight: 800;
}

/* =========================
   STOCK INPUT
========================= */

.stock-info-mini {
    margin-bottom: .6rem;
    font-size: .75rem;
    color: #aaa;
}

.detail-card-body input,
.detail-card-body select {
    width: 100%;
    margin-bottom: .5rem;
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 8px;
    padding: .6rem;
}

/* =========================
   HISTORIAL BASE
========================= */

.history-item {
    padding: .7rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.history-top {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: #bbb;
}

.history-mid {
    font-size: .75rem;
    font-weight: 600;
    color: #ddd;
}

.history-bottom {
    font-size: .65rem;
    color: #888;
    margin-top: .2rem;
}

/* =========================
   COLORES POR TIPO
========================= */

/* ENTRADA */
.history-item.entrada .history-mid {
    color: #00d27a;
}

/* SALIDA */
.history-item.salida .history-mid {
    color: #ff4d4d;
}

/* AJUSTE */
.history-item.ajuste .history-mid {
    color: #d4af37;
}

/* BADGE BASE */
.badge-modern {
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .65rem;
}
/* =========================
   BADGES
========================= */

.badge-modern.ok {
    color: #00d27a;
}

.badge-modern.bad {
    color: #ff4d4d;
}

.badge-modern.info {
    color: #d4af37;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px) {
    .detail-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* =========================
   WRAPPER
========================= */

.form-wrapper-modern {
    max-width: 550px;
    margin: auto;
}

/* =========================
   CARD
========================= */

.card-modern {
    background: #141414;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    overflow: hidden;
}

.card-header-modern {
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: #101010;
}

    .card-header-modern h3 {
        margin: 0;
        font-size: .85rem;
        color: #ddd;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .card-header-modern i {
        color: #d4af37;
    }

/* =========================
   BODY
========================= */

.card-body-modern {
    padding: 1rem;
}

/* =========================
   FORM
========================= */

.form-group-modern {
    margin-bottom: .9rem;
    display: flex;
    flex-direction: column;
}

    .form-group-modern label {
        font-size: .7rem;
        color: #bbb;
        margin-bottom: .3rem;
    }

    .form-group-modern input,
    .form-group-modern textarea {
        background: #0f0f0f;
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
        padding: .6rem .7rem;
        border-radius: 8px;
        outline: none;
        font-size: .8rem;
    }

    .form-group-modern textarea {
        resize: none;
    }

    /* small text */
    .form-group-modern small {
        font-size: .6rem;
        color: #777;
        margin-top: .3rem;
    }

/* =========================
   ROW
========================= */

.form-row-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

/* =========================
   TOGGLE
========================= */

.form-toggle-modern {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: 1.2rem;
    color: #bbb;
    font-size: .75rem;
}

    .form-toggle-modern input {
        accent-color: #d4af37;
        width: 16px;
        height: 16px;
    }

/* =========================
   ACTIONS
========================= */

.form-actions-modern {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.btn-gold-full {
    background: linear-gradient(135deg,#d4af37,#f7d774);
    color: #111;
    padding: .8rem;
    border-radius: 10px;
    font-weight: 700;
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn-ghost-full {
    background: transparent;
    border: 1px solid rgba(255,255,255,.1);
    color: #ccc;
    padding: .8rem;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
}

/* =========================
   ERROR
========================= */

.error {
    font-size: .6rem;
    color: #ff4d4d;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:600px) {
    .form-row-modern {
        grid-template-columns: 1fr;
    }
}











/* =========================
   FILTROS
========================= */

.odr-filters {
    margin-bottom: 1rem;
}

.odr-filters-form {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    background: #121212;
    padding: .8rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.06);
}

.odr-search {
    flex: 1;
    min-width: 200px;
    position: relative;
}

    .odr-search i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #d4af37;
    }

    .odr-search input {
        width: 100%;
        padding: .6rem .6rem .6rem 2rem;
        background: #0f0f0f;
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
        border-radius: 8px;
    }

.odr-select,
.odr-input {
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    padding: .6rem;
    border-radius: 8px;
}

.odr-btn-gold {
    background: #d4af37;
    color: #111;
    border: none;
    padding: .6rem 1rem;
    border-radius: 8px;
    font-weight: 700;
}

.odr-btn-dark {
    background: #1a1a1a;
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
}

/* =========================
   CARD
========================= */

.odr-list {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.odr-card {
    background: #141414;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: .9rem;
}

/* HEADER */

.odr-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.odr-total {
    color: #d4af37;
    font-weight: 800;
}

/* GRID */

.odr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
    gap: .6rem;
    margin-bottom: .6rem;
}

.odr-label {
    font-size: .6rem;
    color: #888;
}

.odr-grid p {
    margin: 0;
    color: #ddd;
    font-size: .75rem;
}

/* BADGES */

.odr-badge {
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .65rem;
}

    .odr-badge.neutral {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

    .odr-badge.success {
        background: rgba(0,255,140,.12);
        color: #00d27a;
    }

    .odr-badge.warn {
        background: rgba(255,193,7,.12);
        color: #ffc107;
    }

/* SELECT */

.odr-select-inline {
    width: 100%;
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    padding: .4rem;
    border-radius: 6px;
}

/* ACTIONS */

.odr-actions {
    display: flex;
    gap: .5rem;
}

.odr-btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 8px;
    color: #fff;
}

    .odr-btn-icon.gold {
        background: #d4af37;
        color: #111;
    }








.odr-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

/* CARD */
.odr-card {
    background: #141414;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    overflow: hidden;
}

.odr-card-header {
    padding: .9rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .odr-card-header h3 {
        margin: 0;
        font-size: .85rem;
        color: #fff;
    }

.odr-card-body {
    padding: .9rem;
}

/* FIELD */
.odr-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .7rem;
}

    .odr-field label {
        font-size: .6rem;
        color: #aaa;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    /* INPUTS */
    .odr-field input,
    .odr-field select,
    .odr-field textarea {
        background: #0f0f0f;
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
        padding: .6rem;
        border-radius: 8px;
        font-size: .75rem;
        outline: none;
    }

/* ROWS */
.odr-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.odr-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .6rem;
}

/* SIDE */
.odr-form-side {
    position: relative;
}

.odr-sticky {
    position: sticky;
    top: 10px;
    padding: .9rem;
}

/* BUTTONS */
.odr-btn-gold {
    width: 100%;
    background: #d4af37;
    border: none;
    padding: .7rem;
    border-radius: 8px;
    font-weight: 700;
    color: #111;
    margin-bottom: .5rem;
}

.odr-btn-dark {
    width: 100%;
    display: block;
    text-align: center;
    background: #1a1a1a;
    padding: .7rem;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
}

/* RESPONSIVE */
@media(max-width:900px) {
    .odr-form-grid {
        grid-template-columns: 1fr;
    }

    .odr-row-2,
    .odr-row-3 {
        grid-template-columns: 1fr;
    }
}



/*¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
¨***********************************************************
*************************************************************/

.odr-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    align-items: start;
}

/* =========================
   CARD BASE
========================= */
.odr-card {
    background: #141414;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    overflow: hidden;
}

.odr-card-header {
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .odr-card-header h3 {
        margin: 0;
        font-size: .85rem;
        color: #fff;
        letter-spacing: .5px;
    }

.odr-card-body {
    padding: 1rem;
}

/* =========================
   TABLE RESPONSIVE REAL
========================= */
.odr-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.odr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* clave para mobile scroll */
    font-size: .75rem;
}

    .odr-table th {
        text-align: left;
        color: #888;
        font-size: .6rem;
        padding: .6rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .odr-table td {
        padding: .7rem .6rem;
        border-top: 1px solid rgba(255,255,255,.05);
        color: #ddd;
        white-space: nowrap;
    }

.odr-gold {
    color: #d4af37;
    font-weight: 700;
}

/* =========================
   TOTAL
========================= */
.odr-total-label {
    text-align: right;
    font-size: .6rem;
    color: #777;
    text-transform: uppercase;
}

.odr-total-value {
    color: #d4af37;
    font-weight: 800;
}

/* =========================
   INFO SIDEBAR
========================= */
.odr-info div {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

.odr-info span {
    font-size: .6rem;
    color: #888;
}

.odr-info p {
    margin: 0;
    color: #ddd;
    font-size: .75rem;
    text-align: right;
}

/* =========================
   BADGES
========================= */
.odr-badge {
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .65rem;
    display: inline-block;
}

    .odr-badge.success {
        background: rgba(0,255,140,.12);
        color: #00d27a;
    }

    .odr-badge.warn {
        background: rgba(255,193,7,.12);
        color: #ffc107;
    }

    .odr-badge.danger {
        background: rgba(255,80,80,.12);
        color: #ff5a5a;
    }

/* =========================
   TOTAL BIG
========================= */
.odr-total-big {
    color: #d4af37;
    font-size: 1.2rem;
    font-weight: 800;
}

/* =========================
   FORM CONTROLS
========================= */
.odr-select {
    width: 100%;
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    padding: .7rem;
    border-radius: 8px;
    margin-bottom: .6rem;
    outline: none;
}

.odr-btn-gold {
    width: 100%;
    background: #d4af37;
    border: none;
    padding: .75rem;
    border-radius: 8px;
    font-weight: 700;
    color: #111;
    cursor: pointer;
}

/* =========================
   RESPONSIVE REAL
========================= */

/* Tablet */
@media (max-width: 1024px) {
    .odr-detail-grid {
        grid-template-columns: 1.5fr 1fr;
    }
}

/* Mobile */
@media (max-width: 900px) {
    .odr-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile pequeño */
@media (max-width: 600px) {

    .odr-card {
        border-radius: 10px;
    }

    .odr-card-header h3 {
        font-size: .8rem;
    }

    .odr-table {
        font-size: .65rem;
        min-width: 520px;
    }

    .odr-info p {
        font-size: .7rem;
    }

    .odr-total-big {
        font-size: 1rem;
    }

    .odr-card-body {
        padding: .85rem;
    }
}


/**************************************************************************
**************************************************************************/


/* ===== FIX RESPONSIVE PEDIDO DETAIL ===== */

.odr-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    align-items: start;
}

.odr-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.odr-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.odr-detail-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 900px) {
    .odr-detail-grid {
        grid-template-columns: 1fr;
    }

    .odr-detail-side {
        order: 2;
    }

    .odr-detail-main {
        order: 1;
    }
}

@media (max-width: 600px) {
    .odr-table {
        min-width: 520px;
        font-size: .65rem;
    }
}



/* =========================
   RESPONSIVE REAL: CARDS
========================= */

@media (max-width: 900px) {

    .odr-detail-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .odr-detail-main,
    .odr-detail-side {
        width: 100%;
    }

    /* asegura orden natural */
    .odr-detail-side {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}


/* =========================
   DETAIL CLIENTE RESPONSIVE FIX
========================= */

.detail-grid-modern {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    align-items: start;
}

/* ===== SIDEBAR STACK ===== */
.detail-side-modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ===== TABLE SAFE ===== */
.table-wrap-modern {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-modern {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px) {

    .detail-grid-modern {
        grid-template-columns: 1.6fr 1fr;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px) {

    .detail-grid-modern {
        grid-template-columns: 1fr;
    }

    .detail-side-modern {
        order: 2;
    }

    .detail-main-modern {
        order: 1;
    }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 600px) {

    .table-modern {
        min-width: 520px;
        font-size: .65rem;
    }

    .card-title-modern {
        font-size: .8rem;
    }

    .info-row-modern strong {
        font-size: .75rem;
    }
}

.detail-grid-modern {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 1rem !important;
}

/* SIDEBAR */
.detail-side-modern {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* TABLE SAFE */
.table-wrap-modern {
    width: 100% !important;
    overflow-x: auto !important;
}

.table-modern {
    min-width: 650px !important;
}

/* =========================
   MOBILE FIX REAL
========================= */
@media (max-width: 900px) {

    .detail-grid-modern {
        display: flex !important;
        flex-direction: column !important;
    }

    .detail-main-modern,
    .detail-side-modern {
        width: 100% !important;
    }

    .detail-side-modern {
        order: 2 !important;
    }

    .detail-main-modern {
        order: 1 !important;
    }
}

/* SMALL MOBILE */
@media (max-width: 600px) {

    .table-modern {
        min-width: 520px !important;
        font-size: .65rem !important;
    }
}





















.form-wrapper-modern {
    max-width: 750px;
    margin: auto;
}

.card-modern {
    background: #111;
    border: 1px solid rgba(255,215,0,.10);
    border-radius: 24px;
    overflow: hidden;
}

.card-header-modern {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.card-title-modern {
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .card-title-modern i {
        color: #d4af37;
    }

.card-body-modern {
    padding: 1.5rem;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
}

.form-group-modern {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1rem;
}

.form-label-modern {
    font-size: .65rem;
    color: #aaa;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.form-control-modern {
    background: #181818;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 14px;
    padding: .85rem 1rem;
    outline: none;
    transition: .2s;
}

    .form-control-modern:focus {
        border-color: #d4af37;
        box-shadow: 0 0 0 2px rgba(212,175,55,.15);
    }

.toggle-box-modern {
    justify-content: center;
}

.toggle-modern {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #181818;
    padding: .8rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    color: #ccc;
}

    .toggle-modern input {
        accent-color: #d4af37;
    }

.form-actions-modern {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-modern-gold {
    flex: 1;
    background: linear-gradient(135deg,#d4af37,#f7d774);
    border: none;
    padding: .9rem 1rem;
    border-radius: 14px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
}

.btn-modern-dark {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    padding: .9rem 1rem;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
}




.detail-grid-modern {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.2rem;
}

.card-modern {
    background: #111;
    border: 1px solid rgba(255,215,0,.08);
    border-radius: 18px;
    overflow: hidden;
}

.card-header-modern {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.card-title-modern {
    color: #fff;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .card-title-modern i {
        color: #d4af37;
    }

.card-body-modern {
    padding: 1rem;
}

.table-wrap-modern {
    overflow-x: auto;
}

.table-modern {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

    .table-modern th {
        text-align: left;
        font-size: .65rem;
        color: #888;
        text-transform: uppercase;
        padding: .8rem;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .table-modern td {
        padding: .9rem .8rem;
        border-bottom: 1px solid rgba(255,255,255,.04);
        color: #ddd;
    }

.order-num-modern {
    color: #fff;
    font-weight: 600;
}

.text-gold {
    color: #d4af37;
}

.text-muted-sm {
    font-size: .65rem;
    color: #777;
}

.icon-btn-modern {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.05);
}

    .icon-btn-modern:hover {
        background: #d4af37;
        color: #000;
    }

.info-row-modern {
    display: flex;
    justify-content: space-between;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: .75rem;
    color: #aaa;
}

    .info-row-modern strong {
        color: #fff;
    }

.empty-modern {
    text-align: center;
    padding: 2rem;
    color: #777;
}