/* =========================
   Regalos UI — Visual v3 (Dark/Light refinado)
   ========================= */

/* Fuente: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  /* Paleta modo claro */
  --brand:#4F8DFF;
  --brand-2:#7FB0FF;
  --ink:#0f172a;           /* texto principal */
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#5b6b85;        /* texto secundario */
  --line:#e6ecf5;         /* líneas / bordes */
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --radius:16px;

  --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --font-size:16px;
  --leading:1.55;
}

/* Modo oscuro con alto contraste real */
:root[data-theme="dark"]{
  --brand:#9BC1FF;        /* azul más claro para resaltar sobre fondo oscuro */
  --brand-2:#B5D0FF;
  --ink:#EAF0FA;          /* texto principal claro */
  --bg:#0B1220;           /* fondo general */
  --card:#121A2A;         /* paneles/tarjetas */
  --muted:#BAC6DB;        /* texto secundario más claro */
  --line:#2A3A57;         /* bordes visibles */
  --success:#34d399;
  --warning:#fbbf24;
  --danger:#f87171;
  --shadow:0 14px 40px rgba(0,0,0,.55);
}

html, body{height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--font-size);
  line-height:var(--leading);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background .2s ease, color .2s ease;
}

/* -------- Navegación -------- */
.navbar{
  background:var(--card)!important;
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(16,24,40,.08);
}
.navbar .navbar-brand{font-weight:800;letter-spacing:.2px;color:var(--ink);}
.navbar .nav-link{color:var(--ink);opacity:.9;}
.navbar .nav-link:hover{opacity:1;}
.navbar-toggler{border-color:var(--line);}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='gray' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .navbar-toggler-icon{filter:invert(1);opacity:.85;}

.theme-toggle{
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
  padding:.45rem .7rem;
  line-height:1;
  color:var(--ink);
}

/* -------- Hero -------- */
.hero{
  background:linear-gradient(135deg, rgba(123,152,255,.12) 0%, rgba(255,255,255,.75) 100%);
  border:1px solid var(--line);
  border-radius:24px;
  padding:2.75rem;
  box-shadow:var(--shadow);
}
:root[data-theme="dark"] .hero{
  background:
    radial-gradient(1200px 400px at -10% -10%, rgba(155,193,255,.10) 0%, rgba(18,26,42,0) 70%),
    radial-gradient(800px 300px at 120% 120%, rgba(155,193,255,.10) 0%, rgba(18,26,42,0) 65%),
    linear-gradient(135deg, rgba(16,24,40,.6) 0%, rgba(18,26,42,.95) 100%);
}

/* -------- Tarjetas / Contenedores -------- */
.card{
  background:var(--card);
  border:none;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease, opacity .2s ease, filter .2s ease;
}
.card-hover:hover{transform:translateY(-2px);box-shadow:0 14px 42px rgba(16,24,40,.12);}
.card.is-blocked{opacity:.65;filter:grayscale(.25);}
.card-img-top{
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  object-fit:cover;
}

/* -------- Tipografía / Auxiliares -------- */
.small-muted{color:var(--muted);font-size:.95rem;}
.section-title{font-weight:800;letter-spacing:.2px;}
.tag{
  display:inline-block; padding:.28rem .6rem;
  background:rgba(123,152,255,.16);
  color:var(--brand);
  border-radius:999px; font-size:.8rem;
}

/* -------- Botones -------- */
.btn, .form-control, .form-select{transition: all .18s ease;}

.btn-brand{
  --bs-btn-bg:var(--brand);
  --bs-btn-color:#0b1020;
  --bs-btn-hover-bg:var(--brand-2);
  --bs-btn-hover-color:#0b1020;
  border:none; border-radius:12px;
  padding:.65rem 1rem; font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(79,141,255,.25);
}
:root[data-theme="dark"] .btn-brand{--bs-btn-color:#0B1220;}

.btn-soft{
  background:rgba(123,152,255,.12);
  border:1px solid var(--line);
  color:var(--brand);
  border-radius:12px;
}
.btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:12px;
}

