/* responsive.css — Ajustes móviles específicos YoTeCargo */

/* ── Mobile (≤ 576px) ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Peso tipográfico mínimo en móvil para legibilidad */
    body { font-weight: 450; }
    p, li, .form-label, .form-text { font-weight: 450; }

    /* Headings ligeramente más pequeños */
    h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
    h3 { font-size: clamp(1rem, 4vw, 1.375rem); }

    /* Cards apiladas en columna */
    .card-body { padding: 1rem; }

    /* Botones full-width en formularios móvil */
    .btn-mobile-full { width: 100%; }

    /* Espaciado reducido */
    .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .mb-5 { margin-bottom: 2rem !important; }

    /* Navbar — menú compacto */
    .navbar-collapse .nav-item { border-bottom: 1px solid var(--border); }
    .navbar-collapse .nav-item:last-child { border-bottom: none; }

    /* Stats cards — reducir número */
    .fs-2 { font-size: 1.5rem !important; }

    /* Stepper — texto más corto */
    .stepper-label { display: none; }
    .stepper-step .step-number { font-size: 0.75rem; }

    /* Tables — scroll horizontal */
    .table-responsive-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Modal — full bottom sheet */
    .modal-dialog { margin: 0; align-items: flex-end; }
    .modal-content { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

/* ── Tablet (577px – 768px) ────────────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
    h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); }
    .card-body { padding: 1.25rem; }
}

/* ── Desktop (≥ 992px) ─────────────────────────────────────── */
@media (min-width: 992px) {
    .card-body { padding: 1.5rem; }
    /* Stepper multi-paso más ancho en desktop */
    .stepper-container { max-width: 720px; margin-left: auto; margin-right: auto; }
}

/* ── Touch devices ──────────────────────────────────────────── */
@media (hover: none) {
    /* Eliminar hover elevación en touch — no hay hover real */
    a .card:hover, .card-clickable:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
    .btn:hover { opacity: 0.92; }
}

/* ── Safe area (notch / home indicator) ────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    .navbar.sticky-top {
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }
    footer {
        padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
    }
}