/* ============================================================
   Fanor · Header — Minicart (drawer lateral, estilo "fiel").
   Portado 1:1 del prototipo Pruebas/ (minicart-base.css + minicart-1.css
   + tokens.css), namespaced bajo la raíz .fanor-mc y AUTOCONTENIDO: el
   drawer se reubica a <body> (fuera de .fanor-hdr/.fanor-prod), así que
   define aquí sus propios tokens --fn-* / motion / z-index.

   Configurable desde Elementor vía --fanor-mc-* (con fallback = estilo 1).
   Anti-hover: como el drawer sale de .fanor-hdr, replica el blindaje de
   header-base.css para que el hover del tema/Elementor no se cuele, sin
   matar las animaciones de :active del propio minicart.
   ============================================================ */

.fanor-mc {
  /* ---- Colores (fallback = estilo 1; los controles Elementor sobrescriben) ---- */
  --fn-texto:        var(--fanor-mc-texto, #202124);
  --fn-texto-2:      var(--fanor-mc-texto-2, #5B5C5D);
  --fn-gris-tenue:   #9AA0A6;
  --fn-rojo:         var(--fanor-mc-accent, #CC0000);
  --fn-rojo-hover:   var(--fanor-mc-accent-h, #A80000);
  --fn-borde:        var(--fanor-mc-borde, #E5E7EB);
  --fn-borde-input:  #D1D5DB;
  --fn-hover-gris:   #F3F4F6;
  --fn-panel:        var(--fanor-mc-panel, #FFFFFF);

  /* ---- Tipografías ----
     El drawer es autocontenido (vive en <body>, fuera de .fanor-prod), así que
     redefine los tokens `--fn-*` que consumen sus reglas. Los VALORES ya no son
     propios: salen de `fuentes.css`, que es global (`:root`) y por eso sí llega
     hasta aquí. Mientras fueron propios el carrito se veía en Inter y el resto
     del sitio en otra letra — la razón de que "el carrito no coincidiera". */
  --fn-fuente:       var(--fanor-font-body, 'Manrope', system-ui, sans-serif);
  --fn-fuente-cond:  var(--fanor-font-display, 'Madiffy Sans Bold Condensed', sans-serif);
  --fn-fuente-label: var(--fanor-font-body, 'Manrope', system-ui, sans-serif);

  /* ---- Radios / sombra ---- */
  --fn-r-6:          6px;
  --fn-sombra-drawer: -18px 0 48px rgba(0, 0, 0, .12);

  /* ---- Motion ---- */
  --fn-ease-fanor:   cubic-bezier(.4, 0, .2, 1);
  --fn-ease-drawer:  cubic-bezier(.32, .72, 0, 1);
  --fn-ease-out:     cubic-bezier(.23, 1, .32, 1);
  --fn-dur-enter:    300ms;
  --fn-dur-exit:     220ms;

  /* ---- z-index (alto: por encima de headers sticky y de Elementor; el
     toast de Fanor va aún más arriba, z:999999) ---- */
  --z-backdrop:      100000;
  --z-drawer:        100001;

  /* El cajón va en la CONDENSADA de punta a punta: título, nombres, SKU, cantidad,
     precios, subtotal y botones. Los números en particular se piden así — es una
     decisión de marca, no la regla general del plugin, donde los importes van en
     la familia de texto (tarjetas, checkout). Solo se salen las dos frases
     explicativas del cajón, que sí son prosa: la nota del pie y el subtítulo del
     estado vacío. Ambas lo declaran en su propia regla. */
  font-family: var(--fn-fuente-cond);
  color: var(--fn-texto);
}

.fanor-mc,
.fanor-mc *,
.fanor-mc *::before,
.fanor-mc *::after { box-sizing: border-box; }

.fanor-mc button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
.fanor-mc a { text-decoration: none; color: inherit; }
.fanor-mc img { display: block; max-width: 100%; }
/* Blindaje contra temas que ocultan/redimensionan <svg> (icon-fonts, resets):
   los iconos del drawer llevan tamaño propio y no deben colapsar. */
.fanor-mc svg { display: block !important; }

/* ---- Blindaje anti-hover del tema/Elementor (ver header-base.css) ---- */
.fanor-mc a:hover, .fanor-mc a:focus, .fanor-mc a:active,
.fanor-mc button:hover, .fanor-mc button:focus, .fanor-mc button:active {
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  text-decoration: none !important;
}
/* Mata el "lift" del tema en hover/focus, PERO no durante :active (para no
   pisar el scale() de feedback del propio minicart). */
.fanor-mc a:hover:not(:active), .fanor-mc a:focus:not(:active),
.fanor-mc button:hover:not(:active), .fanor-mc button:focus:not(:active) {
  transform: none !important;
}
/* Red de seguridad anti "hover rosa": specificity 0 (:where) y sin !important,
   para que los fondos propios (más específicos) del minicart siempre ganen. */
:where(.fanor-mc) a:hover, :where(.fanor-mc) a:focus, :where(.fanor-mc) a:active,
:where(.fanor-mc) button:hover, :where(.fanor-mc) button:focus, :where(.fanor-mc) button:active {
  background-color: transparent;
}
.fanor-mc a:focus-visible,
.fanor-mc button:focus-visible,
.fanor-mc input:focus-visible {
  outline: 2px solid var(--fn-gris-tenue) !important;
  outline-offset: 2px;
}

/* ---- Blindaje anti-COLAPSO del tema (tamaño de iconos e input) ----
   DIAGNÓSTICO real (getComputedStyle en producción): el color/stroke de los iconos
   es CORRECTO (gris); lo que falla es el ANCHO. El <svg> de la X medía 4px de ancho
   × 18px de alto → invisible (una astilla). Causa: los iconos van dentro de <button>
   (flex items) y solo tenían `width` fijo, SIN `min-width`; el flex del tema los
   encoge por debajo. Los <svg> en <div> (miniatura, carrito vacío) no se encogen,
   por eso esos sí se ven. Fix: forzar tamaño + `min-width` + `flex:none` sobre el
   botón, su <svg> y el <input>, para que NO puedan encogerse. Doble ancla
   (#fanor-minicart + .fanor-mc.fanor-mc) + !important para ganar al tema. El color
   se mantiene forzado como seguro (aunque no era el culpable). */

/* Botones contenedores: que el flex del header/fila no los encoja. */
#fanor-minicart .mc-close, .fanor-mc.fanor-mc .mc-close {
  width: 36px !important; min-width: 36px !important; height: 36px !important; flex: 0 0 auto !important;
}
#fanor-minicart .mc-remove, .fanor-mc.fanor-mc .mc-remove {
  width: 30px !important; min-width: 30px !important; height: 30px !important; flex: 0 0 auto !important;
}

/* Los <svg>: ancho/alto fijos + min-width + sin encoger (+ color/stroke de seguro). */
#fanor-minicart .mc-close svg, .fanor-mc.fanor-mc .mc-close svg {
  width: 18px !important; min-width: 18px !important; height: 18px !important; flex: 0 0 auto !important;
  color: var(--fn-texto-2) !important; stroke: currentColor !important; fill: none !important;
}
#fanor-minicart .mc-remove svg, .fanor-mc.fanor-mc .mc-remove svg {
  width: 16px !important; min-width: 16px !important; height: 16px !important; flex: 0 0 auto !important;
  color: var(--fn-gris-tenue) !important; stroke: currentColor !important; fill: none !important;
}
#fanor-minicart .mc-remove:hover svg, .fanor-mc.fanor-mc .mc-remove:hover svg { color: var(--fn-rojo) !important; }

/* Input del número: que el flex de .mc-qty no lo encoja (el "1" se ocultaba igual). */
#fanor-minicart .mc-qty, .fanor-mc.fanor-mc .mc-qty { flex: 0 0 auto !important; }
#fanor-minicart .mc-qty-num, .fanor-mc.fanor-mc .mc-qty-num {
  width: 34px !important; min-width: 34px !important; flex: 0 0 auto !important;
  color: var(--fn-texto) !important; -webkit-text-fill-color: var(--fn-texto) !important; opacity: 1 !important;
  /* El tema/Woo mete `padding:.5rem 1rem` a los <input>; con box-sizing:border-box
     y 34px de ancho, el área de contenido quedaba en 2px y el "1" se recortaba. */
  padding: 0 !important;
  text-indent: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  /* Igual que Producto·Acciones: apaga el estilo nativo/tema para que al enfocar no
     salga borde/sombra/outline ("se ponía raro"). El borde lo da el contenedor .mc-qty. */
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Gana al `:focus-visible` global (.fanor-mc input:focus-visible) que dibujaba el
   recuadro gris al hacer click. #id + clase + pseudo (1,2,0) > (0,2,1). */
#fanor-minicart .mc-qty-num:focus, #fanor-minicart .mc-qty-num:focus-visible,
.fanor-mc.fanor-mc .mc-qty-num:focus, .fanor-mc.fanor-mc .mc-qty-num:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
#fanor-minicart .mc-qty-btn, .fanor-mc.fanor-mc .mc-qty-btn {
  min-width: 32px !important; flex: 0 0 auto !important; color: var(--fn-texto) !important;
}

/* ---- Contenedor raíz (fijo, cubre el viewport) ---- */
.fanor-mc {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}
.fanor-mc.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* ---- Backdrop ---- */
.fanor-mc .mc-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(16, 18, 20, .42);
  opacity: 0;
  transition: opacity var(--fn-dur-exit) var(--fn-ease-fanor);
}
.fanor-mc.is-open .mc-backdrop { opacity: 1; }

