/* Capa responsive común. Solo se carga cuando el controlador tiene $responsive = true (layouts/main.php),
   y todo cuelga de body.fp-resp, así que no afecta a las pantallas que aún no están probadas.
   Solo en pantalla: no toca la impresión. Sin !important salvo donde el CSS heredado lo obliga.
   Informe: docs/auditoria-responsive/AUDITORIA_RESPONSIVE.md */
@media screen {
    html { -webkit-text-size-adjust: 100%; }

    /* Contenedor fluido: Blueprint lo fija en 1280 px */
    .fp-resp .container { width: auto; max-width: 1280px; }
    .fp-resp #header img { display: block; width: 100%; height: auto; }
    .fp-resp img { max-width: 100%; }

    /* Menú de invitado: los elementos pasan a la línea siguiente en vez de salirse */
    .fp-resp #menu_desp { overflow: visible; }
    .fp-resp #menu_desp:after { content: ""; display: block; clear: both; }
    .fp-resp #nav-bar { padding-left: 0; padding-right: 0; }

    /* Formularios heredados: nada más ancho que su caja */
    .fp-resp div.form input[type="text"], .fp-resp div.form input[type="password"], .fp-resp div.form input[type="email"],
    .fp-resp div.form input[type="number"], .fp-resp div.form input[type="tel"], .fp-resp div.form input[type="search"],
    .fp-resp div.form textarea, .fp-resp div.form select { max-width: 100%; box-sizing: border-box; }

    
    /* Barra de usuario y rol logueado en layout */
    .fp-resp .fp-user-session-bar {
        box-sizing: border-box;
        padding: 6px 16px;
        font-size: 11px;
        line-height: 1.45;
        color: #475569;
        text-align: right;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }
    .fp-resp .fp-user-session-bar strong,
    .fp-resp .fp-user-session-bar b {
        color: #0f172a;
    }

    /* Avisos fijos con ancho en píxeles */
    .fp-resp .carga_load, .fp-resp .carga_load2, .fp-resp .carga_load3, .fp-resp .mensaje_resultado {
        width: 90%; max-width: 400px; margin-left: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
    }

    /* Foco visible (Blueprint lo anula con :focus{outline:0}) */
    .fp-resp a:focus-visible, .fp-resp button:focus-visible, .fp-resp input:focus-visible,
    .fp-resp select:focus-visible, .fp-resp textarea:focus-visible, .fp-resp summary:focus-visible { outline: 2px solid #3cbae3; outline-offset: 2px; }

    /* Dos columnas de Blueprint (column2): se apilan en pantallas medianas */
    @media (max-width: 900px) {
        .fp-resp .span-19, .fp-resp .span-5 { float: none; width: auto; margin-right: 0; }
        .fp-resp #sidebar { padding: 0 20px 20px; }
    }

    /* Menú táctil (js/menu-movil.js), bajo 1000 px: el menú de taquilla mide ≈944 px. Sin JS la barra sigue como antes: elementos que bajan de línea. */
    .fp-resp .fp-menu-btn, .fp-resp .fp-menu-flecha { display: none; }
    @media (max-width: 1000px) {
        .fp-resp .fp-menu-js .fp-menu-btn { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: #fff; font: 700 15px/1 Arial, Helvetica, sans-serif; text-align: left; cursor: pointer; }
        .fp-resp .fp-menu-btn__ico { display: block; width: 22px; margin-right: 12px; }
        .fp-resp .fp-menu-btn__ico i { display: block; height: 2px; margin: 4px 0; background: #fff; border-radius: 1px; }
        .fp-resp .fp-menu-js #nav { display: none; float: none; width: 100%; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
        .fp-resp .fp-menu-js.fp-menu-abierto #nav { display: block; }
        .fp-resp .fp-menu-js #nav li { float: none; position: relative; margin: 0; padding: 0; background: none; border-top: 1px solid rgba(255, 255, 255, 0.14); }
        .fp-resp .fp-menu-js #nav li.active { margin: 0; background: none; }
        .fp-resp .fp-menu-js #nav li.active em { display: none; }
        .fp-resp .fp-menu-js #nav li.fp-vacio { display: none; }
        .fp-resp .fp-menu-js #nav a, .fp-resp .fp-menu-js #nav ul li a, .fp-resp .fp-menu-js #nav li.over ul a, .fp-resp .fp-menu-js #nav ul li.parent a {
            float: none; display: block; box-sizing: border-box; min-height: 48px; padding: 0 56px 0 16px; background: none; background-image: none; color: #fff; font-weight: 700; line-height: 48px; cursor: pointer;
        }
        .fp-resp .fp-menu-js #nav li.active > a { background: rgba(255, 255, 255, 0.14); }
        .fp-resp .fp-menu-js #nav span, .fp-resp .fp-menu-js #nav ul span, .fp-resp .fp-menu-js #nav ul li.last li span { display: inline; padding: 0; background: none; }
        .fp-resp .fp-menu-js #nav ul { position: static; display: none; width: auto; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0.28); }
        .fp-resp .fp-menu-js #nav li.fp-abierto > ul { display: block; }
        .fp-resp .fp-menu-js #nav ul li { background: none; padding: 0; }
        .fp-resp .fp-menu-js #nav ul a, .fp-resp .fp-menu-js #nav ul li a { padding-left: 32px; font-weight: 400; }
        .fp-resp .fp-menu-js #nav ul ul a, .fp-resp .fp-menu-js #nav ul ul li a { padding-left: 48px; }
        .fp-resp .fp-menu-js #nav ul ul ul a, .fp-resp .fp-menu-js #nav ul ul ul li a { padding-left: 64px; }
        .fp-resp .fp-menu-js .fp-menu-flecha { display: block; position: absolute; top: 0; right: 0; z-index: 1; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; background: transparent; color: #fff; cursor: pointer; }
        .fp-resp .fp-menu-flecha i { display: block; width: 8px; height: 8px; margin: 14px auto 0; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: transform 0.18s ease; }
        .fp-resp .fp-menu-js li.fp-abierto > .fp-menu-flecha i { margin-top: 20px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
        .fp-resp .fp-menu-btn:focus-visible, .fp-resp .fp-menu-flecha:focus-visible { outline: 2px solid #3cbae3; outline-offset: -2px; }
    }
    @media (prefers-reduced-motion: reduce) { .fp-resp .fp-menu-flecha i { transition: none; } }

    /* Bloques con ancho fijo en el atributo style (p. ej. width: 700px en paginadores y totales de reportes): max-width gana al ancho en línea,
       así que no pueden pasar del ancho disponible. Las tablas se tratan aparte (js/tablas-movil.js). */
    @media (max-width: 960px) {
        .fp-resp #content [style*="width"]:not(table):not(td):not(th):not(img):not(input):not(select):not(textarea):not(button):not(svg) { max-width: 100%; box-sizing: border-box; }
        /* Un fieldset toma por defecto el ancho mínimo de su contenido (un campo con size grande lo ensanchaba a 522 px): puede encoger,
           y los campos de texto y las listas no pasan del ancho de su caja. */
        .fp-resp #content fieldset { min-width: 0; max-width: 100%; box-sizing: border-box; }
        /* Filas de formulario con float en línea (style="float: left"): al flotar toman el ancho de su campo (size=60 → 522 px), así que
           se les pone el tope del ancho disponible; los campos de archivo también. */
        .fp-resp #content div.form .row, .fp-resp #content fieldset .row { max-width: 100%; box-sizing: border-box; }
        .fp-resp #content input[type="file"] { max-width: 100%; box-sizing: border-box; }
        /* Elementos de listado (CListView, p. ej. «Control de carga») con textos largos sin espacios */
        .fp-resp #content .view { overflow-wrap: anywhere; word-wrap: break-word; }
        .fp-resp #content fieldset input[type="text"], .fp-resp #content fieldset input[type="password"], .fp-resp #content fieldset input[type="number"],
        .fp-resp #content fieldset input[type="email"], .fp-resp #content fieldset input[type="tel"], .fp-resp #content fieldset select, .fp-resp #content fieldset textarea { max-width: 100%; box-sizing: border-box; }
        /* Widget de partidos del Home: con «1fr» la columna no baja de su contenido mínimo y la tarjeta (308 px) se salía de su caja (244 px) */
        .fp-resp .fppr-widget__grid { grid-template-columns: minmax(0, 1fr); }
        .fp-resp .fppr-widget-card { min-width: 0; }
    }

    @media (max-width: 600px) {
        .fp-resp #content { padding: 12px; }
        .fp-resp div.breadcrumbs { padding: 5px 12px; }
        .fp-resp #footer { margin: 10px 12px; }
        /* Menú de invitado: zona táctil de 40 px de alto (el sistema logueado se resuelve en la etapa del menú) */
        .fp-resp #nav a { line-height: 40px; }
        /* 16 px evita el zoom automático de iOS al enfocar un campo */
        .fp-resp div.form input, .fp-resp div.form select, .fp-resp div.form textarea { font-size: 16px; }
        /* Campos y botones de los formularios heredados (div.form y fieldset): zona táctil de 40–44 px */
        .fp-resp div.form input[type="text"], .fp-resp div.form input[type="password"], .fp-resp div.form input[type="number"], .fp-resp div.form input[type="email"], .fp-resp div.form select,
        .fp-resp #content fieldset input[type="text"], .fp-resp #content fieldset input[type="password"], .fp-resp #content fieldset input[type="number"], .fp-resp #content fieldset select { min-height: 40px; }
        .fp-resp div.form input[type="submit"], .fp-resp div.form input[type="button"], .fp-resp #content fieldset input[type="submit"], .fp-resp #content fieldset input[type="button"] { min-height: 44px; padding-left: 16px; padding-right: 16px; }
    }

    /* Próximos partidos (Home taquilla): carrusel táctil horizontal fluido bajo 1024px para evitar colisión de cuotas */
    .fp-resp .fp-prox__fila {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important;
        padding-bottom: 12px !important;
    }
    .fp-resp .fp-prox__card {
        -webkit-flex: 0 0 250px !important;
        flex: 0 0 250px !important;
        width: 250px !important;
        min-width: 240px !important;
        max-width: 85% !important;
        margin: 0 10px 0 0 !important;
        scroll-snap-align: start !important;
    }
    .fp-resp .fp-prox__card:last-child {
        margin-right: 0 !important;
    }
    @media (min-width: 1024px) {
        .fp-resp .fp-prox__fila {
            -webkit-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
            overflow-x: visible !important;
            padding-bottom: 0 !important;
        }
        .fp-resp .fp-prox__card {
            -webkit-flex: 1 1 calc(20% - 10px) !important;
            flex: 1 1 calc(20% - 10px) !important;
            width: calc(20% - 10px) !important;
            min-width: 190px !important;
            max-width: calc(20% - 10px) !important;
            margin: 0 5px 10px 5px !important;
        }
    }
}