/* ═══════════════════════════════════════════════════════════════════════════
   beaüra — la capa que traduce nuestro diseño al marcado de Odoo.

   El diseño NO vive aquí: vive en site/styles.css, que se sube igual que
   como corre en local. Este archivo es sólo el puente, y existe por una
   razón concreta: Odoo pinta su tienda con clases de Bootstrap
   (`btn-primary`, `card`, `form-control`) que nuestro CSS no conoce.

   Así que aquí hay dos clases de reglas, y conviene no mezclarlas:

     1. Traducciones — le decimos a Bootstrap cuáles son nuestros colores y
        tipos, y de un plumazo se alinea casi todo.
     2. Parches puntuales — para lo que Bootstrap no deja arreglar por
        variable. Cada uno lleva escrito POR QUÉ existe; si algún día el
        parche deja de hacer falta, que se pueda borrar sin adivinar.

   Regla de oro: aquí se cambia cómo se VE. Nunca cómo se COMPORTA. El
   JavaScript de Odoo se agarra de sus propias clases para agregar al
   carrito, elegir variante y cobrar. Se les puede cambiar el aspecto;
   quitarlas o renombrarlas rompe la caja.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Traducciones ───────────────────────────────────────────────────────
   Bootstrap 5 lee estas variables. Al apuntarlas a nuestros tokens, los
   botones, enlaces, formularios y bordes de Odoo adoptan la paleta sin que
   tengamos que perseguir cada componente uno por uno. */
:root {
  --bs-primary: var(--lilac);
  --bs-primary-rgb: 198, 158, 212;
  --bs-link-color: var(--ink);
  --bs-link-hover-color: var(--lilac-deep);
  --bs-body-bg: var(--cream);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-weight: 300;
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-secondary-bg: var(--tint);
}

/* Odoo mete su contenido dentro de #wrapwrap; nuestro CSS le habla al body.
   Esto hace que el fondo y el color de texto lleguen adentro. */
#wrapwrap {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--bs-body-font-family);
  font-weight: 300;
}

#wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap h4, #wrapwrap h5 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
}

/* ── 2. Parches puntuales ──────────────────────────────────────────────────
   Cada uno con su motivo. */

/* La cabecera de Odoo, fuera de la vista.

   No se borra, se esconde. Cuando la quitábamos de verdad —un `replace` sobre
   //header— el sitio se veía igual de bien y se caía con error 500 en TODAS
   las páginas en cuanto alguien metía algo a la bolsa. Es decir: se rompía
   sólo para quien iba a comprar. El detalle completo está en
   tema/vistas/cabecera.xml.

   Va aquí y no en un atributo de la plantilla porque Odoo le calcula a su
   cabecera tanto `class` (con t-attf-class) como `style` al vuelo, y pisa
   cualquier cosa que le escribamos ahí. */
#wrapwrap > header#top[data-beaura-oculta] {
  display: none !important;
}

/* Los botones de Odoo son rectangulares y en mayúscula fina; los nuestros son
   píldoras. Bootstrap no expone el radio del botón como variable propia. */
#wrapwrap .btn-primary,
#wrapwrap .btn-secondary {
  border-radius: 100px;
  padding: .85rem 1.8rem;
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  transition: .25s ease;
}
#wrapwrap .btn-primary { background: var(--lilac); color: #fff; }
#wrapwrap .btn-primary:hover { background: var(--lilac-deep); }
#wrapwrap .btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

/* Las tarjetas de producto de Odoo traen sombra dura y esquina viva. */
#wrapwrap .card {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* La retícula de la tienda. Este es un choque de nombres, y vale la pena
   entenderlo antes de "arreglarlo" de otro modo:

   · Para nosotros `.grid` es la retícula del catálogo: 4 columnas, una por
     producto.
   · Para Bootstrap —y por lo tanto para Odoo— `.grid` es una utilidad de 12
     columnas, y cada producto pide cuántas ocupa con `g-col-lg-4` (o sea, un
     tercio).

   Con nuestra definición ganando, cada producto pedía "4 columnas de 4" y se
   comía la fila entera: un solo producto por renglón, gigante. Aquí se le
   devuelve a la retícula de la tienda su malla de 12 para que el `g-col-*` que
   Odoo calcula desde "productos por fila" vuelva a significar lo que dice.

   El hueco sí se queda en el nuestro: se ve mejor y no rompe nada. */
#wrapwrap .o_wsale_products_grid_table.grid {
  grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
}

/* Los campos del checkout: el foco azul de Bootstrap desentona con la lila. */
#wrapwrap .form-control:focus,
#wrapwrap .form-select:focus {
  border-color: var(--lilac);
  box-shadow: 0 0 0 .2rem rgba(198, 158, 212, .25);
}

/* ── Pendiente ─────────────────────────────────────────────────────────────
   Esto es el arranque, no el final. Falta —y se irá agregando conforme cada
   página se vaya vistiendo—: cabecera y pie propios, retícula de la tienda,
   ficha de producto, y los pasos del checkout. */