/* ============================================================
   SAINEXP — Artefactos de producto (HTML/CSS, animados).
   Mockups reutilizables del producto en color de marca exacto.
   Se insertan en cualquier página; no dependen de la landing.
   Namespace por artefacto: .quote-*, .inbox-*, .deal-*.
   El rotador (.rotator) es genérico y lo maneja artifacts.js.
   ============================================================ */

/* ---------- Rotador genérico (cross-fade entre piezas) ----------
   Grid-stacking: todas las piezas ocupan la MISMA celda (1/1), perfectamente
   apiladas, así el cross-fade no muestra textos solapados/desplazados. El
   grid toma la altura de la pieza más alta; los puntos van en la fila 2. */
/* La columna se acota al contenedor con `minmax(0, 1fr)`: una columna `auto`
   toma el max-content de la pieza e ignora su `max-width`, así que en anchos
   estrechos la tarjeta (20em) desborda por la derecha. `minmax(0,1fr)` deja
   que la columna baje de su min-content y respete el ancho real; los items se
   centran con `justify-items`. */
.rotator { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.rotator-item {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0; transform: translateY(8px) scale(0.99);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  pointer-events: none;
}
.rotator-item.is-active {
  opacity: 1; transform: none;
  pointer-events: auto;
}
.rotator-dots {
  grid-area: 2 / 1;
  display: flex; justify-content: center; gap: 8px;
  margin-top: 16px;
}
.rotator-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-strong); border: 0; padding: 0;
  cursor: pointer; transition: background var(--t-fast), width var(--t-fast);
}
.rotator-dot.is-active { width: 22px; border-radius: var(--radius-pill); background: var(--gradient-brand); }

/* ============================================================
   COTIZACIÓN
   ============================================================ */
/* El mock se encoge al ancho de la tarjeta y se centra. */
.quote-mock { width: fit-content; max-width: 100%; margin-inline: auto; }

.quote-card {
  /* Unidad base del componente: escala con la pantalla (clamp+vw). El ANCHO
     está en `em` (atado a este font-size), así ancho, alto y tipografía
     escalan JUNTOS → la proporción vertical del documento es CONSTANTE en
     cualquier pantalla (nunca se vuelve cuadrada). */
  font-size: clamp(16px, 0.45vw + 9px, 20px);
  width: 20em; max-width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column;
  /* Sin altura fija: el grid-stacking del rotador iguala TODAS las tarjetas a
     la altura de la más alta (la de más ítems). El total queda abajo
     (margin-top:auto) y el aire de las cortas queda limpio entre tabla y pie.
     Así no hay encogimiento/parpadeo al rotar. */
}
/* Cinta de marca superior */
.quote-card::before {
  content: ""; display: block; height: 0.25em;
  background: var(--gradient-brand);
}

/* Membrete de documento: código arriba en su línea, nombre del negocio a
   todo el ancho (una sola línea), sector debajo */
.quote-head {
  display: flex; flex-direction: column;
  padding: 1.15em 1.4em 0.9em;
}
.quote-topline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75em;
  margin-bottom: 0.65em;
}
.quote-label {
  font-family: var(--font-mono); font-size: 0.64em; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.quote-id {
  font-family: var(--font-mono); font-size: 0.82em; color: var(--cyan);
  white-space: nowrap;
}
.quote-biz {
  font-family: var(--font-display); font-weight: 800; font-size: 0.95em;
  letter-spacing: -0.02em; white-space: nowrap;
}
.quote-sector {
  margin-top: 0.2em;
  font-size: 0.78em; color: var(--text-muted);
}

.quote-meta {
  display: flex; justify-content: space-between;
  padding: 0 1.4em 0.9em;
  font-size: 0.8em; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.quote-items { width: 100%; border-collapse: collapse; }
.quote-items td {
  padding: 0.85em 1.4em; font-size: 0.86em; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.quote-items tr:last-child td { border-bottom: 0; }
.quote-items td:first-child { color: var(--text-soft); }
.quote-items td:nth-child(2) { color: var(--text-muted); text-align: center; width: 2.5em; white-space: nowrap; }
.quote-items td:last-child { color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* margin-top:auto ancla el total al fondo del documento; el aire de las
   cotizaciones con menos ítems queda limpio entre la tabla y el pie */
.quote-foot { margin-top: auto; padding: 1.15em 1.4em 1.4em; background: var(--bg-raised-2); border-top: 1px solid var(--border); }
.quote-total { display: flex; align-items: baseline; justify-content: space-between; }
.quote-total span { font-size: 0.82em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }
.quote-total strong { font-family: var(--font-display); font-weight: 800; font-size: 1.5em; font-variant-numeric: tabular-nums; }
.quote-note {
  margin: 0.75em 0 0; font-size: 0.74em; color: var(--text-muted);
  display: flex; align-items: center; gap: 0.45em;
}
.quote-note .dot-online { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--ok); display: inline-block; flex-shrink: 0; }

/* En móvil la tarjeta ocupa el ancho de su contenedor (ya es vertical por el
   formato del teléfono): así las 3 columnas caben y el precio NO se corta.
   Padding lateral menor para dar más espacio a descripción + precio. */
@media (max-width: 520px) {
  .quote-head, .quote-meta, .quote-foot { padding-left: 1.15em; padding-right: 1.15em; }
  .quote-items td { padding-left: 1.15em; padding-right: 1.15em; }
}