/* =====================================================
           TECOMSER - BASE GLOBAL
           ===================================================== */

        /* Colores de la marca. Se declaran una sola vez para que la
           cabecera, el pie y cualquier otro bloque usen exactamente el
           mismo tono y no se separen con el tiempo. */
        :root {
            --tc-marca-azul: #071457;
            --tc-marca-azul-hondo: #050f42;
            --tc-marca-naranja: #ff4b0b;
        }


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


        html {
            width: 100%;
            min-height: 100%;

            margin: 0;
            padding: 0;

            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;

            scroll-behavior: smooth;
        }


        body {
            width: 100%;
            min-width: 320px;
            min-height: 100vh;

            margin: 0;
            padding: 0;

            background: #ffffff;
            color: #0f172a;

            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Helvetica,
                Arial,
                sans-serif;

            font-size: 16px;
            line-height: 1.5;

            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            overflow-x: hidden;
        }


        a {
            color: inherit;
        }


        button,
        input,
        select,
        textarea {
            font: inherit;
        }


        /* iOS Safari agranda toda la pagina al enfocar un campo cuyo
           texto mide menos de 16px, y despues no vuelve sola: el
           buscador se veia "estirado" y el boton de lupa quedaba
           fuera de pantalla. Con 16px el iPhone ya no hace ese zoom.
           El tamano visible se mantiene con la altura de cada caja. */
        input[type="search"] {
            -webkit-appearance: none;
            appearance: none;
        }

        /* El retardo de 300 ms del doble toque hace que en iPhone el
           primer toque parezca ignorado. */
        a,
        button,
        [role="button"],
        input[type="submit"],
        label {
            touch-action: manipulation;
        }


        img {
            display: block;

            max-width: 100%;
            height: auto;
        }


        [hidden] {
            display: none !important;
        }


        /* =====================================================
           SITIO
           ===================================================== */

        .tc-sitio {
            width: 100%;
            min-height: 100vh;

            display: flex;
            flex-direction: column;

            position: relative;

            background: #ffffff;
        }


        /* =====================================================
           CONTENIDO

           IMPORTANTE:
           cabecera.html YA contiene:
           - barra_superior
           - buscador
           - megamenu

           NO volver a cargarlos aquí.
           ===================================================== */

        .tc-contenido {
            width: 100%;
            min-height: 500px;

            flex: 1 0 auto;

            position: relative;
            z-index: 1;

            /* La pestana "Ver informacion" del pie no esta en el flujo:
               cuelga sobre lo ultimo de la pagina. Cuando el contenido
               termina justo ahi (una categoria sin resultados, un
               carrito vacio) la pastilla se montaba encima del
               recuadro. Este hueco le reserva su sitio. */
            padding-bottom: 48px;
        }


        @media (max-width: 820px) {

            body {
                font-size: 15px;
            }

            .tc-contenido {
                min-height: 400px;
            }


            /* ANTI-ZOOM iOS
               Cualquier campo escribible debe llegar a 16px o el
               iPhone acerca la pagina al tocarlo. Las casillas y los
               botones no disparan ese zoom, por eso se excluyen. */
            input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
            select,
            textarea {
                font-size: 16px !important;
            }

        }


        /* =====================================================
           CAJONES A PANTALLA COMPLETA

           .tc-contenido abre su propio contexto de apilamiento
           (position + z-index), asi que un panel interno con
           z-index alto seguia quedando por debajo de la cabecera.
           Mientras hay un cajon abierto se sube el bloque entero
           por encima de la cabecera y de los botones flotantes.
           ===================================================== */

        body.tc-sin-scroll .tc-contenido {
            z-index: 8800;
        }


        /* Los botones flotantes viven a z-index 8600/8700, por encima
           de la cabecera: con el megamenu o el modal de ubicacion
           abiertos el circulo verde de WhatsApp quedaba justo encima
           de "Ofertas" y de "Guardar ubicacion", y en el telefono no
           habia manera de darles. Mientras hay un panel a pantalla
           completa se quitan de en medio. */
        body.tc-mega-abierto .tc-wa,
        body.tc-mega-abierto .tc-op,
        body.tc-modal-abierto .tc-wa,
        body.tc-modal-abierto .tc-op,
        body.tc-sin-scroll .tc-wa,
        body.tc-sin-scroll .tc-op {
            display: none !important;
        }