/* ---- Panel deslizante (derecha) ---- */
.fanor-mc .mc-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-drawer);
  height: 100%;
  height: 100dvh;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--fn-panel);
  box-shadow: var(--fn-sombra-drawer);
  transform: translateX(100%);
  transition: transform var(--fn-dur-exit) var(--fn-ease-fanor);
  will-change: transform;
}
.fanor-mc.is-open .mc-panel {
  transform: translateX(0);
  transition: transform var(--fn-dur-enter) var(--fn-ease-drawer);
}

/* ---- Cabecera ---- */
.fanor-mc .mc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--fn-borde);
}
/* "Tu carrito (3)": el mismo par etiqueta + conteo que el botón del header.

   A 15px era el texto más pequeño de su propia cabecera —menos que el nombre de
   cualquier producto de la lista— y no se leía como el título del cajón que es.
   A 20px manda sobre el contenido; en una condensada eso ocupa a lo ancho como
   ~16px de una normal, así que sigue cabiendo de sobra junto a la ⨯. */
.fanor-mc .mc-title {
  margin: 0;
  font-family: var(--fn-fuente-cond);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.fanor-mc .fanor-mc-count { font-family: var(--fn-fuente-cond); color: var(--fn-rojo); font-weight: 700; }

.fanor-mc .mc-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: var(--fn-r-6);
  color: var(--fn-texto-2);
  transition: background .15s ease, color .15s ease, transform .12s var(--fn-ease-out);
}
.fanor-mc .mc-close:hover { background: var(--fn-hover-gris); color: var(--fn-texto); }
.fanor-mc .mc-close:active { transform: scale(.94); }
.fanor-mc .mc-close svg { width: 18px !important; height: 18px !important; }

