/**
 * Ficha rotativa de pie de sitio [cda_ficha_footer]
 * Sistema de diseño NOAX — ADR-012 / ADR-013
 *
 * Estilos específicos para escritorio (in-flow, colapsable, 2 ofertas/grupo)
 * y celular (fija abajo, fondo oscuro blur, 1 oferta/grupo, swipe, descartable).
 *
 * @package cda-afiliado
 *
 * REGLA DE MANTENIMIENTO (2026-09-07): un selector, UNA definicion. Si hace falta cambiar
 * una propiedad, se edita el bloque que ya existe -- no se agrega otro al final. Este
 * archivo llego a tener 12 selectores definidos dos y tres veces, y el efecto fue que
 * editar una de las copias no cambiaba nada en pantalla.
 *
 * Los `!important` se conservan a proposito. Este CSS corre dentro del tema de un editor
 * que no controlamos, y la hoja del tema puede cargarse DESPUES de la nuestra: ante dos
 * reglas de igual especificidad, gana la ultima en cargar. El contenedor duplicado
 * (`.cda-ficha.cda-ficha`, 0,2,0) empata con muchas reglas de tema, y ahi el !important es
 * lo unico que decide. Sacarlos sin probar contra los temas reales cambiaria una molestia
 * estetica por un riesgo de verdad.
 */

/* ============================================================
   1. TOKENS Y VARIABLES DE DISEÑO
   ============================================================ */
:root {
  --cda-ficha-bg: #FFFFFF;
  --cda-ficha-surface: #FAF9F6;
  --cda-ficha-border: #E4E2DC;
  --cda-ficha-border-strong: #D3D0C7;
  --cda-ficha-text: #101112;
  --cda-ficha-text-soft: #5A6070;
  --cda-ficha-text-muted: #8B8F9A;
  --cda-ficha-accent: #1A4FD0;
  --cda-ficha-accent-hover: #123A9E;
  --cda-ficha-green: #00A650;
  --cda-ficha-mobile-bg: rgba(32, 35, 42, 0.62);
  --cda-ficha-mobile-fallback: #1e2026;
  --cda-ficha-mobile-text: #FFFFFF;
  --cda-ficha-mobile-text-soft: #A0A4AE;
  --cda-ficha-mobile-border: rgba(255, 255, 255, 0.16);
  --cda-ficha-radius: 8px;
  --cda-ficha-radius-sm: 6px;
  --cda-ficha-radius-pill: 9999px;
  --cda-ficha-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --cda-ficha-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --cda-ficha-font-dato: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cda-ficha-bg: #1A1A1A;
    --cda-ficha-surface: #242424;
    --cda-ficha-border: #333333;
    --cda-ficha-border-strong: #444444;
    --cda-ficha-text: #F0F0F0;
    --cda-ficha-text-soft: #A0A4AE;
    --cda-ficha-text-muted: #757984;
    --cda-ficha-mobile-bg: rgba(20, 22, 28, 0.70);
    --cda-ficha-mobile-fallback: #14161c;
  }
}

/* ============================================================
   2. AISLAMIENTO DEL TEMA ANFITRIÓN (ESPECIFICIDAD DUPLICADA)
   ============================================================ */
.cda-ficha.cda-ficha {
  font-family: var(--cda-ficha-font);
  box-sizing: border-box;
  max-width: 100%;
}

.cda-ficha.cda-ficha *,
.cda-ficha.cda-ficha *::before,
.cda-ficha.cda-ficha *::after {
  box-sizing: border-box;
}

.cda-ficha.cda-ficha :is(h1, h2, h3, h4, h5, h6, p, span, a, s, strong, small) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

.cda-ficha.cda-ficha button {
  font-family: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: inherit;
}

.cda-ficha.cda-ficha .cda-ficha__installments--con-interes {
  color: var(--cda-ficha-text-soft);
}

.cda-ficha.cda-ficha .cda-ficha__badge--full {
  background-color: #00A650;
  color: #FFFFFF;
}

.cda-ficha.cda-ficha .cda-ficha__badge--descuento {
  background-color: #00A650;
  color: #FFFFFF;
}

.cda-ficha.cda-ficha .cda-ficha__badge--envio {
  background-color: var(--cda-ficha-bg);
  color: var(--cda-ficha-green);
  border: 1px solid var(--cda-ficha-green);
}

