/* =========================================================
   MOBILE.CSS - AJUSTES PARA CELULAR (iPhone, Android, etc.)
   ========================================================= */

/* ================= TABLET / LAPTOP PEQUEÑO ================= */

@media (max-width: 1200px){
  .right{
    width:38%;
    min-width:340px;
    padding:30px 24px;
  }
}

@media (max-width: 1024px){
  .right{
    width:40%;
    min-width:320px;
  }
}

/* ================= TABLET ESTILO PORTRAIT ================= */

@media (max-width: 900px){
  .app{
    flex-direction:column;
    align-items:stretch;
  }

  .left{
    width:100%;
    position:relative;
    min-height:unset;
    height:auto;
    aspect-ratio:16 / 9;
    max-height:380px;
    overflow:hidden;
  }

  .left::before{
    transform:scale(1.12);
    filter:blur(25px) brightness(.7) saturate(115%);
    display:block;
  }

  .left img{
    width:100%;
    height:auto;
    max-height:100%;
    object-fit:contain;
  }

  .social-glass{
    bottom:10px;
    padding:4px 12px;
  }

  .social-card{
    width:38px;
    height:38px;
    transform:scale(.88);
  }

  .social-card i{ font-size:14px; }
  .social-container{ gap:12px; }

  .right{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:auto;
    padding:28px 24px 32px;
  }
}

/* ================= MÓVIL ESTÁNDAR (iPhone, Android) ================= */

@media (max-width: 768px){
  .left{
    aspect-ratio:16 / 10;
    max-height:340px;
  }

  .acciones-dobles{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
  }

  .send-btn,
  .secondary-btn{
    width:auto;
    min-width:fit-content;
    max-width:100%;
  }

  .botones-categoria{ gap:8px; }
  .categoria-btn{ padding:9px 13px; }

  .right h1{ font-size:23px; }
  .subtitle{
    font-size:13px;
    line-height:1.5;
    margin-bottom:24px;
  }

  .form-personal,
  .modalidad-form{ gap:20px; }
  .seccion-intencion{ margin-top:24px; }

  .asesor-grid{ grid-template-columns:1fr 1fr; }

  .intencion-card{
    grid-template-columns:38px 1fr 24px;
    padding:13px 16px;
    gap:12px;
  }

  .intencion-ico{
    width:38px;
    height:38px;
    font-size:15px;
  }

  .intencion-ico i{ font-size:15px; }

  .intencion-title{ font-size:14px; }

  .intencion-check{
    width:24px;
    height:24px;
    font-size:10px;
  }

  .intencion-check i{ font-size:10px; }
}

/* ================= iPhone / MÓVIL PEQUEÑO ================= */

@media (max-width: 480px){
  .left{
    aspect-ratio:16 / 10;
    max-height:260px;
  }

  .left::before{
    transform:scale(1.15);
    filter:blur(20px) brightness(.7) saturate(115%);
    display:block;
  }

  .left img{
    object-fit:contain;
  }

  .social-glass{
    bottom:8px;
    padding:4px 10px;
    border-radius:24px;
  }

  .social-card{
    width:32px;
    height:32px;
    transform:scale(.85);
  }
  .social-card i{ font-size:12px; }
  .social-container{ gap:8px; }

  .right{ padding:22px 18px 28px; }
  .right h1{ font-size:21px; line-height:1.25; }

  .subtitle{
    font-size:12.5px;
    margin-bottom:20px;
  }

  .send-btn{
    height:44px;
    padding:0 18px;
  }

  .send-btn span{
    font-size:12.5px;
    letter-spacing:.3px;
  }

  .categoria-btn{
    padding:9px 12px;
    font-size:12.5px;
  }

  .intencion-card{
    grid-template-columns:36px 1fr 22px;
    padding:12px 14px;
    gap:10px;
    border-radius:12px;
  }

  .intencion-ico{
    width:36px;
    height:36px;
    border-radius:9px;
    font-size:14px;
  }

  .intencion-ico i{ font-size:14px; }

  .intencion-title{
    font-size:13.5px;
    line-height:1.3;
  }

  .intencion-check{
    width:22px;
    height:22px;
    font-size:10px;
  }

  .intencion-check i{ font-size:9px; }

  .asesor-grid{ grid-template-columns:1fr; }

  .asesor-card{ padding:11px 13px; }
  .asesor-avatar{
    width:36px;
    height:36px;
    font-size:14px;
  }
  .asesor-nombre{ font-size:13.5px; }
  .asesor-rol{ font-size:11px; }

  .asesor-wa-btn{
    padding:10px 14px;
    font-size:13px;
  }

  #nombreCompleto,
  .ancho-medio{ width:100%; }

  .input-line{ font-size:14px; }

  .felicidades-box{
    padding:14px 16px;
    font-size:13px;
  }

  .motivacional-box{
    padding:16px 14px 16px 48px;
    font-size:13px;
  }

  .motivacional-icon{
    left:14px;
    top:18px;
    font-size:18px;
  }

  .aviso-general{
    padding:14px 14px 14px 44px;
    font-size:12.5px;
  }

  .aviso-icon{
    left:14px;
    top:14px;
    font-size:16px;
  }

  .alerta-full-day{
    padding:12px 14px;
    font-size:12.5px;
  }

  .success-card{
    padding:26px 20px;
    margin-top:30px;
  }

  .checkmark{ width:68px; height:68px; }
  .success-card h2{ font-size:19px; }
  .success-card p{ font-size:13px; }

  .acciones-dobles{
    flex-direction:row;
    flex-wrap:wrap;
  }
}

/* ================= iPhone XS / SE ================= */

@media (max-width: 380px){
  .right h1{ font-size:19px; }
  .right{ padding:20px 16px 24px; }
  .send-btn{ padding:0 14px; }
  .send-btn span{ font-size:12px; }
  .categoria-btn{ padding:8px 10px; font-size:12px; }
  .intencion-card{ padding:11px 12px; gap:9px; }
  .intencion-title{ font-size:13px; }
}

/* ================================================================
   ============= AGREGADO v1.5: GRUPO + PANTALLA FINAL =============
   ================================================================ */

@media (max-width: 480px){
  #grupoInput.ancho-grupo{
    width:140px;
  }
}

@media (max-width: 480px){
  #finalScreen.final-screen{
    min-height:auto;
    padding:0;
  }

  #finalScreen.final-screen .success-card{
    padding:28px 20px;
  }

  .checkmark-animated{
    width:64px;
    height:64px;
  }

  #finalMensaje{
    padding:4px 8px;
    text-align:justify;
    animation:fadeInUp 1s ease;
  }

  .detalle-asesor{
    text-align:left;
    font-size:12px;
    padding:14px 17px;
  }

  .mensaje-rotativo{
    font-size:12px;
  }

  .mensajes-rotativos{
    min-height:44px;
  }
}

@media (max-width: 900px) and (min-width: 481px){
  #finalScreen.final-screen{
    min-height:90vh;
  }

  #finalScreen.final-screen .success-card{
    padding:32px 24px;
    max-width:90%;
  }
}

/* ================================================================
   ============= AGREGADO MÓVIL v1.8 =============
   ================================================================ */

@media (max-width: 480px){
  .advertencia-compacta{
    padding:10px 12px;
    font-size:12.5px;
    gap:8px;
    margin-top:8px;
  }

  .advertencia-icono{
    font-size:16px;
  }

  .otros-asesores-btn{
    font-size:12.5px;
    padding:10px 12px;
  }

  .full-day-input-label{
    font-size:13px;
  }

  .confirmacion-label{
    font-size:13px;
  }
}