/* ============ TOKENS ============ */
/* CUSTOMIZAR POR CLIENTE: esta paleta y las fuentes son las de VENKY. Cambiá
   los 5 colores y, si cambian las tipografías, el <link> de Google Fonts en
   views/partials/head.ejs. El resto del archivo usa estos tokens: no toques
   valores de color más abajo. Diseño de un solo modo (claro). */
:root {
  --color-title: #0F172A;      /* Títulos principales */
  --color-body: #475569;       /* Texto de cuerpo */
  --color-divider: #CBD5E1;    /* Líneas de división */
  --color-block-bg: #F1F5F9;   /* Fondos de bloques */
  --color-bg: #FFFFFF;         /* Fondo principal */

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --nav-height: 76px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* ============ NAVBAR ============ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}

.nav-container {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--color-title);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-body);
  padding: 10px 16px;
  border-radius: 8px;
  transition: color var(--transition);
}

/* Subrayado animado que se desliza desde la izquierda */
.nav-link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  background: var(--color-title);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-title);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

.nav-link.active {
  color: var(--color-title);
  font-weight: 600;
}

.nav-link.active::after {
  transform: scaleX(1);
}

/* El botón "Comprar" no lleva subrayado: tiene su propia animación */
.nav-cta {
  background: var(--color-title);
  color: #FFFFFF;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  margin-left: 8px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.nav-cta::after { display: none; }

/* Red de seguridad: si el CTA quedara marcado como activo, su texto debe
   seguir siendo blanco. Sin esto, .nav-link.active lo pinta del color del
   fondo oscuro del botón y las letras desaparecen. */
.nav-cta.active { color: #FFFFFF; }

.nav-cta:hover,
.nav-cta:focus-visible {
  color: #FFFFFF;
  background: #1E293B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

/* ============ AUTH ICON ============ */
.auth-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 12px;
  border-radius: 999px;
  border: 1.5px solid var(--color-divider);
  background: var(--color-block-bg);
  color: var(--color-body);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition), transform var(--transition), background var(--transition), width var(--transition), padding var(--transition);
}

.auth-icon:hover,
.auth-icon:focus-visible {
  border-color: var(--color-title);
  transform: translateY(-2px);
}

.auth-icon-avatar {
  display: none;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-title);
}

.auth-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-divider);
  border: 2px solid #FFFFFF;
  transition: background var(--transition);
}

/* Logueado: la píldora se ensancha para el texto "Mis productos" y conserva el
   mismo estilo neutro del estado invitado (border-radius ya es 999px arriba),
   en vez de un círculo oscuro. Así "Comprar" sigue siendo el único botón
   oscuro del navbar. */
.auth-icon.logged-in {
  width: auto;
  padding: 0 18px;
}

.auth-icon.logged-in .auth-icon-guest { display: none; }
.auth-icon.logged-in .auth-icon-avatar { display: block; }
/* El punto de estado no tiene una esquina bien definida en una píldora ancha
   como la tenía en el círculo; el texto ya deja claro que hay sesión activa. */
.auth-icon.logged-in .auth-status-dot { display: none; }

/* Botón hamburguesa (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-title);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg);
}

/* Firma visual: grid de puntos interactivo (dibujado en JS sobre canvas) */
.hero-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body);
  background: var(--color-block-bg);
  border: 1px solid var(--color-divider);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-title);
  margin-bottom: 20px;
}

.hero-title .highlight {
  position: relative;
  white-space: nowrap;
}

.hero-title .highlight::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 0.32em;
  background: var(--color-block-bg);
  border: 1px solid var(--color-divider);
  z-index: -1;
  border-radius: 3px;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--color-body);
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.cta-button-ghost {
  display: inline-block;
  background: transparent;
  color: var(--color-title);
  border: 1.5px solid var(--color-divider);
  padding: 14.5px 32px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.cta-button-ghost:hover,
.cta-button-ghost:focus-visible {
  border-color: var(--color-title);
  background: var(--color-block-bg);
  transform: translateY(-2px);
}

/* ============ PRODUCTOS (página propia) ============ */
.products-section {
  padding: 152px 24px 96px;
}

.products-header {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.products-header .hero-title {
  margin-bottom: 16px;
}

/* ============ PRODUCT CARDS ============ */
/* 4 servicios en una grilla 2×2: tarjetas grandes, con imagen arriba, para que
   quede claro qué es cada uno. */
.products-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
  margin: 64px auto 0;
  padding: 0 24px 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--color-title);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

/* Área de imagen. Ratio fijo para que las 4 tarjetas queden parejas. */
.product-media {
  aspect-ratio: 16 / 10;
  background: var(--color-block-bg);
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-media-empty {
  color: var(--color-divider);
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 22px;
  text-align: left;
}

.product-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-title);
  margin-bottom: 8px;
}

