/* ============================================================
   ESTILOS ESPECÍFICOS POR PANTALLA
   Requiere tokens.css y components.css cargados antes que este archivo.
   Organizado por pantalla — no tocar una sección al construir otra.
   ============================================================ */


/* ================================================================
   LANDING — aprobada v3 (full-bleed horizontal, altura reducida)
   ================================================================ */

.hero {
   background: var(--elanco-blue);
   color: var(--white);
}

.hero-grid {
   display: grid;
   grid-template-columns: 1fr;
   row-gap: 0;
}

.hero-copy {
   padding: 32px 20px 24px;
   text-align: center;
}

.hero h1 {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 10px;
   line-height: 1.25;
}

.hero p {
   font-size: 14px;
   max-width: 440px;
   margin: 0 auto 18px;
   color: var(--elanco-blue-20);
}

.cta-group {
   display: flex;
   flex-direction: column;
   gap: 12px;
   max-width: 320px;
   margin: 0 auto;
}

.cta-group .btn {}

.cta-group .btn:nth-child(1) {

   --bs-btn-color: var(--elanco-blue);

}

.cta-group .btn:nth-child(2) {

   background: transparent;
   --bs-btn-color: var(--white);
   --bs-btn-border-color: var(white);
   --bs-btn-hover-bg: var(--white);
   --bs-btn-hover-color: var(--white);
   --bs-btn-hover-border-color: var(--white);
   --bs-btn-active-bg: var(--elanco-blue);
   --bs-btn-active-border-color: var(--elanco-blue);
}



/* .hero-media hereda overlay/tag de .media-bleed (components.css) — acá solo tamaño */
.hero-media {
   width: 100%;
   aspect-ratio: 4/3;
}

.how-it-works {
   padding: 48px 20px;
}

.section-title {
   font-size: 22px;
   font-weight: bold;
   text-align: center;
   margin-bottom: 8px;
   color: var(--navy);
}

.section-subtitle {
   font-size: 15px;
   text-align: center;
   color: var(--grey);
   margin-bottom: 32px;
   max-width: 480px;
   margin-left: auto;
   margin-right: auto;
}

.steps {
   display: flex;
   flex-direction: column;
   gap: 24px;
   max-width: 400px;
   margin: 0 auto;
}

.step {
   display: flex;
   gap: 16px;
   align-items: flex-start;
}

.step-icon {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--teal-20);
   color: var(--navy);
   display: flex;
   align-items: center;
   justify-content: center;
}

.step-icon img {
   width: 24px;
   height: 24px;
}

.step-content h3 {
   font-size: 16px;
   font-weight: bold;
   margin-bottom: 4px;
   color: var(--text-dark);
}

.step-content p {
   font-size: 14px;
   color: var(--grey);
}

.lifestyle-strip {
   background: var(--beige-20);
}

.lifestyle-grid {
   display: grid;
   grid-template-columns: 1fr;
}

.lifestyle-media {
   aspect-ratio: 4/3;
}

.lifestyle-copy {
   padding: 32px 20px;
   text-align: center;
}

.lifestyle-copy p.heading {
   max-width: 480px;
   margin: 0 auto 8px;
   font-size: 18px;
   color: var(--navy);
   font-weight: bold;
   line-height: 1.4;
}

.lifestyle-copy p.support {
   max-width: 480px;
   margin: 0 auto;
   font-size: 14px;
   font-weight: normal;
   color: var(--grey);
}

.final-cta {
   padding: 40px 20px;
   text-align: center;
}

.final-cta h2 {
   font-size: 20px;
   font-weight: bold;
   margin-bottom: 20px;
   color: var(--navy);
}

