/* ============================================= */
/*  📱 MOBILE OPTIMIZATIONS                      */
/* ============================================= */
/* Diseño móvil optimizado para Placid           */
/* ============================================= */

/* ============================================= */
/* BREAKPOINTS:                                  */
/* - 768px: Tablets                              */
/* - 480px: Móviles                              */
/* ============================================= */

/* ============================================= */
/* 1. MOBILE HEADER - Compacto y limpio          */
/* ============================================= */

@media (max-width: 768px) {
  /* Page container más compacto */
  body.site-modern .page {
    padding: 8px 12px;
    gap: 8px;
  }

  /* Topbar rediseñado para móvil */
  body.site-modern .topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px !important;
    gap: 10px;
    border-radius: 16px !important;
  }

  /* Logo más pequeño */
  body.site-modern .brand-left {
    order: 1;
  }
  
  body.site-modern .logo-img {
    height: 28px !important;
    width: auto;
  }

  /* Título y subtítulo compactos */
  body.site-modern .brand-center {
    order: 2;
    text-align: center;
    padding: 0;
  }

  body.site-modern .brand-center h1 {
    font-size: 16px !important;
    line-height: 1.3;
    margin: 0;
  }

  body.site-modern .brand-center p {
    font-size: 11px !important;
    margin: 2px 0 0;
    line-height: 1.3;
    opacity: 0.8;
  }

  /* Acciones en fila compacta */
  body.site-modern .top-actions {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
  }

  /* Botones pill más pequeños */
  body.site-modern .pill-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    gap: 4px;
    border-radius: 8px !important;
  }

  body.site-modern .pill-btn .btn-ic {
    width: 14px !important;
    height: 14px !important;
  }

  /* Selector de idioma compacto */
  body.site-modern .lang-dd {
    order: 10;
  }

  body.site-modern .lang-dd__btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    gap: 4px;
  }

  body.site-modern .lang-dd__label {
    display: none; /* Solo mostrar bandera */
  }

  /* Toggle tema más pequeño */
  body.site-modern .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
  }

  body.site-modern .theme-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ============================================= */
/* 2. INTRO WRAPPER - Formulario visible         */
/* ============================================= */