.cda-ficha.cda-ficha .cda-ficha__tab {
  background-color: #FFFFFF !important;
  color: #101112 !important;
  border: 1px solid var(--cda-ficha-border) !important;
  border-bottom: none !important;
  border-radius: var(--cda-ficha-radius) var(--cda-ficha-radius) 0 0 !important;
  padding: 6px 18px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
}

.cda-ficha.cda-ficha .cda-ficha__tab:hover {
  background-color: #FAF9F6 !important;
  color: #000000 !important;
}

.cda-ficha.cda-ficha .cda-ficha__mobile-installments--con-interes {
  color: var(--cda-ficha-mobile-text-soft);
}

.cda-ficha.cda-ficha .cda-ficha__card-title {
  color: var(--cda-ficha-text);
  font-size: 11px;
}

.cda-ficha.cda-ficha .cda-ficha__price {
  color: var(--cda-ficha-text);
  font-family: var(--cda-ficha-font-dato);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}

.cda-ficha.cda-ficha .cda-ficha__price-old {
  color: var(--cda-ficha-text-muted);
  font-family: var(--cda-ficha-font);
  font-size: 10px;
}

.cda-ficha.cda-ficha .cda-ficha__installments {
  color: var(--cda-ficha-green);
  font-family: var(--cda-ficha-font-dato);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

.cda-ficha.cda-ficha .cda-ficha__badge {
  font-size: 9.5px;
}

.cda-ficha.cda-ficha .cda-ficha__tab-text {
  color: #101112 !important;
  font-size: 11px;
  font-weight: 600 !important;
}

.cda-ficha.cda-ficha .cda-ficha__tab-chevron {
  color: #5A6070 !important;
  font-size: 9px;
}

.cda-ficha.cda-ficha .cda-ficha__mobile-title {
  color: var(--cda-ficha-mobile-text);
  font-size: 11.5px;
}

.cda-ficha.cda-ficha .cda-ficha__mobile-price {
  color: var(--cda-ficha-mobile-text);
  font-family: var(--cda-ficha-font-dato);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.cda-ficha.cda-ficha .cda-ficha__mobile-installments {
  color: var(--cda-ficha-green);
  font-family: var(--cda-ficha-font-dato);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

/* ============================================================
   4. DISTRIBUCIÓN RESPONSIVE (CORTE 768px)
   ============================================================ */
@media (max-width: 767.98px) {
  .cda-ficha.cda-ficha .cda-ficha__desktop {
    display: none !important;
  }
  .cda-ficha.cda-ficha .cda-ficha__mobile {
    display: block;
  }
}

@media (min-width: 768px) {
  /* `display: flex` ACÁ y no en la regla de la sección 5: esta lleva el contenedor
     duplicado (0,2,0) y le ganaba a `.cda-ficha__desktop` a secas (0,1,0), así que el
     `display: block` de antes anulaba el flex y dejaba el panel pegado a la izquierda
     con la pestaña centrada aparte -- los dos sueltos, sin relación visual.
     Reportado con captura por Aldo, 2026-09-06. Es el mismo patrón de especificidad
     que ya mordió tres veces en este plugin, pero con `display` en vez de `color`. */
  .cda-ficha.cda-ficha .cda-ficha__desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  }
  .cda-ficha.cda-ficha .cda-ficha__mobile {
    display: none !important;
  }
}

/* ============================================================
   5. VERSIÓN ESCRITORIO (>= 768px)
   ============================================================ */
/* La barra de escritorio NO va en el flujo del documento: va anclada al fondo de la
   ventana, como un anuncio de ancla de Google. El módulo "nace del botón" -- la pestaña
   y el panel forman UNA sola pieza centrada contra el borde inferior: la pestaña arriba,
   el panel debajo tocando el fondo de la pantalla. Plegado, solo queda la pestaña
   (pedido de Aldo, 2026-09-06, corrigiendo la primera implementación in-flow).
   El `display: flex` que hace todo esto vive en la media query de la sección 4, no acá:
   ver el comentario ahí para el porqué. */
.cda-ficha__desktop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  pointer-events: none; /* la franja transparente no debe robar clics al sitio */
}

.cda-ficha__desktop > * {
  pointer-events: auto;
}

.cda-ficha__tab-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}