/* ---- Cuerpo con scroll ---- */
.fanor-mc .mc-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--fn-borde-input) transparent;
}
.fanor-mc .mc-body::-webkit-scrollbar { width: 8px; }
.fanor-mc .mc-body::-webkit-scrollbar-thumb { background: var(--fn-borde-input); border-radius: 8px; }
.fanor-mc .mc-items { list-style: none; margin: 0; padding: 8px 20px; }

/* ---- Fila de producto ---- */
.fanor-mc .mc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--fn-borde);
}
.fanor-mc .mc-item:last-child { border-bottom: none; }
.fanor-mc .mc-item.is-loading { opacity: .55; pointer-events: none; }

.fanor-mc .mc-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: var(--fn-hover-gris);
  border-radius: var(--fn-r-6);
  color: var(--fn-texto-2);
  overflow: hidden;
}
.fanor-mc .mc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fanor-mc .mc-thumb svg { width: 40px !important; height: 40px !important; }

/* Sin imagen se pinta la del placeholder de WooCommerce, que es un `<img>` y ya
   entra por la regla de arriba. Esto viste el engranaje del último recurso —cuando
   WooCommerce no está cargado, o cuando la propia imagen del placeholder falla—:
   círculo como el del product grid, sin el texto de categoría. La regla del svg
   (0,3,1) gana a `.mc-thumb svg{40px}`. */
