/* ===== Color de marca =====
   Un solo sitio donde cambiar el color de toda la web. Bootstrap trae el azul
   por defecto; aqui se sustituye por verde en los componentes que lo usan. */

:root {
  --marca: #16a34a;
  --marca-hover: #15803d;
  --marca-clara: #dcfce7;
  --marca-texto: #14532d;

  /* ---- Color de la barra de arriba ----
     CAMBIALO AQUI y cambia en toda la web. El borde conviene un par de tonos
     mas oscuro que el fondo, para que se separe del contenido.

     Si lo cambias, comprueba dos cosas: que el texto del menu se siga leyendo
     bien encima, y que no sea del mismo color que los botones -si lo fuera,
     los botones dejarian de destacar, que es su unico trabajo-. */
  --cabecera: #cfe4f7;
  --cabecera-borde: #a9cbe9;
}

/* En oscuro hace falta un verde mas claro para que se lea sobre el fondo */
[data-bs-theme="dark"] {
  --marca: #22c55e;
  --marca-hover: #16a34a;
  --marca-clara: #14532d;
  --marca-texto: #bbf7d0;

  /* El mismo azul claro deslumbraria sobre el fondo oscuro: aqui va apagado */
  --cabecera: #22334a;
  --cabecera-borde: #34496a;
}

.btn-primary {
  --bs-btn-bg: var(--marca);
  --bs-btn-border-color: var(--marca);
  --bs-btn-hover-bg: var(--marca-hover);
  --bs-btn-hover-border-color: var(--marca-hover);
  --bs-btn-active-bg: var(--marca-hover);
  --bs-btn-active-border-color: var(--marca-hover);
  --bs-btn-disabled-bg: var(--marca);
  --bs-btn-disabled-border-color: var(--marca);
}

.btn-outline-primary {
  --bs-btn-color: var(--marca);
  --bs-btn-border-color: var(--marca);
  --bs-btn-hover-bg: var(--marca);
  --bs-btn-hover-border-color: var(--marca);
  --bs-btn-active-bg: var(--marca);
  --bs-btn-active-border-color: var(--marca);
  --bs-btn-disabled-color: var(--marca);
  --bs-btn-disabled-border-color: var(--marca);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--marca);
}

.pagination {
  --bs-pagination-color: var(--marca);
  --bs-pagination-hover-color: var(--marca-hover);
  --bs-pagination-focus-color: var(--marca-hover);
  --bs-pagination-active-bg: var(--marca);
  --bs-pagination-active-border-color: var(--marca);
}

.text-primary { color: var(--marca) !important; }
.bg-primary { background-color: var(--marca) !important; }
.border-primary { border-color: var(--marca) !important; }
.badge.bg-primary { background-color: var(--marca) !important; }

a, .link-primary { color: var(--marca); }
a:hover, .link-primary:hover { color: var(--marca-hover); }

/* Enlaces que no deben ir en verde: los del menu y los del pie */
.navbar a, .offcanvas a, footer a { color: inherit; }

.form-check-input:checked {
  background-color: var(--marca);
  border-color: var(--marca);
}

.form-range::-webkit-slider-thumb { background-color: var(--marca); }
.form-range::-moz-range-thumb { background-color: var(--marca); }

.form-control:focus, .form-select:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .25);
}

/* ===== Logo =====
   Se adapta al tamaño del texto que tenga al lado, asi sirve igual en el menu
   lateral, en la barra de movil y en el titulo grande de la portada. */
.logo-simbolo {
  height: 1.15em;
  width: auto;
  flex-shrink: 0;
  vertical-align: -.15em;
}

/* En el titulo de la portada, algo mas grande que el texto */
h1 .logo-simbolo { height: 1.05em; }