.cda-ficha__tab {
  background: var(--cda-ficha-bg);
  border: 1px solid var(--cda-ficha-border);
  border-bottom: none;
  border-radius: var(--cda-ficha-radius) var(--cda-ficha-radius) 0 0;
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.03);
  transition: color 0.15s ease, background 0.15s ease;
}

.cda-ficha__tab:hover {
  background: var(--cda-ficha-surface);
  color: var(--cda-ficha-text);
}

/* El marcado trae ▲. Abierto se muestra ▼ (la acción disponible es plegar hacia abajo)
   y plegado vuelve a ▲ (abrir hacia arriba). La flecha indica a dónde va el panel si
   apretás, no dónde está. */
.cda-ficha__tab-chevron {
  font-size: 9px;
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}

.cda-ficha--collapsed .cda-ficha__tab-chevron {
  transform: rotate(0deg);
}

.cda-ficha__panel {
  width: min(940px, calc(100vw - 32px));
  background: var(--cda-ficha-bg);
  border: 1px solid var(--cda-ficha-border);
  border-bottom: none;
  border-radius: var(--cda-ficha-radius) var(--cda-ficha-radius) 0 0;
  padding: 10px 16px 6px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

.cda-ficha--collapsed .cda-ficha__panel {
  display: none !important;
}

/* Carrusel y Pistas */
.cda-ficha__rotator {
  position: relative;
  width: 100%;
}

.cda-ficha__track {
  position: relative;
  width: 100%;
  min-height: 64px;
}

.cda-ficha__group {
  display: none;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cda-ficha__group--active {
  display: block;
  opacity: 1;
}

.cda-ficha__cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Tarjeta Escritorio.
   Altura fija de 64px -- la mitad de los ~96px que tenía la primera versión (pedido de
   Aldo). La foto es CUADRADA y ocupa la altura completa: por eso la tarjeta no lleva
   padding propio (iría alrededor de la imagen y la despegaría de los bordes) y el aire
   se lo pone el cuerpo de texto, que es el único que lo necesita. */
.cda-ficha__card {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 64px;
  overflow: hidden;
  background: var(--cda-ficha-bg);
  border: 1px solid var(--cda-ficha-border);
  border-radius: var(--cda-ficha-radius-sm);
  padding: 0;
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cda-ficha__card:hover {
  border-color: var(--cda-ficha-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Cuadrada y a sangre: 62px = los 64px de la tarjeta menos el borde de arriba y abajo.
   Sin radio propio ni borde: los bordes redondeados los recorta `overflow: hidden` de
   la tarjeta, así la foto llega hasta el filo sin una línea que la separe. */
.cda-ficha__card-media {
  width: 62px;
  height: 62px;
  min-width: 62px;
  align-self: stretch;
  background: var(--cda-ficha-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--cda-ficha-border);
}

.cda-ficha__card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cda-ficha__card-ph {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg, #f0f0f0 0 8px, #f7f7f7 8px 16px);
}

.cda-ficha__card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 6px 10px;
}

/* Una sola línea: en 64px de alto no entran dos sin empujar el precio o las cuotas
   fuera de la tarjeta. */
.cda-ficha__card-title {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

.cda-ficha__card:hover .cda-ficha__card-title {
  color: var(--cda-ficha-accent);
}

.cda-ficha__card-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 3px;
}

.cda-ficha__price-old {
  font-size: 10px;
  font-weight: 400;
  text-decoration: line-through;
  line-height: 1;
  white-space: nowrap;
}

/* Una sola línea, sin envolver: precio tachado, precio, %OFF y cápsulas. Si en una
   columna angosta no entra todo, se recorta por la derecha en vez de saltar de renglón
   y romper la altura fija de 64px. Lo primero que se pierde es la cápsula de envío, que
   es lo menos importante de la fila. */
.cda-ficha__price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}

.cda-ficha__price {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.cda-ficha__installments {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 1px;
}

.cda-ficha__badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.cda-ficha__badge {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cda-ficha__badge--full {
  padding: 2.5px 6px;
  border-radius: var(--cda-ficha-radius-sm);
}

.cda-ficha__badge--descuento {
  padding: 2.5px 6px;
  border-radius: var(--cda-ficha-radius-pill);
}

.cda-ficha__badge--envio {
  padding: 2px 5px;
  border-radius: var(--cda-ficha-radius-pill);
}

/* ============================================================
   6. VERSIÓN CELULAR (< 768px)
   ============================================================ */
.cda-ficha.cda-ficha .cda-ficha__mobile {
  position: fixed !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  left: 10px !important;
  right: 10px !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 9990 !important;
  background-color: var(--cda-ficha-mobile-fallback);
  background-color: var(--cda-ficha-mobile-bg) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.20) !important;
  padding: 6px 10px 8px 6px !important;
  touch-action: pan-y !important;
}

.cda-ficha--cerrada .cda-ficha__mobile {
  display: none !important;
}

.cda-ficha.cda-ficha .cda-ficha__close {
  color: #FFFFFF !important;
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  opacity: 0.85 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.cda-ficha.cda-ficha .cda-ficha__close:hover,
.cda-ficha.cda-ficha .cda-ficha__close:focus {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

.cda-ficha.cda-ficha .cda-ficha__mobile-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  padding-right: 28px !important; /* espacio para no pisar la cruz */
}

/* La imagen va casi de borde a borde vertical de la tarjeta dejando pocos píxeles con el exterior */
.cda-ficha.cda-ficha .cda-ficha__mobile-media {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

.cda-ficha.cda-ficha .cda-ficha__mobile-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.cda-ficha.cda-ficha .cda-ficha__mobile-ph {
  width: 100% !important;
  height: 100% !important;
  background: repeating-linear-gradient(135deg, #2a2a2a 0 6px, #333333 6px 12px) !important;
}

.cda-ficha.cda-ficha .cda-ficha__mobile-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.cda-ficha__mobile-title {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

.cda-ficha__mobile-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1px;
}

.cda-ficha__mobile-price {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
}

.cda-ficha__mobile-installments {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
}

/* ============================================================
   7. CONTROLES (PUNTOS Y VER MÁS)
   ============================================================ */
.cda-ficha.cda-ficha .cda-ficha__controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 6px !important;
  position: relative !important;
  width: 100% !important;
  min-height: 18px !important;
}

.cda-ficha.cda-ficha .cda-ficha__controls--mobile {
  margin-top: 8px !important;
}

.cda-ficha.cda-ficha .cda-ficha__dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
}

/* Puntos inactivos: grises y más chicos (6px) */
.cda-ficha.cda-ficha .cda-ficha__dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  border-radius: 50% !important;
  background-color: #8B8F9A !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transform: none !important;
  transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease !important;
}

.cda-ficha.cda-ficha .cda-ficha__dot:hover {
  background-color: #5A6070 !important;
}

/* Punto activo: negro (#000000) y de mayor tamaño (8px) */
.cda-ficha.cda-ficha .cda-ficha__dot--active {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  background-color: #000000 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.cda-ficha.cda-ficha .cda-ficha__dot:focus,
.cda-ficha.cda-ficha .cda-ficha__dot:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* En celular sobre fondo oscuro */
.cda-ficha.cda-ficha .cda-ficha__controls--mobile .cda-ficha__dot {
  background-color: rgba(255, 255, 255, 0.4) !important;
  width: 6px !important;
  height: 6px !important;
}

.cda-ficha.cda-ficha .cda-ficha__controls--mobile .cda-ficha__dot:hover {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

.cda-ficha.cda-ficha .cda-ficha__controls--mobile .cda-ficha__dot--active {
  background-color: #FFFFFF !important;
  width: 8px !important;
  height: 8px !important;
}

.cda-ficha.cda-ficha .cda-ficha__ver-mas {
  color: var(--cda-ficha-accent) !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  margin-left: 0 !important;
  transition: opacity 0.15s ease, color 0.15s ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.cda-ficha.cda-ficha .cda-ficha__ver-mas:hover {
  text-decoration: underline !important;
  color: var(--cda-ficha-accent-hover) !important;
}

.cda-ficha.cda-ficha .cda-ficha__ver-mas--mobile {
  color: #5AA1FF !important;
}

/* ============================================================
   8. PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cda-ficha.cda-ficha *,
  .cda-ficha.cda-ficha *::before,
  .cda-ficha.cda-ficha *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}