@charset "UTF-8";
/* ============================================================================
   VISOR-STRUCTURE.CSS - Reglas estructurales tokenizadas (compartido)
   ============================================================================
   Este archivo contiene reglas estructurales que son IDENTICAS entre temas
   en su layout/positioning, pero que tienen colores/gradients/shadows
   distintos. Las reglas aqui usan tokens semanticos (var(--theme-*)) que
   cada archivo de tema (light.css / neon.css) define en su :root.

   Cargar despues de visor-base.css y visor-modal.css, antes del archivo
   del tema:
     bundle = visor-base.css + visor-modal.css + visor-structure.css + miTheme.css

   ALCANCE ACTUAL (Phase 3 inicial):
     - .a_demo_three (categorias) y :active, :focus
     - .a_demo_four (banda COMPRAR) y :active, ::before
     - .a_demo_static (banda confirmacion) y ::before

   PENDIENTE (futuras fases):
     - .element-item (cards) - estructura difiere mas entre temas
     - .bill, .footer, .top-nav - layout containers con diferencias menores
     - .element-item .sig y signos - controles +/- en cards

   TOKENS QUE DEBEN DEFINIRSE EN CADA TEMA (light.css / neon.css :root):
     --theme-banda-text       : color del texto del boton COMPRAR
     --theme-banda-bg         : background-image (linear-gradient completo)
     --theme-banda-bg-active  : background-image :active
     --theme-banda-shadow     : box-shadow estado normal
     --theme-banda-shadow-active : box-shadow :active
     --theme-banda-border-side: border-right (none o solid 1px X)

     --theme-categoria-text   : color del texto de categorias
     --theme-categoria-bg     : background-image (gradient completo)
     --theme-categoria-bg-active : background-image :active
     --theme-categoria-shadow : box-shadow normal
     --theme-categoria-shadow-active: box-shadow :active
     --theme-categoria-border-side  : border-right (none o solid 1px X)

   NOTA: usamos sintaxis MODERNA "linear-gradient(to top, ...)" en una sola
   declaracion. La sintaxis legacy "linear-gradient(bottom, ...)" con vendor
   prefixes no juega bien con var() en algunos parsers. Los kioskos corren
   Chrome moderno asi que la sintaxis estandar es suficiente.
   ========================================================================= */

/* === CATEGORIAS (.a_demo_three) =========================================== */

.a_demo_three {
    border: none;
    margin-right: 10px;
    margin-top: 20px;
    background-color: transparent;
    /* Font-size con variable propia (independiente del boton COMPRAR). */
    font-size: var(--categoria-font-size);
    font-weight: 100;
    text-decoration: none;
    color: var(--theme-categoria-text);
    position: relative;
    /* Padding simetrico para que el texto quede centrado verticalmente. */
    --pad-y: clamp(8px, 1.1vw, 14px);
    padding: var(--pad-y) clamp(14px, 2.2vw, 28px);
    line-height: 1;
    border-right: var(--theme-categoria-border-side);
    background-image: var(--theme-categoria-bg);
    /* Border-radius 10px en las 4 esquinas. */
    border-radius: 10px;
    box-shadow: var(--theme-categoria-shadow);
}

    .a_demo_three:active {
        background-image: var(--theme-categoria-bg-active);
        box-shadow: var(--theme-categoria-shadow-active);
    }

    .a_demo_three:focus {
        outline: none;
        box-shadow: var(--theme-categoria-shadow);
    }

    /* Categoria seleccionada (clase .is-checked toggleada por visor-principal.js).
       Bg invertido + selected-shadow del tema (escalon distintivo). En Dark
       el override usa shadow-active para verse "apretada"; en Light/Neon
       el selected-shadow define un borde negro caracteristico. */
    .a_demo_three.is-checked {
        background-image: var(--theme-categoria-bg-active);
        box-shadow: var(--theme-categoria-selected-shadow);
        text-shadow: var(--theme-categoria-selected-text-shadow);
    }

