/* =========================
   ACCESO CORPORATIVO (solo esta página)
   ========================= */

.acceso-page{
    padding-top: 90px !important;
}
.acceso-page h2{
  font-size: 1.5em;
  color: var(--bs-heading-color);
}

.acceso-page #areaHint{
  font-size: .9em;
  color: var(--bs-secondary-color);
}

/* Asegurar que los textos de los tiles sean legibles (evita blancos sobre fondos claros) */
.acceso-page .area-tile{
  color: var(--bs-body-color);
}

.acceso-page .area-tile .area-label{
  color: var(--bs-body-color);
  font-weight: 700;
  line-height: 1.15;
}

.acceso-page .area-tile .area-sub{
  color: var(--bs-secondary-color);
  opacity: 1;
  line-height: 1.15;
}

/* =========================
   Mobile: tiles compactos (icono izquierda + texto derecha)
   ========================= */
@media (max-width: 575.98px){
  .acceso-page{ padding-top: 80px !important; padding-bottom: 10px; }

  .acceso-page .area-grid{ --bs-gutter-x: 8px; --bs-gutter-y: 8px; }

  .acceso-page h2{ font-size: 1.00rem; }

  .acceso-page #areaHint{ font-size: 0.75rem; }

  .acceso-page .area-tile{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    min-height: 64px;
    text-align: left; /* evita centrado raro */
  }

  .acceso-page .area-ico{
    font-size: 1.35rem;
    line-height: 1;
    width: 34px;          /* alinea todos los textos */
    text-align: center;
    flex: 0 0 auto;
  }

  .acceso-page .area-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .acceso-page .area-label{ font-size: 0.85rem; }
  .acceso-page .area-sub{ font-size: 0.70rem; }
}