/* ── Ferretería Manager — Public CSS ───────────────────────────────────────────
   Paleta: grafito + naranja de seguridad
   ─────────────────────────────────────────────────────────────────────────── */

/* Este stylesheet solo se carga en las páginas del plugin (home, catálogo —
   ver RCE_Public::is_rce_page()), así que ocultamos el footer del tema activo
   para no romper la identidad de marca de la ferretería. Mismo patrón usado
   en Restaurante Manager y Odonto Manager en este mismo sitio. */
#colophon { display: none !important; }

:root {
  --rce-graphite:    #23282e;  /* Grafito — fondo oscuro / texto sobre fondo claro */
  --rce-graphite-lt: #333a42;  /* Grafito, un tono más claro — superficies oscuras secundarias */
  --rce-orange:      #e8621a;  /* Naranja de seguridad — ÚNICO color de acción (CTA, precios) */
  --rce-orange-dim:  #c74f10;  /* Naranja oscurecido — hover/active del CTA */
  --rce-steel:       #6b7684;  /* Acero — soporte: bordes activos, íconos */
  --rce-cream:       #f7f5f2;  /* Fondo claro / texto sobre fondo oscuro */
  --rce-sand:        #ececea;  /* Superficies secundarias: tarjetas, inputs */
  --rce-text:        #23282e;
  --rce-muted:       #6b7280;
  --rce-border:      #dcdcda;
  --rce-danger:      #b3261e;

  --rce-font-display: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rce-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --rce-radius-sm: 8px;
  --rce-radius:    12px;
  --rce-radius-lg: 18px;
  --rce-shadow-sm: 0 2px 10px rgba(35,40,46,.10);
  --rce-shadow-md: 0 4px 20px rgba(35,40,46,.14);
  --rce-shadow-card: 0 2px 8px rgba(35,40,46,.08), 0 0 0 1px rgba(35,40,46,.04);

  --rce-ease: cubic-bezier(.25,.46,.45,.94);
  --rce-duration: 200ms;
}

/* ── Reset mínimo ────────────────────────────────────────────────────────────── */
.rce-home *, .rce-catalogo-page *, .rce-checkout-page *,
.rce-cart-fab, .rce-cart-drawer * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rce-home a:focus-visible, .rce-home button:focus-visible,
.rce-catalogo-page a:focus-visible, .rce-catalogo-page button:focus-visible,
.rce-checkout-page a:focus-visible, .rce-checkout-page button:focus-visible, .rce-checkout-page input:focus-visible, .rce-checkout-page textarea:focus-visible,
.rce-cart-drawer a:focus-visible, .rce-cart-drawer button:focus-visible {
  outline: 2px solid var(--rce-orange);
  outline-offset: 2px;
}

/* ── Layout helpers ──────────────────────────────────────────────────────────── */
.rce-container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}
.rce-section { padding-block: clamp(40px, 7vw, 80px); }

/* ── Botones ─────────────────────────────────────────────────────────────────── */
/* .rce-btn se usa en <a>, sin conflicto con el reset del tema (que sólo apunta
   a elementos con atributo type= o el selector desnudo "button"), pero
   igual duplicamos con "button." por si en el futuro se usa en un <button>. */
