/* Ajustes para celular y tablet. Se carga último: sólo agrega reglas dentro de
   media queries, el diseño de escritorio queda igual. */

/* ---------------------------- Tablet (<= 991.98px) ---------------------------- */
@media (max-width: 991.98px) {
    .container-fluid { max-width: 100%; padding-left: .5rem; padding-right: .5rem; }
    /* El padding del contenedor es menor al gutter de Bootstrap: anulo el margen
       negativo de la fila que envuelve la página para que no desborde. */
    #content > .container-fluid > .row { margin-left: 0; margin-right: 0; }
    #mainContent { gap: 12px; }
}

/* ------------------- Celular y tablet chica (<= 767.98px) -------------------- */
@media (max-width: 767.98px) {
    /* 16px evita que iOS haga zoom al enfocar un campo. */
    .form-control, .form-control-sm, select.form-control, textarea.form-control { font-size: 16px; }

    /* Las columnas de los modales se reacomodan solas según el ancho disponible. */
    .modal-body .row > div[class~="col"],
    .modal-body .row > div[class*="col-"] { flex: 1 1 11rem; max-width: 100%; }
    .modal-body .subsubSection > div[class~="col"] { flex: 1 1 7rem; }

    /* Los números de una jugada entran en una línea: sin márgenes y más angostos. */
    #colectivoContainerOro .row { margin-left: 0 !important; margin-right: 0 !important; gap: .2rem; }
    #colectivoContainerOro .row > input.col { flex: 1 1 2.5rem; min-width: 2.5rem; margin: 0 !important; padding: .375rem .15rem; text-align: center; }
    #colectivoContainerOro .row > .btn { margin: 0 !important; padding: .375rem .5rem; }

    /* El modal no supera la pantalla; lo que se desplaza es el cuerpo. */
    .modal-content { max-height: calc(100vh - 1rem); }
    .modal-body { overflow-y: auto; }
    .modal-header { flex-wrap: wrap; row-gap: .25rem; align-items: center; }
    .modal-header .modal-title { font-size: .95rem; flex: 1 1 auto; min-width: 0; }
    .modal-header > .btn { padding: .25rem .45rem; }
    .modal-header .close { padding: .25rem .5rem; margin: 0 0 0 auto; }
    .modal-header > div.col:empty { display: none; } /* separadores, no los campos */
    /* El campo del encabezado baja a su propia línea y deja la × junto al título. */
    .modal-header > input.form-control { order: 1; flex: 1 1 100%; margin-left: 0 !important; }
    .modal-footer { gap: .5rem; }
    /* El total va en su propia línea para no romper la fila de botones. */
    .modal-footer > label { order: -1; flex: 1 1 100%; margin-bottom: .25rem; text-align: center; }

    /* En celular la tarjeta se reduce a logo, número y cupo; el detalle vive en el
       modal de venta. En pantalla grande se muestra entera. */
    .colectivo-card-body { display: none; }
    .cupo-largo { display: none; }
    .cupo-corto { display: inline; }

    /* El PDF del ticket se adapta al alto de la pantalla en vez de 500/600px fijos. */
    #printIframe, #tiketTabsContent iframe { height: 60vh; min-height: 16rem; }
    #tiketTabs { flex-wrap: nowrap; overflow-x: auto; }
    #tiketTabs .nav-item { flex: 0 0 auto; }

    /* Tablas anchas: se desplazan en horizontal en vez de comprimirse. */
    .contenedorTabla table, #containerTable table { min-width: 34rem; }
    #modalSaveTemplate table, #modalLoadTemplate table { width: 100%; }
    #modalSaveTemplate .modal-body, #modalLoadTemplate .modal-body { overflow-x: auto; }
}

/* ----------------------------- Celular (<= 575.98px) ------------------------- */
@media (max-width: 575.98px) {
    .container-fluid { padding-left: .25rem; padding-right: .25rem; }
    .signin-card { min-width: 0; width: 100%; }

    /* La cabecera sigue en una fila; si falta lugar se recorta el título. */
    .app-header { gap: .4rem; padding: .4rem .5rem; }
    .app-header-title { font-size: .85rem; letter-spacing: 0; }
    .app-header-stock { gap: .25rem; }
    .stock-pill { gap: .25rem; padding: .2rem .45rem; font-size: .75rem; }
    .app-header-user { max-width: 5rem; font-size: .78rem; }

    #tab-content { border-width: 3px; }
    /* Las cuatro sub-pestañas de Administración se acomodan en dos filas. */
    #tab-content .nav-justified { flex-wrap: wrap; }
    #tab-content .nav-justified .nav-item { flex: 1 1 calc(50% - .75rem); }
    #tab-content .nav-link.son { font-size: .85rem; padding: .45rem .25rem; }
    #mainContent { border-width: 3px; gap: .5rem; padding: .5rem .35rem; }

    /* Tres colectivos por fila con la tarjeta reducida. */
    #mainContent .colectivo-card { width: calc(33.333% - .34rem); }
    .colectivo-card .colectivo-card-img { height: 3.5rem; }
    .colectivo-card-nombre { font-size: 1.4rem; }
    .colectivo-card-numero { font-size: 1.1rem; padding-top: .35rem; }
    .colectivo-card-cupo { font-size: .8rem; padding: .3rem .15rem; }

    #mainContent .admin-card { width: 100%; max-width: 18rem; height: auto; }

    #actionsBar .btn { min-width: 3rem; min-height: 2.5rem; }

    #tiketsColectivoOro button, #tiketsColectivoLoteria button,
    #modalDetailsColectivoTikets button { height: 2.6rem; width: 2.6rem; padding: 0; font-size: .8rem; }

    .modal-body { padding: .75rem .6rem; }
    .modal-body .row > div[class~="col"],
    .modal-body .row > div[class*="col-"] { flex: 1 1 100%; }
    .contenedorTabla table, #containerTable table { min-width: 30rem; font-size: .8rem; }
    #clientesReemplazoBody .btn { white-space: nowrap; font-size: .8rem; padding: .25rem .4rem; }

    #sticky-footer small { margin: .5rem !important; }
}

/* Pantallas muy angostas: el título cede su lugar para que el nombre de
   usuario y el stock se lean enteros. */
@media (max-width: 359.98px) {
    .app-header-title { display: none; }
    .app-header-stock { margin-left: 0; margin-right: auto; }
}

/* En pantallas táctiles el :hover queda pegado después de tocar. */
@media (hover: none) {
    #actionsBar li:hover, .card-body button:hover, .btn-link:hover { scale: 1; }
    .colectivo-card:hover { box-shadow: none; }
}