.product-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-body);
  margin-bottom: 18px;
}

.product-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-title);
  /* Empuja el precio + botón al fondo: los botones quedan alineados aunque las
     descripciones tengan largos distintos. */
  margin-top: auto;
  margin-bottom: 14px;
}

.product-buy {
  width: 100%;
  cursor: pointer;
}

.product-buy:disabled {
  opacity: 0.6;
  cursor: default;
}

.products-status {
  text-align: center;
  color: var(--color-body);
  padding: 48px 24px;
}

/* ============ MIS COMPRAS (cuenta.html) ============ */
.orders-card {
  /* El gap con la tarjeta anterior ahora lo pone .auth-section */
  max-width: 560px;
}

.orders-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  flex-wrap: wrap;
}

.order-item-name {
  font-weight: 600;
  color: var(--color-title);
}

.order-item-amount {
  color: var(--color-body);
}

.order-item-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-block-bg);
  color: var(--color-body);
}

.order-status-approved {
  background: #DCFCE7;
  color: #15803D;
}

.order-status-rejected,
.order-status-cancelled {
  background: #FEE2E2;
  color: #B91C1C;
}

.order-status-pending,
.order-status-in_process {
  background: #FEF3C7;
  color: #B45309;
}

/* ============ GROWTH SECTION ============ */
.growth-section {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px;
  /* Imagen de fondo del cliente. Colocá el archivo en public/img/ y descomentá:
     background-image: url('img/destacado.jpg'); */
  background-color: var(--color-block-bg);
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--color-divider);
}

.growth-overlay {
  position: relative;
  max-width: 620px;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(2px);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  padding: 48px 40px;
}

.growth-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--color-title);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.growth-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-body);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 680px) {
  .products-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .growth-overlay { padding: 32px 24px; }
}

@media (max-width: 860px) {
  /* Hamburguesa a la derecha, pegada a las acciones (carrito + sesión), en vez
     de suelta en el medio del navbar. */
  .nav-toggle { display: flex; margin-left: auto; margin-right: 12px; }

  /* En mobile el ícono de sesión no se expande a "Mis productos": no entra
     junto al carrito. Vuelve a ser el círculo con el ícono y el punto de estado. */
  .auth-icon.logged-in {
    width: 40px;
    padding: 0;
  }
  .auth-icon.logged-in .auth-icon-guest { display: block; }
  .auth-icon.logged-in .auth-icon-avatar { display: none; }
  .auth-icon.logged-in .auth-status-dot { display: block; }

  .nav-links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
    padding: 12px 24px 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-link { padding: 12px 16px; }
  .nav-cta { margin-left: 0; text-align: center; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============ HOW IT WORKS / FAQ SECTION ============ */
.how-section {
  padding: 64px 24px 96px;
}

.how-container {
  max-width: 800px;
  margin: 0 auto;
}

.how-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-title);
  text-align: center;
  margin-bottom: 56px;
  letter-spacing: -0.02em;
}

/* Pasos (Timeline) */
.steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 80px;
}

.step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px;
  background: var(--color-block-bg);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
}

.step-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-title);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}

.step-time {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-body);
  display: block;
  margin-bottom: 4px;
}

.step-content h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-title);
  margin-bottom: 8px;
}

.step-content p {
  line-height: 1.6;
}

/* FAQ */
.faq-heading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-title);
  margin-bottom: 24px;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}

.faq-item {
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 16px 20px;
  background: var(--color-bg);
}

.faq-item summary {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-title);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-answer {
  margin-top: 12px;
  line-height: 1.5;
  color: var(--color-body);
}

/* CTA */
.how-cta {
  text-align: center;
}

.cta-button-lg {
  display: inline-block;
  background: var(--color-title);
  color: #FFFFFF;
  border: none;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}

.cta-button-lg:hover {
  background: #1E293B;
  transform: translateY(-2px);
}



/* ============ ABOUT / NOSOTROS SECTION ============ */
.about-section {
  position: relative;
  padding: 96px 24px;
  background: var(--color-block-bg); /* Fondo sutilmente distinto para separar del Hero */
  border-top: 1px solid var(--color-divider);
}

