/* Construmateriales - modo oscuro de la tienda (v47). Se enciende con <html data-modo="oscuro">; lo pone el servidor
   (cookie cm_modo) o assets/modo.js. Los colores --osc-* se cambian en /staff/apariencia (grupo «Modo oscuro»). */
:root{
  --osc-fondo:#0f141b; --osc-superficie:#1a212c; --osc-texto:#e6ebf2; --osc-texto2:#a3adbb; --osc-lineas:#2e3846;
  --osc-primario:#5b8ff0; --osc-primario-cl:#1c2a44; --osc-verde:#2fa266; --osc-cab-fondo:#151b24; --osc-cab-texto:#e6ebf2;
  --osc-marca:#6f9df2; --osc-foto:#f1f3f6;
}
:root[data-modo=oscuro]{
  color-scheme:dark;
  --tinta-fija:#16202e; --inverso:#2a3546;
  --fondo:var(--osc-fondo); --superficie:var(--osc-superficie); --blanco:var(--osc-superficie);
  --tinta:var(--osc-texto); --gris:var(--osc-texto2); --linea:var(--osc-lineas);
  --azul:var(--osc-primario); --azul-cl:var(--osc-primario-cl); --verde:var(--osc-verde);
  --sombra:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.32);
  --cab-fondo:var(--osc-cab-fondo); --cab-texto:var(--osc-cab-texto); --marca-a:var(--osc-marca); --marca-b:var(--osc-cab-texto);
  --busca:var(--osc-primario); --cats-fondo:var(--osc-superficie);
  --obra-fondo:#0a0e14; --obra-texto:#e6ebf2;
  --btn-pri-texto:var(--tinta-fija); --btn-wp-fondo:var(--osc-verde); --agr-color:var(--osc-primario);
  --tarjeta-fondo:var(--osc-superficie); --tarjeta-borde:var(--osc-lineas); --tarjeta-hover:var(--osc-primario);
  --foto-fondo:var(--osc-foto); --precio-color:var(--osc-texto); --migas-color:var(--osc-texto2);
  --anuncio-fondo:var(--osc-superficie); --anuncio-borde:#5c4a17; --anuncio-titulo:var(--osc-texto);
  --patro-fondo:#3b3014; --patro-texto:#f5cf6a;
  --pie-fondo:var(--osc-superficie); --pie-texto:var(--osc-texto2); --pie-enlace:var(--osc-texto); --pie-titulos:var(--osc-texto);
}
/* ---- interruptor del modo oscuro (tienda y panel): estilos interruptor | boton | texto; iconos luna | bombilla | contraste ---- */
.modo{--modo-ico-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 2.2v2.3M12 19.5v2.3M4.9 4.9l1.6 1.6M17.5 17.5l1.6 1.6M2.2 12h2.3M19.5 12h2.3M4.9 19.1l1.6-1.6M17.5 6.5l1.6-1.6'/%3E%3C/svg%3E");--modo-ico-oscuro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.6 14.7A8.7 8.7 0 0 1 9.3 3.4a8.8 8.8 0 1 0 11.3 11.3z'/%3E%3Cpath d='M17.2 3.6l.5 1.3 1.3.5-1.3.5-.5 1.3-.5-1.3-1.3-.5 1.3-.5z'/%3E%3C/svg%3E");--modo-sol:#f5a000;--modo-luna:#ffd772;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 2px;border:0;background:none;color:inherit;font:inherit;font-size:.84rem;font-weight:600;line-height:1.1;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.modo[data-icono=bombilla]{--modo-ico-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a6.4 6.4 0 0 0-3.9 11.5c.7.6 1.1 1.3 1.1 2.1v.4h5.6v-.4c0-.8.4-1.5 1.1-2.1A6.4 6.4 0 0 0 12 2.5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9.6 19.4h4.8M10.6 22h2.8'/%3E%3C/svg%3E");--modo-ico-oscuro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3.3a5.6 5.6 0 0 0-3.4 10.1c.7.6 1.2 1.4 1.2 2.3v.6h4.4v-.6c0-.9.5-1.7 1.2-2.3A5.6 5.6 0 0 0 12 3.3zM9.6 19.4h4.8M10.6 22h2.8'/%3E%3C/svg%3E");--modo-luna:#ffd772}
.modo[data-icono=contraste]{--modo-ico-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 1 0 17.2z'/%3E%3C/svg%3E");--modo-ico-oscuro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 1 0 17.2z'/%3E%3C/svg%3E");--modo-sol:currentColor;--modo-luna:#e6ebf2}
.modo:focus-visible{outline:3px solid var(--ambar);outline-offset:2px;border-radius:99px}
.modo__i{grid-area:1/1;width:15px;height:15px;background:currentColor;-webkit-mask:var(--modo-ico-claro) center/contain no-repeat;mask:var(--modo-ico-claro) center/contain no-repeat;transition:opacity .25s ease,transform .45s cubic-bezier(.34,1.4,.64,1)}
.modo__i--claro{color:var(--modo-sol)}
.modo__i--oscuro{color:var(--modo-luna);-webkit-mask-image:var(--modo-ico-oscuro);mask-image:var(--modo-ico-oscuro);opacity:0;transform:rotate(-100deg) scale(.4)}
.modo__ico{display:grid;place-items:center}
.modo--interruptor .modo__ico,.modo--boton .modo__pista,.modo--texto .modo__pista,.modo--boton .modo__t{display:none}
/* interruptor: pista con perilla que se desliza; de noche aparecen estrellas */
.modo__pista{position:relative;flex:none;width:50px;height:28px;border-radius:99px;background:rgba(22,32,46,.16);box-shadow:inset 0 0 0 1px rgba(22,32,46,.1);transition:background-color .35s ease;overflow:hidden}
.modo__pista::before{content:"";position:absolute;inset:0;background:radial-gradient(1.2px 1.2px at 9px 9px,#fff 98%,transparent),radial-gradient(1px 1px at 15px 18px,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 21px 8px,#fff 98%,transparent),radial-gradient(1px 1px at 11px 21px,#fff 98%,transparent);opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .5s ease}
.modo__perilla{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);display:grid;place-items:center;transition:transform .45s cubic-bezier(.34,1.4,.64,1),background-color .35s ease}
.modo:hover .modo__pista{background:rgba(22,32,46,.24)}
/* boton redondo */
.modo--boton{justify-content:center;width:42px;height:42px;min-height:0;padding:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(22,32,46,.22);transition:background-color .2s ease,box-shadow .2s ease}
.modo--boton,.modo--texto{--modo-sol:currentColor;--modo-luna:currentColor}
.modo--boton .modo__i,.modo--texto .modo__i{width:20px;height:20px}
.modo--boton:hover,.modo--texto:hover{background:rgba(22,32,46,.08)}
/* boton con texto */
.modo--texto{min-height:38px;padding:0 13px 0 10px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(22,32,46,.22)}
.modo__t2,.modo--texto .modo__t2{display:none}
/* encendido */
:root[data-modo=oscuro] .modo__pista{background:#2c3a55;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-modo=oscuro] .modo:hover .modo__pista{background:#34446a}
:root[data-modo=oscuro] .modo__pista::before{opacity:.9;transform:none}
:root[data-modo=oscuro] .modo__perilla{transform:translateX(22px);background:#121822}
:root[data-modo=oscuro] .modo__i--claro{opacity:0;transform:rotate(100deg) scale(.4)}
:root[data-modo=oscuro] .modo__i--oscuro{opacity:1;transform:none}
:root[data-modo=oscuro] .modo[data-icono=contraste] .modo__i--oscuro{transform:rotate(180deg)}
:root[data-modo=oscuro] .modo--boton,:root[data-modo=oscuro] .modo--texto{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
:root[data-modo=oscuro] .modo--boton:hover,:root[data-modo=oscuro] .modo--texto:hover{background:rgba(255,255,255,.08)}
:root[data-modo=oscuro] .modo--texto .modo__t1{display:none}
:root[data-modo=oscuro] .modo--texto .modo__t2{display:inline}
@media (prefers-reduced-motion:reduce){.modo__perilla,.modo__i,.modo__pista::before{transition-duration:.15s;transition-timing-function:ease}.modo__i--oscuro,:root[data-modo=oscuro] .modo__i--claro{transform:none}}
/* cambio de modo: la pagina nueva aparece en un circulo que crece desde el boton (View Transitions; sin soporte, cambia al instante) */
:root.modo-vt::view-transition-old(root),:root.modo-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.modo-vt::view-transition-new(root){z-index:2}
/* ---- reglas con colores fijos (generadas de sitio.css) ---- */
:root[data-modo=oscuro] .saltar{color:var(--tinta-fija)}
:root[data-modo=oscuro] .franja{background:repeating-linear-gradient(-45deg,var(--ambar) 0 14px,var(--inverso) 14px 28px)}
:root[data-modo=oscuro] .obra__tag{color:var(--tinta-fija)}
:root[data-modo=oscuro] .sug__c{background:#282313}
:root[data-modo=oscuro] .btn--pri{background:var(--btn-pri-fondo);color:var(--btn-pri-texto)}
:root[data-modo=oscuro] .btn--pri:hover{background:var(--btn-pri-hover)}
:root[data-modo=oscuro] .btn--wp{background:var(--btn-wp-fondo);color:#fff}
:root[data-modo=oscuro] .btn--wp:hover{background:var(--btn-wp-fondo)}
:root[data-modo=oscuro] .deptos__i{color:var(--tinta-fija)}
:root[data-modo=oscuro] .tarjeta__c{border-top:1px solid var(--linea)}
:root[data-modo=oscuro] .estado--si{color:var(--verde)}
:root[data-modo=oscuro] .estado--no{color:#dfab64}
:root[data-modo=oscuro] .migas li+li::before{color:#989faa}
:root[data-modo=oscuro] .chip{border-radius:99px;border:1px solid var(--linea);background:var(--superficie)}
:root[data-modo=oscuro] a.chip:hover{border-color:var(--azul)}
:root[data-modo=oscuro] .chip--act{background:var(--inverso);border-color:var(--inverso)}
:root[data-modo=oscuro] .aviso{background:#282313}
:root[data-modo=oscuro] .chip__n{background:var(--fondo)}
:root[data-modo=oscuro] .chip--act .chip__n{background:rgba(255,255,255,0.07)}
:root[data-modo=oscuro] .acc__n{box-shadow:0 0 0 2px #1b212a;color:var(--tinta-fija)}
:root[data-modo=oscuro] .agr__b{color:var(--agr-color)}
:root[data-modo=oscuro] .agr__b:hover{color:#fff}
:root[data-modo=oscuro] .agr__b--ok,:root[data-modo=oscuro] .agr__b--ok:hover{color:#fff}
:root[data-modo=oscuro] .cant{border:1px solid #434a55;border-radius:var(--radio)}
:root[data-modo=oscuro] .cant button:disabled{color:#989faa}
:root[data-modo=oscuro] .btn--wp-linea{background:var(--superficie);color:var(--verde)}
:root[data-modo=oscuro] .btn--wp-linea:hover{background:#202630}
:root[data-modo=oscuro] .aviso-flot{background:var(--inverso)}
:root[data-modo=oscuro] .aviso-flot--mal{background:#7a1414}
:root[data-modo=oscuro] .campo input,:root[data-modo=oscuro] .campo select,:root[data-modo=oscuro] .campo textarea,:root[data-modo=oscuro] .doc select,:root[data-modo=oscuro] .doc input{border:1px solid #434a55}
:root[data-modo=oscuro] .alerta{background:#282313;border:1px solid #f1d98a;border-left:5px solid var(--ambar);border-radius:8px}
:root[data-modo=oscuro] .alerta--mal{background:#202630;border-color:#614141;color:#ffc3bb;border-left-color:#c62828}
:root[data-modo=oscuro] .alerta--bien{background:#202630;border-color:#36513f;color:#a5e3b9;border-left-color:var(--verde)}
:root[data-modo=oscuro] .linea{background:var(--superficie)}
:root[data-modo=oscuro] .linea--no{background:#1c222c}
:root[data-modo=oscuro] .texto-legal p,:root[data-modo=oscuro] .texto-legal li{color:#c3cbd6}
:root[data-modo=oscuro] .patro{color:var(--patro-texto)}
:root[data-modo=oscuro] .anuncio__c{border-top:1px solid #494024}
:root[data-modo=oscuro] .anuncio__d li::before,:root[data-modo=oscuro] .tarjeta__d li::before{color:#6ac88d}
:root[data-modo=oscuro] .anuncios--1 .anuncio--estandar .anuncio__c{border-left:1px solid #494024;border-top:0}
:root[data-modo=oscuro] .anuncio--cintillo .anuncio__c{border-left:1px solid #494024;border-top:0}
:root[data-modo=oscuro] .anuncio--grande .anuncio__c{border-left:1px solid #494024;border-top:0}
:root[data-modo=oscuro] .anuncio--vitrina .anuncio__c{border:0}
:root[data-modo=oscuro] .anuncio--dividido .anuncio__c{border:0}
:root[data-modo=oscuro] .anuncio--oscuro .patro{color:var(--tinta-fija)}
:root[data-modo=oscuro] .anuncio--oscuro .agr__b{color:var(--tinta-fija)}
:root[data-modo=oscuro] .anuncio--oscuro .btn--pri{color:var(--tinta-fija);background:var(--ambar)}
:root[data-modo=oscuro] .anuncio--oscuro .tx-rojo{color:#ffa3a3}
:root[data-modo=oscuro] .anuncio--oscuro .tx-verde{color:#8fe3b0}
:root[data-modo=oscuro] .anuncio--oscuro .tx-naranja{color:#ffc47d}
:root[data-modo=oscuro] .anuncio--oscuro .tx-resaltado{color:var(--tinta-fija);background:var(--ambar)}
:root[data-modo=oscuro] .tx-rojo{color:#fd887d}
:root[data-modo=oscuro] .tx-verde{color:#6ac88d}
:root[data-modo=oscuro] .tx-naranja{color:#f4773b}
:root[data-modo=oscuro] .tx-resaltado{background:#2c270a}
@media (max-width:760px){:root[data-modo=oscuro] .anuncios--1 .anuncio--estandar .anuncio__c,:root[data-modo=oscuro] .anuncio--cintillo .anuncio__c,:root[data-modo=oscuro] .anuncio--grande .anuncio__c{border-top:1px solid #494024;border-left:0}}
:root[data-modo=oscuro] .push-inv__d{color:#afb6c1}
:root[data-modo=oscuro] .tarjeta__puntos{background:rgba(26,33,44,.88)}
:root[data-modo=oscuro] .tarjeta__puntos i{background-color:#2f3640}
:root[data-modo=oscuro] .tarjeta__flecha{background:rgba(26,33,44,.95)}
:root[data-modo=oscuro] .tarjeta__flecha:hover{background:#1b212a}
:root[data-modo=oscuro] .btn--sec{background:var(--superficie);color:var(--tinta)}
:root[data-modo=oscuro] .opcion span{border:1px solid #434a55}
:root[data-modo=oscuro] .dato-fijo{border:1px dashed #434a55;border-radius:8px}
:root[data-modo=oscuro] .legal__fecha{color:var(--gris,#a5acb7)}
:root[data-modo=oscuro] .legal__indice{background:var(--azul-cl,#1f252f)}
:root[data-modo=oscuro] .legal__tabla th,:root[data-modo=oscuro] .legal__tabla td{border:1px solid #3c434d}
:root[data-modo=oscuro] .legal__tabla th{background:#1e242e}
:root[data-modo=oscuro] .legal__nota{background:#1d232c}
:root[data-modo=oscuro] .legal__otros{border-top:1px solid #3a414b}
:root[data-modo=oscuro] .cuenta__acepta{color:var(--gris,#a5acb7)}
:root[data-modo=oscuro] .g-aviso{background:#1e242d;border:1px solid #3a4352;color:#c3cbd6;border-radius:10px}
:root[data-modo=oscuro] .g-aviso__t{color:#bdd5fc}
:root[data-modo=oscuro] .g-cuenta{border-top:1px solid #3a414b}
:root[data-modo=oscuro] .completar{background:#1e242d}
:root[data-modo=oscuro] .mp__b{border:1.5px solid var(--linea);border-radius:999px;background:var(--superficie);color:var(--tinta)}
:root[data-modo=oscuro] .mp__b:hover{border-color:var(--gris)}
:root[data-modo=oscuro] .mp__b[data-mp-t="gusta"][aria-pressed="true"]{color:#fe7665;border-color:#61413f;background:#202630}
:root[data-modo=oscuro] .mp__b[data-mp-t="guardado"][aria-pressed="true"]{border-color:#3a4961;color:var(--azul);background:var(--azul-cl)}
:root[data-modo=oscuro] .mp__b[data-mp-t="sigue"][aria-pressed="true"]{color:#dfab64;border-color:#504529;background:#2a2311}
:root[data-modo=oscuro] .tarjeta__gusta{background:rgba(26,33,44,.92);color:var(--gris)}
:root[data-modo=oscuro] .tarjeta__gusta:hover{color:#fe7665}
:root[data-modo=oscuro] .tarjeta__gusta[aria-pressed="true"]{color:#fe7665}
:root[data-modo=oscuro] .mp-quitar{color:var(--gris)}
:root[data-modo=oscuro] .mp-quitar:hover{color:#fb988a}
:root[data-modo=oscuro] .compra__tag{background:#2a2311;color:#dfab64}
:root[data-modo=oscuro] .cab__promo--wp{background:rgba(26,33,44,.55)}
:root[data-modo=oscuro] .cab__promo--wp:hover{background:rgba(26,33,44,.8)}
:root[data-modo=oscuro] .cats__caja .cats__lista a{border-bottom-color:#383e49}
:root[data-modo=oscuro] .cab .acc__n{box-shadow:0 0 0 2px var(--cab-fondo);color:#fff}
:root[data-modo=oscuro] .atajo__b{background:var(--azul-cl);color:var(--azul)}
:root[data-modo=oscuro] .atajo__b:hover{background:var(--azul);color:#fff}
:root[data-modo=oscuro] .fila .tarjeta__c{border-top:1px solid #383e49}
@media (max-width:760px){:root[data-modo=oscuro] .cab__cajon a{border-bottom:1px solid #383e49}}
:root[data-modo=oscuro] .pronto{background:#2c240f;color:#dfab64}
:root[data-modo=oscuro] .co-op{background:var(--superficie)}
:root[data-modo=oscuro] .co-op:has(input:checked){background:var(--azul-cl)}
:root[data-modo=oscuro] .co-op--off{background:#1d242d}
:root[data-modo=oscuro] .co-wp{background:var(--superficie)}
:root[data-modo=oscuro] .co-wp:hover{background:#202630}
:root[data-modo=oscuro] .atajo__b--pronto{background:#2c240f;color:#dfab64}
:root[data-modo=oscuro] .seg__p::before{background:#232932}
:root[data-modo=oscuro] .seg__p::after{background:#232932}
:root[data-modo=oscuro] .seg__p--ok::before{background:var(--verde)}
:root[data-modo=oscuro] .seg__p--ok+.seg__p::after,:root[data-modo=oscuro] .seg__p--ok::after{background:var(--verde)}
:root[data-modo=oscuro] .seg__p--act::before{background:var(--azul)}
:root[data-modo=oscuro] .pedido__pago{border:1px dashed #554b2f;background:#1d232c;border-radius:var(--ml-radio)}
:root[data-modo=oscuro] .avatar{background:var(--azul)}
:root[data-modo=oscuro] .avatar--letras{background:linear-gradient(135deg,var(--azul),var(--azul-osc))}
:root[data-modo=oscuro] img.avatar{background:#202630}
:root[data-modo=oscuro] .tel-aviso{color:var(--gris)}
:root[data-modo=oscuro] .tel-aviso--ok{color:var(--verde)}
:root[data-modo=oscuro] .tel-aviso--mal{color:#fb988a}
:root[data-modo=oscuro] .vwa__msg{color:var(--gris)}
:root[data-modo=oscuro] .vwa__msg--mal{color:#fb988a}
:root[data-modo=oscuro] .lineas--caja .linea{background:transparent}
:root[data-modo=oscuro] .lineas--caja .linea--no{background:transparent}
:root[data-modo=oscuro] .mini{border:1px solid var(--linea);border-radius:var(--radio)}
:root[data-modo=oscuro] .mini:hover{border-color:#434a55}
:root[data-modo=oscuro] .mini__foto{background:var(--foto-fondo,#1b212a)}
:root[data-modo=oscuro] .mini__c{border-top:1px solid #383e49}
:root[data-modo=oscuro] .mini__patro{color:var(--patro-texto,#dfab64);background:var(--patro-fondo,#2c240f)}
/* ---- ajustes a mano (tienda) ---- */
/* el boton va al final de la segunda fila de la cabecera (en el telefono, junto a «Retira o recibe en») */
.cab__f2{grid-template-columns:minmax(0,190px) minmax(0,1fr) auto auto}
.cab__modo{color:var(--cab-texto);min-height:36px}
@media (max-width:900px){.cab__f2{grid-template-columns:minmax(0,170px) minmax(0,1fr) auto auto}}
@media (max-width:760px){.cab__f2{grid-template-columns:minmax(0,1fr) auto}.cab__modo{min-height:32px}.cab__modo.modo--interruptor .modo__t{font-size:.78rem}}