/* ================================================================
   COMPAT.CSS — Compatibilidad cross-browser + fix foro móvil
   BRIDGE UTYPSG — Agregar DESPUÉS de main.css y mobile-fix.css
   ================================================================ */

/* ── 1. RESET Y BOX-SIZING GLOBAL ── */
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Viewport seguro en iOS */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ── 2. BOTONES — compatibilidad Safari, Firefox, Edge ── */
.btn,
button,
[type="button"],
[type="submit"],
[type="reset"] {
    /* Quitar estilos nativos en iOS/Safari */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Flex con prefijos */
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    /* Cursor y selección */
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Transición con prefijos */
    -webkit-transition: background .2s ease, color .2s ease, 
                        border-color .2s ease, box-shadow .2s ease,
                        transform .2s ease;
    -o-transition: background .2s ease, color .2s ease,
                   border-color .2s ease, box-shadow .2s ease,
                   transform .2s ease;
    transition: background .2s ease, color .2s ease,
                border-color .2s ease, box-shadow .2s ease,
                transform .2s ease;

    /* Evitar que se deformen en móvil */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Fix Safari: botones dentro de forms no heredan fuente */
button,
[type="button"],
[type="submit"] {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Fix Firefox: quitar padding interno en botones */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* Fix transform en hover para Safari */
.btn:hover {
    -webkit-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px);
}
.btn:disabled:hover {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

/* ── 3. FLEXBOX CON PREFIJOS — contenedores principales ── */
.navbar-acciones,
.hero-btns,
.filtros-bar,
.orden-tabs,
.cats-bar,
.post-meta,
.anuncio-footer,
.form-grupo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* ── 4. GRID CON FALLBACK PARA NAVEGADORES SIN GRID ── */
/* IE11 fallback: flex en lugar de grid */
@supports not (display: grid) {
    .foro-layout,
    .page-grid,
    .emp-layout,
    .admin-grid {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .foro-layout > *,
    .page-grid > *,
    .emp-layout > * {
        -webkit-flex: 1 1 300px;
        -ms-flex: 1 1 300px;
        flex: 1 1 300px;
    }
}

/* ── 5. FORO — fix principal en móvil ── */
.foro-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .foro-layout {
        grid-template-columns: 1fr !important;
    }
    .foro-sidebar {
        position: static !important;
        order: -1; /* Sidebar arriba en móvil */
    }
    /* Cards del foro ocupan todo el ancho */
    .post-card {
        width: 100%;
    }
    /* Acciones del post en columna */
    .post-acciones {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: unset !important;
        gap: .4rem;
    }
    .post-acciones .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* Avatar más pequeño en móvil */
    .post-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    /* Título del post más pequeño */
    .post-titulo {
        font-size: .9rem !important;
    }
    /* Meta info del post */
    .post-meta {
        font-size: .72rem !important;
        gap: .4rem !important;
    }
    /* Botón nuevo post full width */
    .foro-nuevo-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── 6. IMÁGENES — compatibilidad cross-browser ── */
img {
    max-width: 100%;
    height: auto;
    /* IE */
    -ms-interpolation-mode: bicubic;
    /* Evitar que las imágenes se estiren */
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
img.avatar,
img.foto-perfil {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    object-fit: cover;
    /* Safari necesita esto */
    -o-object-fit: cover;
}

/* ── 7. INPUTS Y FORMS — cross-browser ── */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    /* iOS zoom prevention — mínimo 16px */
    font-size: max(16px, 1em);
}

/* Placeholder cross-browser */
::-webkit-input-placeholder { color: var(--gris); opacity: 1; }
:-ms-input-placeholder      { color: var(--gris); opacity: 1; }
::-moz-placeholder          { color: var(--gris); opacity: 1; }
::placeholder               { color: var(--gris); opacity: 1; }

/* Focus visible cross-browser */
:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}
/* Firefox viejo */
:focus:not(:focus-visible) {
    outline: none;
}

/* ── 8. SCROLLBAR OCULTA — cross-browser ── */
.orden-tabs,
.cats-bar,
.admin-nav-list,
.maestro-nav-list,
.panel-nav-list {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
}
.orden-tabs::-webkit-scrollbar,
.cats-bar::-webkit-scrollbar,
.admin-nav-list::-webkit-scrollbar,
.maestro-nav-list::-webkit-scrollbar,
.panel-nav-list::-webkit-scrollbar {
    display: none;                /* Chrome/Safari */
}

/* ── 9. ANIMACIONES — con prefijos ── */
@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
    to   { opacity: 1; -webkit-transform: translateY(0);   transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    -webkit-animation: fadeIn .3s ease;
    animation: fadeIn .3s ease;
}

/* ── 10. STICKY — compatibilidad Safari ── */
.foro-sidebar,
.form-card,
.navbar {
    position: -webkit-sticky;
    position: sticky;
}

/* ── 11. SAFE AREA — para teléfonos con notch (iPhone X+) ── */
@supports (padding: env(safe-area-inset-bottom)) {
    .navbar {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ── 12. TABLET — ajustes generales ── */
@media (min-width: 481px) and (max-width: 1024px) {
    .foro-layout {
        grid-template-columns: 1fr 200px;
        gap: 1rem;
    }
    .container {
        padding: 0 1.5rem;
    }
    /* Grids de 3 columnas → 2 en tablet */
    .grid-3,
    .cards-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── 13. PRINT — estilos básicos de impresión ── */
@media print {
    .navbar,
    .foro-sidebar,
    .btn,
    .maestro-nav,
    .admin-nav { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a { text-decoration: underline; color: #000; }
}