/*
 Theme Name:  Tarde Redonda
 Description: Tema custom para Tarde Redonda
 Version:     2.0.0
*/

/* =============================================================
   RESET GLOBAL & OVERRIDES DE OCEAWP
   ============================================================= */

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0 !important; /* OceanWP a veces agrega padding-top por la admin bar */
}

/* Cuando está el admin bar, compensar con padding-top en el navbar */
.admin-bar #tr-navbar {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar #tr-navbar { top: 46px; }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =============================================================
   FORZAR FULL-WIDTH: anular contenedores de OceanWP que puedan
   existir si el parent theme inyecta wrappers vía hooks
   ============================================================= */

#wrap,
.site-main,
#main,
#primary,
.content-area,
.entry-content,
.oceanwp-row,
.site-content,
.site-inner,
.ocean-container,
.entry,
article.page {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ocultar elementos de OceanWP que no usamos */
.oceanwp-breadcrumb,
.page-header,
.entry-header .entry-title,
.site-footer,
#footer-widgets,
.oceanwp-mobile-menu-icon,
.oceanwp-cart-link,
.oceanwp-account-link {
    display: none !important;
}

/* =============================================================
   NAVBAR – sticky con compensación de admin bar
   ============================================================= */

#tr-navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
}

/* =============================================================
   GLOBAL RESPONSIVE BASE
   ============================================================= */

/* Todos los wrappers de página custom son full-width */
#tr-homepage,
#tr-noticias-page,
#ligas-page,
#tr-gestion-page,
.com-page,
.jug-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Imágenes en contenido de noticias */
.tr-news-expanded-content img,
.tr-n-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* =============================================================
   CONTENEDORES FULL-WIDTH — evitar desbordamiento horizontal
   ============================================================= */

/* Cualquier layout de página se contiene en el viewport */
.tr-page-grid,
.tr-noticias-wrap,
.ligas-container,
.ligas-layout,
.ligas-selectors,
.com-wrap,
.com-chat-card,
.com-sidebar,
.jug-filters,
.zg-inner,
.g-shell,
.g-main {
    max-width: 100%;
    min-width: 0;
}

/* Contencion global suave en escritorio */
@media (min-width: 1024px) {
    .tr-page-grid,
    .tr-noticias-wrap,
    .ligas-container,
    .com-wrap,
    .jug-wrap,
    .zg-inner,
    .g-shell,
    .g-main {
        width: min(100% - 32px, 1440px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Tablas en contenido: siempre scroll horizontal, nunca desbordamiento */
table {
    max-width: 100%;
    width: 100%;
}
.table-responsive,
.anwp-b-wrap,
.ligas-panel,
.ligas-content-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Textos y palabras largas */
.tr-news-expanded-content,
.tr-n-content,
.com-msg-text,
.tr-fmodal-body,
.g-card,
.g-main {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* iframes (YouTube, etc.) contenidos */
iframe {
    max-width: 100%;
}

/* =============================================================
   RESPONSIVE GLOBAL – tablet (≤ 900px)
   ============================================================= */
@media (max-width: 900px) {
    .admin-bar body { padding-top: 0 !important; }

    /* Grids de 2 columnas fijas → 1 columna */
    .tr-page-grid        { grid-template-columns: 1fr !important; }
    .com-wrap            { grid-template-columns: 1fr !important; }
    .ligas-layout        { grid-template-columns: 1fr !important; }
}

/* =============================================================
   RESPONSIVE GLOBAL – mobile (≤ 640px)
   ============================================================= */
@media (max-width: 640px) {
    .admin-bar #tr-navbar { top: 46px; }

    /* Tipografía global */
    body { font-size: 15px; }

    /* Inputs y selects más grandes en mobile para no requerir zoom */
    input, select, textarea, button {
        font-size: 16px !important; /* iOS no hace zoom con 16px+ */
    }

    /* Elementos con ancho fijo se adaptan al viewport */
    [style*="width:"],
    [style*="min-width:"] {
        max-width: 100% !important;
    }

    /* Modales: siempre caben en pantalla */
    .tr-fmodal-card,
    .jug-modal,
    .zg-modal,
    #tr-sponsor-modal-card {
        max-width: calc(100vw - 24px) !important;
        width: 100% !important;
    }
}

/* =============================================================
   RESPONSIVE GLOBAL – mobile pequeño (≤ 400px)
   ============================================================= */
@media (max-width: 400px) {
    body { font-size: 14px; }

    /* Padding mínimo en contenedores principales */
    .tr-page-grid,
    .tr-noticias-wrap,
    .ligas-container,
    .com-wrap,
    .jug-wrap,
    .zg-wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}