.about-container {
  max-width: 900px;
  margin: 0 auto;
}

.about-header {
  text-align: center;
  margin-bottom: 56px;
}

.about-header .eyebrow {
  background: var(--color-bg); /* Para contrastar sobre el fondo block-bg */
}

.about-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--color-title);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.about-description {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-body);
  max-width: 740px;
  margin: 0 auto 16px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.about-card {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  padding: 32px 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.about-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-title);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.about-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--color-block-bg);
  color: var(--color-title);
  transition: background var(--transition), color var(--transition);
}

.about-card:hover .about-icon {
  background: var(--color-title);
  color: #FFFFFF;
}

.about-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-title);
  margin-bottom: 12px;
}

.about-card-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-body);
}

/* ============ AUTH (login / registro / cuenta) ============ */
.auth-section {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 64px 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  padding: 40px 36px;
}

.auth-card .eyebrow {
  margin-bottom: 16px;
}

.auth-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-title);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-title);
}

.form-field input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 11px 14px;
  border: 1.5px solid var(--color-divider);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-title);
  transition: border-color var(--transition);
}

.form-field input:focus {
  outline: none;
  border-color: var(--color-title);
}

.auth-submit {
  width: 100%;
  text-align: center;
  margin-top: 8px;
  cursor: pointer;
}

.auth-error {
  display: none;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #B91C1C;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
}

.auth-error.visible {
  display: block;
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 0.9rem;
}

.auth-footer a {
  color: var(--color-title);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Separador "o" entre el formulario y el botón de Google */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-size: 0.8rem;
  color: var(--color-body);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

/* Contenedor del botón de Google Identity Services. Reserva el alto mientras
   la biblioteca externa carga y dibuja el botón, para que no salte el layout. */
.google-btn {
  display: flex;
  justify-content: center;
  min-height: 40px;
}

/* Responsive para "Nosotros" */
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-section {
    padding: 64px 24px;
  }
}

/* ============ FLOW / CÓMO TRABAJAMOS (home) ============ */
.flow-section {
  position: relative;
  padding: 96px 24px;
  background: var(--color-block-bg);
  border-top: 1px solid var(--color-divider);
  /* El navbar es sticky: sin esto, al enlazar a #flujo el título queda tapado */
  scroll-margin-top: var(--nav-height);
}

.flow-container {
  max-width: 1040px;
  margin: 0 auto;
}

.flow-header {
  text-align: center;
  margin-bottom: 64px;
}

/* La eyebrow usa block-bg por defecto, que acá es el fondo de la sección */
.flow-header .eyebrow {
  background: var(--color-bg);
}

.flow-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.02em;
  color: var(--color-title);
  margin-bottom: 20px;
}

.flow-description {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-body);
  max-width: 680px;
  margin: 0 auto;
}

/* --- Los 3 pasos --- */
.flow-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}

.flow-step {
  position: relative;
}

/* Flecha entre pasos, dibujada en CSS: la línea (::before) y la punta (::after).
   Vive en el gap del grid y es puramente decorativa. */
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: -46px;
  top: 21px;
  width: 26px;
  height: 1.5px;
  background: var(--color-divider);
}

.flow-step + .flow-step::after {
  content: "";
  position: absolute;
  left: -25px;
  top: 17.5px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--color-divider);
  border-right: 1.5px solid var(--color-divider);
  transform: rotate(45deg);
}

.flow-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-title);
}

.flow-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  /* Reserva 2 líneas para que las descripciones arranquen a la misma altura
     en las 3 columnas, aunque un título ocupe una sola línea. */
  min-height: 2.7em;
  color: var(--color-title);
  margin-bottom: 10px;
}

.flow-step-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-body);
}

.flow-quote {
  display: block;
  margin-bottom: 6px;
  color: var(--color-title);
}

/* --- Lo que la web hace sola --- */
.flow-results {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--color-divider);
}

.flow-results-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--color-title);
  text-align: center;
  margin-bottom: 40px;
}

.flow-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.flow-card {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  padding: 32px 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.flow-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-title);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.flow-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--color-block-bg);
  color: var(--color-title);
  transition: background var(--transition), color var(--transition);
}

.flow-card:hover .flow-card-icon {
  background: var(--color-title);
  color: #FFFFFF;
}

.flow-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-title);
  margin-bottom: 10px;
}

.flow-card-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-body);
}