.fanor-mc .mc-thumb .mc-noimg {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FAFAFA;
  border: 1px solid #EDEDED;
  color: #C9A0A0; /* engranaje rosa vía currentColor */
}
.fanor-mc .mc-thumb .mc-noimg svg { width: 28px !important; height: 28px !important; }

.fanor-mc .mc-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fanor-mc .mc-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fn-texto);
}
.fanor-mc .mc-sku { margin: 0; font-size: 12px; color: var(--fn-texto-2); }
.fanor-mc .mc-item-bottom {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Selector de cantidad */
.fanor-mc .mc-qty {
  display: inline-flex;
  align-items: stretch;
  height: 34px;
  border: 1px solid var(--fn-borde-input);
  background: #fff;
  border-radius: var(--fn-r-6);
  overflow: hidden;
}
.fanor-mc .mc-qty-btn {
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--fn-texto);
  font-size: 17px;
  line-height: 1;
  transition: background .12s ease;
}
.fanor-mc .mc-qty-btn:hover:not(:disabled) { background: var(--fn-hover-gris); }
.fanor-mc .mc-qty-btn:disabled { color: var(--fn-gris-tenue); cursor: not-allowed; }
.fanor-mc .mc-qty-num {
  width: 34px;
  text-align: center;
  border: none;
  background: transparent;
  /* !important: algunos temas fuerzan el color de los <input> del checkout. */
  color: var(--fn-texto) !important;
  -webkit-text-fill-color: var(--fn-texto);
  /* Los <input> no heredan la fuente del contenedor: hay que nombrársela. */
  font-family: var(--fn-fuente-cond);
  font-weight: 700;
  font-size: 14px;
  -moz-appearance: textfield;
}
.fanor-mc .mc-qty-num::-webkit-outer-spin-button,
.fanor-mc .mc-qty-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fanor-mc .mc-price { font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--fn-texto); }

.fanor-mc .mc-remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: var(--fn-r-6);
  color: var(--fn-gris-tenue);
  transition: background .15s ease, color .15s ease, transform .12s var(--fn-ease-out);
}
.fanor-mc .mc-remove:hover { background: var(--fn-hover-gris); color: var(--fn-rojo); }
.fanor-mc .mc-remove:active { transform: scale(.9); }
.fanor-mc .mc-remove svg { width: 16px !important; height: 16px !important; }

/* ---- Pie / resumen ---- */
.fanor-mc .mc-foot {
  flex: 0 0 auto;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fn-borde);
  background: var(--fn-panel);
}
.fanor-mc .mc-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.fanor-mc .mc-subtotal-label {
  font-family: var(--fn-fuente-cond);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fn-texto-2);
}
.fanor-mc .mc-subtotal-val { font-size: 18px; font-weight: 700; }

/* "Envío e impuestos se calculan al pagar": una de las dos frases del cajón que
   se leen como prosa, no como rótulo. En la familia de texto. */
.fanor-mc .mc-foot-note { margin: 0 0 14px; font-family: var(--fn-fuente); font-size: 12px; color: var(--fn-texto-2); }

.fanor-mc .mc-checkout {
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--fn-rojo);
  color: #fff;
  border-radius: var(--fn-r-6);
  /* Los tres botones del pie van en condensada: son acciones en mayúsculas, la
     misma pieza que los botones del sitio (ficha, checkout, tarjetas). */
  font-family: var(--fn-fuente-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: background .14s ease, transform .12s var(--fn-ease-out);
}
.fanor-mc .mc-checkout:hover { background: var(--fn-rojo-hover); }
.fanor-mc .mc-checkout:active { transform: scale(.985); }

