/* ============================================================
   TÁCTIL — que el dedo acierte en celular y tablet
   ============================================================
   Esta hoja NO tiene estilo: no pone colores, ni fondos, ni
   bordes. Solo corrige tamaños para el dedo. Por eso va aparte
   de tema_vidrio.css (que sí es el tema) y la enlazan TODAS las
   pantallas, incluidas las que tienen su propio diseño.

   Va enlazada DESPUÉS del <style> de cada página, así gana los
   empates de especificidad sin necesitar !important.

   De dónde salen los números
   --------------------------
   Auditoría en Chrome a 390px (iPhone 14/15): casi todos los
   controles medían entre 16 y 30px de alto. Con ratón da igual;
   con el pulgar no, y en un POS el cajero trabaja de pie, con
   prisa, y muchas veces con una sola mano.

   38px es el mínimo de aquí. Apple pide 44pt y Google 48dp, pero
   esta es una pantalla DENSA de trabajo: a 44px una tabla de
   inventario dejaría de caber en el alto del teléfono y habría
   que scrollear el doble. 38 es donde se acierta sin perder
   densidad.

   Se toca el ALTO, nunca el ancho ni el flujo: un control que
   crece a lo ancho sí descuadraría su fila.

   Qué queda fuera a propósito
   ---------------------------
   Los enlaces de texto dentro de un párrafo. Se piden por CLASE
   (algo con "btn", "chip", "pill" en el nombre), nunca por la
   etiqueta <a> suelta: estirar cada enlace a 38px rompería la
   lectura de cualquier texto corrido.
   ============================================================ */

@media (max-width: 820px) {

    /* Se pide por patrón de clase y no por lista cerrada de nombres:
       así una pantalla que se escriba mañana con un .btn-loquesea
       ya entra sola, sin tener que acordarse de volver aquí. */
    button,
    select,
    input[type="submit"], input[type="button"], input[type="reset"],
    input[type="text"], input[type="search"], input[type="number"],
    input[type="email"], input[type="tel"], input[type="password"],
    input[type="date"], input[type="month"], input[type="week"],
    input[type="time"], input[type="datetime-local"], input[type="url"],
    [class*="btn"], [class*="chip"], [class*="pill"],
    [class*="tb-btn"], [class*="topbar-btn"], [class*="topbar-back"],
    a.topbar-brand,   /* es el enlace de volver al inicio, no un rotulo */
    .mini, .seg-mini, .view-btn, .add-perm, .swatch-custom,
    .per-page-select, .preset-pill,
    [class*="ftab"], [class*="cmd-"], .contact-link,
    input[type="file"] {
        min-height: 38px;
    }

    /* Telefono y correo: en el escritorio son texto, pero en un celular son
       EL boton mas util de la ficha — se toca para llamar al cliente. Median
       16px. Se hacen inline-flex para que crezcan de alto sin empujar la
       fila entera ni separarse de su etiqueta. */
    a[href^="tel:"], a[href^="mailto:"], a[href^="sms:"],
    a[href^="https://wa.me"], a[href^="https://api.whatsapp"] {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
    }

    /* Los enlaces del pie de la portada se apilan uno sobre otro y cada uno
       mide lo que su linea de texto: 16px. Son navegacion, se tocan. */
    .foot-links a, .footer-links a, nav a[class] {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
    }

    /* Los que ya son flex se centran solos; a los demás hay que
       decírselo, si no el texto se queda pegado al borde de arriba
       dentro del botón que acaba de crecer. */
    button,
    [class*="btn"]:not(input):not(.btn-group):not([class*="btns"]),
    [class*="chip"], [class*="pill"],
    .mini, .seg-mini, .view-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Un contenedor que solo AGRUPA botones no debe volverse botón:
       si se le aplica inline-flex pierde su ancho y descuadra la fila. */
    .btn-group, .btn-row-wrap, .btns, [class*="btn-bar"] {
        display: flex;
    }

    /* Una casilla de 16px no se acierta ni con la uña. Se agranda la
       casilla misma; el <label> de al lado ya suele ser clicable y
       entre los dos el toque entra de sobra. */
    input[type="checkbox"], input[type="radio"] {
        width: 22px;
        height: 22px;
        min-height: 22px;
    }

    /* Safari de iPhone hace zoom al enfocar un campo de menos de 16px
       y al salir deja la página corrida de lado, como si estuviera
       rota. Con 16px no hace zoom y no pasa nada. */
    input, select, textarea {
        font-size: max(16px, 1em);
    }

    /* Nada de esto debe aplicarse al imprimir: el papel no se toca. */
}

@media print {
    button, select, input, [class*="btn"], [class*="chip"], [class*="pill"] {
        min-height: 0;
    }
}

