/* ==========================================================================
   INNANET — Adaptación móvil
   --------------------------------------------------------------------------
   REGLA DURA: este archivo NO debe alterar la vista de escritorio.
   Por eso TODO su contenido vive dentro de media queries de ancho máximo.
   Si agregás una regla acá, va DENTRO de un bloque @media. Nunca fuera.

   Breakpoint: 767.98px = límite superior de `sm` en Bootstrap 5.
   Desde 768px (md) hacia arriba el sitio queda exactamente como estaba.
   ========================================================================== */

@media (max-width: 767.98px) {
  /* ------------------------------------------------------------------
     1. Base: evitar el scroll horizontal del documento completo.
        El desbordamiento se confina a los contenedores que lo necesitan
        (tablas anchas), no al <body>.
     ------------------------------------------------------------------ */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body > .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* ------------------------------------------------------------------
     2. Grid: en Bootstrap 5 un `.col` sin breakpoint sigue siendo
        horizontal en móvil. Este proyecto usa `.col` y `.col-N` en todas
        partes como si fueran columnas de escritorio, así que en pantallas
        chicas las apilamos.
        Se respetan las clases que declaran explícitamente un breakpoint
        (col-sm-*, col-md-*, etc.): esas son intencionales.
     ------------------------------------------------------------------ */
  .row > .col,
  .row > .col-1,
  .row > .col-2,
  .row > .col-3,
  .row > .col-4,
  .row > .col-5,
  .row > .col-6,
  .row > .col-7,
  .row > .col-8,
  .row > .col-9,
  .row > .col-10,
  .row > .col-11 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Las columnas apiladas necesitan aire vertical entre sí. */
  .row > [class*="col"] + [class*="col"] {
    margin-top: 0.5rem;
  }

  /* `justify-content-between` sobre columnas apiladas no aporta nada
     y `text-end` sobre una columna de ancho completo descoloca los
     botones: en móvil todo se alinea al flujo natural. */
  .row.justify-content-between > .col,
  .row.justify-content-end > .col {
    text-align: left;
  }

  /* ------------------------------------------------------------------
     3. Navbar: la marca y el menú de usuario conviven en el mismo
        `.navbar-brand` flex, que en móvil queda apretado.
     ------------------------------------------------------------------ */
  .navbar .navbar-brand {
    font-size: 1rem;
  }

  .navbar-collapse .navbar-brand {
    display: block !important;
    width: 100%;
    margin-right: 0;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 0.5rem;
  }

  .navbar-collapse .navbar-brand > .col {
    width: 100%;
    text-align: left !important;
  }

  .navbar-nav .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 1.05rem;
  }

  /* El dropdown dentro de un navbar colapsado se despliega en flujo,
     no flotando sobre el contenido. */
  .navbar-collapse .dropdown-menu {
    border: 0;
    background-color: transparent;
    padding-left: 1rem;
  }

  .navbar-collapse .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.75);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .navbar-collapse .dropdown-menu .dropdown-item:hover,
  .navbar-collapse .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  /* El título de sección (block navtitulo) pasa a ser un encabezado
     legible en vez de un texto perdido al lado del usuario. */
  .navbar-collapse .navbar-brand .col.text-start a {
    font-weight: 600;
  }

  /* ------------------------------------------------------------------
     4. Tablas de LAYOUT (etiqueta en <th>, valor/input en <td>).
        El proyecto usa tablas de 2 columnas para maquetar formularios y
        fichas. En móvil se convierten en bloques: etiqueta arriba,
        contenido abajo, ocupando el ancho completo.

        Se marcan con `.tabla-ficha`, que se aplica desde los templates.
     ------------------------------------------------------------------ */
  table.tabla-ficha,
  table.tabla-ficha thead,
  table.tabla-ficha tbody,
  table.tabla-ficha tr,
  table.tabla-ficha th,
  table.tabla-ficha td {
    display: block;
    width: 100% !important;
  }

  table.tabla-ficha {
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  table.tabla-ficha tr {
    border-bottom: 1px solid #dee2e6;
  }

  table.tabla-ficha tr:last-child {
    border-bottom: 0;
  }

  table.tabla-ficha th {
    background-color: #f1f3f5;
    border: 0;
    text-align: left !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #495057;
    padding: 0.45rem 0.75rem;
  }

  table.tabla-ficha td {
    border: 0;
    text-align: left !important;
    padding: 0.6rem 0.75rem;
    word-break: break-word;
  }

  /* Las filas ocultas por el template (style="display:none") tienen que
     seguir ocultas: `display:block` de arriba no debe resucitarlas. */
  table.tabla-ficha tr[style*="display:none"],
  table.tabla-ficha tr[style*="display: none"] {
    display: none !important;
  }

  /* --- Ficha escrita en horizontal (encabezados arriba, una sola fila) ---
     El <thead> se oculta y cada celda muestra su encabezado como etiqueta,
     tomado del atributo data-etiqueta que pone responsive-movil.js. */
  table.tabla-ficha-horizontal thead,
  table.tabla-ficha-horizontal tr.fila-encabezado-movil-oculta {
    display: none;
  }

  table.tabla-ficha-horizontal td[data-etiqueta] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #dee2e6;
  }

  table.tabla-ficha-horizontal td[data-etiqueta]:last-child {
    border-bottom: 0;
  }

  table.tabla-ficha-horizontal td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #495057;
    margin-bottom: 0.15rem;
  }

  /* Control rescatado de un <th> y pegado a su celda (el "buscar % con
     subtotal / total" del presupuesto).

     En el escritorio es un enlace chiquito al lado del título de la
     columna; en el teléfono, suelto entre etiquetas, se leía como un
     subtítulo y nadie lo tocaba. Acá se muestra como lo que es: una acción
     asociada al campo que tiene encima, con área táctil real. */
  .control-de-encabezado-movil {
    margin-top: 0.4rem;
  }

  .control-de-encabezado-movil > a,
  .control-de-encabezado-movil > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    color: #0d6efd;
    font-size: 0.85rem;
    text-decoration: none;
    width: 100%;
  }

  /* Una celda vacía no merece ocupar espacio con su etiqueta sola.
     Ojo: si tiene un control rescatado, ya no está vacía — el :empty de CSS
     mira nodos, y el <div> del control cuenta, así que no la oculta. */
  table.tabla-ficha-horizontal td[data-etiqueta]:empty {
    display: none;
  }

  /* Inputs dentro de una ficha: ancho completo y altura táctil.
     El `style="width:100%"` inline de algunos templates ya apunta acá. */
  table.tabla-ficha .form-control,
  table.tabla-ficha .form-select,
  table.tabla-ficha textarea {
    width: 100% !important;
    font-size: 16px; /* < 16px hace que iOS haga zoom al enfocar */
    min-height: 44px;
  }

  table.tabla-ficha textarea {
    min-height: 88px;
  }

  /* ------------------------------------------------------------------
     5. Tablas de DATOS anchas que no son DataTables.
        Scroll horizontal contenido, con inercia táctil.
        Se marcan con `.tabla-scroll` en un wrapper.
     ------------------------------------------------------------------ */
  .tabla-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  /* Sin `min-width` fijo.

     Un `min-width: 600px` obligaba a scrollear incluso a tablas que caben
     de sobra: el "Conjunto de fabricación" del presupuesto es UNA columna
     con un input y quedaba cortada al medio, pidiendo scroll para nada.

     El contenedor solo desborda cuando la tabla realmente no entra, y ahí
     el scroll aparece solo. */
  .tabla-scroll > table {
    margin-bottom: 0;
  }

  /* ------------------------------------------------------------------
     6. DataTables.
        Se activa la extensión Responsive, que colapsa las columnas que
        no caben en una fila expandible bajo cada registro (formato card).
        Acá solo se ajusta el cromo: buscador, paginación, selectores.
     ------------------------------------------------------------------ */
  .dataTables_wrapper .row > div {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    text-align: left !important;
    margin-bottom: 0.5rem;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    float: none;
    text-align: left;
  }

  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label {
    width: 100%;
    font-size: 0.9rem;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0;
    margin-top: 0.25rem;
    display: block;
    min-height: 44px;
    font-size: 16px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
  }

  .dataTables_wrapper .dataTables_length select {
    min-height: 40px;
    font-size: 16px;
  }

  .dataTables_wrapper .dataTables_info {
    font-size: 0.85rem;
    padding-top: 0.25rem;
  }

  /* Paginación.

     Con miles de registros DataTables dibuja "Anterior 1 2 3 4 5 … 195
     Siguiente", que a 390px no entra y obligaba a scrollear de lado para
     cambiar de página.

     Se mantiene el orden natural (Anterior · números · Siguiente) en una
     sola línea, y se dejan envolver los números si son muchos. Los botones
     se compactan lo justo para que entren sin perder área táctil. */
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }

  .dataTables_wrapper .dataTables_paginate span {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.4rem 0.55rem;
    min-width: 38px;
    margin: 0;
    box-sizing: border-box;
    font-size: 0.9rem;
  }

  /* Anterior y Siguiente son los que más se usan con el pulgar: se les da
     algo más de área que a los números sueltos. */
  .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
  .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    min-width: 76px;
    font-weight: 600;
  }

  /* Las celdas dejan cortar palabras largas para no forzar el ancho de la
     columna, pero SIN `anywhere`: con eso el navegador parte también los
     números y los nombres cortos, y un ID quedaba escrito en vertical
     ("8 2 4 1") y "Macarena Medina" como "Macaren a Medina".
     `break-word` solo parte cuando la palabra NO cabe entera. */
  table.dataTable > tbody > tr > td {
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Los números nunca se parten: un ID cortado es ilegible. */
  table.dataTable > tbody > tr > td.dtr-control,
  table.dataTable > tbody > tr > td:first-child {
    white-space: nowrap;
  }

  /* La columna descriptiva (Producto, Material…) se lleva el ancho sobrante.

     Sin esto el navegador reparte parejo y Producto —que es texto largo—
     queda tan angosta que escribe una palabra por línea. Las demás celdas
     de la fila son cortas (un ID, un nombre, un estado) y no necesitan más
     de lo que piden. responsive-movil.js marca la columna al detectarla. */
  table.dataTable > thead > tr > th.celda-descriptiva-movil,
  table.dataTable > tbody > tr > td.celda-descriptiva-movil {
    width: 42%;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* La columna de STATUS lleva `text-nowrap` desde el JS de cada sección, y
     "No confirmado" en una sola línea pide 114px — casi un tercio de la
     pantalla para un dato que se lee por su COLOR.

     Al dejarlo envolver en dos líneas baja a ~70px, y esos ~45px son los que
     permiten que entre la columna PRODUCTO sin tener que partir palabras en
     el resto de la tabla. El color, que es lo que se mira, no cambia. */
  table.dataTable > tbody > tr > td.text-nowrap[class*="bg-"] {
    white-space: normal !important;
  }

  /* La tabla en sí: tipografía algo más chica para que entren más datos
     sin tener que hacer zoom. */
  table.dataTable {
    font-size: 0.85rem;
    width: 100% !important;
  }

  /* El relleno de celda decide cuántas columnas entran.

     Medido en Pedidos a 393px: las columnas piden ID 47 + Cliente 69 +
     Producto 84 + Status 114 + PDF 57 = 371px contra 369 disponibles. Se
     caía la columna PRODUCTO —la que dice qué es el pedido— por DOS píxeles.

     Con el padding en 0.25rem por lado se recuperan ~20px repartidos entre
     las celdas y entra. El área táctil no sufre: las filas siguen altas por
     el contenido en varias líneas. */
  table.dataTable > thead > tr > th,
  table.dataTable > tbody > tr > td {
    padding: 0.5rem 0.25rem;
  }

  /* El control `+` que despliega la ficha también ocupa ancho de la primera
     columna; se ajusta al mínimo necesario para seguir siendo tocable. */
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    padding-left: 26px;
  }

  /* Botones de exportación (Buttons: Bfrtip) apilados y a lo ancho. */
  .dt-buttons {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .dt-buttons .dt-button {
    margin: 0;
    flex: 1 1 auto;
    min-height: 40px;
  }

  /* --- Extensión Responsive: fila de detalle expandible --- */
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    padding-left: 30px;
    position: relative;
    cursor: pointer;
  }

  table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-align: left;
    border-bottom: 1px solid #efefef;
    padding: 0.45rem 0.25rem;
  }

  table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
    border-bottom: 0;
  }

  table.dataTable > tbody > tr.child span.dtr-title {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #495057;
    min-width: 40%;
    display: inline-block;
  }

  table.dataTable > tbody > tr.child span.dtr-data {
    flex: 1 1 50%;
    word-break: break-word;
  }

  /* Un valor que en la tabla venía coloreado (el status de un pedido, por
     ejemplo) conserva su color en la ficha: acá el color ES el dato.
     Se muestra como píldora para que el fondo no se coma toda la fila. */
  table.dataTable > tbody > tr.child span.dtr-data.dtr-data-destacada {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
    font-weight: 600;
    flex: 0 1 auto;
  }

  /* El fondo alternado de table-striped haría ilegible la fila hija. */
  table.dataTable.table-striped > tbody > tr.child > td {
    background-color: #fcfcfd;
  }

  /* ------------------------------------------------------------------
     7. Selectores de filtro (los <select> que el JS inyecta en .selectors)
     ------------------------------------------------------------------ */
  .selectors {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  /* Etiqueta que responsive-movil.js antepone a cada filtro, tomada de la
     fila de títulos que en escritorio va arriba alineada por columna. */
  .etiqueta-filtro-movil {
    display: block;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #495057;
    margin: 0.35rem 0 0.1rem;
  }

  /* La fila de títulos original, ya trasladada a cada <select>. */
  .titulos-filtro-movil-ocultos {
    display: none !important;
  }

  .selectors .selector_tabla,
  select.selector_tabla {
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    min-height: 44px;
    font-size: 16px;
  }

  /* ------------------------------------------------------------------
     8. Modales: a pantalla completa. Son el mecanismo principal de
        trabajo del sistema (ver pedido, ver trabajo) y en móvil un modal
        centrado y angosto desperdicia la pantalla.
     ------------------------------------------------------------------ */

  /* Con el modal abierto, la PÁGINA DE ATRÁS no debe scrollear, pero el
     MODAL sí: es una pantalla completa de contenido.

     ⚠️ Historia de dos bugs, para no repetirlos:

     1. Bootstrap le pone `overflow:hidden` al <body> pero no al <html>, así
        que quedaban dos scrolls compitiendo y el gesto se lo llevaba el de
        atrás.
     2. Al arreglarlo con `overflow:hidden; height:100%` en el <html>, el
        modal dejó de scrollear con el DEDO (con la rueda del mouse seguía
        andando — por eso no se detectó con un test que usaba la rueda).

     La forma que funciona para las dos cosas: el <html> se fija con
     `position: fixed`, que lo congela sin tocar el overflow de sus hijos, y
     el `.modal` se queda con su propio scroll táctil. */
  html.modal-abierto-movil,
  html:has(body.modal-open) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* El body NO lleva `height:100%` ni `overflow:hidden` propios: eso es lo
     que cortaba la cadena de scroll hasta el modal. */
  body.modal-open {
    /* Bootstrap compensa la barra de scroll con `padding-right`; en el
       escritorio es invisible, pero acá reangosta la tabla de atrás y el
       texto de las celdas se re-acomoda — el efecto de que "las filas
       cambian" al abrir el modal. En móvil la barra flota: nada que
       compensar. */
    padding-right: 0 !important;
  }

  /* El modal es el que scrollea, con inercia táctil. */
  .modal.show {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .modal-dialog,
  .modal-dialog.modal-lg {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }

  /* El modal ocupa exactamente la pantalla y se reparte en tres franjas:
     encabezado fijo · CUERPO que scrollea · pie fijo abajo.

     Antes el modal entero era lo que scrolleaba, y para llegar a los
     botones había que arrastrar hasta el final del contenido. Si el gesto
     no prendía —pasa con listas largas y con el dedo sobre ciertas zonas—
     las acciones quedaban fuera de alcance y el modal era inútil.

     Con el pie fijo, los botones están SIEMPRE visibles, se scrollee o no.
     Es además lo que hace cualquier app móvil. */
  .modal-content {
    border: 0;
    border-radius: 0;
    background-color: #fff;
    height: 100vh;
    height: 100dvh; /* descuenta la barra del navegador donde exista */
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* El cuerpo es lo único que scrollea. `min-height: 0` es obligatorio: sin
     él, un hijo flex no se encoge y el scroll nunca aparece. */
  .modal-content > .modal-body,
  .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Varios modales tienen VARIOS .modal-body seguidos (pedidos, producción).
     Se agrupan en una sola zona scrolleable envolviéndolos por JS. */
  .modal-content > .cuerpo-modal-movil {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .modal-content > .cuerpo-modal-movil > .modal-body {
    overflow: visible;
  }

  /* Encabezado y pie no se encogen: son las anclas fijas. */
  .modal-content > .modal-header,
  .modal-content > form > .modal-header,
  .modal-content > .modal-footer,
  .modal-content > form > .modal-footer {
    flex: 0 0 auto;
  }

  /* Un <form> que envuelve todo el modal tiene que repartir igual.

     Varios vienen con `class="row"` (editar material, editar cliente), que
     en Bootstrap es un flex horizontal con wrap. Sin forzar la dirección,
     el encabezado, el cuerpo y el pie se acomodaban UNO AL LADO DEL OTRO y
     el contenido quedaba corrido una pantalla a la derecha. El selector
     nombra `.row` para ganarle en especificidad. */
  .modal-content > form,
  .modal-content > form.row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 0;
    flex: 1 1 auto;
  }

  /* El diálogo tampoco se estira: `.modal-dialog` de Bootstrap trae
     `min-height: 100%` vía `.modal-dialog-scrollable`/utilidades, y acá
     sumaba el mismo problema. */
  .modal-dialog,
  .modal-dialog.modal-lg {
    min-height: 0;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    align-items: flex-start;
  }

  .modal-header .modal-title {
    font-size: 1.05rem;
    text-align: left;
  }

  .modal-body {
    padding: 0.75rem;
  }

  /* Varios modales cuelgan un `<form class="row">` directo del
     `.modal-content` (editar cliente, editar material, editar maestro…).
     La clase `row` de Bootstrap trae márgenes negativos a los lados para
     compensar el padding de sus columnas; sin columnas que lo compensen,
     el formulario mide 417px en una pantalla de 393 y se lleva de corrido
     el encabezado, el cuerpo y el pie: la X de cerrar quedaba casi fuera.

     Acá el modal ya ocupa el ancho completo, así que esos márgenes no
     tienen nada que compensar. */
  .modal-content > form.row,
  .modal-content > .row,
  .modal-content .modal-body.row,
  .cuerpo-modal-movil > .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  /* Las tablas internas de los modales son fichas etiqueta/valor. */
  .modal-body table.table > tbody > tr > th,
  .modal-body table.table > tr > th {
    text-align: left !important;
  }

  /* Pie del modal.

     NO va sticky: estos modales tienen hasta seis acciones (Cotizar,
     Confirmar, Enviar a producción, Anular, Más información, Cerrar) y un
     pie fijo con todas ellas ocupaba más de un tercio de la pantalla,
     tapando el contenido que el usuario necesita leer para decidir.
     Fluye al final del modal, después de los datos.

     Los botones se reparten en dos columnas: entran todos sin convertir el
     pie en una torre, y cada uno conserva un área táctil cómoda. */
  /* El pie se APLANA: sus <div class="col"> dejan de ser cajas y todos los
     botones pasan a ser hermanos en una sola grilla.

     Es lo que permite reordenarlos con `order`: en el marcado, "Anular"
     vive en el primer <div> junto a "Más información", y `order` solo
     reordena entre hermanos — encerrado ahí, nunca podía bajar al final.
     `display: contents` lo saca de su caja sin tocar el HTML. */
  .modal-footer {
    border-top: 1px solid #dee2e6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .modal-footer > .col,
  .modal-footer > div {
    display: contents;
  }

  .modal-footer .btn {
    width: 100%;
    min-height: 46px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.15;
    font-size: 0.9rem;
  }

  /* Un pie con un solo botón no necesita media fila vacía al lado. */
  .modal-footer > .btn:only-child,
  .modal-footer > div > .btn:only-child {
    grid-column: 1 / -1;
  }

  /* ORDEN de las acciones en el pie.

     El HTML las trae en el orden del escritorio (Más información · Anular ·
     Cotizar · Confirmar · Enviar a producción · Cerrar) y ese orden no se
     toca: es el mismo marcado para las dos vistas.

     En el teléfono, en cambio, el pulgar cae sobre lo que está abajo, y
     "Anular" —que es irreversible— quedaba segundo, arriba de todo y a la
     vista. Con `order` se reacomoda solo en móvil, sin cambiar el DOM:

       · las acciones del flujo normal primero,
       · después Cerrar,
       · y ANULAR al final, apartado y sin color de botón.

     `order` funciona porque el contenedor es una grilla (display:grid). */
  .modal-footer .btn {
    order: 2;
  }

  /* Cerrar: después de las acciones del flujo. */
  .modal-footer .btn-dark,
  .modal-footer [data-bs-dismiss="modal"] {
    order: 3;
  }

  /* Anular (y cualquier acción destructiva marcada como btn-link): última,
     a lo ancho, con aspecto de enlace discreto en vez de botón. */
  .modal-footer .btn-link,
  .modal-footer #anularModal {
    order: 4;
    grid-column: 1 / -1;
    color: #6c757d;
    text-decoration: underline;
    font-size: 0.85rem;
    min-height: 38px;
    margin-top: 0.15rem;
  }

  /* Enlaces discretos del pie que NO son botones (el "Enviar a Synaboard"
     de la Base de Datos, por ejemplo). Se respeta que sean discretos —esa
     es su intención— pero se les da área táctil: a 13px y sin alto propio,
     acertarles con el dedo es cuestión de suerte. */
  .modal-footer a:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 0.5rem;
  }

  /* Algunos pies (el de editar cliente) cuelgan los botones directamente
     del .modal-footer, sin el <div> intermedio. Ahí la grilla no aplica y
     los botones quedarían pegados uno contra otro. */
  .modal-footer > .btn {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem 0;
  }

  .modal-footer > .btn:last-child {
    margin-bottom: 0;
  }

  /* ------------------------------------------------------------------
     9. Formularios y botones generales.
     ------------------------------------------------------------------ */
  .form-control,
  .form-select {
    font-size: 16px; /* evita el zoom automático de iOS */
    min-height: 44px;
  }

  textarea.form-control {
    min-height: 90px;
  }

  /* Algunos <textarea> e <input> del sistema no usan .form-control y se
     dimensionan con los atributos HTML `cols`/`size` (cols="70" son ~590px).
     Eso desborda la pantalla y no se puede arreglar desde el atributo sin
     cambiar el escritorio, así que se neutraliza el ancho acá. */
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"] {
    max-width: 100%;
    box-sizing: border-box;
  }

  textarea[cols] {
    width: 100%;
  }

  input[size] {
    width: 100%;
  }

  label {
    margin-bottom: 0.15rem;
  }

  .btn {
    min-height: 40px;
  }

  /* Grupos de botones de acción al pie de una sección.
     En escritorio van en línea dentro de una columna centrada, algunos con
     un ancho porcentual inline (style="width:10%") que en móvil deja un
     botón diminuto encimado con sus vecinos. Acá se apilan a lo ancho.

     El `!important` es necesario para ganarle al width inline del template;
     no toca escritorio porque toda la regla vive dentro de la media query. */
  .row.justify-content-center > [class*="col"] > .btn {
    display: block;
    width: 100% !important;
    min-height: 44px;
    margin: 0 0 0.4rem 0;
  }

  .row.justify-content-center > [class*="col"] > .btn:last-child {
    margin-bottom: 0;
  }

  /* Un `.btn` usado como celda de acción dentro de una tabla de datos
     no debe estirarse: ahí sigue siendo un icono. */
  table.dataTable .btn,
  table td .btn {
    min-height: 0;
    width: auto;
  }

  /* ------------------------------------------------------------------
     9-bis. Pantalla de inicio de sesión

     No extiende base.html: es su propio documento. En escritorio centra el
     formulario con dos columnas vacías a los lados; en móvil esas columnas
     solo roban ancho.
     ------------------------------------------------------------------ */
  .col-relleno-login {
    display: none;
  }

  .col-relleno-login + .col {
    padding: 1.5rem 1rem !important;
  }

  /* Los campos del formulario de login los genera Django sin clases de
     Bootstrap, así que se estilan por tipo. El selector se ancla a
     `.col-relleno-login + .col` para no alcanzar los formularios del resto
     del sistema, que sí usan .form-control. */
  .col-relleno-login + .col input[type="text"],
  .col-relleno-login + .col input[type="password"] {
    width: 100%;
    font-size: 16px;
    min-height: 44px;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
  }

  .col-relleno-login + .col input[type="submit"] {
    width: 100%;
    min-height: 46px;
    margin-top: 0.5rem;
  }

  /* ------------------------------------------------------------------
     10. Tipografía y espaciados generales.
     ------------------------------------------------------------------ */
  h2 {
    font-size: 1.5rem;
  }

  h5 {
    font-size: 1.05rem;
  }

  /* `text-nowrap` en móvil provoca desbordes horizontales en celdas
     de contenido. Se libera dentro de tablas de ficha, donde el ancho
     lo manda el viewport, no la columna. */
  table.tabla-ficha .text-nowrap {
    white-space: normal !important;
  }

  /* Toastr sobre el ancho completo. */
  #toast-container > div {
    width: 92% !important;
    margin-left: auto;
    margin-right: auto;
  }
}