/* --- Cierre --- */
.flow-cta {
  margin-top: 56px;
  text-align: center;
}

.flow-closing {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--color-title);
  margin-bottom: 24px;
}

/* El hover por defecto del ghost usa block-bg, que acá es el fondo de la
   sección; lo invertimos a blanco para que el hover se note. */
.flow-cta .cta-button-ghost:hover,
.flow-cta .cta-button-ghost:focus-visible {
  background: var(--color-bg);
}

/* Responsive para el flujo del home */
@media (max-width: 900px) {
  .flow-steps {
    grid-template-columns: 1fr;
    gap: 44px;
    max-width: 480px;
    margin: 0 auto;
  }

  /* En vertical la flecha gira 90°: cuelga arriba de cada paso, alineada
     con el centro del número (44px / 2 = 22px). */
  .flow-step + .flow-step::before {
    left: 21.25px;
    top: -34px;
    width: 1.5px;
    height: 20px;
  }

  .flow-step + .flow-step::after {
    left: 18px;
    top: -19px;
    transform: rotate(135deg);
  }

  /* En una sola columna no hay nada que alinear entre columnas */
  .flow-step-title {
    min-height: 0;
  }

  .flow-results-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .flow-section {
    padding: 64px 24px;
  }

  .flow-header {
    margin-bottom: 48px;
  }

  .flow-results {
    margin-top: 56px;
    padding-top: 44px;
  }
}

/* ============ PIE DE PÁGINA ============ */
.site-footer {
  background: var(--color-title);
  color: #FFFFFF;
  padding: 72px 24px 32px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
}

/* Placa del mismo negro que el archivo del logo (rgb(28, 28, 28)), para que la
   imagen no se vea como un cuadrado recortado sobre el azul del pie. Cuando el
   logo tenga fondo transparente, esta placa se puede quitar. */
.footer-logo {
  display: inline-block;
  margin-bottom: 20px;
  background: #1C1C1C;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.footer-logo img {
  display: block;
  width: 96px;
  height: 96px;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 260px;
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  display: grid;
  gap: 12px;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #FFFFFF;
}

.footer-social {
  list-style: none;
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-copy {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive del pie */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .site-footer {
    padding: 56px 24px 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 36px;
  }
}
/* ============ PÁGINAS DE ERROR (404 / 500) ============ */
.error-section {
  /* Alto suficiente para que la página no se vea vacía, pero sin empujar el
     pie fuera de la pantalla. */
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px;
  text-align: center;
}

.error-content {
  max-width: 620px;
}

.error-content .hero-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 16px;
}

/* ============ BOTÓN FLOTANTE DE WHATSAPP (solo home) ============ */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-title);
  color: #FFFFFF;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.25);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background: #1E293B;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.3);
}

@media (max-width: 600px) {
  .whatsapp-fab {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
}

/* El botón flotante es fixed, así que siempre queda a 24px (16px en mobile)
   del borde inferior de la ventana, sin importar cuánto mida la página. Sin
   este espacio de más, tapa el copyright cuando se llega al final del scroll
   en la home (la única página con el botón por ahora). El valor reserva la
   altura del botón + su offset + un margen chico de aire. */
.has-fab-spacing {
  padding-bottom: 96px;
}

@media (max-width: 600px) {
  .has-fab-spacing {
    padding-bottom: 88px;
  }
}

/* ============ PANEL DE ANALYTICS (área privada) ============ */
/* Todo con prefijo .dash / .dash-* / .nav-analytics: no pisa ninguna regla del
   sitio público. Usa los mismos tokens. La página no tiene navbar ni pie: solo
   este shell (sidebar oscuro + contenido claro), servido desde /analytics. */

.dash {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  background: var(--color-block-bg);
}

/* --- Barra lateral --- */
.dash-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 14px;
  background: var(--color-title);
  overflow: hidden; /* el texto no se desborda durante la transición de ancho */
  transition: width var(--transition);
}

.dash-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  white-space: nowrap;
}

.dash-logo-mark {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
}

.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.dash-nav-item:hover,
.dash-nav-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.dash-nav-item.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.dash-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* El toggle vive al fondo de la barra */
.dash-collapse {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.dash-collapse:hover,
.dash-collapse:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.dash-collapse-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

/* --- Estado contraído --- */
.dash.is-collapsed .dash-sidebar {
  width: 72px;
}

.dash.is-collapsed .dash-logo-text,
.dash.is-collapsed .dash-nav-label {
  display: none;
}

.dash.is-collapsed .dash-logo,
.dash.is-collapsed .dash-nav-item,
.dash.is-collapsed .dash-collapse {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

.dash.is-collapsed .dash-collapse-icon {
  transform: rotate(180deg);
}

/* --- Contenido --- */
.dash-main {
  flex: 1;
  min-width: 0;
  padding: 40px clamp(20px, 4vw, 48px) 64px;
}

.dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.dash-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--color-title);
}