.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-danger{border-radius:12px;}
.btn-outline-primary{color:var(--brand);border-color:var(--brand);}
.btn-outline-primary:hover{background:rgba(123,152,255,.12);}
.btn-link{color:var(--brand);text-decoration:none;font-weight:600;}
.btn-link:hover{opacity:.9;text-decoration:underline;}

:root[data-theme="dark"] .btn-outline-secondary{color:var(--ink); border-color:var(--line);}
:root[data-theme="dark"] .btn-outline-secondary:hover{background:rgba(255,255,255,.05);}

/* -------- Formularios -------- */
.form-control,.form-select{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select{
  background:#0F1729;                     /* sutilmente más claro que card para diferenciar */
  border-color:#304366;
  color:var(--ink);
}
.form-control::placeholder{color:var(--muted);opacity:.95;}
.form-control:focus,.form-select:focus{
  box-shadow:0 0 0 .2rem rgba(79,141,255,.25);
  border-color:#9BC1FF;
}

/* -------- Chips / Badges -------- */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .6rem; border-radius:999px; font-size:.8rem;
  border:1px solid var(--line); color:var(--ink);
}
.chip.success{background:rgba(34,197,94,.12); color:var(--success); border-color:rgba(34,197,94,.25);}
.chip.warning{background:rgba(245,158,11,.12); color:var(--warning); border-color:rgba(245,158,11,.25);}
.chip.danger{background:rgba(239,68,68,.12); color:var(--danger); border-color:rgba(239,68,68,.25);}

.price-badge{
  position:absolute; top:12px; right:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b1020; font-weight:800;
  padding:.35rem .6rem; border-radius:12px;
  box-shadow:var(--shadow);
}
:root[data-theme="dark"] .price-badge{color:#0B1220;}

/* -------- Tablas -------- */
.table{--bs-table-bg:transparent; color:var(--ink);}
.table thead th{border-bottom:1px solid var(--line); color:var(--muted); font-weight:600;}
.table td,.table th{border-color:var(--line)!important;}
:root[data-theme="dark"] .table tr:hover{background:rgba(255,255,255,.03);}

/* -------- Componentes Bootstrap a tono -------- */
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .offcanvas,
:root[data-theme="dark"] .list-group{
  background:var(--card); color:var(--ink); border-color:var(--line);
}

/* -------- Utilidades -------- */
.search-input{max-width:360px;}
.copy-btn{border-radius:10px;}
hr{border-color:var(--line);}
a{color:var(--brand);text-decoration:none;}
a:hover{opacity:.9;}

:root[data-theme="dark"] .btn:disabled,
:root[data-theme="dark"] .btn.disabled{
  background:rgba(255,255,255,.07)!important;
  color:var(--muted)!important;
  border-color:var(--line)!important;
}


/* === UX Mejorado === */
:root{
  --radius: 12px;
}
html{font-size:18px;} /* +legible para adultos */
body{line-height:1.6;}
.container{padding:1rem;}
.card{border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,.06);}
.btn{min-height:44px; border-radius:10px; padding:.6rem .9rem;}
.btn-primary{background:#194BFB;color:#fff;border:0;}
.btn-primary:hover{filter:brightness(1.05);}
.form-control{min-height:44px;border-radius:10px;padding:.55rem .7rem;}
.tag,.badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:#eef;}
.text-muted{color:#667085;}
.small{font-size:.9rem;}
@media (max-width:640px){
  html{font-size:16px;}
  .container{padding:.75rem;}
}
/* estados claros para regalos */
.gift-item{border:1px solid #eee;border-radius:var(--radius);padding:.6rem;margin-bottom:.5rem;}
.gift-item[data-status="reserved"]{opacity:.8; background: #fffaf0;}
.gift-item[data-status="purchased"]{opacity:.8; background: #f0fff4;}