/* Estilos responsivos adicionales */

/* Viewport meta tag fix para iOS */
* {
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}

/* Prevenir zoom en inputs en iOS */
@supports (padding: max(0px)) {
    body {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* Mobile-first adjustments */
@media (max-width: 640px) {
    /* Prevenir zoom en iOS cuando enfocas un input */
    input,
    select,
    textarea {
        font-size: 16px !important;
        padding: 12px 8px !important;
        color: #111827 !important;
    }

    /* Mejor espaciado en mobile */
    .px-responsive {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .py-responsive {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Stack layout para formularios */
    form > div {
        margin-bottom: 1rem;
    }

    /* Botones con mejor hit area */
    button,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    a.btn-primary,
    a.btn-secondary,
    a.btn-danger {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px !important;
        margin: 4px;
        color: white !important;
    }

    /* Mejorar scroll en tablas */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Modal responsivo en mobile */
    .modal-content {
        max-width: 95vw;
    }

    /* Mejorar legibilidad de texto en mobile */
    h1 {
        font-size: 1.5rem;
        color: #111827;
    }

    h2 {
        font-size: 1.25rem;
        color: #111827;
    }

    h3 {
        font-size: 1.1rem;
        color: #111827;
    }

    p {
        line-height: 1.6;
        color: #374151;
    }

    body {
        color: #111827;
    }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
    .max-w-7xl {
        max-width: 100%;
        padding: 0 1rem;
    }

    /* Mejorar grid en tablet */
    .grid-cols-1 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Desktop optimizations */
@media (min-width: 1025px) {
    /* Smooth hover effects en desktop */
    a,
    button {
        transition: all 0.2s ease-in-out;
    }

    a:hover,
    button:hover {
        transform: translateY(-1px);
    }
}

/* Print styles */
@media print {
    nav,
    .alert-container,
    button,
    a.btn-primary,
    a.btn-secondary {
        display: none !important;
    }

    body {
        background: white;
    }

    .card {
        page-break-inside: avoid;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    body {
        color: #000;
        background-color: #fff;
    }

    .bg-gradient-to-r {
        background: #0066cc;
    }
}

/* Dark mode support (future-proof) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }

    .card,
    .bg-white {
        background-color: #2d2d2d;
        color: #e0e0e0;
    }

    .text-gray-700,
    .text-gray-500 {
        color: #b0b0b0;
    }
}

/* Landscape orientation */
@media (orientation: landscape) and (max-height: 600px) {
    nav {
        padding: 0.5rem;
    }

    .py-responsive {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    h1,
    h2,
    h3 {
        margin: 0.25rem 0;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .max-w-7xl {
        max-width: 1400px;
    }

    .max-w-3xl {
        max-width: 900px;
    }

    body {
        font-size: 1.1rem;
    }
}

/* Small devices (phones) */
@media (max-width: 360px) {
    .text-3xl,
    .text-2xl {
        font-size: 1.25rem;
    }

    .px-4 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Stack navigation items */
    .flex {
        flex-direction: column;
    }

    button,
    a {
        width: 100%;
        text-align: center;
    }
}

/* Better touch targets on mobile */
@media (hover: none) and (pointer: coarse) {
    button,
    a,
    input[type="button"],
    input[type="submit"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 48px;
        min-width: 48px;
    }

    /* Increase spacing between clickables */
    button + button {
        margin-left: 0.5rem;
    }
}

/* Fix for notch devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    nav {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-top: max(12px, env(safe-area-inset-top));
    }
}