@media(min-width:768px) {
   .hero-grid {
      grid-template-columns: 1fr 1fr;
      column-gap: 0;
      align-items: stretch;
   }

   .hero-copy {
      text-align: left;
      padding: 44px clamp(24px, 4vw, 56px) 44px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .hero h1 {
      font-size: 30px;
   }

   .hero p {
      font-size: 15px;
      margin-left: 0;
      margin-right: 0;
   }

   .cta-group {
      flex-direction: row;
      max-width: none;
      margin-left: 0;
   }

   .cta-group .btn {
      width: auto;
      min-width: 170px;
   }

   .hero-media {
      aspect-ratio: auto;
      height: auto;
   }

   .steps {
      flex-direction: row;
      max-width: none;
      justify-content: space-between;
   }

   .step {
      flex-direction: column;
      text-align: center;
      align-items: center;
      flex: 1;
   }

   .lifestyle-grid {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
   }

   .lifestyle-media {
      aspect-ratio: auto;
      order: 1;
   }

   .lifestyle-copy {
      order: 2;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 40px clamp(24px, 4vw, 56px);
   }

   .lifestyle-copy p.heading,
   .lifestyle-copy p.support {
      margin-left: 0;
      margin-right: 0;
   }
}

@media(min-width:1024px) {
   .hero-copy {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: max(20px, calc((100vw - 1200px) / 2 + 20px));
      padding-right: clamp(32px, 4vw, 64px);
   }

   .hero h1 {
      font-size: 34px;
   }

   .how-it-works {
      padding: 72px 40px;
   }

   .lifestyle-copy {
      padding: 56px clamp(24px, 4vw, 56px);
   }

   .final-cta {
      padding: 56px 40px;
   }
}


/* ================================================================
   LOGIN
   Mobile: solo formulario, sin foto (pantalla de tarea, no de venta).
   Tablet/desktop: split 2 columnas, foto reutiliza .media-bleed.
   ================================================================ */

.auth-layout {
   display: grid;
   grid-template-columns: 1fr;
}

.auth-media {
   display: none;
}

.auth-panel {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px 20px 56px;
   min-height: calc(100vh - 73px);
}

.auth-card {
   width: 100%;
   max-width: 380px;
   text-align: center;
}

.auth-card h1 {
   font-size: 24px;
   font-weight: bold;
   color: var(--navy);
   margin-bottom: 6px;
}

.auth-card .subtitle {
   font-size: 14px;
   color: var(--grey);
   margin-bottom: 28px;
}

.auth-card form {
   text-align: left;
}

.forgot-link {
   display: block;
   text-align: right;
   font-size: 13px;
   font-weight: bold;
   color: var(--elanco-blue);
   text-decoration: none;
   margin: -8px 0 20px;
}

.forgot-link:hover {
   text-decoration: underline;
}

.auth-footer-link {
   text-align: center;
   font-size: 14px;
   color: var(--grey);
   margin-top: 24px;
}

.auth-footer-link a {
   color: var(--elanco-blue);
   font-weight: bold;
   text-decoration: none;
}

.auth-footer-link a:hover {
   text-decoration: underline;
}

/* Showcase de estados eliminado — ya no se usa en ninguna pantalla (removido de Login) */

@media(min-width:768px) {
   .auth-layout {
      grid-template-columns: 1fr 1fr;
   }

   .auth-media {
      display: block;
   }
}


/* ================================================================
   REGISTRO
   Reutiliza .auth-layout, .auth-panel, .auth-card y todos los componentes
   de formulario tal cual — no necesita CSS propio. Esto es el resultado
   esperado del sistema: a partir de acá, la mayoría de pantallas nuevas
   deberían agregar poco o nada aquí.
   ================================================================ */


/* ================================================================
   DASHBOARD PARTICIPANTE
   Reutiliza el shell completo (.app-shell, sidebar, bottom-nav, badges,
   métricas) definido en components.css. No necesita CSS propio.
   ================================================================ */


/* ================================================================
   REGISTRAR RETO
   Reutiliza shell + form-card + upload + product-adder de components.css.
   Sin CSS propio.
   ================================================================ */


/* ================================================================
   HISTORIAL DE RETOS / DETALLE DEL RETO
   Reutilizan shell + activity-list + badges + form-card + detail-row.
   Sin CSS propio.
   ================================================================ */


/* ================================================================
   HISTORIAL DE PUNTOS
   100% reutilización — metric-card, filter-tabs, activity-list, badge.
   Sin CSS propio.
   ================================================================ */


/* ================================================================
   CATÁLOGO
   Usa .catalog-grid / .catalog-card de components.css. Sin CSS propio.
   ================================================================ */


/* ================================================================
   DETALLE PREMIO
   Reutiliza form-card + detail-row + modal-overlay. Sin CSS propio.
   ================================================================ */


/* ================================================================
   MIS REDENCIONES
   100% reutilización — activity-list + badge. Sin CSS propio.
   ================================================================ */


/* ================================================================
   PERFIL
   Reutiliza form-card + inputs + selects. Sin CSS propio.
   ================================================================ */


/* ================================================================
   DASHBOARD ADMIN
   Reutiliza shell + metrics-grid + activity-list + badge. Sin CSS propio.
   Admin es desktop-first (ver Arquitectura del Producto) — sin bottom-nav.
   ================================================================ */


/* ================================================================
   REVISIÓN DE RETOS
   Reutiliza data-table + form-card--wide + detail-grid + modal.
   Sin CSS propio.
   ================================================================ */


/* ================================================================
   PREMIOS
   Reutiliza data-table + form-card--wide + upload-zone. Sin CSS propio.
   ================================================================ */


/* ================================================================
   PARTICIPANTES
   Reutiliza data-table + metrics-grid + form-card--wide + activity-list.
   Sin CSS propio.
   ================================================================ */


/* ================================================================
   REDENCIONES (ADMIN)
   Reutiliza data-table + filter-tabs + modal. Sin CSS propio.
   ================================================================ */


/* ================================================================
   CAMPAÑAS
   Reutiliza form-card--wide + product-adder (adaptado) + reto-config-list.
   ================================================================ */


/* ================================================================
   REPORTES
   Reutiliza metrics-grid + data-table + rank-bar (barra CSS sin librería).
   "Redenciones por ciudad" se consolidó dentro de la tabla de
   Participantes por ciudad/distribuidor — misma fuente de datos.
   ================================================================ */