/* "Ver carrito" — secundario ghost negro. */
.fanor-mc .mc-viewcart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin-top: 10px;
  background: #fff;
  color: var(--fn-texto);
  border: 1.5px solid var(--fn-texto);
  border-radius: var(--fn-r-6);
  font-family: var(--fn-fuente-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: background .14s ease, color .14s ease, transform .12s var(--fn-ease-out);
}
.fanor-mc .mc-viewcart:hover { background: var(--fn-texto); color: #fff; }
.fanor-mc .mc-viewcart:active { transform: scale(.985); }

/* "Seguir comprando" — terciario, solo texto. */
.fanor-mc .mc-continue {
  width: 100%;
  height: 42px;
  margin-top: 4px;
  background: transparent;
  color: var(--fn-texto-2);
  border-radius: var(--fn-r-6);
  font-family: var(--fn-fuente-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: background .14s ease, color .14s ease;
}
.fanor-mc .mc-continue:hover { background: var(--fn-hover-gris); color: var(--fn-texto); }

/* ---- Estado vacío (lo controla la clase is-empty del wrapper dinámico) ---- */
.fanor-mc .mc-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 32px 28px;
  gap: 6px;
}
.fanor-mc.is-empty .mc-empty { display: flex; }
.fanor-mc.is-empty .mc-items,
.fanor-mc.is-empty .mc-foot { display: none; }
.fanor-mc .mc-empty-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fn-hover-gris);
  color: var(--fn-gris-tenue);
  margin-bottom: 8px;
}
.fanor-mc .mc-empty-icon svg { width: 30px !important; height: 30px !important; }
.fanor-mc .mc-empty-title { margin: 0; font-family: var(--fn-fuente-cond); font-size: 18px; font-weight: 700; }
/* La otra frase de prosa del cajón (ver `.mc-foot-note`). */
.fanor-mc .mc-empty-sub { margin: 0; font-family: var(--fn-fuente); font-size: 13px; color: var(--fn-texto-2); max-width: 30ch; }
.fanor-mc .mc-empty-cta {
  margin-top: 14px;
  height: 46px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fn-rojo);
  color: #fff;
  border-radius: var(--fn-r-6);
  font-family: var(--fn-fuente-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: background .14s ease, transform .12s var(--fn-ease-out);
}
.fanor-mc .mc-empty-cta:hover { background: var(--fn-rojo-hover); }
.fanor-mc .mc-empty-cta:active { transform: scale(.97); }

/* ---- Entrada escalonada de ítems (solo mientras .is-animating, al abrir) ---- */
.fanor-mc.is-animating .mc-item {
  animation: fanor-mc-item-in var(--fn-dur-enter) var(--fn-ease-out) both;
}
.fanor-mc.is-animating .mc-item:nth-child(1) { animation-delay: 60ms; }
.fanor-mc.is-animating .mc-item:nth-child(2) { animation-delay: 110ms; }
.fanor-mc.is-animating .mc-item:nth-child(3) { animation-delay: 160ms; }
.fanor-mc.is-animating .mc-item:nth-child(4) { animation-delay: 210ms; }
.fanor-mc.is-animating .mc-item:nth-child(n+5) { animation-delay: 250ms; }

@keyframes fanor-mc-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Móvil: panel ~5% más angosto para poder cerrar con el pulgar ---- */
@media (max-width: 767px) {
  .fanor-mc .mc-panel { width: min(400px, 87vw); }
}

/* ---- Reduced motion: sin desplazamientos; solo opacidad ---- */
@media (prefers-reduced-motion: reduce) {
  .fanor-mc .mc-panel,
  .fanor-mc.is-open .mc-panel {
    transition: opacity var(--fn-dur-exit) ease;
    transform: none;
    opacity: 0;
  }
  .fanor-mc.is-open .mc-panel { opacity: 1; }
  .fanor-mc.is-animating .mc-item { animation: none; }
  .fanor-mc .mc-close:active,
  .fanor-mc .mc-remove:active,
  .fanor-mc .mc-checkout:active,
  .fanor-mc .mc-viewcart:active,
  .fanor-mc .mc-empty-cta:active { transform: none; }
}

/* ---- Anti-zoom iOS: Safari hace zoom al enfocar si el input mide <16px. En
   táctil subimos el número a 16px; en escritorio (ratón) se queda en 14px.
   Mismo patrón que header-buscador.css / header-vehiculo.css. ---- */
@media (pointer: coarse) {
  #fanor-minicart .mc-qty-num, .fanor-mc.fanor-mc .mc-qty-num { font-size: 16px !important; }
}