/*
 * responsive.css — Quiebres de pantalla para el portal del afiliado
 * Breakpoints usados:
 *   xs : < 576px  (móvil pequeño)
 *   sm : < 768px  (móvil grande / phablet)
 *   md : < 992px  (tablet)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   OVERLAY SIDEBAR MÓVIL
═══════════════════════════════════════════════════════════════════════════ */

#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
#sidebarOverlay.show { display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT GENERAL (index.html)
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
  .content-body { padding: 1rem; }
  .top-navbar   { padding: 0 .75rem; }
}

@media (max-width: 575.98px) {
  .content-body { padding: .75rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MIS APORTACIONES (mis-aportaciones.html)
   Vista más crítica: los afiliados pagan desde móvil
═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet: grid ya colapsa a 1 col (definido en la vista), ajustes extra ── */
@media (max-width: 991.98px) {
  .ma-wrap { padding: 16px; }

  .ma-banner h2 { font-size: 1.2rem; }

  /* El panel de pago sticky pierde sentido apilado — dale espacio */
  .ma-pay-panel { position: static; top: auto; }
}

/* ── Móvil: panel de pago como barra fija en la parte inferior ── */
@media (max-width: 767px) {
  /* Espacio para que el contenido no quede tapado por la barra */
  .ma-wrap { padding-bottom: 170px !important; }

  /* Banner más compacto */
  .ma-banner   { padding: 18px 20px; border-radius: 12px; }
  .ma-banner h2 { font-size: 1.05rem; }
  .ma-banner p  { font-size: .78rem; }
  .ma-badge     { font-size: .62rem; padding: 3px 9px; }

  /* Stat pills: filas horizontales ancho completo */
  .ma-stat-row { flex-direction: column; gap: 6px; }
  .ma-stat-pill {
    min-width: 100%;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .ma-stat-pill .label { font-size: .68rem; margin-bottom: 0; }
  .ma-stat-pill .value { font-size: .95rem !important; margin-top: 0; }

  /* Cuota items: compactos, sin concepto */
  .cuota-item { padding: 10px 12px; gap: 8px; }
  .cuota-concepto { display: none; }
  .cuota-periodo  { font-size: .72rem; }
  .cuota-monto    { font-size: .82rem; }

  /* Botones del header de cuotas: más pequeños */
  #maCuotasCard .ma-card-header { flex-wrap: wrap; gap: 6px; }
  #maCuotasCard .ma-card-header .ms-auto { margin-left: 0 !important; }

  /* ── BARRA FIJA DE PAGO ── */
  .ma-pay-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    padding: 0;
  }

  .ma-pay-panel .ma-card {
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 -4px 24px rgba(15, 76, 129, .18);
    margin-bottom: 0;
  }

  .ma-pay-panel .ma-card-header { display: none; }

  .ma-pay-panel .ma-card-body { padding: 10px 16px 14px; }

  /* Solo mostrar fila de total y comisión, ocultar el resto */
  .ma-pay-panel .resumen-row:not(.total):not(.comision) { display: none; }

  .ma-pay-panel .resumen-row.comision {
    font-size: .72rem;
    padding: 2px 0;
    border: none;
  }

  .ma-pay-panel .resumen-row.total {
    font-size: .92rem;
    padding-top: 6px;
    margin-top: 2px;
  }

  .btn-pay {
    padding: 12px 20px;
    font-size: .88rem;
    margin-top: 8px;
    border-radius: 10px;
  }

  .pay-note { display: none; }
}

/* ── Móvil pequeño: ajustes extra ── */
@media (max-width: 399px) {
  .ma-stat-pill .value { font-size: .9rem; }
  .ma-stat-pill .label { font-size: .6rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL PERFIL (portal-perfil.html)
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .pp-wrap    { padding: 12px; }
  .pp-banner  { padding: 16px 18px; gap: 14px; }
  .pp-banner-info h2 { font-size: 1.05rem; }

  /* Grid de campos: 1 columna en móvil */
  .pp-grid { grid-template-columns: 1fr; }

  /* Caja de habilidad: apilar verticalmente */
  .pp-habilidad-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Botón de constancia: ancho completo */
  .pp-btn-constancia {
    width: 100%;
    justify-content: center;
  }

  /* Badge de habilidad en header: no se cae */
  .pp-card-header { flex-wrap: wrap; gap: 6px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HISTORIAL DE PAGOS (portal-historial.html)
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .ph-wrap   { padding: 12px; }
  .ph-banner { padding: 16px 18px; border-radius: 12px; margin-bottom: 16px; }
  .ph-banner h2 { font-size: 1.05rem; }
  .ph-banner p  { font-size: .78rem; }

  /* Tarjetas de comprobante */
  .ph-row-card {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ph-border);
  }
  .ph-row-card:last-child { border-bottom: none; }

  .ph-row-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  .ph-cpe { font-size: .8rem; color: var(--ph-primary); font-weight: 700; }

  .ph-row-card-mid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .ph-fecha { font-size: .78rem; color: var(--ph-muted); }
  .ph-total { font-size: 1rem; color: var(--ph-text); }

  .ph-row-card-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SWEETALERT2 — ajuste en móvil
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
  .swal-ical-popup { width: calc(100vw - 32px) !important; }
  .swal2-popup     { width: calc(100vw - 32px) !important; }
}