/* ============================================================
   RAELGI — Ajustes SSR (no tocar los archivos portados del diseño).
   Pequeño "glue" para que el markup PHP estático reproduzca el
   comportamiento que en el prototipo daba el estado de React.
   ============================================================ */

/* Mega-menú: oculto por defecto, visible al pasar / enfocar el desplegable */
.mega-wrap > .mega { display: none; }
.mega-wrap:hover > .mega,
.mega-wrap:focus-within > .mega { display: grid; }

/* Nav: ítem "próximamente" desactivado (p.ej. Comparador, sin página aún) */
.hnav-soon {
  display: flex; align-items: center; gap: 6px;
  color: #5a6b80; font-size: 13.5px; font-weight: 600;
  padding: 9px 13px; cursor: not-allowed; user-select: none;
}
.hnav-soon .soon-pill {
  font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #8aa0bd; background: rgba(255,255,255,.07);
  padding: 2px 6px; border-radius: 6px;
}
/* Evita que etiquetas de dos palabras ("Vista tabla") se partan en dos líneas */
.hnav a, .hnav-soon { white-space: nowrap; }

/* Tarjeta de producto: enlaces e icono favorito como formulario */
.pcard { cursor: pointer; }
.pcard-favform { display: contents; }
/* inset:0 da al <a> una caja de tamaño REAL (px) sobre .pcard-img (position:relative
   + aspect-ratio). Sin esto, height:100% no resuelve contra un padre sin altura
   explícita y la imagen colapsa al centro como miniatura. */
.pcard-imglink { position: absolute; inset: 0; display: block; }
.pcard-imglink img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    padding: 12px; box-sizing: border-box;
}
a.pcard-name { display: block; text-decoration: none; }
a.pcard-name:hover { color: var(--accent); }

/* Desplegable del buscador instantáneo */
.hsearch-results {
  position: absolute; top: 48px; left: 0; right: 0; z-index: 80;
  padding: 6px; max-height: 380px; overflow-y: auto;
}
.hsearch-results[hidden] { display: none; }
.hsearch-res {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border-radius: 8px; cursor: pointer; color: inherit; text-decoration: none;
}
.hsearch-res:hover { background: var(--rael-azul-soft); }

/* Pestañas de ficha de producto (toggle por JS; sin JS se ve la primera) */
.tabpanel { display: none; }
.tabpanel.on { display: block; }

/* ====================================================================
   Comparador de productos — AISLADO bajo .cmp-* / .pcard-cmp
   ==================================================================== */
/* Botón "comparar" en la tarjeta (debajo del de favorito) */
.pcard-cmp {
  position: absolute; top: 48px; right: 10px; width: 32px; height: 32px;
  border-radius: 8px; background: rgba(255,255,255,.9); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); cursor: pointer; z-index: 2;
  transition: all var(--dur) var(--ease);
}
.pcard-cmp:hover { color: var(--accent); }
.pcard-cmp.on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Barra flotante inferior */
.cmp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(15,45,82,.12);
}
.cmp-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.cmp-bar-thumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-bar-item {
  position: relative; width: 52px; height: 52px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--rael-surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cmp-bar-item img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
.cmp-bar-x { position: absolute; top: -7px; right: -7px; }
.cmp-bar-x button {
  width: 18px; height: 18px; border-radius: 50%; background: var(--secondary); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.cmp-bar-add {
  width: 52px; height: 52px; border: 1px dashed var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
}
.cmp-bar-add:hover { border-color: var(--accent); color: var(--accent); }
.cmp-bar-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.cmp-bar-clear { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; padding: 6px; }
.cmp-bar-clear:hover { color: var(--error); }

/* Tabla de comparación */
.cmp-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.cmp-table th, .cmp-table td {
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 12px 14px; text-align: left; vertical-align: middle; font-size: 13.5px;
}
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: none; }
.cmp-rowhead {
  background: var(--rael-surface-2); font-weight: 700; color: var(--text-primary);
  white-space: nowrap; position: sticky; left: 0; z-index: 1; min-width: 160px;
}
.cmp-corner { z-index: 2; }
.cmp-prod { vertical-align: top; min-width: 180px; position: relative; background: var(--surface); }
.cmp-thumb { display: block; height: 90px; margin-bottom: 8px; }
.cmp-thumb img { height: 90px; width: 100%; object-fit: contain; }
.cmp-prod-brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); }
.cmp-prod-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--text-primary); margin-top: 2px; line-height: 1.3; }
.cmp-remove { position: absolute; top: 8px; right: 8px; }
.cmp-remove button {
  width: 24px; height: 24px; border-radius: 6px; background: var(--rael-surface-2);
  border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cmp-remove button:hover { color: var(--error); border-color: var(--error); }
.cmp-val { color: var(--text-secondary); }
.cmp-best { background: var(--rael-verde-soft); color: var(--rael-verde-ink); font-weight: 700; }
.cmp-worst { background: #fdeceA; color: var(--error); }
.cmp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 3px; }
.cmp-dot-best { background: var(--rael-verde-soft); border: 1px solid var(--rael-verde-ink); }
.cmp-dot-worst { background: #fdeceA; border: 1px solid var(--error); }

/* ====================================================================
   Responsive móvil/tablet — SOLO dentro de @media. El desktop (>1024px)
   no entra en ninguna regla → usa los estilos inline y queda intacto.
   !important para tumbar el inline únicamente en estos anchos.
   ==================================================================== */
@media (max-width: 1024px) {
  /* Catálogo: layout sidebar+grid → 1 columna; filtro deja de ser sticky */
  .r-cat-layout { grid-template-columns: 1fr !important; }
  .r-filter { position: static !important; max-height: none !important; top: auto !important; }
}
@media (max-width: 680px) {
  /* Tarjetas/categorías: 2 por fila reales (1fr encoge, no desborda) */
  .r-prod-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .r-cat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  /* Hero: los dos botones a ancho completo, apilados */
  .r-hero-cta { flex-wrap: wrap !important; }
  .r-hero-cta .btn { flex: 1 1 100% !important; }
  /* Banner CTA: menos padding + botón a ancho completo */
  .r-cta-banner { padding: 24px 20px !important; }
  .r-cta-banner .btn { width: 100% !important; }
}

/* ====================================================================
   Banner de consentimiento de cookies — AISLADO bajo .cookie-*
   ==================================================================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--secondary); color: #cdd9ea;
  border-top: 1px solid var(--rael-on-dark-line);
  box-shadow: 0 -6px 24px rgba(15,45,82,.18);
}
.cookie-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; }
.cookie-text { font-size: 13px; line-height: 1.5; max-width: 760px; }
.cookie-text strong { color: #fff; }
.cookie-text a { color: #5ea0ff; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex: none; }
/* "Rechazar" (btn-outline) sobre el banner oscuro: texto y borde claros */
.cookie-actions .btn-outline { --_fg: #fff; border-color: rgba(255,255,255,.45); }
.cookie-actions .btn-outline:hover { --_fg: #fff; border-color: #fff; background: rgba(255,255,255,.10); }
.cookie-reset-link {
  background: none; border: none; color: var(--accent); cursor: pointer;
  text-decoration: underline; font: inherit; padding: 0;
}
@media (max-width: 680px) {
  .cookie-in { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-actions .btn { flex: 1 1 0; }
}