/* ════════════════════════════════════════════════════════════════════════
   digitalVCard · Tema premium "metálico" (oro/plata/…) — Fase 1: motor CSS
   ════════════════════════════════════════════════════════════════════════
   OPT-IN: todo cuelga de `.dvc-classic[data-tema="metal"]`. Si una tarjeta no
   lleva ese atributo, este fichero NO la toca → cero riesgo para las existentes.

   Contrato de variables (las inyecta el render en Fase 3 / el editor):
     --metal      : degradado del modelo+variante elegidos (oro clásico por defecto)
     --metal-spd  : duración del brillo (velocidad). Menor = más rápido.
     --metal-base : color de base plano (deriva del fondo de la tarjeta)
   Forma del botón: se reutiliza el `data-rrss-style` existente
     outline = Contorno · ghost/glass = Sin fondo · fill = Relleno
   Movimiento (patrón): data-metal-fx en el wrapper (barrido por defecto).
   ════════════════════════════════════════════════════════════════════════ */

.dvc-classic[data-tema="metal"] {
    --metal: linear-gradient(110deg, #7a5a1e, #d9b44a 18%, #fff3c4 36%, #e7c75a 50%, #9c7726 66%, #f7eab0 82%, #8a6a24);
    --metal-spd: 3.6s;
    --metal-base: var(--dvc-bg-day, #0e0d0f);
}
.dvc-classic[data-tema="metal"][data-theme="night"],
[data-theme="night"] .dvc-classic[data-tema="metal"] {
    --metal-base: var(--dvc-bg-night, var(--dvc-bg-day, #0e0d0f));
}

@keyframes dvcMetalShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes dvcMetalPulse { 0%, 100% { filter: brightness(.84); } 50% { filter: brightness(1.26); } }

/* Patrón de movimiento (data-metal-fx). Barrido = por defecto. */
.dvc-classic[data-tema="metal"] { --metal-anim: dvcMetalShift var(--metal-spd) linear infinite; }
.dvc-classic[data-tema="metal"][data-metal-fx="vaiven"]   { --metal-anim: dvcMetalShift var(--metal-spd) ease-in-out infinite alternate; }
.dvc-classic[data-tema="metal"][data-metal-fx="destello"] { --metal-anim: dvcMetalShift var(--metal-spd) cubic-bezier(.7, 0, .3, 1) infinite; }
.dvc-classic[data-tema="metal"][data-metal-fx="pulso"]    { --metal-anim: dvcMetalShift var(--metal-spd) linear infinite, dvcMetalPulse calc(var(--metal-spd) * .55) ease-in-out infinite; }
.dvc-classic[data-tema="metal"][data-metal-fx="estatico"] { --metal-anim: none; }

/* ── Tinta metálica sobre TEXTO e ICONOS (glifos FontAwesome) ───────────────
   El degradado se recorta a la forma del texto/icono. -webkit-text-fill-color
   gana siempre sobre `color`, así que respeta el modo noche sin pelear specificity. */
.dvc-classic[data-tema="metal"] .dvc-name,
.dvc-classic[data-tema="metal"] .dvc-role,
.dvc-classic[data-tema="metal"] .dvc-rrss__btn > i,
.dvc-classic[data-tema="metal"] .dvc-rrss__more-icon,
.dvc-classic[data-tema="metal"] .dvc-ms-trigger > i,
.dvc-classic[data-tema="metal"] .dvc-ms-trigger > span {
    background: var(--metal);
    background-size: 220% auto;
    background-position: 36% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: var(--metal-anim);
}

/* ── Botones redondos (RRSS + Guardar/QR/Compartir): la FORMA la da
   data-rrss-style; aquí solo recoloreamos a metal. ──────────────────────── */

/* ── SUPERFICIE de los botones (redes + Guardar contacto + Compartir + QR)
   según data-rrss-style. "Guardar contacto" se trata como un botón más. ──── */

/* "Sin fondo" (ghost/glass): sin relleno ni aro. */
.dvc-classic[data-tema="metal"]:is([data-rrss-style="ghost"], [data-rrss-style="glass"]) :is(.dvc-rrss__btn, .dvc-actions__save, .dvc-actions__share, .dvc-actions__qr) {
    background: transparent;
    border-color: transparent;
}

/* "Contorno" (outline): aro metálico + interior del color de base
   (técnica padding-box/border-box, compatible con border-radius). */
.dvc-classic[data-tema="metal"][data-rrss-style="outline"] :is(.dvc-rrss__btn, .dvc-actions__save, .dvc-actions__share, .dvc-actions__qr) {
    background:
        linear-gradient(var(--metal-base), var(--metal-base)) padding-box,
        var(--metal) border-box;
    background-size: auto, 220% auto;
    background-position: center, 36% 50%;
    border: 2px solid transparent;
    animation: var(--metal-anim);
}

/* "Relleno" (fill): superficie metálica. */
.dvc-classic[data-tema="metal"][data-rrss-style="fill"] :is(.dvc-rrss__btn, .dvc-actions__save, .dvc-actions__share, .dvc-actions__qr) {
    background: var(--metal);
    background-size: 220% auto;
    background-position: 36% 50%;
    border-color: transparent;
    animation: var(--metal-anim);
}

/* ── CONTENIDO de los botones (iconos + texto de "Guardar contacto") ─────────
   Metálico en sin-fondo/contorno; en color de base en relleno (va sobre metal).
   Targeteamos los HIJOS (i / span), nunca el botón, para no pelear con su
   fondo/aro. */
.dvc-classic[data-tema="metal"]:not([data-rrss-style="fill"]) :is(
    .dvc-rrss__btn > i, .dvc-rrss__more-icon,
    .dvc-actions__share > i, .dvc-actions__qr > i,
    .dvc-actions__save > i, .dvc-actions__save > span
) {
    background: var(--metal);
    background-size: 220% auto;
    background-position: 36% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: var(--metal-anim);
}
.dvc-classic[data-tema="metal"][data-rrss-style="fill"] :is(
    .dvc-rrss__btn > i, .dvc-rrss__more-icon,
    .dvc-actions__share > i, .dvc-actions__qr > i,
    .dvc-actions__save > i, .dvc-actions__save > span
) {
    background: none;
    -webkit-text-fill-color: var(--metal-base);
    color: var(--metal-base);
    animation: none;
}

/* ── Botón del microsite: mismo acabado metálico que las RRSS, pero según SU
   PROPIO estilo (dvc-ms-trigger--st-*), no el data-rrss-style de la tarjeta. Sin
   esto conservaba su superficie/color propio y rompía la coherencia (p.ej.
   "Cristal" no daba el icono metálico con brillo sin círculo). El icono ya es
   metálico por la regla de contenido de arriba. ─────────────────────────────── */
/* Sin fondo / Cristal → superficie transparente (solo el icono metálico). */
.dvc-classic[data-tema="metal"] .dvc-ms-trigger.dvc-ms-trigger--st-ghost,
.dvc-classic[data-tema="metal"] .dvc-ms-trigger.dvc-ms-trigger--st-glass {
    background: transparent;
    border-color: transparent;
}
/* Contorno → aro metálico fino + interior del color base. */
.dvc-classic[data-tema="metal"] .dvc-ms-trigger.dvc-ms-trigger--st-outline {
    background:
        linear-gradient(var(--metal-base), var(--metal-base)) padding-box,
        var(--metal) border-box;
    background-size: auto, 220% auto;
    background-position: center, 36% 50%;
    border: 2px solid transparent;
    animation: var(--metal-anim);
}
/* Sólido → superficie metálica; contenido en color base (va sobre el metal). */
.dvc-classic[data-tema="metal"] .dvc-ms-trigger.dvc-ms-trigger--st-fill {
    background: var(--metal);
    background-size: 220% auto;
    background-position: 36% 50%;
    border-color: transparent;
    animation: var(--metal-anim);
}
.dvc-classic[data-tema="metal"] .dvc-ms-trigger.dvc-ms-trigger--st-fill > i,
.dvc-classic[data-tema="metal"] .dvc-ms-trigger.dvc-ms-trigger--st-fill > span {
    background: none;
    -webkit-text-fill-color: var(--metal-base);
    color: var(--metal-base);
    animation: none;
}

/* ── Logos como SILUETA metálica (máscara). El render (Fase 3) servirá estos
   logos como <span> con el SVG/PNG en `mask` en vez de <img>; esta clase los
   pinta. Pensado para logos MONOCROMOS (usa solo la silueta). ────────────── */
.dvc-classic[data-tema="metal"] .dvc-metal-mask {
    background: var(--metal);
    background-size: 220% auto;
    background-position: 36% 50%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    animation: var(--metal-anim);
}

/* Pie "© digitalVCard.es" en metal. */
.dvc-classic[data-tema="metal"] .dvc-footer,
.dvc-classic[data-tema="metal"] .dvc-footer a {
    background: var(--metal);
    background-size: 220% auto;
    background-position: 36% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: var(--metal-anim);
}

/* Aro del avatar/logo en metal: anillo metálico (border-box) con interior del
   color de base (padding-box). Conserva el grosor que elija el cliente. */
.dvc-classic[data-tema="metal"] .dvc-photo {
    border-color: transparent;
    background:
        linear-gradient(var(--metal-base), var(--metal-base)) padding-box,
        var(--metal) border-box;
    background-size: auto, 220% auto;
    background-position: center, 36% 50%;
    animation: var(--metal-anim);
}

/* Logo de digitalVCard (cabecera) servido como <span> enmascarado: necesita
   ancho explícito (el <span> no tiene tamaño intrínseco como el <img>). */
.dvc-classic[data-tema="metal"] .dvc-card__logo--metal {
    width: calc(0.23 * var(--u));
}

/* Logo del cliente (overlay) enmascarado: caja cuadrada + mask contain encaja
   cualquier proporción de logo, conservando el % de tamaño del cliente. */
.dvc-classic[data-tema="metal"] .dvc-photo__overlay,
.dvc-classic[data-tema="metal"] .dvc-photo__overlay-night {
    aspect-ratio: 1;
    height: auto;
}

/* ── Sello / Distintivo (solo tema premium) ───────────────────────────────
   SVG monocromo pintado como silueta de un color PLANO (NO metálico: no lleva
   --metal ni animación). Mismo sistema de tamaño/posición que el overlay del
   logo: caja cuadrada + mask contain, centrado en X, posición vertical libre.
   z-index según la capa elegida: detrás del logo (overlay z3) o delante. */
/* El sello son DOS capas anidadas:
   · .dvc-photo__sello       → PADRE: posición/tamaño + el `filter` (contorno/halo).
   · .dvc-photo__sello-shape → HIJO: la silueta (mask + color de relleno).
   El filtro DEBE ir en el padre: el navegador aplica `filter` ANTES que `mask`,
   así que un drop-shadow sobre el propio elemento enmascarado se recorta y no se
   ve. Sobre el padre, el filtro actúa sobre la forma ya enmascarada del hijo. */
.dvc-classic[data-tema="metal"] .dvc-photo__sello {
    position: absolute; left: 50%;
    top:   calc(var(--sello-pos-y, 80) * 1%);
    width: calc(var(--sello-scale, 40) * 1%);
    aspect-ratio: 1; height: auto;
    /* 1em = 1% de --u → el filtro drop-shadow del contorno usa `em` (cross-browser;
       Safari no evalúa calc(var()) dentro de filter). Ver dvc_sello_filter(). */
    font-size: calc(var(--u) * 0.01);
    transform: translate(-50%, -50%);
    pointer-events: none; user-select: none;
    z-index: 2;   /* detrás del logo del cliente (overlay = z3), sobre el fondo (z1) */
}
.dvc-classic[data-tema="metal"] .dvc-photo__sello[data-orden="front"] { z-index: 5; }
.dvc-classic[data-tema="metal"] .dvc-photo__sello-shape {
    display: block; width: 100%; height: 100%;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}

/* Sello DELANTE: vive en .dvc-photo-stack (envoltorio SIN overflow) para que el
   halo (drop-shadow) NO lo recorte el círculo. El stack replica tamaño, centrado
   y margen del círculo (que solo se renderiza con sello delante). El sello detrás
   sigue dentro de .dvc-photo (su halo iría tras el logo). */
.dvc-classic .dvc-photo-stack {
    position: relative;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: calc(0.04 * var(--u));   /* el margen inferior que llevaba .dvc-photo */
}
.dvc-classic .dvc-photo-stack > .dvc-photo { margin-bottom: 0; }
/* Reparto vertical en móvil alto: el margin-top:auto pasa al stack (ver
   template.css §"Móvil alto"). */
@media (min-height: 800px) and (max-width: 919px) {
    body.dvc-classic-page .dvc-classic .dvc-photo-stack { margin-top: auto; }
}

/* Sin día/noche en el tema metálico: la base es única, así que el botón
   sol/luna no hace nada → se oculta. */
.dvc-classic[data-tema="metal"] .dvc-theme-toggle { display: none; }

/* ── Accesibilidad: si el visitante pide menos movimiento, todo queda quieto. */
@media (prefers-reduced-motion: reduce) {
    .dvc-classic[data-tema="metal"] * { animation: none !important; }
}