/* Los iconos de interfaz y de categoria toman el tamaño del texto que los rodea */
.icono,
.icono-categoria {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  flex-shrink: 0;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ===== Paginas legales ===== */

/* Ancho de linea comodo de leer para textos largos */
.legal {
  max-width: 760px;
  margin-inline: auto;
}

.legal h2 {
  margin-top: 1.75rem;
}

/* ===== Grafica de precios ===== */

.grafica-precios {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}

/* ===== Filtros ===== */

/* Circulito con el color real, junto al nombre del color */
.muestra-color {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}

/* ===== Tarjetas de categoria (portada) ===== */

.categoria {
  color: inherit;
  transition: border-color .15s, transform .15s;
}

.categoria:hover {
  border-color: var(--marca);
  transform: translateY(-2px);
}

/* Nombres largos como "Componentes PC" se partian por la mitad de la palabra
   ("Componente / s PC"). Con esto el texto se ajusta en vez de romperse. */
.categoria .fw-semibold {
  font-size: .95rem;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  line-height: 1.25;
}

/* ===== Filas de resultados ===== */

.producto-foto {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* ===== El recuadro de la foto =====

   Va siempre, haya foto o no. Asi la fila mide lo mismo en los dos casos y la
   lista no baila mientras cargan las imagenes.

   Cuando no hay foto -o no carga- se enseña un icono gris en su lugar. Un hueco
   vacio parece que la web esta rota; un recuadro neutro parece un producto sin
   fotografiar, que es lo que es. */
.foto-marco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* La foto va en su sitio normal, con el recuadro gris detras.

   OJO: es al reves de lo que parece natural -poner la foto encima en posicion
   absoluta-, y hay un motivo. Con `position: absolute` el navegador deja de
   descargar las imagenes marcadas con loading="lazy": nunca entran en el
   viewport a sus ojos. El resultado era una web SIN NINGUNA foto. */
.foto-marco img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Detras y visible por defecto: es lo que se ve mientras la foto viaja, si no
   llega nunca, o si el producto no trae ninguna. */
.foto-vacia {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

/* Y desaparece en cuanto la foto ha cargado de verdad. Hace falta esconderlo
   -y no dejarlo simplemente debajo- porque muchas fotos de producto tienen el
   fondo transparente y se veria el icono a traves. */
.foto-marco.con-foto .foto-vacia {
  display: none;
}

/* El icono ocupa como la mitad del recuadro, para que respire igual en los
   64 px de las listas que en los 150 de la ficha. */
.foto-vacia svg {
  width: 45%;
  height: 45%;
}

/* Los otros tamaños: la foto grande de la ficha, la pequeña de los productos
   relacionados y la de las tarjetas verticales de la portada. */
.foto-ficha {
  width: 150px;
  height: 150px;
}

.foto-relacionado {
  width: 44px;
  height: 44px;
}

.foto-tarjeta {
  width: 100%;
  height: 120px;
}

/* ===== Tarjeta vertical de producto =====

   Foto arriba, precio abajo. Se usa en la portada y sirve para las listas en
   pantalla ancha: cuatro por fila en vez de una fila de 948 px con 722 de
   hueco. En movil caben dos y se apilan solas. */
.tarjeta-producto {
  transition: border-color .12s ease, transform .12s ease;
}

.tarjeta-producto:hover {
  border-color: var(--bs-primary);
  transform: translateY(-2px);
}

/* El nombre, a dos lineas como maximo. Sin esto, un nombre largo estira su
   tarjeta y descuadra toda la fila. */
.tarjeta-producto .producto-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: 2.6em;
}

/* ===== Ancho de la portada =====

   Todo el contenido comparte el mismo, buscador incluido. Antes el buscador
   media 640 px y las secciones de abajo 900, asi que nada quedaba alineado. */
.portada {
  max-width: 900px;
  margin-inline: auto;
}

/* El orden de las secciones cambia con el tamaño de pantalla.

   En movil van primero las categorias, como estaban: en una pantalla estrecha
   son el atajo natural para quien no sabe que buscar, y los productos quedan
   justo debajo.

   En ordenador van primero los productos. Quien entra entiende en un segundo
   que esto compara precios si lo primero que ve es un producto con su precio y
   su ahorro; ocho cajas con iconos no dicen eso. */
   El buscador no lleva orden: se queda en 0, que es el primero. La explicacion
   lleva el numero mas alto para quedarse siempre la ultima -sin eso se iria
   arriba con el buscador, porque lo que no tiene orden vale 0-. */
.seccion-categorias  { order: 1; }
.seccion-productos   { order: 2; }
.seccion-explicacion { order: 3; }

@media (min-width: 768px) {
  .seccion-productos  { order: 1; }
  .seccion-categorias { order: 2; }
}

/* El precio destaca por tamaño y peso, no por color: ahora el verde es el
   color de la marca y si el precio tambien fuera verde se perderia entre
   los botones. Es lo mas importante de cada fila y tiene que saltar a la vista. */
.producto-precio {
  font-size: 1.05rem;
  white-space: nowrap;
  color: var(--bs-emphasis-color);
}

/* Nombres largos: maximo dos lineas y "..." al final, para que todas
   las filas midan lo mismo y la lista no se descuadre. */
.producto-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* En pantallas grandes hay sitio de sobra: foto y precio algo mayores */
@media (min-width: 768px) {
  .producto-foto {
    width: 84px;
    height: 84px;
  }

  .producto-precio {
    font-size: 1.25rem;
  }
}

.producto:hover {
  border-color: var(--bs-primary);
}

/* ===== Menu ===== */

/* El menu lateral se sustituyo por la barra de arriba; en movil sigue
   apareciendo el mismo menu, en columna, dentro del panel deslizante. */
.offcanvas .nav-link {
  border-radius: 0.5rem;
  margin-bottom: 0.25rem;
}

/* Resaltado suave al pasar el raton por encima de una seccion inactiva.
   Usa una variable de Bootstrap para que funcione igual en claro y en oscuro. */
.navbar .nav-link.link-body-emphasis:hover,
.offcanvas .nav-link.link-body-emphasis:hover {
  background-color: var(--bs-secondary-bg);
  border-radius: 0.5rem;
}

/* ===== Cabecera ===== */

/* Menu y buscador se quedan pegados arriba al bajar por una lista larga. Van
   en el mismo contenedor: por separado se pisarian, porque los dos querrian
   la misma posicion. El z-index los mantiene por encima de las tarjetas. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* ===== Cabecera de color =====

   Azul muy claro. Dos decisiones detras:

   **Azul y no verde.** Los estudios de comercio electronico coinciden en dos
   cosas: el azul en la cabecera transmite confianza -por eso lo usan los sitios
   profesionales- y el verde en los botones es el que mas se pulsa. Aqui hacen
   falta las dos: confianza para que alguien se fie de salir a comprar por un
   enlace nuestro, y un boton que se vea. Con la cabecera azul, el verde de "Ver
   oferta" es el unico verde de la pantalla y se lleva toda la atencion; con la
   cabecera verde competian entre si.

   **Suave y no saturado.** La cabecera esta fija arriba y se ve en todas las
   pantallas todo el rato. Un color fuerte ahi cansa la vista a los cinco
   minutos. El texto se queda en el color normal: sobre un fondo tan claro se
   lee igual que sobre blanco. */
.navbar-marca {
  background-color: var(--cabecera);
  border-bottom-color: var(--cabecera-borde) !important;
}

/* El logo usa var(--marca), y el verde normal sobre este azul claro se queda en
   2,9 de contraste: se ve desvaido. Se cambia por el verde oscuro de la marca y
   pasa a 8,1.

   La variable se pisa SOLO en el logo y no en toda la cabecera: puesta arriba
   tambien se llevaba por delante el boton de "Crear cuenta", que salia de un
   verde distinto al de los botones del resto de la web. */
.navbar-marca .logo-simbolo {
  --marca: var(--marca-texto);
}

/* ===== Ancho del contenido ===== */

/* Al quitar el menu lateral, el contenido se quedaba pegado a la izquierda con
   un hueco enorme a la derecha en pantallas grandes. Se centra y se le pone un
   tope: una linea de texto de 1900 px de ancho no hay quien la lea. */
main {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
}

/* Paginas de contenido estrecho -ajustes, tiendas, textos legales-: se centra
   la pagina entera, no cada bloque. Centrando bloque a bloque, los titulos
   -que ocupan todo el ancho- se quedaban a la izquierda y las tarjetas en
   medio, y quedaba descolocado. */
.pagina {
  max-width: 760px;
  margin-inline: auto;
}

/* Variante para el panel: los comentarios pueden ser largos y agradecen
   algo mas de ancho. */
.pagina-ancha {
  max-width: 900px;
}

/* ===== Pie pegado abajo ===== */

/* En paginas cortas -el buzon vacio, un error, "no hay resultados"- el pie se
   quedaba flotando en mitad de la pantalla con un hueco enorme debajo. Con
   esto la pagina ocupa siempre el alto de la ventana como minimo y el pie
   baja al fondo, sin dejar de moverse hacia abajo cuando el contenido es
   largo. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > .d-flex {
  flex: 1 0 auto;
}

/* Las diez secciones en ordenador: dos filas de cinco.

   Bootstrap no trae ".d-md-grid" ni una rejilla de cinco columnas, asi que va
   aqui. Con "flex-wrap" el navegador repartia segun el ancho de cada texto y
   con diez secciones dejaba ocho arriba y dos sueltas abajo; cinco columnas
   parten diez en dos filas iguales y todos los botones quedan del mismo ancho.

   minmax(0, 1fr) y no 1fr a secas: sin el minmax, un nombre largo como
   "Componentes PC" empuja su columna y descuadra las cinco. */
@media (min-width: 768px) {
  .d-md-grid { display: grid !important; }

  .categorias-rejilla {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .categorias-rejilla > .btn {
    justify-content: center;
  }
}

/* ===== Botones que responden al dedo =====

   Lo que hace que una web se sienta viva no son animaciones grandes sino que
   cada cosa que se toca conteste algo. Tres gestos, y ninguno llama la
   atencion por si mismo:

     - Al pasar por encima, el boton sube 1 px y coge una sombra: parece que se
       despega del papel.
     - Al pulsar, baja 1 px y pierde la sombra. Ese es el importante: es el que
       confirma que el clic ha entrado, sobre todo en movil, donde no hay raton
       ni "hover" que valga.
     - El color entra en .15s en vez de de golpe.

   Los numeros son pequeños a proposito (1 px, .12s). Una animacion que se nota
   es una animacion que molesta a la tercera vez, y aqui la gente pulsa "Ver
   oferta" decenas de veces. Se busca que se sienta, no que se vea.

   Al pulsar se baja a .04s: el tacto tiene que ser inmediato. Si la bajada
   tardara lo mismo que la subida, el boton parece blando. */
.btn {
  transition: transform .12s ease,
              box-shadow .12s ease,
              background-color .15s ease,
              border-color .15s ease,
              color .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
  transition-duration: .04s;
}

/* Un boton apagado no puede fingir que responde: seria prometer algo que no
   va a pasar. Se queda quieto. */
.btn:disabled,
.btn.disabled {
  transform: none !important;
  box-shadow: none !important;
}

/* Las secciones de la portada ya suben 2 px por su cuenta (.categoria), asi
   que aqui se evita que el efecto del boton se sume al suyo y salten el doble. */
.categorias-rejilla > .btn:hover {
  transform: translateY(-2px);
}

/* ===== Para quien no quiere movimiento =====

   No es un adorno: a parte de la gente el movimiento en pantalla le produce
   mareo de verdad, y tanto Windows como Android e iOS tienen una casilla para
   pedir que se reduzca. Esta regla la respeta.

   Apaga tambien lo que ya habia desde antes -las tarjetas de producto y las
   secciones-, que hasta hoy se movian sin preguntar.

   Solo se quita el MOVIMIENTO. Los cambios de color se quedan, porque son los
   que dicen "esto se puede pulsar" y quitarlos si dejaria la web peor. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .categoria,
  .tarjeta-producto {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }

  .btn:hover,
  .btn:active,
  .categoria:hover,
  .tarjeta-producto:hover,
  .categorias-rejilla > .btn:hover {
    transform: none;
    box-shadow: none;
  }
}

/* La flechita de los filtros plegables gira cuando el filtro esta abierto.

   El boton lleva la clase form-select para parecerse a los desplegables de al
   lado, y esa clase pinta la flecha como imagen de fondo. Por eso se gira el
   fondo entero y no un icono: no hay icono que girar.

   Bootstrap pone aria-expanded="true" al desplegar, asi que el CSS lo lee sin
   una linea de JavaScript. Girar la flecha es lo que dice "esto se ha abierto"
   sin tener que escribirlo. */
.filtro-plegable {
  transition: background-position .18s ease;
}

.filtro-plegable[aria-expanded="true"] {
  /* La misma flecha del revés, en SVG incrustado: es como la trae Bootstrap. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 10 6-6 6 6'/%3e%3c/svg%3e");
}

/* En modo oscuro la flecha tiene que ser clara o no se ve sobre el fondo. */
@media (prefers-color-scheme: dark) {
  .filtro-plegable[aria-expanded="true"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 10 6-6 6 6'/%3e%3c/svg%3e");
  }
}

@media (prefers-reduced-motion: reduce) {
  .filtro-plegable { transition: none; }
}