/* ==========================================================================
   rp_ui.css — Capa de UI compartida de la web pública de Racks Point.
   Se enlaza en TODAS las páginas públicas DESPUÉS de sus estilos inline, para
   corregir la cabecera/menú/carrito en móvil sin duplicar CSS por página, y
   dar estilo al botón flotante de llamada (voz) y al icono de teléfono superior.
   ========================================================================== */

:root{ --rp-accent:#e25303; --rp-accent-dark:#c94a03; }

/* --- Icono de TELÉFONO en la cabecera (lanza la llamada de voz) --- */
.rp-call-top{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid rgba(226,83,3,.55); background:rgba(226,83,3,.10);
  color:var(--rp-accent); font-weight:800; font-size:.8rem; line-height:1;
  padding:.5rem .78rem; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:background .18s, color .18s, transform .18s, box-shadow .18s; font-family:inherit;
}
.rp-call-top:hover{ background:var(--rp-accent); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(226,83,3,.28); }
.rp-call-top svg{ width:15px; height:15px; }

/* --- Botón flotante de llamada (propio, fino y elegante) --- */
.rp-callfab{
  position:fixed; z-index:2147483000;
  right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:.5rem;
  height:46px; padding:0 18px 0 14px; border-radius:999px; border:0;
  background:linear-gradient(135deg,var(--rp-accent),var(--rp-accent-dark));
  color:#fff; font-weight:800; font-size:.92rem; letter-spacing:.2px; line-height:1; font-family:inherit; cursor:pointer;
  box-shadow:0 10px 26px rgba(226,83,3,.38), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .2s, box-shadow .2s, opacity .25s;
  opacity:1;                       /* SIEMPRE visible: la animación solo desplaza, nunca oculta */
  animation:rpFabIn .5s .3s both;
}
@keyframes rpFabIn{ from{transform:translateY(16px);} to{transform:none;} }
.rp-callfab:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(226,83,3,.5); }
.rp-callfab .rp-callfab-ico{ position:relative; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rp-callfab .rp-callfab-ico svg{ width:15px; height:15px; }
.rp-callfab .rp-callfab-ico::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(255,255,255,.5); animation:rpPing 2.4s ease-out infinite; }
@keyframes rpPing{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.45);} 70%{box-shadow:0 0 0 12px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }

/* El widget de ElevenLabs es el MOTOR de la llamada; el botón VISIBLE es .rp-callfab.
   Se mantiene EN SU SITIO (bottom-right) para que renderice y su botón interno sea
   clicable por código, pero INVISIBLE (opacity 0). Al iniciar la llamada (rp-voz-live)
   se muestra su panel y se esconde el fab. */
elevenlabs-convai{ position:fixed !important; right:16px; bottom:16px; z-index:2147482000; }
body:not(.rp-voz-live) elevenlabs-convai{ opacity:0 !important; pointer-events:none !important; }
body.rp-voz-live elevenlabs-convai{ opacity:1 !important; pointer-events:auto !important; }
body.rp-voz-live .rp-callfab{ opacity:0 !important; pointer-events:none !important; }

@media (max-width:768px){
  .rp-callfab{ height:42px; font-size:.86rem; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); }

  /* ---------- CABECERA COMPACTA EN MÓVIL (logo + acciones en una fila, buscador debajo) ---------- */
  .main-header{ padding-left:0 !important; padding-right:0 !important; }
  .main-header .header-container{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important;
    gap:7px 8px !important; padding:9px 12px !important; max-width:100% !important;
  }
  .main-header .header-container .logo-wrapper{ flex:0 0 auto !important; margin:0 !important; max-width:150px !important; }
  .main-header .header-container a.logo-wrapper img,
  .main-header .logo-wrapper img{ height:30px !important; width:auto !important; max-width:140px !important; object-fit:contain !important; }
  .main-header .header-actions{
    margin-left:auto !important; order:2 !important; display:flex !important;
    align-items:center !important; gap:7px !important; font-size:.8rem !important; flex-wrap:nowrap !important;
  }
  .main-header .search-bar{ order:3 !important; flex:1 1 100% !important; width:100% !important; margin:0 !important; }
  .main-header .search-bar input{ width:100% !important; box-sizing:border-box !important; }
  .main-header .cart-btn{ padding:7px 11px !important; border-radius:999px !important; white-space:nowrap !important; }
  .rp-call-top{ padding:.5rem .6rem; }
}
@media (max-width:440px){
  .rp-call-top span{ display:none; }                 /* teléfono: solo icono */
  .rp-call-top{ padding:.5rem; }
  /* «Mi Cuenta» accesible desde el menú: se oculta el enlace en móvil estrecho para ganar sitio */
  .main-header .header-actions a[href*="mi-cuenta"]{ display:none !important; }
}

