/* =============================================================================
   base.css — Fundamentos del shell de web/
   -----------------------------------------------------------------------------
   Utilidades transversales y ajustes de Bootstrap 5.3 al color corporativo.
   Solo debe entrar aquí lo que se usa en MÁS de una sección; lo de un componente
   va a componentes/, y lo de una sola vista, a vistas/.

   Orden de carga (lo monta App\Support\Estilos, ver allí la organización):
     bootstrap.min.css → fontawesome → custom-25.css (compartido con site-25)
     → base.css → layout.css → componentes/*.css → vistas/<vista>.css → sin-js.css
   Las variables corporativas (--ss-first-color) vienen de custom-25.css.
   ============================================================================= */

.muted { color:#6c757d; font-size:.9rem; }
/* Sustituto de una imagen que no ha cargado: su propio alt, legible (ver ui.js).
   Se pinta como el logo que reemplaza —centrado y contenido— para que la rejilla de marcas
   no se descuadre cuando falta un fichero. */
.img-alt-fallback {
    display:inline-flex; align-items:center; justify-content:center; max-width:100%;
    padding:.35rem .5rem; font-size:.8rem; line-height:1.2; text-align:center;
    color:#6c757d; overflow-wrap:anywhere;
}
/* Miniatura de producto (carrito, pedido, valorar). */
.prod-thumb { display:inline-block; width:48px; height:48px; border-radius:8px; background:#f1f3f5;
              overflow:hidden; flex:0 0 auto; vertical-align:middle; }
.prod-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.prod-thumb.sm { width:40px; height:40px; }
.prod-thumb.lg { width:64px; height:64px; }
.transporte-logo { max-height:26px; max-width:96px; object-fit:contain; vertical-align:middle; }
/* Botones corporativos (#c10049), todos redondeados (pill) para coherencia.

   SIN ANCHO MÍNIMO. custom-25.css (compartido con site-25, por eso se anula aquí y no allí)
   fija `main .btn { min-width:12rem }`, o sea 192px para CUALQUIER botón: la flecha de un
   botón partido se convertía en un segundo botón de 12rem, dos botones en fila no cabían en
   un móvil y cada vista lo iba parcheando por su cuenta. Ahora el ancho lo da el texto, con
   un relleno lateral de píldora (el .75rem de Bootstrap queda apretado con radio 50rem); lo
   de repartir la fila en móvil lo hace .ss-botonera.
   El relleno va por la variable --bs-btn-padding-x para no pisar a quien fija el suyo
   (btn-sm/lg, el split, .ss-control-pill o las utilidades px-*). */
main .btn { border-radius:50rem; min-width:0; }
main .btn:not(.btn-sm):not(.btn-lg) { --bs-btn-padding-x:1.25rem; }

/* ---------- BOTONERA ----------
   Fila de acciones de un formulario o de una pantalla (Volver / Continuar, Guardar / Cambiar
   email…), o el botón de envío suelto de un formulario. En escritorio cada botón mide lo que
   su texto; en móvil se estiran hasta llenar la fila, para cuadrar con los campos de encima,
   y si no caben bajan a la siguiente y también se estiran. La alineación en escritorio, con
   las utilidades de siempre (justify-content-between, -center…). */
.ss-botonera { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
@media (max-width:575.98px) {
    .ss-botonera > .btn { flex:1 1 auto; }
}

main .btn-danger { background-color:var(--ss-first-color); border-color:var(--ss-first-color); }
main .btn-danger:hover, main .btn-danger:focus, main .btn-danger:active { background-color:#a40040 !important; border-color:#a40040 !important; }
main .btn-outline-danger { color:var(--ss-first-color); border-color:var(--ss-first-color); }
main .btn-outline-danger:hover, main .btn-outline-danger:focus, main .btn-outline-danger:active { background-color:var(--ss-first-color) !important; border-color:var(--ss-first-color) !important; color:#fff !important; }
@media (max-width: 575.98px) {
    .tabla-cards thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    .tabla-cards tr { display:block; border:1px solid #e9ecef; border-radius:12px; padding:.35rem .85rem; margin-bottom:.75rem; background:#fff; }
    .tabla-cards td { display:flex; justify-content:space-between; align-items:center; gap:1rem; border:0 !important; padding:.32rem 0; text-align:right; }
    .tabla-cards td[data-label]::before { content:attr(data-label); font-weight:600; color:#6c757d; text-align:left; white-space:nowrap; }
    .tabla-cards td.celda-acciones { justify-content:flex-end; padding-top:.5rem; }
}
/* ---------- ENLACES DE CONTENIDO ----------
   En site-25 los enlaces de navegación (breadcrumb, listados de categorías de una
   marca, etc.) van en negro con `class="text-reset"`, no en el azul por defecto de
   Bootstrap. Aquí se aplica de forma global dentro de <main> para que no haya que
   acordarse en cada plantilla: los enlaces heredan el color del texto y solo se tiñen
   del color corporativo al pasar por encima.
   Se EXCLUYEN los que ya tienen color propio: botones, badges, alertas, paginación,
   utilidades text-* y los enlaces de tarjeta que cubren toda la tarjeta.

   OJO con la especificidad: la cadena de :not() la dispara mucho (cada :not(.clase) suma
   una clase), así que esta regla GANA a la de cualquier componente escrita con una sola
   clase. Por eso hay que excluir explícitamente los enlaces que un componente ya pinta
   por su cuenta — .ssh-net son los circulitos de redes del botón compartir, que al pasar
   por encima deben quedar en BLANCO sobre el color de cada marca (X, Facebook, WhatsApp),
   no en corporativo; y .ss-cuenta-menu__item, el menú lateral de la cuenta, que lleva su
   propio color de activo y de hover (vistas/cuenta/_marco.css), y .ss-cuenta-acceso, las
   tarjetas-enlace del resumen de la cuenta, que no se tiñen enteras al pasar por encima.
   Si añades otro componente con enlaces propios, exclúyelo aquí. */
:is(main, .modal, .offcanvas) a:not(.btn):not(.badge):not(.page-link):not(.stretched-link):not(.alert-link):not([class*="text-"]):not(.dropdown-item):not(.ssh-net):not(.ss-cuenta-menu__item):not(.ss-cuenta-acceso) {
    color: inherit;
}
:is(main, .modal, .offcanvas) a:not(.btn):not(.badge):not(.page-link):not(.stretched-link):not(.alert-link):not([class*="text-"]):not(.dropdown-item):not(.ssh-net):not(.ss-cuenta-menu__item):not(.ss-cuenta-acceso):hover {
    color: var(--ss-first-color);
}
main .breadcrumb a { color: inherit; text-decoration: none; }
main .breadcrumb a:hover { color: var(--ss-first-color); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   LISTAS DE DESEOS: las pestañas y el "+ Nueva lista" en corporativo.

   Bootstrap pinta .nav-pills y .btn-link con su azul --bs-primary, que aquí
   no pinta nada: el nombre de una lista es contenido de la marca, no un
   enlace de sistema. Se ajusta la variable de los pills en vez de machacar
   background/color a mano, que es lo que Bootstrap 5.3 espera y así el
   estado activo, el hover y el foco salen coherentes solos.
   --------------------------------------------------------------------------- */
main .nav-pills {
    --bs-nav-pills-link-active-bg: var(--ss-first-color);
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--ss-first-color);
}

/* El "+ Nueva lista" del panel del corazón y el de la portada de listas. */
:is(main, .offcanvas) .btn-link {
    color: var(--ss-first-color);
    text-decoration: none;
}
:is(main, .offcanvas) .btn-link:hover,
:is(main, .offcanvas) .btn-link:focus {
    color: var(--ss-first-color);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   TEMA: BOOTSTRAP SIN AZUL
   Bootstrap 5.3 viene compilado con su azul (#0d6efd) en sitios que no pasan por
   ninguna variable nuestra: el foco de los campos, las casillas marcadas, el
   fogonazo al pulsar una opción de un desplegable, el borde y el distintivo
   "primary" del método de envío elegido, el acordeón abierto… Cada uno suelto
   parece un detalle; juntos hacen que la web no parezca de la marca.
   Aquí se recolocan TODOS en el corporativo, de una vez y para toda la web
   (no solo <main>: el menú de la cuenta de la cabecera también es un desplegable).
   --------------------------------------------------------------------------- */
:root {
    /* Lo que Bootstrap deriva de --bs-primary: .border-primary, .text-bg-primary, .bg-primary,
       .link-primary, .alert-primary, el acordeón abierto… Los tres matices son los que
       calcularía Bootstrap a partir de #c10049 (shade 60%, tint 80% y tint 60%). */
    --bs-primary: #c10049;
    --bs-primary-rgb: 193, 0, 73;
    --bs-primary-text-emphasis: #4d001d;
    --bs-primary-bg-subtle: #f3ccdb;
    --bs-primary-border-subtle: #e699b6;
    --bs-focus-ring-color: rgba(193, 0, 73, .2);

    /* El velo de detrás de los paneles laterales y del buscador abierto: oscurece un poco y
       desenfoca lo de detrás. Uno solo para todo, para que se lean como la misma pieza. */
    --ss-velo-bg: rgba(15, 17, 20, .3);
    --ss-velo-blur: 4px;
}

/* Foco de los campos de texto y de los <select>: borde rosado y halo corporativo suave. */
.form-control:focus,
.form-select:focus {
    border-color: #e38cad;
    box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18);
}

/* Casillas y radios marcados (el panel "Guardar en…", el consentimiento del registro y del
   pie, los radios del checkout…). Antes solo estaban en corporativo dentro de los paneles. */
.form-check-input:checked {
    background-color: var(--ss-first-color);
    border-color: var(--ss-first-color);
}
.form-check-input:focus {
    border-color: #e38cad;
    box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18);
}
/* El círculo de un interruptor (form-switch) apagado y con el foco: Bootstrap lo pinta con un
   SVG azul. Solo apagado: encendido el círculo es blanco y así tiene que seguir. */
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e38cad'/%3e%3c/svg%3e");
}

/* DESPLEGABLES (menú de la cuenta, compartir lista, orden del catálogo, categorías de una
   familia). Pasar por encima: gris claro de la casa; pulsar o la opción elegida (.active):
   tinte corporativo. Esquinas, sombra y opciones redondeadas a juego con las píldoras. */
.dropdown-menu {
    --bs-dropdown-padding-x: .375rem;
    --bs-dropdown-border-color: rgba(0, 0, 0, .08);
    --bs-dropdown-border-radius: .75rem;
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: #f4f4f6;
    --bs-dropdown-link-active-color: var(--ss-first-color);
    --bs-dropdown-link-active-bg: rgba(193, 0, 73, .08);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}
.dropdown-item { border-radius: .5rem; }

/* Acordeón (gastos de envío). Abierto, Bootstrap lo pinta de azul claro con texto azul y una
   flecha SVG azul. Aquí: el mismo gris claro que el hover de los desplegables con el texto en
   corporativo (el rosa del --bs-primary-bg-subtle resultaba chillón para una franja entera), y
   la misma flecha oscura que cerrado, que ya va girada. */
.accordion {
    --bs-accordion-active-bg: #f4f4f6;
    --bs-accordion-active-color: var(--ss-first-color);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18);
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

/* Halos del foco con teclado: la X de cerrar de paneles y modales, la paginación y los enlaces
   de menú (.nav-link, que Bootstrap trae con el azul escrito a mano, sin variable). */
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18); }
.pagination { --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18); }
.nav-link:focus-visible { box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18); }

/* ---------- TEXTO CON EL DEGRADADO CORPORATIVO ----------
   El mismo carmín → azul de .degradado-bg (custom-25.css), pero aplicado a la TIPOGRAFÍA y a
   los iconos, para títulos cortos: los rótulos del cuestionario de las valoraciones, por
   ejemplo, que en el ASP iban con un azul plano.

   Se hace con background-clip:text y no con el .degradado-txt de custom-25.css porque aquel
   tira de mix-blend-mode sobre un fondo BLANCO: dentro de una tarjeta gris se le ve la caja.
   Aquí el degradado va sobre el propio trazo de la letra y funciona sobre cualquier fondo.

   El color sólido de la primera línea es la red de seguridad: si el navegador no soporta
   background-clip:text, el texto se ve en carmín corporativo en vez de desaparecer. */
.ss-txt-degradado {
    color: var(--ss-first-color);
    background-image: linear-gradient(90deg, var(--ss-first-color), var(--ss-second-color));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ss-txt-degradado {
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* ---------- MAQUETACIÓN COMPARTIDA ----------
   Retoques pequeños que se repiten en varias vistas. Antes iban en style="" en cada
   plantilla; aquí se cambian una vez para todas. */

/* Ancho de lectura: el <main> del layout estrecho (checkout, cuenta) y el cuerpo de una
   noticia. Más ancho, las líneas de texto se hacen incómodas de seguir. */
.ss-ancho-lectura { max-width:960px; }

/* Tarjeta de formulario de la cuenta (cambiar clave, cambiar email, confirmar…). */
.ss-tarjeta-form { max-width:520px; }
/* Tarjeta de resultado del proceso de compra (pedido hecho, pago fallido, Lendismart). */
.ss-tarjeta-resultado { max-width:560px; }
/* Párrafo explicativo centrado de las pantallas de financiación. */
.ss-texto-estrecho { max-width:540px; }

/* Columna pegajosa (sticky-top) con aire por arriba: la caja de compra de la ficha y la
   de datos de contacto de /tiendas. Sin él, quedaba pegada al borde de la ventana. */
.ss-sticky-aire { top:1rem; }

/* Foto de fondo que sale de la BD (la URL va en el style="background-image" del marcado,
   que es contenido; el recorte, aquí). */
.ss-bg-cover  { background-size:cover; }
.ss-bg-centro { background-position:center; }

/* Área de comentarios de los formularios de contacto. Con form-floating Bootstrap le fija la
   altura de un input (.form-floating > .form-control, 0,2,0): el selector lleva
   textarea.form-control para ganarle. */
textarea.form-control.ss-textarea-alta { height:120px; }

/* ---------- CAMPO TRAMPA (honeypot) ----------
   Fuera de la vista pero NO display:none: algunos bots se saltan los campos ocultos así.
   Lo usan el antispam de los formularios (App\Support\Antispam) y el de Mailchimp del pie. */
.ss-trampa {
    position:absolute !important; left:-9999px !important; top:-9999px !important;
    width:1px; height:1px; overflow:hidden;
}

/* Primer slide de la portada (<picture>, 07-10-2026): redondeado solo desde sm, como los dos <img> de antes (rounded-4). */
@media (min-width: 576px) { .ss-slide-pic img { border-radius: var(--bs-border-radius-xl); } }