/**
 * Mobile Fixes para Praxis Seguridad
 * Corrige problemas de scroll horizontal y mejora UX móvil
 */

/* ============================================
   PREVENIR SCROLL HORIZONTAL
   ============================================ */

/* Aplicar a todo el documento */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

/* Contenedores principales */
main,
header,
footer,
section {
    overflow-x: hidden;
    max-width: 100%;
}

/* ============================================
   ELEMENTOS QUE PUEDEN CAUSAR OVERFLOW
   ============================================ */

/* Imágenes responsivas */
img {
    max-width: 100%;
    height: auto;
}

/* Tablas responsivas */
table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Pre y Code bloques */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

/* Contenido de texto largo */
p,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span {
    /* Prevenir corte de palabras en medio */
    word-break: normal;
    /* Permitir que palabras largas se rompan SOLO si es absolutamente necesario */
    overflow-wrap: break-word;
    /* NO usar guiones automáticos (evita "ejecu-tadas", "pensa-da") */
    hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
}

/* ============================================
   GRID Y FLEX CONTAINERS
   ============================================ */

/* Evitar que grids se desborden */
.grid {
    max-width: 100%;
}

/* Flex containers */
.flex {
    max-width: 100%;
}

/* ============================================
   ELEMENTOS DE ANCHO FIJO
   ============================================ */

/* Contenedores con max-w-... de Tailwind */
[class*="max-w-"] {
    max-width: 100vw !important;
}

/* ============================================
   FIXES ESPECÍFICOS MOBILE
   ============================================ */

@media (max-width: 768px) {

    /* Padding horizontal consistente */
    .mobile-safe-padding {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Contenedores de página */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hero sections */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Headers fijos */
    header {
        width: 100vw;
        left: 0;
        right: 0;
    }

    /* Chatbot - posicionado correctamente */
    #chatbot-widget {
        right: 1rem !important;
        bottom: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
    }

    /* Botón scroll to top */
    #scrollTop {
        right: 5rem !important;
        bottom: 1rem !important;
    }

    /* Formularios */
    form {
        max-width: 100%;
    }

    input,
    textarea,
    select {
        max-width: 100%;
    }

    /* Modales y overlays */
    .modal,
    .overlay {
        max-width: 100vw;
        left: 0;
        right: 0;
    }

    /* Cards y contenido */
    .card,
    [class*="rounded-"] {
        max-width: 100%;
    }

    /* Navegación móvil */
    nav {
        max-width: 100vw;
    }

    /* Prevenir zoom en inputs (iOS) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
        /* Previene auto-zoom en iOS */
    }

    /* Tablas en móvil - scroll horizontal controlado */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Contenido de ancho específico */
    iframe,
    embed,
    object {
        max-width: 100%;
    }
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* Mejorar scroll en iOS */
* {
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   TOUCH OPTIMIZATIONS
   ============================================ */

/* Áreas táctiles más grandes */
@media (max-width: 768px) {

    button,
    a,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        /* Recomendación iOS */
        min-width: 44px;
    }

    /* Links del menú */
    nav a {
        padding: 0.75rem 1rem;
        display: block;
    }
}

/* ============================================
   ORIENTACIÓN LANDSCAPE (MÓVIL HORIZONTAL)
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {

    /* Ajustes para móvil en horizontal */
    header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Hero sections más pequeños */
    section[class*="py-"] {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ============================================
   FIX PARA ELEMENTOS POSITION FIXED/ABSOLUTE
   ============================================ */

.fixed,
.absolute {
    max-width: 100vw;
}

/* ============================================
   DEBUG (DESCOMENTAR PARA ENCONTRAR PROBLEMAS)
   ============================================ */

/* 
* Descomenta esto temporalmente para ver qué elementos causan overflow
* {
    outline: 1px solid red !important;
}
*/