@media (max-width: 768px) {
  /* Ocultar imagen de la calculadora en móvil */
  body.site-modern .intro-left {
    display: none !important;
  }

  /* Intro wrapper solo una columna */
  body.site-modern .intro-wrapper {
    display: block !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* Formulario ocupa todo el ancho */
  body.site-modern .intro-right {
    width: 100% !important;
  }

  /* Form card más compacta */
  body.site-modern .form-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* Grid del formulario adaptado */
  body.site-modern .form-card .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Campos de formulario más compactos */
  body.site-modern .field {
    margin-bottom: 0;
  }

  body.site-modern .field label {
    font-size: 11px !important;
    margin-bottom: 3px;
  }

  body.site-modern .field input,
  body.site-modern .field select {
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    height: auto !important;
    min-height: 42px;
  }

  /* Campos con icono */
  body.site-modern .field.has-icon input {
    padding-left: 34px !important;
  }

  body.site-modern .field-icon {
    left: 10px !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Botón de calcular full width */
  body.site-modern .btn-calculate {
    width: 100%;
    padding: 14px 20px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    margin-top: 8px;
  }

  /* Privacy block compacto */
  body.site-modern .privacy-block {
    margin-top: 10px;
  }

  body.site-modern .contact-checkbox {
    font-size: 12px;
  }

  body.site-modern .privacy-note-box {
    padding: 8px;
    margin-top: 8px;
  }

  body.site-modern .privacy-note {
    font-size: 10px !important;
    line-height: 1.4;
  }

  /* Texto intro oculto o muy pequeño */
  body.site-modern .intro-text {
    font-size: 11px !important;
    padding: 8px 12px !important;
    margin-top: 8px;
    text-align: center;
  }
}

/* ============================================= */
/* 3. MÓVILES PEQUEÑOS (< 480px)                 */
/* ============================================= */

@media (max-width: 480px) {
  body.site-modern .page {
    padding: 6px 8px;
    gap: 6px;
  }

  /* Header aún más compacto */
  body.site-modern .topbar {
    padding: 10px 12px !important;
    gap: 8px;
  }

  body.site-modern .brand-center h1 {
    font-size: 14px !important;
  }

  body.site-modern .brand-center p {
    display: none; /* Ocultar subtítulo en móviles muy pequeños */
  }

  /* Botones solo con icono */
  body.site-modern .pill-btn span:not(.btn-ic) {
    display: none;
  }

  body.site-modern .pill-btn {
    padding: 8px !important;
    min-width: 36px;
    justify-content: center;
  }

  body.site-modern .pill-btn .btn-ic {
    margin: 0;
  }

  /* Grid de formulario 1 columna para campos de contacto */
  body.site-modern .form-card .grid {
    grid-template-columns: 1fr;
  }

  /* Intro wrapper sin bordes */
  body.site-modern .intro-wrapper {
    padding: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Form card es la protagonista */
  body.site-modern .form-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
  }

  body.site-modern.site-modern--dark .form-card {
    background: rgba(15, 23, 42, 0.95) !important;
  }

  /* Ocultar texto intro en móviles muy pequeños */
  body.site-modern .intro-text {
    display: none;
  }
}

/* ============================================= */
/* 4. KPIs Y RESULTADOS EN MÓVIL                 */
/* ============================================= */

@media (max-width: 768px) {
  body.site-modern .kpis {
    flex-direction: column;
    gap: 8px;
  }

  body.site-modern .kpi-card {
    flex-direction: row !important;
    align-items: center;
    padding: 12px 16px !important;
    gap: 12px;
    border-radius: 12px !important;
  }

  body.site-modern .kpi-icon {
    font-size: 24px !important;
  }

  body.site-modern .kpi-value {
    font-size: 20px !important;
  }

  body.site-modern .kpi-label {
    font-size: 11px !important;
  }

  /* Chart section */
  body.site-modern .chart-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  body.site-modern .chart-card h2 {
    font-size: 14px !important;
  }

  body.site-modern .legend {
    font-size: 10px;
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* ============================================= */
/* 5. FOOTER COMPACTO EN MÓVIL                   */
/* ============================================= */

@media (max-width: 768px) {
  body.site-modern .site-footer {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  body.site-modern .footer-contact {
    flex-direction: column;
    gap: 12px;
  }

  body.site-modern .footer-item {
    padding: 10px 14px;
    font-size: 12px;
  }

  body.site-modern .footer-item svg {
    width: 18px;
    height: 18px;
  }

  body.site-modern .footer-kicker {
    font-size: 9px;
  }

  body.site-modern .footer-link {
    font-size: 12px;
  }

  body.site-modern .footer-bottom {
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
  }

  body.site-modern .made-by {
    font-size: 10px;
    text-align: center;
  }

  body.site-modern .footer-social {
    justify-content: center;
  }

  body.site-modern .footnote {
    font-size: 9px;
    text-align: center;
  }
}

/* ============================================= */
/* 6. PROGRESS INDICATOR MÓVIL                   */
/* ============================================= */

@media (max-width: 768px) {
  .progress-indicator {
    padding: 12px 16px;
  }

  .progress-steps {
    gap: 8px;
    font-size: 10px;
  }

  .progress-step span:not(.step-icon) {
    display: none; /* Solo mostrar iconos de paso */
  }

  .progress-step .step-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

/* ============================================= */
/* 7. TOASTS EN MÓVIL                            */
/* ============================================= */

@media (max-width: 768px) {
  .toast-container {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .toast {
    padding: 10px 14px;
    font-size: 13px;
  }

  .toast-title {
    font-size: 13px;
  }

  .toast-message {
    font-size: 12px;
  }
}

/* ============================================= */
/* 8. PARTÍCULAS MENOS INTENSAS EN MÓVIL         */
/* ============================================= */

@media (max-width: 768px) {
  #particles-canvas {
    opacity: 0.3;
  }
}

/* ============================================= */
/* 9. TOOLTIPS DESACTIVADOS EN MÓVIL             */
/* ============================================= */

@media (max-width: 768px) {
  [data-tooltip]::before,
  [data-tooltip]::after {
    display: none !important;
  }
}

/* ============================================= */
/* 10. FIX PARA iOS SAFARI                       */
/* ============================================= */

@supports (-webkit-touch-callout: none) {
  body.site-modern .topbar,
  body.site-modern .form-card,
  body.site-modern .kpi-card {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

/* ============================================= */
/* 11. LANDSCAPE MÓVIL                           */
/* ============================================= */

@media (max-width: 768px) and (orientation: landscape) {
  body.site-modern .page {
    padding: 4px 8px;
  }

  body.site-modern .topbar {
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 16px !important;
  }

  body.site-modern .brand-left {
    order: 1;
  }

  body.site-modern .brand-center {
    order: 2;
    flex: 1;
  }

  body.site-modern .top-actions {
    order: 3;
    width: auto;
  }

  body.site-modern .brand-center p {
    display: none;
  }
}

/* ============================================= */
/* 12. DARK MODE MÓVIL ADJUSTMENTS               */
/* ============================================= */

@media (max-width: 768px) {
  body.site-modern.site-modern--dark .topbar {
    background: rgba(12, 17, 38, 0.9) !important;
  }

  body.site-modern.site-modern--dark .intro-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.site-modern.site-modern--dark .form-card {
    background: rgba(12, 17, 38, 0.95) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
  }
}