/* Aplanado de pills no-checked + crecimiento +1px de la seleccionada.
   Centralizado (antes triplicado en light/dark/neon). Scopeado a
   body.bg-body (Light) / totem-dark / totem-neon: Curvy (totem-curvy)
   tiene su propio diseno de pills (.top-nav .a_demo_three con badge sweep
   y marco ::after) y NO debe recibir este aplanado ni el +1px.
   - flat-shadow: quita el "drop" abultado del --theme-categoria-shadow para
     que las no-checked queden a la misma altura visual que la .is-checked
     (el COMPRAR sigue usando --theme-categoria-shadow con su abultado).
   - is-checked: crece 2px reales (1px padding arriba+abajo) con margin
     negativo (-1 top/-1 bottom) para que el box total ocupe el mismo
     espacio vertical y no haya "salto" de layout al togglear. */
:is(body.bg-body, body.totem-dark, body.totem-neon) .a_demo_three:not(.is-checked) {
    box-shadow: var(--theme-categoria-flat-shadow) !important;
}

:is(body.bg-body, body.totem-dark, body.totem-neon) .a_demo_three.is-checked {
    padding-top: calc(var(--pad-y) + 1px) !important;
    padding-bottom: calc(var(--pad-y) + 1px) !important;
    margin-top: 19px !important;
    margin-bottom: -1px !important;
}

/* === BANDA COMPRAR (.a_demo_four / .a_demo_static) ======================== */

.a_demo_four {
    border: none;
    margin-right: -5px;
    margin-left: -5px;
    /* Posicion de la franja COMPRAR dentro de la tarjeta. Usa la variable
       --banda-comprar-offset (en visor-base.css) para escalar con el alto
       del card en cada breakpoint. */
    margin-top: var(--banda-comprar-offset);
    background-color: transparent;
    font-size: var(--banda-font-size);
    font-weight: 500;
    text-decoration: none;
    color: var(--theme-banda-text);
    position: relative;
    /* Padding simetrico arriba/abajo para centrado vertical geometrico real
       del texto. Combinado con display: flex + align-items: center centra
       perfectamente "COMPRAR" en el boton. */
    padding: var(--banda-padding-y) 22px;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-right: var(--theme-banda-border-side);
    border-left: var(--theme-banda-border-side);
    border-bottom: var(--theme-banda-border-side);
    cursor: pointer;
    background-image: var(--theme-banda-bg);
    /* Border-radius en las 4 esquinas (10px). */
    border-radius: 10px;
    box-shadow: var(--theme-banda-shadow);
}

    .a_demo_four:active {
        top: 3px;
        background-image: var(--theme-banda-bg-active);
        box-shadow: var(--theme-banda-shadow-active);
    }

    /* Estado "apretado" persistente: cuando la tarjeta tiene los controles
       +/- abiertos (clase .totem-sig-open agregada por visor-mycart.js
       tras el primer click en COMPRAR), el boton se mantiene visualmente
       hundido. NO usamos `top` porque el card tiene overflow:hidden y el
       movimiento vertical recortaria la altura del boton: el efecto viene
       del shadow-active (escalon inferior corto) + gradient invertido. */
    .element-item.totem-sig-open .a_demo_four {
        background-image: var(--theme-banda-bg-active) !important;
        box-shadow: var(--theme-banda-shadow-active) !important;
    }

    .a_demo_four::before {
        content: attr(value);
    }

/* .a_demo_static = mismo aspecto que .a_demo_four pero sin :active (no es
   clickeable, sirve como banda de confirmacion estatica). Neon usa un
   alpha ligeramente distinto (0.6 vs 0.5) — unificado aqui usando los
   mismos tokens del banda que en neon son 0.5. La diferencia visual es
   imperceptible. Si en algun tema futuro se necesita un token aparte,
   se puede agregar --theme-banda-static-stops. */
.a_demo_static {
    border: none;
    margin-right: -5px;
    margin-left: -5px;
    margin-top: var(--banda-comprar-offset);
    background-color: transparent;
    font-size: var(--banda-font-size);
    font-weight: 500;
    text-decoration: none;
    color: var(--theme-banda-text);
    position: relative;
    /* Padding simetrico (igual que .a_demo_four). */
    padding: var(--banda-padding-y) 22px;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-right: var(--theme-banda-border-side);
    border-left: var(--theme-banda-border-side);
    border-bottom: var(--theme-banda-border-side);
    background-image: var(--theme-banda-bg);
    border-radius: 10px;
    box-shadow: var(--theme-banda-shadow);
}

    .a_demo_static::before {
        content: attr(value);
    }