/* ============================= */
/*      Mobile tweaks overall    */
/* ============================= */

/* Cubre todo hasta 440px de ancho CSS */
@media (max-width: 440px) {

  /* — FORM CARD: más espacio interior para los inputs — */
  .form-signin {
    width: 95% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 1rem !important;        /* aumenta padding alrededor */
  }
  /* Un poquito de separación extra entre cada campo */
  .form-signin .form-floating {
    margin-bottom: 1rem !important;
  }

  /* Logo reducido */
  .form-signin .logo {
    display: block !important;
    margin: 0 auto 0.75rem auto !important;
    max-width: 50px !important;
    height: auto !important;
  }

  /* ===== HEADER (ajustado) ===== */
  header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 0 !important;    /* un poco más de espacio vertical */
    height: auto !important;
  }
  header .logo {
    margin-bottom: 8px !important; /* un poquito más de separación */
  }
  header .logo img {
    height: 32px !important;       /* logo un pelín más grande */
  }
  header .nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;           /* más espacio horizontal */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header .nav-links a {
    font-size: 0.85rem !important; /* texto ligeramente mayor */
    padding: 6px 8px !important;   /* área de click más cómoda */
    margin: 0 !important;
  }


  /* FOOTER */
  footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    padding: 4px 0 6px !important;   /* menos espacio arriba */
    height: auto !important;
    gap: 2px !important;
    background-color: #00a443 !important;
  }

  /* Texto de copyright */
  .footer-text {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: center !important;
    padding: 0 !important;
    color: white !important;
  }

  /* Enlaces en una sola línea, color naranja */
  .footer-links {
    font-size: 0.7rem !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .footer-links a {
    color: #ff9c1a !important;      /* naranja Iberdrola */
    margin: 0 6px !important;
    text-decoration: none !important;
  }
  .footer-links a:hover {
    color: #0da9ff !important;      /* azul al hover */
    text-decoration: underline !important;
  }
  
}

/* Tweak extra para anchos ≤320px */
@media (max-width: 320px) {
  header .logo img {
    height: 24px !important;
  }
  header .nav-links a,
  .footer-text,
  .footer-links,
  .footer-links a {
    font-size: 0.65rem !important;
    padding: 3px 5px !important;
  }
}

@media (max-width: 440px) {
  /* En móvil ya no forzamos fixed height */
  .row-equal-height .card.h-100 {
    flex: none;
    height: auto !important;
  }

  /* Eliminamos el display:flex en la fila para que las col-12 se apilen */
  .row-equal-height {
    display: block;
  }

  /* Opcional: quitar el mb-4 y usar otro margen en móvil */
  .row-equal-height .col-sm-6 {
    margin-bottom: 1.5rem !important;
  }
}