/* ==========================================================================
   ESTILO PROPIO DE UNA FICHA (StockFlow -> Tienda web -> Fichas)
   Solo se carga en las fichas con estilo. Lo manejan las variables --fe-* y
   los atributos data-fe-* que pone api/ficha_estilo.lib.php en el <body>.
   ========================================================================== */

/* El color del producto como texto: se ajusta al tema (oscuro o claro). */
body.fe { --fe-a-t: var(--fe-a-d); --fe-b-t: var(--fe-b-d); --fe-cian: #2ec6cc; }
body.fe[data-theme="light"] { --fe-a-t: var(--fe-a-l); --fe-b-t: var(--fe-b-l); }

/* Tinte de toda la página */
body.fe[data-fe-tinte] { background: color-mix(in srgb, var(--fe-a) var(--fe-tinte), var(--theme-bg)); }

/* ── Capas de fondo: detrás de todo, sin tapar ni recibir clics ───────────── */
.fe-capas { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: -1; pointer-events: none; }
.fe-fondo, .fe-dibujo { display: none; }
body.fe[data-fe-fondo] .fe-fondo {
    display: block; position: absolute; top: 0; left: 0; right: 0;
    height: var(--fe-fondo-alto); background: var(--fe-fondo);
}

/* Dibujo: una trama del color elegido, recortada con la forma (mask). */
body.fe[data-fe-dibujo] .fe-dibujo {
    display: block; position: absolute; top: 0; left: 0; right: 0; overflow: hidden;
    height: var(--fe-fondo-alto);
    -webkit-mask-image: linear-gradient(#000 30%, transparent);
            mask-image: linear-gradient(#000 30%, transparent);
}
body.fe[data-fe-zona="toda"] .fe-dibujo {
    position: fixed; top: 0; bottom: 0; height: auto;
    -webkit-mask-image: none; mask-image: none;
}
.fe-trama {
    --fe-paso: var(--fe-dib-tam);
    position: absolute; top: 0; left: 0;
    right: calc(var(--fe-paso) * -2); bottom: calc(var(--fe-paso) * -2);
    background: var(--fe-dib-c);
    -webkit-mask-image: var(--fe-mask); mask-image: var(--fe-mask);
    -webkit-mask-size: var(--fe-dib-tam) auto; mask-size: var(--fe-dib-tam) auto;
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
    will-change: transform;
}
body.fe[data-fe-mov="sube"] .fe-trama { animation: feSube 14s linear infinite; }
body.fe[data-fe-mov="diagonal"] .fe-trama { animation: feDiagonal 18s linear infinite; }
@keyframes feSube { to { transform: translate3d(0, calc(var(--fe-paso) * -1), 0); } }
@keyframes feDiagonal { to { transform: translate3d(calc(var(--fe-dib-tam) * -1), calc(var(--fe-paso) * -1), 0); } }
@media (prefers-reduced-motion: reduce) { .fe-trama { animation: none !important; } }

/* Las formas (negro = se ve; la opacidad del negro da la intensidad) */
body.fe[data-fe-dibujo="burbujas"]   { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='18' cy='22' r='11'/%3E%3Ccircle cx='70' cy='56' r='17'/%3E%3Ccircle cx='30' cy='82' r='6'/%3E%3Ccircle cx='88' cy='13' r='4'/%3E%3Ccircle cx='50' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="gotas"]      { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cpath d='M25 8c0 0-12 16-12 25a12 12 0 0 0 24 0c0-9-12-25-12-25z'/%3E%3Cpath d='M75 52c0 0-9 12-9 19a9 9 0 0 0 18 0c0-7-9-19-9-19z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="espuma"]     { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='20' cy='20' r='14' opacity='.5'/%3E%3Ccircle cx='37' cy='31' r='9' opacity='.35'/%3E%3Ccircle cx='70' cy='68' r='18' opacity='.45'/%3E%3Ccircle cx='87' cy='49' r='7' opacity='.3'/%3E%3Ccircle cx='50' cy='90' r='5' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="puntos"]     { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='25' cy='25' r='5'/%3E%3Ccircle cx='75' cy='75' r='5'/%3E%3C/g%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="rayas"]      { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M-10 10L10-10M0 100L100 0M90 110L110 90' stroke='%23000' stroke-width='7'/%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="hexagonos"]  { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 49'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="carbono"]    { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Crect width='10' height='10' opacity='.6'/%3E%3Crect x='10' y='10' width='10' height='10' opacity='.6'/%3E%3Crect x='10' width='10' height='10' opacity='.25'/%3E%3Crect y='10' width='10' height='10' opacity='.25'/%3E%3C/g%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="carbono"] .fe-trama { --fe-paso: calc(var(--fe-dib-tam) / 5); -webkit-mask-size: calc(var(--fe-dib-tam) / 5) auto; mask-size: calc(var(--fe-dib-tam) / 5) auto; }
body.fe[data-fe-dibujo="ondas"]      { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 25Q25 5 50 25T100 25M0 75Q25 55 50 75T100 75' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="destellos"]  { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cpath d='M25 5l3 17 17 3-17 3-3 17-3-17-17-3 17-3z'/%3E%3Cpath d='M75 58l2 10 10 2-10 2-2 10-2-10-10-2 10-2z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"); }
body.fe[data-fe-dibujo="cuadricula"] { --fe-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 1H100M1 0V100' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
/* El hexágono es más alto que ancho: avanza 1,75 veces su ancho para calzar */
body.fe[data-fe-dibujo="hexagonos"] .fe-trama { --fe-paso: calc(var(--fe-dib-tam) * 1.75); }

/* ── El color del producto en los detalles (bordes, íconos, líneas) ───────── */
body.fe[data-fe-detalles] .ficha-page,
body.fe[data-fe-detalles] .ficha-barra-compra {
    --uw-green: var(--fe-a-t);
    --uw-green-dim: var(--fe-b-t);
    --uw-green-glow: var(--fe-a-glow);
}

/* ── Botón "Agregar" (el de la ficha y el de la barra fija) ───────────────── */
body.fe[data-fe-boton="solido"] .ficha-btn-agregar:not(:disabled),
body.fe[data-fe-boton="solido"] .ficha-btn-agregar:not(:disabled):hover,
body.fe[data-fe-boton="solido"] .ficha-barra-btn {
    background: var(--fe-a); color: var(--fe-btn-t); box-shadow: 0 6px 22px var(--fe-a-glow);
}
body.fe[data-fe-boton="degradado"] .ficha-btn-agregar:not(:disabled),
body.fe[data-fe-boton="degradado"] .ficha-btn-agregar:not(:disabled):hover,
body.fe[data-fe-boton="degradado"] .ficha-barra-btn {
    background: linear-gradient(120deg, var(--fe-a), var(--fe-b)); color: var(--fe-btn2-t); box-shadow: 0 6px 22px var(--fe-a-glow);
}
body.fe[data-fe-boton="neon"] .ficha-btn-agregar:not(:disabled),
body.fe[data-fe-boton="neon"] .ficha-barra-btn {
    background: transparent; color: var(--fe-a-t); border: 2px solid var(--fe-a-t);
    box-shadow: 0 0 18px var(--fe-a-glow), inset 0 0 14px var(--fe-a-glow); text-shadow: 0 0 10px var(--fe-a-glow);
}
body.fe[data-fe-boton="neon"] .ficha-btn-agregar:not(:disabled):hover,
body.fe[data-fe-boton="neon"] .ficha-barra-btn:hover { background: var(--fe-a); color: var(--fe-btn-t); text-shadow: none; }
body.fe[data-fe-boton="tema"] .ficha-btn-agregar:not(:disabled),
body.fe[data-fe-boton="tema"] .ficha-btn-agregar:not(:disabled):hover,
body.fe[data-fe-boton="tema"] .ficha-barra-btn { background: var(--fe-cian); color: var(--uw-dark); }

/* ── Precio ───────────────────────────────────────────────────────────────── */
body.fe[data-fe-precio="color"] .ficha-precio-actual,
body.fe[data-fe-precio="color"] .ficha-barra-precio { color: var(--fe-a-t); text-shadow: 0 0 16px var(--fe-a-glow); }
body.fe[data-fe-precio="degradado"] .ficha-precio-actual,
body.fe[data-fe-precio="degradado"] .ficha-barra-precio {
    background: linear-gradient(90deg, var(--fe-a-t), var(--fe-b-t));
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
body.fe[data-fe-precio="tema"] .ficha-precio-actual,
body.fe[data-fe-precio="tema"] .ficha-barra-precio { color: var(--fe-cian); }

/* ── Título y marca ───────────────────────────────────────────────────────── */
body.fe[data-fe-titulo="color"] .ficha-titulo { color: var(--fe-a-t); }
body.fe[data-fe-titulo="degradado"] .ficha-titulo {
    background: linear-gradient(90deg, var(--fe-a-t), var(--fe-b-t));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.fe[data-fe-marca="color"] .ficha-marca-sku { color: var(--fe-a-t); text-shadow: 0 0 10px var(--fe-a-glow); }
body.fe[data-fe-marca="tema"] .ficha-marca-sku { color: var(--fe-cian); }

/* ── Foto ─────────────────────────────────────────────────────────────────── */
body.fe[data-fe-caja="blanco"] .ficha-visor { background: #fff; }
body.fe[data-fe-caja="transparente"] .ficha-visor { background: transparent; border-color: transparent; }
body.fe[data-fe-caja="color"] .ficha-visor {
    background: radial-gradient(circle at 50% 40%, var(--fe-a-glow), transparent 72%), var(--theme-surface);
}
body.fe[data-fe-borde] .ficha-visor { border: 2px solid var(--fe-a-t); }
body.fe[data-fe-borde] .ficha-thumb.activo { border-color: var(--fe-a-t); }
body.fe[data-fe-halo] .ficha-visor,
body.fe[data-fe-halo] .ficha-visor:hover { box-shadow: 0 30px 90px -25px var(--fe-halo), 0 0 70px -12px var(--fe-halo); }

/* ── Video de fondo (el más abajo de las capas: el degradado y el dibujo van encima) ── */
.fe-video { display: none; }
body.fe[data-fe-video] .fe-video {
    display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
    object-fit: cover; opacity: var(--fe-video-op);
    -webkit-mask-image: linear-gradient(#000 45%, transparent);
            mask-image: linear-gradient(#000 45%, transparent);
}
body.fe[data-fe-video="toda"] .fe-video { position: fixed; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) { .fe-video { display: none !important; } }

/* ── Video destacado: "Míralo en acción" ─────────────────────────────────── */
.ficha-video[hidden] { display: none; }
.ficha-video-caja {
    margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000;
    border: 1px solid var(--theme-border); box-shadow: 0 20px 60px -25px var(--uw-green-glow);
}
.ficha-video-caja video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-video-caja[data-forma="horizontal"],
.ficha-video-caja[data-forma="ambos"] { aspect-ratio: 16 / 9; }
.ficha-video-caja[data-forma="vertical"] { aspect-ratio: 9 / 16; max-width: 380px; }
@media (max-width: 700px) {
    .ficha-video-caja[data-forma="ambos"] { aspect-ratio: 9 / 16; max-width: 380px; }
}