/* ========================================
   MOBILE IMPROVEMENTS - M001 to M010
   Transfer Express WWWv4
   ======================================== */

/* M008: Skeleton Screens - keyframes defined in modern-effects.css */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
    will-change: background-position;
}

.dark-mode .skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: 16px;
    border-radius: 4px;
}

.skeleton-card {
    height: 120px;
    border-radius: 16px;
    margin-bottom: 16px;
}

/* M003: Bottom Sheet para resultados en mobile */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-tarjeta-fondo);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
}

.bottom-sheet.visible {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--color-borde);
    border-radius: 2px;
    margin: 12px auto;
}

.bottom-sheet-content {
    padding: 0 20px 20px;
}

.bottom-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 9998;
}

.bottom-sheet-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* M004: Pull-to-Refresh */
.pull-to-refresh {
    position: relative;
    overflow: hidden;
}

.pull-to-refresh-spinner {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    transition: top 0.3s;
}

.pull-to-refresh-spinner.pulling {
    top: 10px;
}

.ptr-icon {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-primario);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.pull-to-refresh-spinner.pulling .ptr-icon {
    opacity: 1;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* M006: Input Focus Management Mobile */
@media (max-width: 768px) {
    input:focus,
    select:focus,
    textarea:focus {
        scroll-margin-top: 120px;
        /* Auto-scroll al enfocar para que el campo no quede tapado por el teclado */
    }

    /* Prevenir zoom en iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* iOS no hace zoom si es >= 16px */
    }
}

/* M010: Formato de Números para Inputs Mobile */
input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Mejoras de touch feedback */
.btn,
a,
button,
.vehicle-card,
.card {
    -webkit-tap-highlight-color: rgba(21, 101, 192, 0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Prevenir bounce en iOS */
body {
    overscroll-behavior-y: contain;
}

/* Swipe hints para navegación */
.swipe-hint {
    position: relative;
    overflow: hidden;
}

.swipe-hint::after {
    content: '← Desliza →';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    opacity: 0;
    animation: swipe-hint-fade 3s ease-in-out;
}

@keyframes swipe-hint-fade {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 1; }
}

/* Touch-friendly spacing en mobile */
@media (max-width: 768px) {
    .btn {
        padding: 14px 24px;
        min-height: 48px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    /* Mayor espacio entre elementos táctiles */
    .btn + .btn {
        margin-top: 12px;
    }

    /* Área de tap más grande para checkboxes/radios */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
        cursor: pointer;
    }

    label {
        cursor: pointer;
        padding: 8px 0;
        display: block;
    }
}

/* Mejoras para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .bottom-sheet {
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-radius: 24px;
    }

    .bottom-sheet.visible {
        transform: translateX(-50%) translateY(0);
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 2rem 0;
    }

    .bottom-sheet {
        max-height: 60vh;
    }
}

/* Safe areas para dispositivos con notch */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .header {
        padding-top: max(var(--space-lg), env(safe-area-inset-top));
    }

    .bottom-sheet {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* Loading states mejorados para mobile */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    will-change: opacity;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: var(--color-primario);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Haptic feedback visual */
.haptic-feedback {
    animation: haptic-pulse 0.2s ease-out;
}

@keyframes haptic-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Mejoras de contraste para modo oscuro en mobile */
.dark-mode .bottom-sheet {
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

.dark-mode .bottom-sheet-handle {
    background: #666;
}

/* Optimización de scroll en mobile */
.smooth-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Prevenir problemas de sticky en iOS */
.header {
    position: -webkit-sticky;
    position: sticky;
}