@media (max-width:768px){ html,body{ max-width:100%; overflow-x:hidden; } }

/* HOME · en móvil el configurador del HERO se oculta (evita el scroll anidado y el recorte):
   el configurador COMPLETO vive en su sección propia justo debajo, ahí sí se ve entero.
   El texto del hero pasa a ocupar el ancho completo. (Solo afecta al home.) */
@media (max-width:768px){
  .hero-configurator-side{ display:none !important; }
  .hero-content-mega{ grid-template-columns:1fr !important; }
  .rp-callfab{ bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
}

/* ==========================================================================
   MENÚ MÓVIL · en la barra se muestra SOLO «Estanterías Metálicas» (siempre y en
   UNA sola línea, a cualquier resolución); el RESTO de categorías principales
   (Inicio, Garaje, Mesas, Altillos, Paletización, Contacto) van dentro del ☰.
   - Colapsado:  [Estanterías Metálicas ▼] ............ [☰]
       · tocar «Estanterías Metálicas» despliega sus subcategorías (Carga
         Ligera/Media/Pesada, Paletización).
   - ☰ abierto:  cae el menú completo (Inicio + Estanterías + resto), texto claro.
   ========================================================================== */
@media (max-width:768px){
  /* Barra COLAPSADA: contenedor en fila, a la izquierda, con solo el megamenú destacado. */
  .nav-menu:not(.nav-open) .nav-container{
    display:flex !important; flex-direction:row !important; align-items:center !important;
    position:static !important; width:auto !important; order:-1 !important;
    background:transparent !important; box-shadow:none !important; max-height:none !important;
    padding:0 !important; overflow:visible !important;
  }
  .nav-menu:not(.nav-open) .nav-container > a{ display:none !important; }
  .nav-menu:not(.nav-open) .nav-container > .nav-item.has-megamenu{ display:block !important; }
  /* «Estanterías Metálicas» NUNCA salta de línea. */
  .nav-menu .nav-item.has-megamenu > a:first-child{ white-space:nowrap !important; border-top:0 !important; }
  /* Subcategorías como desplegable al tocar «Estanterías Metálicas» estando colapsado. */
  .nav-menu:not(.nav-open) .nav-item.has-megamenu:not(.megamenu-open) > .megamenu-panel{ display:none !important; }
  .nav-menu:not(.nav-open) .nav-item.has-megamenu.megamenu-open > .megamenu-panel{
    display:flex !important; visibility:visible !important; opacity:1 !important;
    flex-direction:column !important; position:absolute !important; top:100% !important; left:0 !important; right:0 !important;
    background:var(--color-primary,#e25303) !important; z-index:1200 !important;
    box-shadow:0 12px 26px rgba(0,0,0,.3) !important; max-height:calc(100vh - 128px) !important;
    overflow-y:auto !important; padding:.3rem .6rem .6rem !important; border-radius:0 0 10px 10px !important;
  }
  /* ☰ ABIERTO: menú completo desplegado (se conserva el comportamiento de la página). */
  .nav-menu.nav-open .nav-container > a{ display:block !important; }
  /* CLAVE: el contenedor abierto es flex-column; sin nowrap, al no caber en alto reparte los items en
     varias COLUMNAS hacia la derecha -> aparecía scroll lateral. Forzamos una sola columna vertical. */
  .nav-menu.nav-open .nav-container{ flex-wrap:nowrap !important; }
  .nav-menu.nav-open .megamenu-panel{
    display:flex !important; opacity:1 !important; visibility:visible !important;
    transform:none !important; position:relative !important; background:rgba(0,0,0,.16) !important;
    flex-direction:column !important; flex-wrap:nowrap !important; width:100% !important;
  }
  /* Subcategorías siempre a lo ancho y apiladas (en ambos estados) -> nunca desbordan en horizontal. */
  .nav-menu .megamenu-panel{ flex-wrap:nowrap !important; }
  .nav-menu .megamenu-column{ width:100% !important; min-width:0 !important; }
  /* Texto claro de las subcategorías en ambos estados. */
  .nav-menu .megamenu-column a, .nav-menu .megamenu-column h4, .nav-menu .megamenu-column h4 a{ color:#fff !important; }
  .nav-menu .megamenu-column h4 span{ color:rgba(255,255,255,.82) !important; }
}

/* ==========================================================================
   CABECERA MÓVIL EN UNA SOLA FILA · logo + [lupa][cuenta][carrito][llamar].
   El buscador se despliega como 2ª fila al pulsar la lupa. Los iconos lupa y
   llamada los inyecta rp_ui.js dentro de .header-actions.
   ========================================================================== */
.rp-ico-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border-radius:999px; flex:0 0 auto;
  border:1px solid rgba(226,83,3,.5); background:rgba(226,83,3,.10);
  color:var(--rp-accent); cursor:pointer; font:inherit;
}
.rp-ico-btn svg{ width:18px; height:18px; }
.rp-ico-btn:active{ transform:scale(.95); }
/* Los iconos inyectados solo en móvil (en escritorio la barra de búsqueda va visible
   y la llamada es el botón flotante «Habla con Sara»). */
@media (min-width:769px){ .rp-ico-search, .rp-ico-call{ display:none !important; } }
@media (max-width:768px){
  .main-header .search-bar{ display:none !important; position:relative; }   /* oculto hasta pulsar la lupa */
  .main-header.rp-search-open .search-bar{
    display:flex !important; order:3 !important; flex:1 1 100% !important; width:100% !important; margin-top:4px !important;
  }
  .main-header .header-container{ flex-wrap:wrap !important; }
  .main-header .header-actions{ flex-wrap:nowrap !important; gap:8px !important; }
  .main-header .logo-wrapper{ max-width:130px !important; }
  /* Carrito como icono+contador en móvil (fila de iconos): se oculta la etiqueta «Mi Cesta». */
  .main-header .cart-btn .rp-cart-label{ display:none !important; }
  .main-header .cart-btn{ padding:8px 10px !important; }
  /* En móvil la llamada se lanza desde el icono de cabecera; se oculta el botón
     flotante en estado reposo (la barra en curso de llamada sí aparece). */
  #rp-voz .rp-btn{ display:none !important; }
}

/* ==========================================================================
   BUSCADOR · desplegable de sugerencias bajo la barra de búsqueda.
   ========================================================================== */
.search-bar{ position:relative; }
.rp-search-drop{
  position:absolute; z-index:1400; left:0; right:0; top:100%; margin-top:6px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 14px 34px rgba(15,23,42,.18); overflow:hidden auto; max-height:72vh;
}
.rp-search-drop .rp-sr{
  display:flex; align-items:center; gap:10px; padding:10px 13px; text-decoration:none;
  color:#0f172a; border-bottom:1px solid #f1f5f9; cursor:pointer;
}
.rp-search-drop .rp-sr:last-child{ border-bottom:0; }
.rp-search-drop .rp-sr:hover, .rp-search-drop .rp-sr.rp-active{ background:#fff7f2; }
.rp-search-drop .rp-sr-t{ font-weight:700; font-size:.87rem; line-height:1.25; }
.rp-search-drop .rp-sr-m{ font-size:.72rem; color:#64748b; }
.rp-search-drop .rp-sr-p{ margin-left:auto; font-weight:800; color:var(--rp-accent); font-size:.83rem; white-space:nowrap; }
.rp-search-drop .rp-sr-all{ justify-content:center; color:var(--rp-accent); font-weight:800; font-size:.82rem; background:#fff7f2; }
.rp-search-drop .rp-sr-empty{ padding:16px 13px; color:#64748b; font-size:.86rem; text-align:center; }