.dash-subtitle {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-body);
}

.dash-badge {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  color: var(--color-body);
  white-space: nowrap;
}

/* --- Tarjetas --- */
.dash-card {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  padding: 22px;
}

.dash-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-title);
  margin-bottom: 16px;
}

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.dash-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dash-kpi-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-body);
}

.dash-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-block-bg);
  color: var(--color-title);
}

.dash-icon-sm {
  width: 16px;
  height: 16px;
}

.dash-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* --- Estado vacío ("Sin datos todavía") --- */
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 40px 20px;
}

.dash-empty-icon {
  width: 28px;
  height: 28px;
  color: var(--color-divider);
}

.dash-empty-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-title);
}

.dash-empty-hint {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-body);
  max-width: 340px;
}

/* Compacto, para las tarjetas de KPI */
.dash-empty-sm {
  padding: 6px 4px 2px;
  gap: 6px;
}

.dash-empty-sm .dash-empty-icon {
  width: 20px;
  height: 20px;
}

.dash-empty-sm .dash-empty-text {
  font-size: 0.85rem;
}

/* Alto, para la página de Clientes y las tarjetas de gráfico */
.dash-empty-lg {
  min-height: 320px;
}

.dash-row .dash-empty {
  min-height: 220px;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .dash-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-row {
    grid-template-columns: 1fr;
  }
}

/* Debajo de 720px la barra queda como riel de íconos fijo (el panel es de uso
   de escritorio; en pantallas chicas se prioriza el contenido). */
@media (max-width: 720px) {
  .dash-sidebar,
  .dash.is-collapsed .dash-sidebar {
    width: 64px;
  }

  .dash-logo-text,
  .dash-nav-label {
    display: none;
  }

  .dash-logo,
  .dash-nav-item,
  .dash-collapse {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .dash-collapse {
    display: none; /* sin labels que mostrar, el toggle no aporta */
  }

  .dash-main {
    padding: 28px 18px 48px;
  }
}

@media (max-width: 520px) {
  .dash-kpis {
    grid-template-columns: 1fr;
  }
}

/* --- Tabla del panel (Clientes) --- */
.dash-loading {
  padding: 8px 2px;
  font-family: var(--font-body);
  color: var(--color-body);
}

/* La card no lleva padding propio: el aire lo pone el padding de las celdas,
   y así el scroll horizontal llega hasta el borde de la tarjeta. */
.dash-card-flush {
  padding: 0;
  overflow: hidden;
}

.dash-table-wrap {
  overflow-x: auto;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.dash-table th {
  text-align: left;
  padding: 18px 16px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-body);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-divider);
}

.dash-table td {
  padding: 14px 16px;
  color: var(--color-title);
  vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
}

.dash-table tbody tr:last-child td {
  border-bottom: none;
}

.dash-table tbody tr:hover td {
  background: var(--color-block-bg);
}

.dash-td-nowrap {
  white-space: nowrap;
}

.dash-td-num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dash-td-mono {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--color-body);
}

/* Chip gris con el id crudo (user_id / product_id) al lado del dato legible */
.dash-id {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--color-block-bg);
  font-size: 0.72rem;
  color: var(--color-body);
}

/* Listas dentro de una celda: una línea por ítem de la orden. Producto y
   Entregado usan el mismo alto de línea para quedar alineados fila a fila. */
.dash-cell-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-cell-list li {
  min-height: 18px;
  line-height: 1.35;
}

.dash-cell-checks li {
  display: flex;
  align-items: center;
}

.dash-cell-checks input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-title);
}

.dash-cell-checks input:disabled {
  cursor: progress;
  opacity: 0.5;
}

/* ============ CARRITO ============ */
/* El botón vive en el navbar; el panel se desliza desde la derecha. La parte
   visual se termina de trabajar en la Fase 4. */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--color-divider);
  background: var(--color-block-bg);
  color: var(--color-body);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition), transform var(--transition);
}