.rce-btn, button.rce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--rce-radius-sm);
  font-family: var(--rce-font-body);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: normal;
  transition: transform var(--rce-duration) var(--rce-ease), box-shadow var(--rce-duration) var(--rce-ease), background var(--rce-duration) var(--rce-ease);
}
.rce-btn--primary, button.rce-btn--primary {
  background: var(--rce-orange);
  color: #fff;
  box-shadow: var(--rce-shadow-sm);
}
.rce-btn--primary:hover, button.rce-btn--primary:hover,
.rce-btn--primary:focus, button.rce-btn--primary:focus {
  background: var(--rce-orange-dim);
  transform: translateY(-2px);
  box-shadow: var(--rce-shadow-md);
}
.rce-btn--primary:active, button.rce-btn--primary:active {
  transform: scale(.96);
}
.rce-btn--ghost, button.rce-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.rce-btn--ghost:hover, button.rce-btn--ghost:hover,
.rce-btn--ghost:focus, button.rce-btn--ghost:focus {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

/* ── BORDE GIRATORIO (reutilizable en cualquier CTA importante) ────────────────
   .btn-shine se agrega a mano solo en los botones que de verdad importan (el
   CTA principal de cada página), nunca por defecto en .rce-btn--primary — si se
   pusiera en todos los botones perdería el efecto de "esto es lo importante".

   La animación mueve el ÁNGULO del conic-gradient (vía @property, custom
   property animable), NO un transform:rotate() del elemento — rotar el
   elemento entero funciona en un círculo, pero en un rectángulo ancho/bajo
   las esquinas del anillo "vuelan" fuera de la caja al girar (la distancia
   centro→esquina es mayor que centro→borde), y el brillo se ve como un
   cometa disparado en diagonal en vez de un borde parejo. Animar el ángulo
   del degradado deja el anillo (y su máscara) perfectamente quieto; solo
   gira el color adentro. */
@property --rce-shine-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.btn-shine {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.btn-shine::before {
  content: "";
  position: absolute;
  inset: -3px;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--rce-shine-angle),
    transparent 0%,
    transparent 75%,
    var(--rce-orange) 88%,
    color-mix(in srgb, var(--rce-orange) 100%, white 45%) 92%,
    var(--rce-orange) 96%,
    transparent 100%
  );
  /* Recorta el conic-gradient a un anillo de grosor uniforme (el "padding" de
     arriba) en vez de dejar que llene todo el rectángulo — sin esto el brillo
     tapa el botón entero en vez de seguir solo su borde. */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  animation: rce-shine-spin 2.6s linear infinite;
  pointer-events: none;
}
@keyframes rce-shine-spin {
  from { --rce-shine-angle: 0deg; }
  to   { --rce-shine-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-shine::before { animation: none; }
}

/* Variante antihoraria — solo el botón de menú hamburguesa la usa, a
   propósito, para distinguirlo a simple vista del buscador/carrito (mismo
   anillo, mismo `::before`, gira al revés). Un `@keyframes` propio en vez de
   tocar `rce-shine-spin` compartido con esos otros botones. */
.btn-shine--ccw::before {
  animation-name: rce-shine-spin-ccw;
}
@keyframes rce-shine-spin-ccw {
  from { --rce-shine-angle: 360deg; }
  to   { --rce-shine-angle: 0deg; }
}

/* ── HERO ────────────────────────────────────────────────────────────────────── */
.rce-hero {
  position: relative;
  min-height: min(80vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rce-graphite), var(--rce-graphite-lt));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.rce-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,40,46,.55), rgba(35,40,46,.85));
}
.rce-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 24px;
  max-width: 720px;
}
.rce-hero__title {
  font-family: var(--rce-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 14px;
  text-wrap: balance;
}
.rce-hero__tagline {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: rgba(255,255,255,.85);
  margin-bottom: 32px;
}
.rce-hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── ENCABEZADOS DE SECCIÓN (eyebrow + h2) ──────────────────────────────────── */
.rce-section-header { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.rce-eyebrow {
  display: inline-block;
  font-family: var(--rce-font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rce-orange);
  margin-bottom: 10px;
}
.rce-section-header h2 {
  font-family: var(--rce-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: var(--rce-text);
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* ── SERVICIOS ───────────────────────────────────────────────────────────────── */
.rce-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.rce-service {
  text-align: center;
  padding: 28px 20px;
  background: var(--rce-sand);
  border-radius: var(--rce-radius-lg);
  transition: transform var(--rce-duration) var(--rce-ease), box-shadow var(--rce-duration) var(--rce-ease);
}
.rce-service:hover {
  transform: translateY(-6px);
  box-shadow: var(--rce-shadow-md);
}
.rce-service__icon { font-size: 2.4rem; margin-bottom: 12px; }
.rce-service h3 { font-family: var(--rce-font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; color: var(--rce-text); }
.rce-service p { color: var(--rce-muted); font-size: .92rem; line-height: 1.5; }

/* ── INFO / HORARIOS ─────────────────────────────────────────────────────────── */
.rce-info { background: var(--rce-sand); }
.rce-info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.rce-info-block { text-align: center; }
.rce-info-block__icon { font-size: 2rem; margin-bottom: 10px; }
.rce-info-block h3 { font-family: var(--rce-font-display); font-weight: 700; font-size: 1rem; margin-bottom: 6px; color: var(--rce-text); }
.rce-info-block p { color: var(--rce-muted); font-size: .92rem; line-height: 1.5; }
.rce-link { color: var(--rce-orange); text-decoration: none; font-weight: 600; }
.rce-link:hover { text-decoration: underline; }

/* ── SCROLL REVEAL (mismo patrón que Restaurante Manager) ───────────────────── */
.rce-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--rce-ease), transform .6s var(--rce-ease);
}
.rce-reveal.rce-visible { opacity: 1; transform: none; }
.rce-service.rce-reveal, .rce-info-block.rce-reveal { transition-delay: calc(var(--i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) {
  .rce-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── CABECERA DE CATÁLOGO ────────────────────────────────────────────────────── */
.rce-catalogo-page {
  --rce-cat-nav-w: 84px;
}
@media (min-width: 480px) {
  .rce-catalogo-page { --rce-cat-nav-w: 96px; }
}
.rce-catalogo-header {
  position: relative;
  background: linear-gradient(135deg, var(--rce-graphite), var(--rce-graphite-lt));
  background-size: cover;
  background-position: center;
  padding: clamp(32px, 6vw, 56px) 24px;
  text-align: center;
}
.rce-catalogo-header--foto { position: relative; }
.rce-catalogo-header--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35,40,46,.7);
}
.rce-catalogo-header__title {
  position: relative;
  z-index: 1;
  font-family: var(--rce-font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #fff;
}

/* ── MENÚ FLOTANTE (Inicio / Mi cuenta) ─────────────────────────────────────────
   Panel "glass" flotante cerca del botón — mismo espíritu que el plugin
   smb-floating-menu ya instalado en este sitio (overlay + panel angosto con
   blur que aparece con fade/scale, en vez de un drawer de pantalla completa
   deslizando desde un borde), adaptado a la paleta propia (grafito+naranja
   en vez del verde/oscuro genérico de esa referencia) y bastante más alto/
   ancho: acá adentro vive todo el flujo de "Mi cuenta" (login, registro,
   resumen con pestañas, historial de compras), no solo enlaces estáticos
   como en el plugin original. */
/* Fixed (no absolute dentro del header) y anclado arriba a la derecha —
   mismo criterio que .rce-cart-fab más abajo en este archivo (flota abajo a
   la derecha): !important SOLO en `position` por el mismo conflicto ya
   documentado ahí (gym-manager/assets/css/gm-front.css trae su PROPIO
   `.btn-shine { position: relative }`, misma especificidad, carga después) —
   esa regla de gym-manager no toca `top`/`right`, así que estos DOS quedan
   sin !important a propósito: `ajustarMenuToggle()` en rce-public.js necesita
   poder pisarlos vía JS (`style.top`) cuando el masthead del tema todavía
   está visible arriba, y un `!important` de hoja de estilos le gana siempre
   a un inline style sin `!important`, sin importar la especificidad. */
.rce-menu-toggle {
  position: fixed !important; z-index: 1000;
  /* `top` arranca más abajo que un simple clamp(14,3vw,20) a propósito: ese
     offset chico dejaba el botón pisando la "✕" de cerrar del drawer del
     carrito (mismo rincón arriba-derecha, ambos position:fixed) — a pedido
     del usuario con captura, se corrió hacia abajo lo suficiente para no
     taparla. Si se vuelve a tocar este offset, `.rce-menu-drawer__panel`
     (que se ancla contra este mismo botón) y `ajustarMenuToggle()` en
     rce-public.js (que lo usa como base cuando el masthead del tema ya no
     está visible) tienen que actualizarse junto con esto. */
  top: clamp(70px, 3vw, 78px); right: clamp(14px, 3vw, 20px);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(20,20,20,.42) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff !important; padding: 0;
  outline: none;
}
.rce-menu-toggle__icon { width: 22px; height: 22px; }

.rce-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}
.rce-menu-drawer[aria-hidden="false"] { pointer-events: auto; }

.rce-menu-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,17,20,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s var(--rce-ease);
}
.rce-menu-drawer[aria-hidden="false"] .rce-menu-drawer__backdrop { opacity: 1; }

/* Fixed (no absolute) y anclado cerca del botón que lo abre, no a un borde
   de pantalla — aparece con fade + scale, mismo lenguaje que el popup de
   referencia. El ancho fluido (min() contra 2×el mismo offset del botón)
   garantiza que el borde derecho nunca se salga de la pantalla en celulares
   angostos, sin necesitar un @media aparte. */
.rce-menu-drawer__panel {
  position: fixed;
  top: calc(clamp(70px, 3vw, 78px) + 54px);
  right: clamp(14px, 3vw, 20px);
  width: min(340px, calc(100vw - 2 * clamp(14px, 3vw, 20px)));
  max-height: min(74vh, 640px);
  display: flex;
  flex-direction: column;
  background: rgba(30,34,40,.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transform-origin: top right;
  transition: opacity .22s var(--rce-ease), transform .22s var(--rce-ease);
  overflow: hidden;
}
.rce-menu-drawer[aria-hidden="false"] .rce-menu-drawer__panel { opacity: 1; transform: none; }

/* Chip de cerrar flotante en la esquina del panel, en vez de la barra oscura
   con título que había antes — más acorde al estilo vidrio (nada de bloques
   de color sólido encima del blur). */
.rce-menu-drawer__close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  background: rgba(255,255,255,.12) !important; border: none !important; color: #fff !important;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rce-menu-drawer__close:hover { background: rgba(255,255,255,.22) !important; }

.rce-menu-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rce-menu-drawer__body h3, .rce-menu-drawer__body h4 { color: #fff; margin: 0; }

/* Fila superior del menú: buscador + botón chico de WhatsApp al lado. */
.rce-menu-topbar {
  display: flex; align-items: center; gap: 8px;
}
.rce-menu-topbar .rce-cuenta-input { flex: 1; min-width: 0; }

/* Botón de WhatsApp — solo ícono, del tamaño de un ícono de app (como el
   buscador/carrito del header), no una tarjeta ancha con texto. Único color
   ajeno a la paleta grafito+naranja a propósito: es el verde reconocido de
   WhatsApp, no tiene sentido "corporativizarlo". */
.rce-menu-cta-wa {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px; text-decoration: none;
  background: linear-gradient(180deg, rgba(37,211,102,.95), rgba(18,140,126,.95));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
  color: #fff;
  cursor: pointer;
}
.rce-menu-cta-wa:hover { filter: brightness(1.04); }

/* Ítems del menú principal (Inicio / Mi cuenta) — filas translúcidas sobre
   el vidrio del panel, con flecha, mismo lenguaje que el CTA de arriba pero
   neutro (el verde queda exclusivo de WhatsApp). */
.rce-menu-item, button.rce-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 14px;
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 14px;
  font-family: inherit; font-size: .92rem; font-weight: 700; color: #fff !important;
  cursor: pointer; text-align: left;
}
.rce-menu-item:hover, button.rce-menu-item:hover { background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.22) !important; }
.rce-menu-item__emoji { font-size: 1.1rem; }
.rce-menu-item__flecha { margin-left: auto; color: rgba(255,255,255,.5); }

/* Formulario de login/registro de "Mi cuenta" */
.rce-cuenta-field { margin-bottom: 4px; }
.rce-cuenta-field label { display: block; font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: 6px; }
/* !important en background/border/color: mismo conflicto de siempre, pero
   esta vez con el reset de <input> de algún plugin/tema activo (no solo
   [type="button"]) — sin esto el input se veía transparente con texto casi
   negro en vez del estilo propio, confirmado con Playwright antes de este
   fix (background quedaba en rgba(0,0,0,0), el "sin estilo" por defecto). */
.rce-cuenta-input {
  width: 100%; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.18) !important; border-radius: var(--rce-radius-sm);
  background: rgba(255,255,255,.08) !important; font-family: inherit; font-size: .92rem; color: #fff !important;
  box-sizing: border-box;
}
.rce-cuenta-input::placeholder { color: rgba(255,255,255,.45) !important; }
.rce-cuenta-input:focus { outline: none; border-color: var(--rce-orange) !important; background: rgba(255,255,255,.12) !important; }
.rce-cuenta-hint { font-size: .8rem; color: rgba(255,255,255,.6); margin: -4px 0 4px; }
.rce-cuenta-error { font-size: .82rem; color: #ff8a80; font-weight: 600; margin: -4px 0 4px; }
/* !important: son <button type="button">, y el tema activo trae un reset
   ([type="button"] { border:1px solid #cc3366; background:transparent;
   color:#cc3366 }) que empata en especificidad con una sola clase y carga
   después en el <head> — mismo conflicto ya documentado en
   .rce-catalogo-search__toggle más arriba en este archivo. */
.rce-cuenta-atras {
  background: none !important; border: none !important; color: rgba(255,255,255,.65) !important; font-size: .82rem;
  cursor: pointer; padding: 0; text-align: left; text-decoration: underline;
  align-self: flex-start;
}

/* Pestañas Resumen / Mis compras — activa en naranja (único acento de marca
   sobre el vidrio oscuro; el grafito que usaba antes de fondo se confundía
   con el panel mismo, que ahora también es oscuro). */
.rce-cuenta-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.rce-cuenta-tab {
  flex: 1; padding: 10px; border: 1px solid rgba(255,255,255,.16) !important; border-radius: var(--rce-radius-sm);
  background: rgba(255,255,255,.06) !important; font-family: inherit; font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.7) !important;
  cursor: pointer;
}
.rce-cuenta-tab.is-active { background: var(--rce-orange) !important; border-color: var(--rce-orange) !important; color: #fff !important; }

.rce-cuenta-stat {
  background: rgba(255,255,255,.07); border-radius: var(--rce-radius-sm); padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.rce-cuenta-stat__label { font-size: .8rem; color: rgba(255,255,255,.7); font-weight: 600; }
.rce-cuenta-stat__valor { font-size: 1.05rem; font-weight: 800; color: #fff; }
.rce-cuenta-stat__valor--orange { color: var(--rce-orange); }

.rce-cuenta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: .84rem;
}
.rce-cuenta-row:last-child { border-bottom: none; }
.rce-cuenta-row__main { display: flex; flex-direction: column; gap: 2px; }
.rce-cuenta-row__titulo { font-weight: 700; color: #fff; }
.rce-cuenta-row__sub { color: rgba(255,255,255,.6); font-size: .78rem; }
.rce-cuenta-row__valor { font-weight: 800; white-space: nowrap; color: #fff; }
.rce-cuenta-row__valor--orange { color: var(--rce-orange); }

.rce-cuenta-cerrar-sesion {
  margin-top: 8px; background: none !important; border: none !important; color: rgba(255,255,255,.55) !important;
  font-size: .8rem; cursor: pointer; text-align: center; text-decoration: underline;
}
.rce-cuenta-cerrar-sesion:hover { color: #ff8a80 !important; }

/* ── CUERPO: SIDEBAR + GRID ──────────────────────────────────────────────────── */

/* Sidebar vertical fija a la izquierda — SIEMPRE vertical, en cualquier ancho
   de viewport. `position:fixed` (no `sticky`) a propósito: el tema envuelve
   el contenido en un ancestro con overflow-y:auto sin altura fija, así que
   `sticky` nunca se despega de su posición natural. `fixed` no depende de
   ningún ancestro con scroll y evita el problema de raíz. `--rce-header-h` la
   fija JS (medirAlturaHeader() en rce-public.js) porque el alto real del
   header es responsive (clamp()). */
.rce-cat-nav {
  position: fixed;
  top: var(--rce-header-h, 0px);
  left: 0;
  bottom: 0;
  z-index: 10;
  width: var(--rce-cat-nav-w, 84px);
  background: var(--rce-graphite);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 14px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-right: 2px solid var(--rce-orange);
  box-shadow: 6px 0 18px rgba(0,0,0,.25);
}
.rce-cat-nav::-webkit-scrollbar { display: none; }

.rce-cat-tab, button.rce-cat-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 10px 4px 8px;
  border: 1px solid rgba(247,245,242,.2);
  background: rgba(247,245,242,.08);
  border-radius: var(--rce-radius-sm);
  font-family: var(--rce-font-body);
  font-size: .68rem;
  font-weight: 700;
  color: rgba(247,245,242,.8);
  text-align: center;
  cursor: pointer;
  letter-spacing: .01em;
  transition: background var(--rce-duration) var(--rce-ease), color var(--rce-duration) var(--rce-ease), border-color var(--rce-duration) var(--rce-ease);
}
.rce-cat-tab__emoji { font-size: 1.4rem; line-height: 1; }
.rce-cat-tab__label {
  width: 100%;
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.rce-cat-tab:hover, button.rce-cat-tab:hover,
.rce-cat-tab:focus, button.rce-cat-tab:focus {
  background: rgba(247,245,242,.14);
  color: #fff;
  border-color: rgba(232,98,26,.5);
}
.rce-cat-tab--active, button.rce-cat-tab.rce-cat-tab--active {
  background: var(--rce-orange);
  color: #fff;
  border-color: transparent;
}
.rce-cat-tab--active:hover, button.rce-cat-tab.rce-cat-tab--active:hover,
.rce-cat-tab--active:focus, button.rce-cat-tab.rce-cat-tab--active:focus {
  background: var(--rce-orange-dim);
}

.rce-products {
  margin-left: var(--rce-cat-nav-w, 84px);
  padding: clamp(16px, 3vw, 32px) clamp(10px, 3vw, 28px) 60px;
  max-width: 1160px;
}

.rce-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--rce-muted);
}
/* El atributo [hidden] por sí solo no alcanza acá: misma clase de conflicto de
   especificidad que .rce-cargar-mas más abajo (display:flex de la clase empata
   con [hidden] del navegador) — sin esto, "Cargando productos…" queda visible
   arriba del grid aunque JS ya haya terminado de cargar. */
.rce-loading[hidden] {
  display: none;
}
.rce-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--rce-sand);
  border-top-color: var(--rce-orange);
  border-radius: 50%;
  animation: rce-spin 0.8s linear infinite;
}
@keyframes rce-spin { to { transform: rotate(360deg); } }

.rce-empty, .rce-error-msg {
  padding: 40px 20px;
  text-align: center;
  color: var(--rce-muted);
}

/* !important: mismo conflicto de especificidad que .rce-catalogo-search__toggle
   más arriba en este archivo — [type="button"] del tema empata en
   especificidad con la clase y carga después. */
.rce-cargar-mas {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 20px; padding: 14px;
  background: #fff !important; border: 1.5px solid var(--rce-border, #ddd) !important; border-radius: 10px;
  font-family: inherit; font-weight: 700; font-size: .92rem !important; color: var(--rce-graphite) !important;
  cursor: pointer;
}
.rce-cargar-mas:disabled { opacity: .6; cursor: default; }

.rce-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 560px) {
  .rce-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
  }
}

/* Cards más compactas cuando van 2 por fila (mobile) */
@media (max-width: 559px) {
  .rce-card__img-wrap { aspect-ratio: 1 / 1; }
  .rce-card__body { padding: 8px; gap: 3px; }
  .rce-card__title {
    font-size: .92rem;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rce-card__desc {
    font-size: .7rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rce-card__price { font-size: .88rem; }
  .rce-card__stock { font-size: .68rem; }
  .rce-cat-chip { font-size: .7rem; padding: 3px 7px; }
  .rce-card__footer { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ── CARD DE PRODUCTO ────────────────────────────────────────────────────────── */
.rce-card {
  background: #fff;
  border-radius: var(--rce-radius);
  overflow: hidden;
  box-shadow: var(--rce-shadow-card);
  display: flex;
  flex-direction: column;
}
.rce-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--rce-sand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rce-card__img { width: 100%; height: 100%; object-fit: cover; }
.rce-card__img-placeholder { font-size: 2.6rem; }
.rce-card__img:not([src=""]) ~ .rce-card__img-placeholder { display: none; }
.rce-card__agotado-badge {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--rce-danger);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.rce-card--agotado .rce-card__agotado-badge { display: inline-block; }
.rce-card--agotado .rce-card__img { filter: grayscale(.6); opacity: .7; }

.rce-card__add-btn, button.rce-card__add-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rce-graphite);
  color: #fff;
  border: none;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(35,40,46,.35);
  transition: transform .18s var(--rce-ease), background .18s var(--rce-ease);
}
.rce-card__add-btn:hover, button.rce-card__add-btn:hover { transform: scale(1.08); background: var(--rce-orange); }
.rce-card__add-btn:active { transform: scale(.92); }
.rce-card__add-btn:disabled, button.rce-card__add-btn:disabled { background: var(--rce-muted); cursor: not-allowed; }
.rce-card__add-btn--pop { animation: rce-add-pop .4s var(--rce-ease); }
@keyframes rce-add-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.rce-card--agotado .rce-card__add-btn { display: none; }

/* :not([hidden]) obligatorio — el reset del tema activo puede ganarle a un
   [hidden] simple con la misma especificidad (mismo bug ya documentado en
   Restaurante Manager para .rm-cart-empty/.rm-card__add-badge). */
.rce-card__add-badge:not([hidden]) {
  position: absolute;
  right: 3px;
  bottom: 34px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--rce-orange);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

.rce-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.rce-card__cats { display: flex; flex-wrap: wrap; gap: 4px; }
.rce-cat-chip {
  font-size: .68rem;
  font-weight: 700;
  color: var(--rce-text);
  background: var(--rce-sand);
  padding: 2px 8px;
  border-radius: 999px;
}
/* Oculto solo en móvil (a pedido del usuario): la categoría ya se filtra
   desde la barra lateral, y sacarla de la tarjeta le da más espacio al
   nombre del producto, que se veía muy apretado. En desktop se mantiene.
   Esta regla va DESPUÉS de `.rce-card__cats` de arriba a propósito: ambas
   tienen la misma especificidad, así que el orden en el archivo decide —
   puesta antes, quedaría tapada por la regla de arriba en todos los anchos. */
@media (max-width: 559px) {
  .rce-card__cats { display: none; }
}
.rce-card__title { font-size: 1rem; font-weight: 700; color: var(--rce-text); }
.rce-card__desc { font-size: .84rem; color: var(--rce-muted); line-height: 1.4; }
.rce-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rce-card__price { font-size: 1.05rem; font-weight: 800; color: var(--rce-orange); }
.rce-card__stock { font-size: .78rem; color: var(--rce-muted); font-weight: 600; }
.rce-card--agotado .rce-card__stock { color: var(--rce-danger); }

/* ══════════════════════════════════════════════════════════════════════════════
   CARRITO — FAB + drawer
   ══════════════════════════════════════════════════════════════════════════════ */
.rce-cart-fab {
  /* !important en position/bottom/right: este botón también lleva la clase
     .btn-shine (efecto de brillo reutilizado en varios botones del sitio),
     y gym-manager/assets/css/gm-front.css define su PROPIO `.btn-shine {
     position: relative; ... }` — misma especificidad, sin !important, pero
     carga después en el <head> de esta página y le ganaba la cascada al
     `position: fixed` de acá, dejando el botón posicionado en el flujo
     normal del documento (por eso aparecía metido en la barra de
     categorías y se movía con el scroll). Confirmado con CDP
     getMatchedStylesForNode contra producción. */
  position: fixed !important;
  bottom: clamp(90px, 18vw, 110px) !important;
  right: clamp(16px, 4vw, 28px) !important;
  z-index: 800;
  width: 60px; height: 60px;
  /* Gris traslúcido con blur tipo "vidrio esmerilado" — mismo criterio que
     Restaurante Manager: se lee como gris sobre cualquier fondo, y el
     ícono blanco contrasta mucho mejor que el emoji de color sobre un
     fondo sólido. */
  background: rgba(50, 50, 54, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(28,28,28,.32), 0 0 0 4px rgba(232,98,26,.16), inset 0 1px 0 rgba(255,255,255,.18);
  cursor: pointer;
  transition: transform .2s var(--rce-ease), box-shadow .2s var(--rce-ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rce-cart-fab__icon { width: 25px; height: 25px; }
.rce-cart-fab:hover { transform: scale(1.08); box-shadow: 0 6px 26px rgba(28,28,28,.4), 0 0 0 4px rgba(232,98,26,.22); }

.rce-cart-fab__badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--rce-graphite);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  padding-inline: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

/* ── Modal "elegir variante" ─────────────────────────────────────────────────── */
.rce-variante-modal { position: fixed; inset: 0; z-index: 960; pointer-events: none; }
.rce-variante-modal[aria-hidden="false"] { pointer-events: auto; }
.rce-variante-modal__backdrop {
  position: absolute; inset: 0; background: rgba(35,40,46,.6);
  opacity: 0; transition: opacity .25s var(--rce-ease);
}
.rce-variante-modal[aria-hidden="false"] .rce-variante-modal__backdrop { opacity: 1; }
.rce-variante-modal__panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(.96);
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  background: var(--rce-cream);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0;
  transition: opacity .25s var(--rce-ease), transform .25s var(--rce-ease);
}
.rce-variante-modal[aria-hidden="false"] .rce-variante-modal__panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rce-variante-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: var(--rce-graphite); color: #fff; flex-shrink: 0;
}
.rce-variante-modal__header h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
/* !important en los dos: son <button type="button">, mismo conflicto de
   especificidad con el reset del tema ya documentado varias veces en este
   archivo (.rce-catalogo-search__toggle, .rce-cuenta-tab, etc.) — sin esto se
   veían con el contorno/texto rosado del tema en vez del estilo propio. */
.rce-variante-modal__close {
  background: rgba(255,255,255,.12) !important; border: none !important; color: #fff !important;
  width: 30px; height: 30px; border-radius: 50%; font-size: .95rem; cursor: pointer;
}
.rce-variante-modal__lista { padding: 16px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.rce-variante-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff !important; border: 1.5px solid rgba(35,40,46,.14) !important; border-radius: 10px;
  padding: 12px 14px; font-family: inherit; font-size: .94rem; font-weight: 600;
  color: var(--rce-graphite) !important; cursor: pointer; text-align: left;
}
.rce-variante-opcion:hover { border-color: var(--rce-orange) !important; }
.rce-variante-opcion strong { color: var(--rce-orange); font-size: 1.02rem; }

.rce-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}
.rce-cart-drawer[aria-hidden="false"] { pointer-events: auto; }

.rce-cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35,40,46,.6);
  opacity: 0;
  transition: opacity .25s var(--rce-ease);
}
.rce-cart-drawer[aria-hidden="false"] .rce-cart-drawer__backdrop { opacity: 1; }

