/* ==========================================================================
   La Bóveda (/catalogo-original) — selector de fondo Claro / Oscuro
   (SC_BOV_TEMA). Se carga después de boveda.css y solo actúa con la clase
   bov-claro en <html>, que pone el script del <head> antes de pintar.
   Por defecto la página abre en claro; el oscuro es el de boveda.css.
   Se revierte quitando este archivo, boveda-tema.js y sus líneas en
   catalogo-original.html.
   ========================================================================== */

/* ------------------------------------------------------------ el selector */
.bov-head > .wrap{position:relative}

.bov-tema{
  position:absolute;top:-8px;right:0;z-index:2;
  display:inline-grid;grid-template-columns:1fr 1fr;
  padding:3px;
  border-radius:var(--r-pill);
  border:1px solid rgba(235,196,99,.3);
  background:rgba(255,246,220,.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,246,220,.06);
}
/* Pastilla dorada que se desliza bajo la opción activa. */
.bov-tema-pista{
  position:absolute;top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,#FFF7DE 0%,#EBC463 46%,#C9A03A 100%);
  box-shadow:0 6px 16px rgba(184,139,34,.4),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
html.bov-claro .bov-tema-pista{transform:translateX(100%)}

.bov-tema-btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:94px;
  padding:7px 14px;
  border-radius:var(--r-pill);
  font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.04em;
  color:rgba(232,222,198,.72);
  transition:color .3s ease;
}
.bov-tema-btn svg{width:14px;height:14px;flex:none}
.bov-tema-btn:hover{color:#FFF4D2}
.bov-tema-btn[aria-pressed="true"]{color:#140F05}
.bov-tema-btn:focus-visible{outline:2px solid #E7C56B;outline-offset:2px}

html.bov-claro .bov-tema{
  background:rgba(255,255,255,.92);
  border-color:rgba(185,140,34,.34);
  box-shadow:0 10px 24px rgba(120,90,20,.12),inset 0 1px 0 #fff;
}
html.bov-claro .bov-tema-btn{color:rgba(58,48,30,.66)}
html.bov-claro .bov-tema-btn:hover{color:#3A3020}
html.bov-claro .bov-tema-btn[aria-pressed="true"]{color:#140F05}
html.bov-claro .bov-tema-btn:focus-visible{outline-color:#B98C22}

/* En pantallas angostas no cabe al lado de la ruta: va arriba, en el flujo. */
@media (max-width:640px){
  .bov-tema{position:relative;top:auto;right:auto;margin:0 0 16px}
  .bov-tema-btn{min-width:100px;min-height:40px;font-size:12.5px}
}

/* ============================================================ tema claro */
html.bov-claro .bov{
  --texto:#2E2618;
  --texto-suave:rgba(58,48,30,.68);
  --linea-oro:rgba(185,140,34,.28);
  --carbon:#FFFFFF;
  --carbon-2:#FFFFFF;
  --carbon-3:#FFFDF8;
  background:
    radial-gradient(70% 42% at 18% 0%, rgba(235,196,99,.20) 0%, transparent 62%),
    radial-gradient(60% 38% at 92% 12%, rgba(18,169,220,.07) 0%, transparent 60%),
    linear-gradient(180deg, #FFF9EC 0%, #FFFFFF 30%, #FBF8F1 100%) fixed;
  color:var(--texto);
}

/* Cabecera: igual que en las demás páginas claras (page-solid de tienda.css). */
html.bov-claro .bov .site-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-sm);
}
html.bov-claro .bov .site-header .brand-logo-light{display:none}
html.bov-claro .bov .site-header .brand-logo-dark{display:block}
html.bov-claro .bov .site-header .nav-link{color:var(--body)}
html.bov-claro .bov .site-header .nav-link:hover{color:var(--sky-600)}
html.bov-claro .bov .site-header .nav-link.is-active{color:var(--ink)}
html.bov-claro .bov .site-header .phone-link{color:var(--ink)}
html.bov-claro .bov .site-header .phone-link .ico{color:var(--sky-600)}
html.bov-claro .bov .site-header .burger{border-color:var(--line)}
html.bov-claro .bov .site-header .burger span{background:var(--ink)}

/* ---------------------------------------------------------- encabezado */
html.bov-claro .bov .shop-crumbs,
html.bov-claro .bov .shop-crumbs a{color:rgba(58,48,30,.55)}
html.bov-claro .bov .shop-crumbs a:hover{color:#8A6A1A}
html.bov-claro .bov .bov-head .eyebrow{color:#A27616}
/* El mismo cromo dorado, con las luces bajadas para que se lea sobre blanco. */
html.bov-claro .bov .bov-head h1{
  background-image:linear-gradient(180deg,
    #5C4512 0%, #9C7A28 20%, #C9A03A 36%,
    #8A6A1A 50%, #5C4512 51.5%,
    #A8822A 64%, #D2AE52 82%, #7A5F1E 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 10px 22px rgba(120,90,20,.16));
}
html.bov-claro .bov .bov-sellos li{
  background:linear-gradient(120deg,rgba(235,196,99,.16),rgba(235,196,99,.04));
  box-shadow:0 6px 16px rgba(120,90,20,.06);
}
html.bov-claro .bov .bov-sellos strong{
  background-image:linear-gradient(180deg,#B98C22,#6E5416);
}
html.bov-claro .bov .bov-sellos span{color:rgba(58,48,30,.55)}

/* ------------------------------------------------------------ buscador */
/* La etiqueta que envuelve al campo es rectangular: sobre blanco se notaba
   como una caja detrás del campo redondo. Queda transparente. */
html.bov-claro .bov .shop-search{background:transparent;box-shadow:none}
html.bov-claro .bov .shop-search input{
  background:#FFFFFF;
  box-shadow:0 8px 22px rgba(120,90,20,.07);
}
html.bov-claro .bov .shop-search input::placeholder{color:rgba(58,48,30,.45)}
html.bov-claro .bov .shop-search svg{color:#B98C22}

/* ---------------------------------------------------------------- menú */
html.bov-claro .bov .catnav{box-shadow:0 10px 26px rgba(120,90,20,.07)}
html.bov-claro .bov .catnav-link{color:rgba(58,48,30,.78)}
html.bov-claro .bov .catnav-link:hover,
html.bov-claro .bov .catnav-link:focus-visible{background:rgba(235,196,99,.12);color:#7A5F1E}
html.bov-claro .bov .catnav-link.is-on{background:rgba(235,196,99,.2);color:#5C4512}
html.bov-claro .bov .catnav-link .n{color:rgba(58,48,30,.45)}
html.bov-claro .bov .catnav-flyout .catnav-flyout .catnav-link{color:rgba(58,48,30,.6)}

/* ------------------------------------------------------------ tarjetas */
html.bov-claro .bov .p-card{
  background:linear-gradient(168deg,#FFFFFF 0%,#FFFCF5 100%);
  box-shadow:0 12px 30px rgba(120,90,20,.08);
}
html.bov-claro .bov .p-card:hover{
  border-color:rgba(201,160,58,.7);
  box-shadow:
    0 0 0 1px rgba(235,196,99,.35),
    0 0 22px rgba(235,196,99,.14),
    0 22px 46px rgba(120,90,20,.16);
}
html.bov-claro .bov .p-desc{color:rgba(58,48,30,.62)}
html.bov-claro .bov .p-price{
  background-image:linear-gradient(180deg,#9C7A28 0%,#7A5F1E 55%,#5C4512 100%);
}
html.bov-claro .bov .p-price small{
  color:rgba(58,48,30,.5);
  -webkit-text-fill-color:rgba(58,48,30,.5);
}
html.bov-claro .bov .p-tag{
  background:rgba(255,255,255,.92);
  color:#7A5F1E;
  border-color:rgba(185,140,34,.35);
}
html.bov-claro .bov .p-media{background:#FFFFFF}
html.bov-claro .bov .p-add{box-shadow:0 10px 22px rgba(184,139,34,.28)}
html.bov-claro .bov .p-add[disabled]{
  background:rgba(235,196,99,.14);
  color:rgba(58,48,30,.4);
  box-shadow:none;
}
html.bov-claro .bov .p-card.is-soldout h3,
html.bov-claro .bov .p-card.is-soldout .p-price{
  color:rgba(58,48,30,.4);
  -webkit-text-fill-color:rgba(58,48,30,.4);
}

/* Sello "Precio con instalación incluida". */
html.bov-claro .bov .p-inst{
  background:linear-gradient(120deg,rgba(235,196,99,.16),rgba(235,196,99,.04));
  color:#6E5416;
}

/* ---------------------------------------------------------- paginación */
html.bov-claro .bov .pg-num,
html.bov-claro .bov .pg-arrow{color:rgba(58,48,30,.7)}
html.bov-claro .bov .pg-num:hover,
html.bov-claro .bov .pg-arrow:hover:not([disabled]){color:#7A5F1E}
html.bov-claro .bov .pg-gap{color:rgba(58,48,30,.4)}

@media (prefers-reduced-motion:reduce){
  .bov-tema-pista,.bov-tema-btn{transition:none}
}