.cart-btn:hover,
.cart-btn:focus-visible {
  border-color: var(--color-title);
  transform: translateY(-2px);
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid var(--color-bg);
  background: var(--color-title);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
}

/* --- Overlay + panel --- */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  width: min(390px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-left: 1px solid var(--color-divider);
  box-shadow: -8px 0 40px rgba(15, 23, 42, 0.16);
  transform: translateX(100%);
  transition: transform var(--transition);
}

body.cart-open {
  overflow: hidden;
}

body.cart-open .cart-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.cart-open .cart-drawer {
  transform: translateX(0);
}

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--color-divider);
}

.cart-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-title);
}

.cart-close {
  display: flex;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-body);
  transition: color var(--transition);
}

.cart-close:hover {
  color: var(--color-title);
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.cart-empty {
  padding: 48px 0;
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-body);
}

.cart-lines {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-divider);
}

.cart-lines .cart-line:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.cart-line-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cart-line-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-title);
}

.cart-line-price {
  font-size: 0.8rem;
  color: var(--color-body);
}

.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
}

.cart-qty-btn {
  width: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--color-title);
}

.cart-qty-n {
  min-width: 16px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-title);
}

.cart-line-remove {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cart-line-remove:hover {
  color: #B91C1C;
}

.cart-foot {
  padding: 20px 24px;
  border-top: 1px solid var(--color-divider);
}

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  font-family: var(--font-body);
  color: var(--color-body);
}

.cart-total-row strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-title);
}

.cart-checkout {
  width: 100%;
  cursor: pointer;
}

.cart-checkout:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ============ DASHBOARD — filtro, KPIs con valor, gráficos, ranking ============ */

/* --- Filtro de fechas (arriba a la derecha de la cabecera) --- */
.dash-daterange {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.dash-date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-body);
}

.dash-date-field input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-title);
}

.dash-date-field input:focus {
  outline: none;
  border-color: var(--color-title);
}

/* --- Valor grande del KPI (reemplaza al estado vacío) --- */
.dash-kpi-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  color: var(--color-title);
  line-height: 1.1;
}

.dash-kpi-value.dash-kpi-muted {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-body);
}

/* --- Contenedores de gráfico --- */
.dash-chart {
  position: relative;
  min-height: 220px;
}

.dash-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dash-chart-msg {
  padding: 56px 16px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-body);
}

/* --- Gráfico de líneas --- */
.dash-grid-line {
  stroke: var(--color-divider);
  stroke-width: 1;
}

.dash-axis-label {
  fill: var(--color-body);
  font-family: var(--font-body);
  font-size: 11px;
}

.dash-line {
  fill: none;
  stroke: var(--color-title);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.dash-line-dot {
  fill: var(--color-title);
}

.dash-crosshair {
  stroke: var(--color-title);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.4;
  pointer-events: none;
}

/* --- Tooltip (compartido líneas + donut) --- */
.dash-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-title);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

.dash-tooltip strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 1px;
}

/* --- Donut de entregas --- */
.dash-donut {
  max-width: 220px;
  margin: 0 auto;
}

.dash-donut-track {
  stroke: var(--color-block-bg);
}

/* Colores de estado, iguales a los de las píldoras de orden (.order-status-*) */
.dash-slice-delivered {
  stroke: #15803D;
}

.dash-slice-pending {
  stroke: #B45309;
}

.dash-slice-delivered:hover,
.dash-slice-pending:hover {
  filter: brightness(1.1);
}

.dash-donut-big {
  fill: var(--color-title);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
}

.dash-donut-sub {
  fill: var(--color-body);
  font-family: var(--font-body);
  font-size: 11px;
}

.dash-legend {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-body);
}

.dash-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-legend strong {
  color: var(--color-title);
}

.dash-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.dash-dot-delivered {
  background: #15803D;
}

.dash-dot-pending {
  background: #B45309;
}

/* --- Ranking de productos --- */
.dash-rank-table td:first-child {
  position: relative;
  min-width: 180px;
}

/* Barra de magnitud detrás del nombre */
.dash-rank-bar {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: var(--w, 0%);
  background: var(--color-block-bg);
  border-radius: 0 4px 4px 0;
}

.dash-rank-name {
  position: relative;
  font-weight: 500;
}

/* --- Responsive --- */
@media (max-width: 720px) {
  .dash-head {
    flex-direction: column;
  }

  .dash-daterange {
    width: 100%;
  }

  .dash-date-field {
    flex: 1;
  }

  .dash-date-field input {
    width: 100%;
  }
}