/* ============================================================
   LA BARRA DE ARRIBA, EN PANTALLA ESTRECHA
   ============================================================
   Casi todas las pantallas repiten la misma barra: alto fijo de
   56-60px, display:flex y SIN wrap. La marca mas tres o cuatro
   botones miden entre 380 y 480px, asi que en un telefono de 360
   o 390 la barra empujaba la pagina entera de lado.

   Se arreglo a mano en ocho plantillas en julio; en octubre ya
   habia vuelto a aparecer en otras cinco, porque cada pantalla
   nueva copia la barra de la anterior. Por eso vive aqui: se
   arregla una vez y lo hereda todo, incluido lo que se escriba
   despues.

   No se oculta nada ni se mete en un menu hamburguesa: en un POS
   el cajero necesita ver a donde puede ir. Se deja que envuelva
   a una segunda linea, que es mas alto pero no esconde nada.
   ============================================================ */
@media (max-width: 640px) {
    .topbar {
        height: auto;
        min-height: 52px;
        flex-wrap: wrap;
        padding: 8px 14px;
        row-gap: 6px;
    }
    .topbar-nav, .topbar-actions, .tb-der, .topbar-right {
        flex-wrap: wrap;
        gap: 5px;
    }
    .topbar-btn, .topbar-back, .tb-btn {
        padding-left: 11px;
        padding-right: 11px;
        font-size: 12px;
    }
}

/* ============================================================
   PANTALLAS MUY ESTRECHAS (320-420px)
   ============================================================
   Casi todo lo que se desborda en un telefono estrecho es la
   misma historia: un hijo de grid o de flex con min-width:auto,
   que es el valor de fabrica y significa "no encojas por debajo
   de tu contenido". En una pantalla de 1280px nunca se nota; en
   una de 320 saca media tarjeta fuera del borde.

   Las tres reglas de abajo son seguras por separado:
   - max-width en los campos: nada puede ser mas ancho que la
     pantalla, y punto.
   - min-width:0 en tarjetas y paneles: son CONTENEDORES, su
     tamano lo manda quien los contiene, no su contenido.
   - flex-wrap en filas de filtros y acciones: si no caben en
     una linea, que bajen a la siguiente en vez de salirse.

   flex-wrap y min-width no hacen nada en un elemento que no sea
   hijo de flex/grid, asi que aunque el selector toque de mas,
   no cambia nada donde no hace falta.

   Se deja fuera la maquinaria de las tablas (table, tr, td...):
   ahi el ancho del contenido SI manda, y encogerlo las deforma.
   Las tablas anchas ya van dentro de su caja con scroll.
   ============================================================ */
@media (max-width: 420px) {
    input, select, textarea { max-width: 100%; }

    /* El min-width va en lo de DENTRO de la tarjeta, no en la tarjeta.
       Una tarjeta suele ser un flex de icono + bloque de texto, y ese
       bloque de texto casi nunca lleva clase: se queda con min-width:auto
       y es EL que saca la tarjeta fuera del borde. Dejandolo encoger, el
       texto se parte en varias lineas y todo cabe.

       A la tarjeta misma NO se le toca el min-width, y es a proposito: con
       flex:1 y min-width:0 una fila de tres tarjetas se reparte 296px en
       91 cada una, la tarjeta cabe pero el contenido no, y se arregla una
       cosa rompiendo la otra. Su min-width:220px es lo que las obliga a
       bajar una debajo de otra, que es lo que se quiere en un telefono. */
    [class*="card"] > *:not([class*="card"]):not([class*="tile"]),
    [class*="tile"] > *:not([class*="card"]):not([class*="tile"]),
    [class*="kpi"]  > *:not([class*="card"]):not([class*="tile"]),
    [class*="caja"] > *:not([class*="card"]):not([class*="tile"]),
    [class*="stat"] > *:not([class*="card"]):not([class*="tile"]),
    [class*="panel"]> *:not([class*="card"]):not([class*="tile"]),
    [class*="celda"]> *:not([class*="card"]):not([class*="tile"]),
    [class*="cell"] > *:not([class*="card"]):not([class*="tile"]),
    [class*="item"] > *:not([class*="card"]):not([class*="tile"]) {
        min-width: 0;
    }

    /* El :not() de arriba no es adorno. Una fila de tarjetas se suele
       llamar .kpi-strip y sus tarjetas .kpi-card, asi que "hijo de algo
       con kpi" tambien caza la TARJETA, no solo su contenido. Y a una
       tarjeta con flex:1 quitarle el min-width la encoge hasta 91px: cabe
       la tarjeta pero no lo que lleva dentro. Su min-width propio es lo
       que la obliga a bajar una debajo de otra, que es lo que se busca. */

    /* Un contenedor de una sola columna si puede encoger sin riesgo:
       ahi no hay hermanos con los que repartirse el ancho. */
    [class*="box"], [class*="tarjeta"] {
        min-width: 0;
    }

    [class*="fila"], [class*="row"]:not(tr),
    [class*="fecha"], [class*="buscador"], [class*="filtro"],
    [class*="acciones"], [class*="actions"], [class*="toolbar"],
    [class*="orden"] {
        flex-wrap: wrap;
    }
}