/* ===============================================
   LEÓNOFERTAS — MODO DÍA / NOCHE + OFERTAS CSS
   Color León: púrpura regio #911048
   =============================================== */

/* ---- TEMA OSCURO (por defecto) ---- */
:root {
  --leon:        #911048;
  --leon-light:  #c01255;
  --leon-dark:   #6a0c35;
  --leon-glow:   rgba(145,16,72,.4);
  --leon-soft:   rgba(145,16,72,.08);
  --leon-border: rgba(145,16,72,.3);
  --oferta-sold:     #6b7280;
  --oferta-reserved: #d97706;
  --oferta-new:      #059669;
  --oferta-used:     #7c3aed;
  /* day/night transition */
  --theme-transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ---- TEMA CLARO ---- */
[data-theme="light"] {
  --bg:    #f0f2f8;
  --bg2:   #ffffff;
  --card:  #ffffff;
  --card-hover: #f8f9ff;
  --border: rgba(100,80,130,.13);
  --text:  #1a1035;
  --text2: #4a3f6b;
  --text3: #8880a8;
  --shadow: 0 4px 24px rgba(100,80,130,.12);
  --leon-soft: rgba(145,16,72,.05);
  --leon-border: rgba(145,16,72,.2);
}
[data-theme="light"] .navbar {
  background: rgba(255,255,255,.9) !important;
  border-bottom-color: rgba(100,80,130,.15) !important;
}
[data-theme="light"] .hero-ofertas {
  background: linear-gradient(135deg,#f5f0ff 0%,#faf5ff 50%,#f0ecff 100%) !important;
}
[data-theme="light"] .hero-ofertas::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(145,16,72,.1) 0%,transparent 70%) !important;
}
[data-theme="light"] .pcard { box-shadow: 0 2px 12px rgba(100,80,130,.08); }
[data-theme="light"] .pcard:hover { box-shadow: 0 12px 40px rgba(145,16,72,.18); }
[data-theme="light"] .offers-filters, [data-theme="light"] .offers-nav { background:#ffffff; }
[data-theme="light"] .offers-filters select,
[data-theme="light"] .offers-filters input { background:#f0f2f8; color:var(--text); }
[data-theme="light"] .price-section { background:#f8f5ff; }
[data-theme="light"] .oferta-desc { background:#f8f5ff; }

/* ---- MODO OSCURO ADMIN ---- */
[data-theme="light"] .admin-layout { background:#f0f2f8; }
[data-theme="light"] .sidebar { background:#1a1035; } /* sidebar siempre oscuro */
[data-theme="light"] .main-content { background:#f0f2f8; }
[data-theme="light"] .table-wrap, [data-theme="light"] .stat-card,
[data-theme="light"] .form-wrap { background:#ffffff; border-color:rgba(100,80,130,.13); }
[data-theme="light"] table thead { background:rgba(100,80,130,.06); }
[data-theme="light"] tbody tr:hover { background:rgba(100,80,130,.04); }
[data-theme="light"] .topbar { background:#ffffff; border-bottom-color:rgba(100,80,130,.12); color:var(--text); }
[data-theme="light"] .topbar h1 { color:var(--text); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
  background:#f0f2f8 !important; color:var(--text) !important; border-color:rgba(100,80,130,.2) !important;
}

/* ---- TOGGLE MODO ---- */
.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 20px;
  color: var(--text2); cursor: pointer; font-size: .82rem; padding: .3rem .75rem;
  transition: all .2s; display: flex; align-items: center; gap: .35rem; font-family: inherit;
}
.theme-toggle:hover { border-color: var(--leon); color: var(--leon); }

/* ===============================================
   NAV OFERTAS
   =============================================== */
.offers-nav { display:flex;gap:.5rem;padding:.5rem 1.5rem;background:var(--bg2);border-bottom:1px solid var(--border);overflow-x:auto }
.offers-nav a { color:var(--text2);font-size:.85rem;font-weight:500;padding:.4rem .9rem;border-radius:20px;white-space:nowrap;transition:all .2s;border:1px solid transparent }
.offers-nav a:hover,.offers-nav a.active { background:var(--leon-soft);color:var(--leon);border-color:var(--leon-border) }

/* ===============================================
   HERO OFERTAS
   =============================================== */
.hero-ofertas {
  position:relative;padding:4rem 1.5rem 3rem;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,#05080f 0%,#110518 40%,#0a0512 100%);
  transition: var(--theme-transition);
}
.hero-ofertas::before {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(145,16,72,.12) 0%,transparent 70%);
}
.hero-tag-leon {
  display:inline-flex;align-items:center;gap:.4rem;background:var(--leon-soft);
  border:1px solid var(--leon-border);color:var(--leon-light);padding:.35rem 1rem;border-radius:20px;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;
  position:relative;z-index:1;
}
.hero-ofertas h1 { font-size:clamp(1.8rem,4vw,3rem);font-weight:900;line-height:1.1;margin-bottom:.5rem;position:relative;z-index:1 }
.hero-ofertas h1 .leon-color { color:var(--leon-light) }
.hero-ofertas p { color:var(--text2);font-size:1rem;max-width:500px;margin:0 auto 2rem;position:relative;z-index:1 }

.offers-search-wrap {
  max-width:640px;margin:0 auto;display:flex;gap:.5rem;position:relative;z-index:1;
  background:rgba(255,255,255,.05);border:1px solid var(--leon-border);
  border-radius:50px;padding:.4rem .4rem .4rem 1.2rem;transition:border-color .2s;
}
.offers-search-wrap:focus-within { border-color:var(--leon) }
.offers-search-wrap input { flex:1;background:none;border:none;outline:none;color:var(--text);font-size:1rem;font-family:inherit }
.offers-search-wrap input::placeholder { color:var(--text3) }
.offers-search-wrap button {
  background:var(--leon);color:#fff;border:none;border-radius:40px;
  padding:.6rem 1.5rem;font-weight:700;cursor:pointer;font-size:.9rem;transition:all .2s;white-space:nowrap;
}
.offers-search-wrap button:hover { background:var(--leon-dark);transform:translateY(-1px) }

.hero-offers-stats { display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem;position:relative;z-index:1 }
.stat-pill {
  display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:20px;padding:.35rem .9rem;font-size:.82rem;color:var(--text2)
}
.stat-pill strong { color:var(--text) }

/* ===============================================
   FILTROS
   =============================================== */
.offers-filters {
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:.75rem 1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;
  transition: var(--theme-transition);
}
.offers-filters select, .offers-filters input[type=text] {
  background:var(--card);color:var(--text);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.38rem .75rem;font-size:.82rem;
  font-family:inherit;outline:none;cursor:pointer;transition:border-color .2s;
}
.offers-filters select:focus,.offers-filters input:focus { border-color:var(--leon) }
.filter-label { font-size:.78rem;color:var(--text2);font-weight:500;white-space:nowrap }
.offers-count { margin-left:auto;font-size:.82rem;color:var(--text2) }
.btn-clear-offers {
  background:none;border:1px solid var(--border);color:var(--text2);
  border-radius:var(--radius-sm);padding:.35rem .75rem;font-size:.78rem;cursor:pointer;
  transition:all .2s;font-family:inherit;
}
.btn-clear-offers:hover { border-color:var(--leon);color:var(--leon) }

/* ===============================================
   GRID — 3 COLUMNAS CON TAMAÑOS
   =============================================== */
.offers-main { padding:2rem 1.5rem 4rem;max-width:1400px;margin:0 auto }

.offers-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
  grid-auto-rows:auto;
}

/* ---- CARD BASE ---- */
.pcard {
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:pcardIn .45s ease both;
}
.pcard:hover {
  border-color:var(--leon);transform:translateY(-6px);
  box-shadow:0 16px 56px var(--leon-glow), 0 0 0 1px var(--leon-border);
}
@keyframes pcardIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ---- PEQUEÑO (1 col, foto cuadrada) ---- */
.pcard[data-tamano="pequeno"] { }
.pcard[data-tamano="pequeno"] .pcard-photo { height:200px; aspect-ratio:unset }
.pcard[data-tamano="pequeno"] .pcard-title { font-size:.82rem;-webkit-line-clamp:2 }
.pcard[data-tamano="pequeno"] .price-offer { font-size:1.5rem }
.pcard[data-tamano="pequeno"] .discount-badge { width:46px;height:46px }
.pcard[data-tamano="pequeno"] .discount-badge .pct { font-size:.85rem }
.pcard[data-tamano="pequeno"] .pcard-body { padding:.75rem }

/* ---- NORMAL (1 col, foto 4/3) ---- */
.pcard[data-tamano="normal"] .pcard-photo { height:240px; aspect-ratio:unset }

/* ---- GRANDE (2 cols, layout horizontal) ---- */
.pcard[data-tamano="grande"] {
  grid-column:span 2;
  display:grid;
  grid-template-columns:55% 1fr;
  grid-template-rows:1fr auto;
  flex-direction:unset;
}
.pcard[data-tamano="grande"] .pcard-photo {
  grid-column:1;
  grid-row:1 / 3;
  width:100%;
  flex-shrink:0;
  aspect-ratio:unset;
  min-height:280px;
}
.pcard[data-tamano="grande"] .pcard-photo img { height:100%;width:100%;object-fit:cover }
.pcard[data-tamano="grande"] .pcard-body { grid-column:2;grid-row:1;padding:1.4rem 1.5rem .75rem;justify-content:flex-start }
.pcard[data-tamano="grande"] .pcard-title { font-size:1.1rem;-webkit-line-clamp:3;margin-bottom:.5rem }
.pcard[data-tamano="grande"] .price-offer { font-size:2.6rem }
.pcard[data-tamano="grande"] .pcard-footer { grid-column:2;grid-row:2;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1.5rem 1.1rem;border-top:1px solid var(--border) }
.pcard[data-tamano="grande"] .pcard-desc-preview {
  display:block;font-size:.8rem;color:var(--text2);line-height:1.6;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:.5rem 0;
}
/* En grande, el footer está dentro del body */
.pcard[data-tamano="grande"] .pcard-footer {
  grid-column:2;
  grid-row:2;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.9rem 1.5rem 1.1rem;
  border-top:1px solid var(--border);
}

/* Etiqueta de tamaño en admin (badge visual) */
.size-badge {
  display:inline-flex;align-items:center;gap:.25rem;border-radius:6px;
  padding:.15rem .45rem;font-size:.7rem;font-weight:700;text-transform:uppercase;
}
.size-badge.pequeno { background:rgba(100,100,100,.12);color:var(--text3) }
.size-badge.normal  { background:rgba(145,16,72,.12);color:var(--leon-light) }
.size-badge.grande  { background:rgba(145,16,72,.2);color:var(--leon);border:1px solid var(--leon-border) }

/* ---- FOTO PLACEHOLDER ---- */
.pcard-photo { position:relative;overflow:hidden;background:var(--bg2);flex-shrink:0 }
.pcard-photo img { width:100%;height:100%;object-fit:cover;transition:transform .4s ease }
.pcard:hover .pcard-photo img { transform:scale(1.08) }
.pcard-photo-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;opacity:.15; background: linear-gradient(135deg, var(--bg2), var(--card)) }

/* Estado overlay */
.pcard-overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3 }
.pcard-overlay.sold { background:rgba(0,0,0,.65) }
.pcard-overlay.reserved { background:rgba(217,119,6,.22) }
.pcard-overlay-text {
  font-size:1.3rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:.45rem 1.3rem;border-radius:4px;transform:rotate(-10deg);border:3px solid currentColor;
}
.sold .pcard-overlay-text { color:#fff;border-color:rgba(255,255,255,.6) }
.reserved .pcard-overlay-text { color:#fcd34d;border-color:#fcd34d }

/* Badges */
.pcard-badges { position:absolute;top:.6rem;left:.6rem;right:.6rem;display:flex;justify-content:space-between;align-items:flex-start;z-index:2 }
.badge { display:inline-flex;align-items:center;gap:.2rem;padding:.22rem .55rem;border-radius:6px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap }
.badge-nuevo    { background:var(--oferta-new);color:#fff; box-shadow:0 2px 8px rgba(5,150,105,.4) }
.badge-used     { background:var(--oferta-used);color:#fff }
.badge-reservado{ background:var(--oferta-reserved);color:#000; box-shadow:0 2px 8px rgba(217,119,6,.4) }
.badge-vendido  { background:var(--oferta-sold);color:#fff }
.badge-disponible { background:rgba(5,150,105,.12);border:1px solid rgba(5,150,105,.3);color:#34d399 }

/* Descuento circular — ahora en púrpura */
.discount-badge {
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--leon),var(--leon-dark));
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:900;line-height:1;
  box-shadow:0 4px 20px var(--leon-glow),0 0 0 3px rgba(255,255,255,.08);
  flex-shrink:0;text-align:center;
  animation: discountPulse 3s ease-in-out infinite;
}
@keyframes discountPulse {
  0%,100%{ box-shadow:0 4px 20px var(--leon-glow),0 0 0 3px rgba(255,255,255,.08); }
  50%    { box-shadow:0 4px 28px var(--leon-glow),0 0 0 5px rgba(145,16,72,.15); }
}
.discount-badge .pct { font-size:1.1rem;font-weight:900;line-height:1 }
.discount-badge .off { font-size:.55rem;opacity:.9;text-transform:uppercase }

/* Card body & prices */
.pcard-body { padding:1rem;flex:1;display:flex;flex-direction:column;gap:.4rem }
.pcard-title {
  font-size:.95rem;font-weight:700;color:var(--text);line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  transition:color .2s;
}
.pcard:hover .pcard-title { color:var(--leon-light) }
.pcard-meta { font-size:.72rem;color:var(--text3);display:flex;gap:.5rem;flex-wrap:wrap }
.pcard-prices { display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:.5rem }
.price-original { color:var(--text3);font-size:.88rem;text-decoration:line-through; text-decoration-thickness:2px }
.price-offer { color:var(--leon-light);font-size:2rem;font-weight:900;line-height:1; text-shadow:0 0 20px var(--leon-glow) }
.pcard-desc-preview { display:none }

/* Card footer */
.pcard-footer { padding:.8rem 1rem;border-top:1px solid var(--border);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem }
.btn-ver {
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:#911048;color:#fff;
  border-radius:10px;
  padding:.62rem 1.3rem;
  font-size:.95rem;font-weight:800;
  text-decoration:none;
  transition:background .18s,transform .18s,box-shadow .18s;
  border:none;cursor:pointer;
  white-space:nowrap;
  letter-spacing:.01em;
}
.btn-ver:hover { background:#c01255;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(145,16,72,.38) }
.btn-ver.disabled { background:#374151;color:#6b7280;pointer-events:none;transform:none;box-shadow:none }

/* ===============================================
   FICHA INDIVIDUAL
   =============================================== */
.oferta-wrap { max-width:1100px;margin:0 auto;padding:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start }
.gallery { position:sticky;top:80px }
.gallery-main {
  border-radius:16px;overflow:hidden;background:var(--bg2);
  border:1px solid var(--border);aspect-ratio:4/3;position:relative;
}
.gallery-main img { width:100%;height:100%;object-fit:contain;padding:1rem }
.gallery-thumbs { display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap }
.gallery-thumb {
  width:64px;height:64px;border-radius:8px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;transition:all .2s;background:var(--bg2);flex-shrink:0;
}
.gallery-thumb:hover,.gallery-thumb.active { border-color:var(--leon) }
.gallery-thumb img { width:100%;height:100%;object-fit:cover }

.oferta-info {}
.oferta-estado-row { display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem }
.oferta-titulo { font-size:clamp(1.3rem,3vw,1.9rem);font-weight:900;line-height:1.2;margin-bottom:.5rem }
.oferta-ref { font-size:.78rem;color:var(--text3);margin-bottom:1rem }

.price-section { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;margin-bottom:1.2rem;transition:var(--theme-transition) }
.price-section .was { color:var(--text3);font-size:.9rem;margin-bottom:.3rem }
.price-section .was span { text-decoration:line-through }
.price-section .now { display:flex;align-items:center;gap:1rem }
.price-section .now-amount { font-size:3rem;font-weight:900;color:var(--leon-light);line-height:1 }
.price-section .discount-pill {
  background:linear-gradient(135deg,var(--leon),var(--leon-dark));
  color:#fff;border-radius:8px;padding:.3rem .75rem;font-size:1rem;font-weight:900;
}
.price-section .savings { font-size:.82rem;color:var(--oferta-new);margin-top:.4rem }

.oferta-desc { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;font-size:.88rem;color:var(--text2);line-height:1.7;margin-bottom:1.2rem;white-space:pre-line;transition:var(--theme-transition) }
.oferta-details { display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem }
.detail-row { display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(128,128,128,.07);font-size:.85rem }
.detail-row:last-child { border-bottom:none }
.detail-row .key { color:var(--text2) }
.detail-row .val { font-weight:600 }

.oferta-actions { display:flex;flex-direction:column;gap:.75rem }
.btn-oferta-main {
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:linear-gradient(135deg,var(--leon),var(--leon-dark));
  color:#fff;border-radius:var(--radius);padding:1rem;font-size:1rem;font-weight:700;
  text-decoration:none;transition:all .2s;border:none;cursor:pointer;
}
.btn-oferta-main:hover { opacity:.9;transform:translateY(-2px);box-shadow:0 6px 24px var(--leon-glow) }
.btn-oferta-main.disabled { background:var(--oferta-sold);pointer-events:none;box-shadow:none }
.btn-oferta-sec {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:transparent;color:var(--text2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.75rem;font-size:.88rem;font-weight:600;
  text-decoration:none;transition:all .2s;cursor:pointer;font-family:inherit;
}
.btn-oferta-sec:hover { border-color:var(--leon);color:var(--leon) }

/* Empty */
.offers-empty { text-align:center;padding:5rem 1rem;color:var(--text2) }
.offers-empty .emoji { font-size:4rem;margin-bottom:1rem }

/* ===============================================
   RESPONSIVE
   =============================================== */
@media(max-width:900px) {
  .offers-grid { grid-template-columns:repeat(2,1fr) }
  .pcard[data-tamano="grande"] { grid-column:span 2;grid-template-columns:100%;grid-template-rows:220px 1fr auto }
  .pcard[data-tamano="grande"] .pcard-photo { grid-column:1;grid-row:1;width:100%;aspect-ratio:16/9;min-height:0 }
  .pcard[data-tamano="grande"] .pcard-body { grid-column:1;grid-row:2;padding:1rem }
  .pcard[data-tamano="grande"] .pcard-footer { grid-column:1;grid-row:3 }
  .oferta-wrap { grid-template-columns:1fr }
  .gallery { position:static }
}
@media(max-width:560px) {
  .offers-grid { grid-template-columns:1fr;gap:.75rem }
  .pcard[data-tamano="grande"] { grid-column:span 2;grid-template-columns:100%;grid-template-rows:200px 1fr auto }
  .pcard-body { padding:.75rem }
  .price-offer { font-size:1.2rem }
  .price-section .now-amount { font-size:2rem }
}

/* ===================================================
   PANEL INLINE DE OFERTA
   =================================================== */
#oferta-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  opacity: 0;
}
#oferta-panel.open {
  max-height: 900px;
  opacity: 1;
}
#oferta-panel.loading::after {
  content: '';
  display: block;
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--leon);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.opanel-inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 1.5rem;
  background: var(--bg2);
  border-bottom: 2px solid var(--leon-border);
  border-top: 2px solid var(--leon-border);
  position: relative;
  transition: background .3s;
}

/* Cerrar */
.opanel-close {
  position: absolute; top: .75rem; right: .75rem;
  background: rgba(128,128,128,.1); border: 1px solid var(--border);
  color: var(--text2); border-radius: 50%; width: 32px; height: 32px;
  cursor: pointer; font-size: .9rem; display: flex; align-items: center;
  justify-content: center; transition: all .2s; z-index: 10;
  font-family: inherit;
}
.opanel-close:hover { background: rgba(232,25,44,.12); border-color: #e8192c; color: #e8192c; }

/* Galería */
.opanel-gallery { display: flex; flex-direction: column; gap: .5rem; }
.opanel-main-photo {
  border-radius: 12px; overflow: hidden; background: var(--card);
  border: 1px solid var(--border); aspect-ratio: 4/3; position: relative;
}
.opanel-main-photo img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; }
.opanel-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 5rem; opacity: .2; }
.opanel-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; }
.opanel-thumb {
  width: 56px; height: 56px; border-radius: 7px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: border-color .15s; background: var(--bg2);
}
.opanel-thumb.active, .opanel-thumb:hover { border-color: var(--leon); }
.opanel-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Info */
.opanel-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.opanel-titulo { font-size: 1.4rem; font-weight: 900; line-height: 1.25; margin-bottom: .3rem; }
.opanel-ref { font-size: .75rem; color: var(--text3); margin-bottom: .8rem; }

/* Precio */
.opanel-price { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.opanel-was { color: var(--text3); font-size: .88rem; text-decoration: line-through; display: block; margin-bottom: .2rem; }
.opanel-now-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.opanel-now { font-size: 2.4rem; font-weight: 900; color: var(--leon-light); line-height: 1; }
.opanel-savings { font-size: .8rem; color: var(--oferta-new); }

/* Descripción */
.opanel-desc {
  font-size: .85rem; color: var(--text2); line-height: 1.7;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: .9rem; margin-bottom: .9rem;
  max-height: 110px; overflow-y: auto;
}

/* Detalles */
.opanel-details { margin-bottom: 1rem; }

/* Acciones */
.opanel-actions { display: flex; flex-direction: column; gap: .6rem; }

/* Card seleccionada */
.pcard.selected {
  border-color: var(--leon) !important;
  box-shadow: 0 0 0 3px var(--leon-glow) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .opanel-inner {
    grid-template-columns: 1fr;
  }
  .opanel-main-photo { aspect-ratio: 16/9; }
  #oferta-panel.open { max-height: 1400px; }
}

/* ── SHIMMER carga foto ── */
.pcard-photo-placeholder {
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
  0%,100% { opacity:.12 }
  50%     { opacity:.22 }
}

/* ── PRECIO AHORRO ── */
.price-savings {
  font-size:.72rem;color:#22c55e;font-weight:700;
  display:flex;align-items:center;gap:.2rem;margin-top:.15rem;
}

/* ── HOVER overlay en la foto con CTA ── */
.pcard-photo::after {
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(7,0,20,.85) 0%, rgba(7,0,20,.3) 50%, transparent 100%);
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;z-index:1;
}
.pcard:hover .pcard-photo::after { opacity:1 }

/* Title en la foto para "grande" */
.pcard[data-tamano="grande"] .pcard-photo::after {
  opacity:0.3;
}

/* ── Título sobre foto en tarjeta GRANDE ── */
.pcard-photo-title {
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:.85rem 1rem .6rem;
  background:linear-gradient(to top, rgba(5,2,18,.9) 0%, transparent 100%);
  font-size:1rem;font-weight:800;color:#fff;
  line-height:1.3;
  pointer-events:none;
}


/* ── OVERRIDE GRANATE DE LEÓN ── */

/* ══════════════════════════════════════════════════════
   GRANATE DE LEÓN — Overhaul Visual Completo
   Color León: #911048  |  León Light: #c01255
   ══════════════════════════════════════════════════════ */

/* ── ROOT OVERRIDES ─────────────────────────────────── */
:root {
  --leon:        #911048;
  --leon-light:  #c01255;
  --leon-dark:   #6a0c35;
  --leon-glow:   rgba(145,16,72,.42);
  --leon-soft:   rgba(145,16,72,.08);
  --leon-border: rgba(145,16,72,.3);
}

/* ══════════════════════════════════════════════════════
   NAVBAR — Premium con granate de León
   ══════════════════════════════════════════════════════ */
.navbar {
  background: rgba(5,4,9,.96) !important;
  border-bottom: 1px solid rgba(145,16,72,.2) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}
.navbar-brand {
  background: linear-gradient(135deg,#c01255,#ff4d8d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}
.navbar-nav a:hover,
.navbar-nav a.active {
  color: #c01255 !important;
}

/* Badge precio en navbar — más grande y brillante */
.nav-price-badge {
  background: linear-gradient(135deg, #911048, #c01255) !important;
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  padding: .22rem .6rem !important;
  border-radius: 20px !important;
  letter-spacing: .02em !important;
  box-shadow: 0 2px 8px rgba(145,16,72,.5) !important;
}

/* btn-admin más visible */
.btn-admin {
  background: linear-gradient(135deg,#911048,#6a0c35) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(145,16,72,.4) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: .45rem 1rem !important;
  border-radius: 8px !important;
  transition: all .2s !important;
}
.btn-admin:hover { opacity: .9; transform: translateY(-1px) !important; }

/* Mi cuenta link */
.nav-mi-cuenta {
  color: #e8eaf0 !important;
  font-weight: 600 !important;
}
.nav-mi-cuenta:hover { color: #c01255 !important; }

/* ══════════════════════════════════════════════════════
   HERO — Más dramático, cinematográfico
   ══════════════════════════════════════════════════════ */
.hero-offers-section,
.hero-tiendas,
.hero-section,
.hero-ofertas {
  background: linear-gradient(160deg,#06010a 0%,#1a0311 35%,#0d0006 70%,#06010a 100%) !important;
  position: relative;
  overflow: hidden;
}
.hero-ofertas::before,
.hero-tiendas::before,
.hero-section::before {
  background: radial-gradient(ellipse 90% 70% at 50% -10%,
    rgba(145,16,72,.25) 0%,
    rgba(192,18,85,.08) 50%,
    transparent 75%) !important;
}
/* Línea de acento bajo el hero */
.hero-ofertas::after {
  content:'';
  position:absolute;bottom:0;left:10%;right:10%;height:1px;
  background: linear-gradient(90deg,transparent,rgba(145,16,72,.6),transparent);
}

/* Título hero — más grande y con gradiente */
.hero-ofertas h1,
.hero-tiendas h1,
.hero-section h1 {
  font-size: clamp(2.2rem,5vw,3.8rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
}
.hero-ofertas h1 .leon-color,
.red,
.hero-color {
  background: linear-gradient(135deg,#c01255,#ff4d8d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Tag "León Provincia" — más impactante */
.hero-tag-leon {
  background: rgba(145,16,72,.12) !important;
  border: 1px solid rgba(145,16,72,.4) !important;
  color: #f06090 !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  padding: .4rem 1.1rem !important;
}

/* Buscador hero — borde más pronunciado */
.offers-search-wrap,
.search-wrap,
.hero-search {
  border: 1.5px solid rgba(145,16,72,.35) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 50px !important;
}
.offers-search-wrap:focus-within,
.search-wrap:focus-within {
  border-color: #911048 !important;
  box-shadow: 0 0 0 3px rgba(145,16,72,.15) !important;
}
.offers-search-wrap button,
.hero-search-btn {
  background: linear-gradient(135deg,#911048,#c01255) !important;
  box-shadow: 0 3px 12px rgba(145,16,72,.4) !important;
}

/* ══════════════════════════════════════════════════════
   BADGES — GRANDES, IMPACTANTES, IRRESISTIBLES
   ══════════════════════════════════════════════════════ */

/* Base badge: mucho más grande */
.badge {
  padding: .32rem .8rem !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
}

/* Badge NUEVO — verde brillante con glow */
.badge-nuevo {
  background: #059669 !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(5,150,105,.5) !important;
  font-size: .82rem !important;
  padding: .32rem .9rem !important;
}

/* Badge SEGUNDA MANO */
.badge-used {
  background: linear-gradient(135deg,#7c3aed,#5b21b6) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124,58,237,.4) !important;
}

/* Badge RESERVADO — amarillo ámbar */
.badge-reservado {
  background: linear-gradient(135deg,#d97706,#b45309) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(217,119,6,.5) !important;
  font-size: .82rem !important;
  padding: .32rem .9rem !important;
}

/* Badge VENDIDO */
.badge-vendido {
  background: linear-gradient(135deg,#374151,#1f2937) !important;
  color: #9ca3af !important;
}

/* Badge DISPONIBLE */
.badge-disponible {
  background: rgba(5,150,105,.12) !important;
  border: 1.5px solid rgba(5,150,105,.4) !important;
  color: #34d399 !important;
  font-weight: 800 !important;
}

/* Badge descuento circular — ENORME Y PULSANTE */
.discount-badge {
  width: 66px !important;
  height: 66px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#911048,#6a0c35) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(145,16,72,.6), 0 0 0 3px rgba(255,255,255,.08) !important;
  font-weight: 900 !important;
  animation: discountPulse 2.5s ease-in-out infinite !important;
}
.discount-badge .pct {
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.discount-badge .off {
  font-size: .6rem !important;
  opacity: .85 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
@keyframes discountPulse {
  0%,100% { box-shadow:0 4px 24px rgba(145,16,72,.55),0 0 0 3px rgba(255,255,255,.08); }
  50%     { box-shadow:0 6px 36px rgba(145,16,72,.75),0 0 0 6px rgba(145,16,72,.1); }
}

/* Badge precio navbar — ligeramente más grande */
.nav-price-badge {
  font-size: .72rem !important;
  padding: .22rem .65rem !important;
}

/* ══════════════════════════════════════════════════════
   CARDS DE PRODUCTO — Más impacto visual
   ══════════════════════════════════════════════════════ */
.pcard {
  border-radius: 18px !important;
  border: 1px solid rgba(145,16,72,.12) !important;
  transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s ease, border-color .3s ease !important;
}
.pcard:hover {
  border-color: rgba(145,16,72,.5) !important;
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 20px 60px rgba(145,16,72,.35), 0 0 0 1px rgba(145,16,72,.2) !important;
}

/* Foto más alta */
.pcard[data-tamano="normal"] .pcard-photo { height: 250px !important; }
.pcard[data-tamano="pequeno"] .pcard-photo { height: 200px !important; }

/* Precio ENORME en granate */
.price-offer {
  color: #c01255 !important;
  font-size: 2.1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 24px rgba(145,16,72,.3) !important;
}
.pcard[data-tamano="grande"] .price-offer { font-size: 2.8rem !important; }
.pcard[data-tamano="pequeno"] .price-offer { font-size: 1.6rem !important; }

/* Ahorro en verde brillante */
.price-savings {
  font-size: .8rem !important;
  color: #22c55e !important;
  font-weight: 800 !important;
  margin-top: .2rem !important;
}

/* Precio original tachado — más visible */
.price-original {
  color: var(--text3) !important;
  font-size: .9rem !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

/* CTA button en granate */
.btn-ver {
  background: linear-gradient(135deg,#911048,#c01255) !important;
  border-radius: 10px !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
  padding: .65rem 1rem !important;
  letter-spacing: .02em !important;
  box-shadow: 0 3px 12px rgba(145,16,72,.35) !important;
  transition: all .2s !important;
}
.btn-ver:hover {
  background: linear-gradient(135deg,#c01255,#911048) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(145,16,72,.5) !important;
}

/* Título en hover */
.pcard:hover .pcard-title { color: #f06090 !important; }

/* ══════════════════════════════════════════════════════
   CARDS DE TIENDAS — Más visual
   ══════════════════════════════════════════════════════ */
.store-card {
  border-radius: 18px !important;
  border: 1px solid rgba(145,16,72,.1) !important;
  transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s ease !important;
}
.store-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(145,16,72,.4) !important;
  box-shadow: 0 18px 50px rgba(145,16,72,.25) !important;
}

/* Badge destacado en tiendas */
.badge-destacado,
.store-featured {
  background: linear-gradient(135deg,#911048,#c01255) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  padding: .28rem .8rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(145,16,72,.45) !important;
}

/* ══════════════════════════════════════════════════════
   FICHA DE OFERTA INDIVIDUAL (opanel + detalle)
   ══════════════════════════════════════════════════════ */
.opanel-inner {
  border-top: 2.5px solid #911048 !important;
  border-bottom: 2.5px solid #911048 !important;
}
.opanel-now,
.price-section .now-amount {
  color: #c01255 !important;
  text-shadow: 0 0 30px rgba(145,16,72,.3) !important;
}
.price-section .discount-pill {
  background: linear-gradient(135deg,#911048,#6a0c35) !important;
  font-size: 1.05rem !important;
  padding: .35rem .9rem !important;
}
.btn-oferta-main {
  background: linear-gradient(135deg,#911048,#c01255) !important;
  box-shadow: 0 4px 20px rgba(145,16,72,.4) !important;
  font-size: 1.05rem !important;
  padding: 1.1rem !important;
  border-radius: 12px !important;
}
.btn-oferta-main:hover {
  box-shadow: 0 8px 32px rgba(145,16,72,.6) !important;
}

/* ══════════════════════════════════════════════════════
   FILTROS — Más visual
   ══════════════════════════════════════════════════════ */
.offers-nav a.active,
.offers-nav a:hover {
  background: rgba(145,16,72,.1) !important;
  color: #c01255 !important;
  border-color: rgba(145,16,72,.3) !important;
}

/* ══════════════════════════════════════════════════════
   PANEL OFERTA INLINE — borde granate
   ══════════════════════════════════════════════════════ */
.pcard.selected {
  border-color: #911048 !important;
  box-shadow: 0 0 0 3px rgba(145,16,72,.25) !important;
}

/* ══════════════════════════════════════════════════════
   ADMIN — Sidebar granate
   ══════════════════════════════════════════════════════ */
.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: rgba(145,16,72,.15) !important;
  color: #f06090 !important;
  border-left: 3px solid #911048 !important;
}
.sidebar-brand {
  border-bottom: 1px solid rgba(145,16,72,.2) !important;
}
.sidebar-brand h2 {
  background: linear-gradient(135deg,#c01255,#ff4d8d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Stat cards admin en granate */
.stat-card .number { color: #c01255 !important; }
.stat-card { border-top: 3px solid rgba(145,16,72,.3) !important; }
.stat-card:hover { border-top-color: #911048 !important; }

/* Toggle switches en granate */
.switch input:checked + .slider { background: #911048 !important; }
.toggle-on { background: #911048 !important; }

/* Botones del admin */
.btn-primary,
.btn-save,
[type=submit].btn {
  background: linear-gradient(135deg,#911048,#6a0c35) !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(145,16,72,.35) !important;
}
.btn-primary:hover { opacity:.9 !important; }

/* ══════════════════════════════════════════════════════
   MODO CLARO — adaptado al granate
   ══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --leon-soft: rgba(145,16,72,.05) !important;
  --leon-border: rgba(145,16,72,.2) !important;
}
[data-theme="light"] .pcard:hover { box-shadow: 0 12px 40px rgba(145,16,72,.18) !important; }
[data-theme="light"] .hero-ofertas {
  background: linear-gradient(160deg,#fff5f7 0%,#fff0f5 50%,#fff5f7 100%) !important;
}
[data-theme="light"] .hero-ofertas::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(145,16,72,.08) 0%,transparent 70%) !important;
}
[data-theme="light"] .navbar {
  background: rgba(255,255,255,.95) !important;
  border-bottom-color: rgba(145,16,72,.12) !important;
}

/* ══════════════════════════════════════════════════════
   HAMBURGER — en granate
   ══════════════════════════════════════════════════════ */
.hamburger.open span:nth-child(1) { background: #c01255 !important; }
.hamburger.open span:nth-child(2) { background: #c01255 !important; }
.hamburger.open span:nth-child(3) { background: #c01255 !important; }

/* ══════════════════════════════════════════════════════
   PRECIOS PAGE — Cards de plan en granate
   ══════════════════════════════════════════════════════ */
.plan-card.featured,
.plan-card:hover {
  border-color: rgba(145,16,72,.5) !important;
  box-shadow: 0 12px 40px rgba(145,16,72,.25) !important;
}
.plan-badge-popular {
  background: linear-gradient(135deg,#911048,#c01255) !important;
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
footer .footer-lion { 
  filter: drop-shadow(0 0 12px rgba(145,16,72,.6)) !important;
}
footer a:hover { color: #c01255 !important; }

/* ══════════════════════════════════════════════════════
   ANIMACIÓN DE ENTRADA CARDS — más expresiva
   ══════════════════════════════════════════════════════ */
@keyframes pcardIn {
  from { opacity:0; transform:translateY(28px) scale(.97); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}