.rce-cart-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  background: var(--rce-cream);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s var(--rce-ease);
  box-shadow: -10px 0 40px rgba(0,0,0,.3);
  border-radius: 16px 0 0 16px;
  overflow: hidden;
}
.rce-cart-drawer[aria-hidden="false"] .rce-cart-drawer__panel { transform: none; }

.rce-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: var(--rce-graphite);
  color: #fff;
  flex-shrink: 0;
}
.rce-cart-drawer__title { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.rce-cart-drawer__close {
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
}
.rce-cart-drawer__close:hover { background: rgba(255,255,255,.22); }

.rce-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--rce-cream);
}
.rce-cart-empty:not([hidden]) {
  text-align: center;
  color: var(--rce-muted);
  font-size: .88rem;
  padding: 50px 0;
}

.rce-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rce-sand);
  border-left: 4px solid var(--rce-orange);
  border-radius: var(--rce-radius-sm);
  padding: 10px 12px;
}
.rce-cart-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rce-cart-item__nombre { font-size: .88rem; font-weight: 700; color: var(--rce-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rce-cart-item__precio { font-size: .78rem; color: var(--rce-orange); font-weight: 700; }
.rce-cart-item__qty { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* "button.rce-qty-btn"/"button.rce-cart-item__remove" duplicados a propósito:
   el tema activo trae un reset ("[type=button],[type=submit],button {
   border:1px solid #cc3366; background:transparent; color:#cc3366 }") que
   empata en especificidad con una sola clase — sin el duplicado, esos
   botones se ven con el contorno rosa/rojo del tema en vez del estilo
   propio (mismo fix ya aplicado varias veces en este sitio). */
.rce-qty-btn, button.rce-qty-btn {
  width: 28px; height: 28px;
  background: #fff;
  border: 1px solid var(--rce-border);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rce-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(35,40,46,.12);
  transition: background .15s var(--rce-ease), color .15s var(--rce-ease), border-color .15s var(--rce-ease), transform .15s var(--rce-ease);
  flex-shrink: 0;
}
.rce-qty-btn:hover, button.rce-qty-btn:hover { background: var(--rce-orange); border-color: var(--rce-orange); color: #fff; transform: scale(1.1); }
.rce-qty-btn:active, button.rce-qty-btn:active { transform: scale(.92); }
.rce-qty-num { font-size: .9rem; font-weight: 700; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.rce-cart-item__remove, button.rce-cart-item__remove {
  background: transparent;
  border: none;
  color: var(--rce-muted);
  font-size: .85rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color .12s, background .12s, transform .15s var(--rce-ease);
}
.rce-cart-item__remove:hover, button.rce-cart-item__remove:hover { color: var(--rce-danger); background: rgba(179,38,30,.1); transform: scale(1.15) rotate(90deg); }

.rce-cart-footer {
  border-top: 1px solid var(--rce-border);
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  background: var(--rce-cream);
}
.rce-cart-total { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 700; color: var(--rce-text); background: var(--rce-sand); border-radius: var(--rce-radius-sm); padding: 10px 14px; }
.rce-cart-total__amount { font-size: 1.3rem; font-weight: 800; color: var(--rce-orange); }
.rce-cart-clear { background: transparent; border: none; color: var(--rce-muted); font-size: .78rem; cursor: pointer; text-align: center; text-decoration: underline; }
.rce-cart-clear:hover { color: var(--rce-danger); }
.rce-btn--full { width: 100%; }

@media (max-width: 480px) {
  .rce-cart-drawer__panel { width: 100vw; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHECKOUT
   ══════════════════════════════════════════════════════════════════════════════ */
.rce-co-screen { display: block; }
.rce-co-screen[hidden] { display: none; }

.rce-container--narrow { max-width: 640px; margin: 0 auto; padding: 0 16px 60px; }

.rce-checkout-page { min-height: 100vh; background: var(--rce-cream); }
.rce-checkout-page #rceco-confirm { background: var(--rce-graphite); min-height: 100vh; }

.rce-co-empty { text-align: center; padding: 80px 16px; }
.rce-co-empty__icon { font-size: 3rem; margin-bottom: 12px; }
.rce-co-empty h2 { margin-bottom: 8px; }
.rce-co-empty p { color: var(--rce-muted); margin-bottom: 20px; }

.rce-checkout-page .rce-co-title {
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--rce-text);
  margin: 28px 0 16px;
}
.rce-co-subtitle { display: block; font-size: .88rem; font-weight: 400; color: var(--rce-muted); margin-top: 2px; }

.rce-checkout-page .rce-co-card {
  position: relative;
  background: var(--rce-sand);
  border-radius: var(--rce-radius-lg);
  box-shadow: var(--rce-shadow-card);
  color: var(--rce-text);
  padding: 20px 20px 20px 23px;
  margin-bottom: 14px;
  overflow: hidden;
}
.rce-checkout-page .rce-co-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--rce-orange); }
.rce-checkout-page .rce-co-card--dark { background: var(--rce-graphite-lt); color: #fff; }
.rce-checkout-page .rce-co-card--dark::before { background: var(--rce-orange); }
.rce-checkout-page .rce-co-card__title { font-size: .78rem; font-weight: 800; color: var(--rce-muted); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.rce-checkout-page .rce-co-card--dark .rce-co-card__title { color: var(--rce-orange); }

.rce-checkout-page .rce-co-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rce-checkout-page .rce-co-item { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.rce-checkout-page .rce-co-item__qty { background: var(--rce-orange); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: .76rem; font-weight: 700; flex-shrink: 0; align-self: flex-start; white-space: nowrap; }
.rce-checkout-page .rce-co-item__main { flex: 1; min-width: 0; }
.rce-checkout-page .rce-co-item__nombre { color: var(--rce-text); }
.rce-checkout-page .rce-co-item__precio { font-weight: 700; color: var(--rce-orange); flex-shrink: 0; }

.rce-checkout-page .rce-co-subtotals { border-top: 1px solid var(--rce-border); padding-top: 10px; }
.rce-checkout-page .rce-co-total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.1rem; color: var(--rce-text); }
.rce-checkout-page .rce-co-total-amount { color: var(--rce-orange); }
.rce-checkout-page .rce-co-edit-link { font-size: .82rem; color: var(--rce-muted); text-decoration: none; display: inline-block; margin-top: 10px; }
.rce-checkout-page .rce-co-edit-link:hover { color: var(--rce-orange); }

.rce-co-tipo-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.rce-checkout-page .rce-co-tipo-btn, button.rce-co-tipo-btn {
  padding: 13px 6px;
  border-radius: var(--rce-radius);
  border: 1.5px solid var(--rce-border);
  background: var(--rce-cream);
  font-weight: 700;
  cursor: pointer;
  font-size: .88rem;
  color: var(--rce-muted);
  text-align: center;
  white-space: normal;
}
.rce-checkout-page .rce-co-tipo-btn:hover, button.rce-co-tipo-btn:hover { border-color: var(--rce-orange); color: var(--rce-text); }
.rce-checkout-page .rce-co-tipo-btn--active, button.rce-co-tipo-btn.rce-co-tipo-btn--active {
  border-color: transparent;
  background: var(--rce-orange);
  color: #fff;
}

.rce-co-panel { margin-top: 4px; }
.rce-checkout-page .rce-co-hint { font-size: .8rem; color: var(--rce-muted); margin: 8px 0 0; }
.rce-co-hint--pago { margin-top: 14px; font-weight: 600; }

.rce-co-field { margin-bottom: 14px; }
.rce-checkout-page .rce-co-field label { display: block; font-size: .84rem; font-weight: 700; color: var(--rce-text); margin-bottom: 6px; }
.rce-checkout-page .rce-co-input, .rce-checkout-page .rce-co-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--rce-border);
  border-radius: var(--rce-radius-sm);
  font-size: .95rem;
  font-family: inherit;
  background: var(--rce-cream);
  color: var(--rce-text);
}
.rce-checkout-page .rce-co-input:focus, .rce-checkout-page .rce-co-textarea:focus {
  outline: none;
  border-color: var(--rce-orange);
  box-shadow: 0 0 0 3px rgba(232,98,26,.2);
}
.rce-co-textarea { resize: vertical; min-height: 76px; }
.rce-req { color: var(--rce-orange); }

.rce-co-field--float { position: relative; margin-bottom: 14px; }
.rce-checkout-page .rce-co-field--float .rce-co-input { padding-top: 20px; padding-bottom: 6px; }
.rce-checkout-page .rce-co-field--float label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: .95rem;
  font-weight: 500;
  color: rgba(35,40,46,.45);
  pointer-events: none;
  transition: top .15s var(--rce-ease), font-size .15s var(--rce-ease), color .15s var(--rce-ease);
}
.rce-checkout-page .rce-co-field--float .rce-co-input:focus + label,
.rce-checkout-page .rce-co-field--float .rce-co-input:not(:placeholder-shown) + label {
  top: 11px;
  transform: translateY(0);
  font-size: .66rem;
  font-weight: 800;
  color: var(--rce-orange);
}

.rce-checkout-page .rce-co-error { background: rgba(179,38,30,.08); border: 1px solid rgba(179,38,30,.3); border-radius: 9px; padding: 12px 16px; color: var(--rce-danger); font-size: .9rem; margin-bottom: 12px; }
.rce-checkout-page .rce-co-warning { background: rgba(232,98,26,.08); border: 1px solid rgba(232,98,26,.35); border-radius: 9px; padding: 12px 16px; color: var(--rce-orange-dim); font-size: .86rem; margin-bottom: 12px; }
.rce-co-submit { margin-top: 4px; }
.rce-checkout-page .rce-co-terms { font-size: .76rem; color: var(--rce-muted); text-align: center; margin-top: 8px; }

.rce-checkout-page .rce-co-comprobante-msg { border-radius: var(--rce-radius-sm); padding: 12px 14px; font-size: .86rem; margin-bottom: 14px; line-height: 1.5; }
.rce-checkout-page .rce-co-comprobante-msg--err { background: rgba(179,38,30,.16); border: 1.5px solid rgba(255,143,128,.4); color: #ff8f80; }

.rce-checkout-page .rce-co-card--confirm-items { border-top: 3px solid var(--rce-orange); }
.rce-checkout-page .rce-co-card--confirm-items::before { display: none; }
#rceco-confirm .rce-co-card { padding: 16px 18px; margin-bottom: 12px; }

.rce-checkout-page .rce-co-confirm-hero { text-align: center; padding: 30px 16px 14px; }
.rce-co-confirm-check {
  width: 70px; height: 70px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--rce-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 0 0 8px rgba(232,98,26,.18), 0 8px 24px rgba(232,98,26,.4);
}
.rce-checkout-page .rce-co-confirm-hero h1 { font-weight: 800; font-size: 1.5rem; color: #fff; margin: 0 0 8px; }
.rce-co-confirm-num { font-size: 1rem; font-weight: 800; color: var(--rce-orange); background: rgba(255,255,255,.08); display: inline-block; padding: 5px 18px; border-radius: 20px; }

/* Estado en vivo — ícono girando en 3D real (perspective + rotateY) mientras
   el cliente espera que el pedido actualice de estado por polling. */
.rce-co-live-status { text-align: center; padding: 4px 16px 20px; }
.rce-co-live-status__stage { width: 72px; height: 72px; margin: 0 auto 10px; perspective: 400px; }
.rce-co-live-status__plate {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  transform-style: preserve-3d;
  animation: rce-plate-spin-3d 3.4s linear infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
@keyframes rce-plate-spin-3d {
  0%   { transform: rotateY(0deg) rotateX(10deg); }
  100% { transform: rotateY(360deg) rotateX(10deg); }
}
.rce-checkout-page .rce-co-live-status__msg { color: rgba(255,255,255,.65); font-size: .84rem; line-height: 1.4; margin: 0 0 12px; }
.rce-co-estado-badge--lg { font-size: .9rem; padding: 7px 18px; }
@media (prefers-reduced-motion: reduce) { .rce-co-live-status__plate { animation: none; } }

.rce-co-confirm-row:not([hidden]) { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; }
.rce-co-confirm-row:last-child { border-bottom: none; }
.rce-checkout-page .rce-co-card--dark .rce-co-confirm-row { color: rgba(255,255,255,.75); }
.rce-checkout-page .rce-co-card--dark .rce-co-confirm-row strong { color: #fff; }
#rceco-conf-total { background: var(--rce-orange) !important; color: #fff !important; padding: 3px 12px; border-radius: 20px; display: inline-block; }

.rce-co-estado-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 5px 13px; font-size: .8rem; font-weight: 700; background: rgba(232,98,26,.2); color: #ffb27a; }
.rce-co-estado-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: rce-pulse 1.4s ease-in-out infinite; }
@keyframes rce-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.rce-co-estado-badge--pendiente  { background: rgba(232,98,26,.2); color: #ffb27a; }
.rce-co-estado-badge--preparando { background: rgba(232,98,26,.2); color: #ffb27a; }
.rce-co-estado-badge--listo      { background: rgba(232,98,26,.32); color: #ffcc9c; }
.rce-co-estado-badge--entregado  { background: rgba(255,255,255,.16); color: #fff; }
.rce-co-estado-badge--entregado .rce-co-estado-dot { animation: none; }
.rce-co-estado-badge--cancelado  { background: rgba(179,38,30,.28); color: #ff8f80; }
.rce-co-estado-badge--cancelado .rce-co-estado-dot { animation: none; }

.rce-co-confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.rce-btn--ghost-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
}
.rce-btn--ghost-outline:hover { background: rgba(255,255,255,.12); }

@media (min-width: 480px) {
  .rce-cart-fab { width: 62px; height: 62px; }
}