/*
 * tarjeta.css — La tarjeta de Safevity Rewards: cómo gira, cómo se acomoda por dentro, sus materiales y sus efectos.
 * COPIA IDÉNTICA en Loyaltyapp/PWA_User/css/tarjeta.css y DTB_HUB/web/public/tarjeta/tarjeta.css (la vista
 * previa del diseñador). Va con tarjeta-diseno.js, que pone las clases (tx-*, tono-*, marco-*) y las variables
 * (--c, --w*, --d*, --texto…) de cada diseño. Todo cuelga de .dtb-card para no chocar con nada de fuera.
 *
 * Reglas que no se rompen: el cuadro del QR es blanco y opaco y NINGÚN efecto pasa por encima (las capas .fx van
 * debajo del contenido); sólo se anima transform y opacity (lo mueve la tarjeta gráfica); con «reducir
 * movimiento» todo se queda quieto; sin color-mix (iOS < 16.2 lo ignora): los tonos llegan ya calculados.
 */
.dtb-card {
    --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .29 0 0 0 0 .2 0 0 0 .26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grano-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .88 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    width: 100%; height: 100%; position: relative; transition: transform 0.8s ease-in-out;
    -webkit-transform-style: preserve-3d; transform-style: preserve-3d; cursor: pointer;
}
.dtb-card.is-flipped { transform: rotateY(180deg); }

/* ---- las dos caras ----
   La cara que NO se ve se ESCONDE (visibility) y no recibe toques. No basta con backface-visibility: en Safari/iOS
   el <canvas> del QR tiene su propia capa y se seguía pintando encima del reverso, y en Chrome atrapaba los toques
   del reverso. El cambio ocurre a la mitad del giro (0.4 s de 0.8 s con ease-in-out = 90°, de canto). */
.dtb-card .card-face {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 20px; display: flex; flex-direction: column; color: var(--tinta, #554c41); overflow: hidden; border: 0;
    box-shadow: 0 18px 44px var(--sombra, rgba(139, 115, 85, 0.16)); transition: visibility 0s linear 0.4s;
    background-color: #fcf8ef; background-image: var(--grano), radial-gradient(130% 90% at 15% 0%, #fffefb 0%, #fbf6ea 55%, #f3e9d3 100%); background-size: 160px 160px, 100% 100%;
}
.dtb-card.is-flipped .card-front, .dtb-card:not(.is-flipped) .card-back { pointer-events: none; visibility: hidden; }
.dtb-card .card-front { padding: 22px 20px 16px; align-items: center; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
.dtb-card .card-back { transform: rotateY(180deg); padding: 16px; }
.dtb-card .card-face > :not(.fx-capas):not(.nivel-sello) { position: relative; z-index: 1; }
.dtb-card .card-front > * { flex-shrink: 0; }

/* ---- el frente por dentro ---- */
.dtb-card .brand-logo { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; margin-bottom: 12px; border-radius: 50%; }
.dtb-card .nivel-sello { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--sello, #ac996c); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); letter-spacing: 0.3px; z-index: 2; }
.dtb-card .nivel-sello[hidden] { display: none; }
.dtb-card .patient-name { font-size: 1.4rem; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; color: var(--texto, #ac996c); text-align: center; width: 100%; padding: 0 6px; overflow-wrap: anywhere; line-height: 1.2; }
/* Un nombre largo en a lo más dos renglones y más chico: en cuatro renglones empujaba el QR fuera de la pantalla. */
.dtb-card .patient-name.largo { font-size: 1.08rem; letter-spacing: 0.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dtb-card .patient-number { color: #888; font-family: monospace; font-size: 0.85rem; margin-bottom: 18px; text-align: center; }
.dtb-card .points-box { background: rgba(255, 255, 255, 0.72); padding: 14px 30px; border-radius: 20px; text-align: center; margin-bottom: 18px; width: 82%; border: 1px solid rgba(172, 153, 108, 0.3); box-shadow: inset 0 2px 10px rgba(172, 153, 108, 0.05); }
.dtb-card .points-box h1 { font-size: 2.6rem; margin: 0; color: var(--puntos, #ac996c); line-height: 1.1; }
.dtb-card .points-box p { margin: 4px 0 0; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 2px; color: #666; }
.dtb-card .points-box.sin-plan h1 { color: rgba(85, 76, 65, 0.35); }
.dtb-card .points-box.sin-plan p { color: rgba(85, 76, 65, 0.55); }
.dtb-card .qr-wrapper { background: #fff; padding: 12px; border-radius: 16px; margin-bottom: 10px; position: relative; border: 1px solid rgba(172, 153, 108, 0.2); }
.dtb-card .qr-wrapper canvas { width: 150px; height: 150px; display: block; }
.dtb-card .timer-bar { width: 100%; height: 4px; background: #eee; border-radius: 2px; margin-top: 10px; overflow: hidden; }
.dtb-card .timer-progress { height: 100%; background: #ac996c; width: 100%; transition: width 1s linear; }
.dtb-card .card-bottom-bar { display: flex; align-items: center; justify-content: center; padding-top: 6px; flex-shrink: 0; margin-top: auto; }
.dtb-card .flip-indicator { background: #f8f9fa; border: 1px solid #eee; color: #ac996c; padding: 8px; border-radius: 50%; width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; user-select: none; flex-shrink: 0; }

/* ---- materiales (tono claro) ---- */
.dtb-card.tx-papel .card-face { background-color: var(--p2, #fbf6ea); background-image: var(--grano), radial-gradient(130% 90% at 15% 0%, var(--p1, #fffefb) 0%, var(--p2, #fbf6ea) 55%, var(--p3, #f3e9d3) 100%); background-size: 160px 160px, 100% 100%; }
.dtb-card.tx-plata .card-face { background-color: #eef0f3; background-image: var(--grano), repeating-conic-gradient(from 0deg at 50% 115%, rgba(255, 255, 255, 0.6) 0deg 0.5deg, rgba(40, 44, 52, 0.05) 0.5deg 1deg), linear-gradient(160deg, #fdfdfe 0%, var(--w26) 42%, #fbfbfc 60%, var(--w34) 100%); background-size: 160px 160px, 100% 100%, 100% 100%; }
.dtb-card.tx-oro .card-face { background-color: var(--w38); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, rgba(120, 84, 10, 0.07) 0 1px, transparent 1px 8px), linear-gradient(135deg, var(--w12) 0%, var(--w38) 30%, var(--w06) 50%, var(--w50) 78%, var(--w22) 100%); background-size: auto; }
.dtb-card.tx-facetas .card-face { background-color: var(--w12); background-image: repeating-linear-gradient(60deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 26px), repeating-linear-gradient(-60deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 22.5px), linear-gradient(150deg, var(--w06) 0%, var(--w22) 55%, var(--w12) 100%); background-size: auto; }
.dtb-card.tx-nacar .card-face { background-color: #fbf7fb; background-image: var(--grano), linear-gradient(125deg, #ffffff 0%, #fdf1f7 20%, #eef3ff 42%, #ffffff 58%, #f1fff7 78%, #fff8ec 100%); background-size: 160px 160px, 100% 100%; }
.dtb-card.tx-lisa .card-face { background-color: var(--w12); background-image: linear-gradient(160deg, var(--w06) 0%, var(--w22) 100%); background-size: auto; }

/* ---- tono oscuro: la base es la misma para todas y cada material pone su dibujo encima ---- */
.dtb-card.tono-oscuro .card-face { color: #efe4d0; background-color: var(--d3); background-image: radial-gradient(120% 85% at 22% 0%, var(--d1) 0%, var(--d2) 58%, var(--d3) 100%); background-size: auto; }
.dtb-card.tono-oscuro.tx-papel .card-face { background-image: var(--grano-claro), radial-gradient(120% 85% at 22% 0%, var(--d1) 0%, var(--d2) 58%, var(--d3) 100%); background-size: 160px 160px, 100% 100%; }
.dtb-card.tono-oscuro.tx-plata .card-face { background-image: var(--grano-claro), repeating-conic-gradient(from 0deg at 50% 115%, rgba(255, 255, 255, 0.07) 0deg 0.5deg, rgba(0, 0, 0, 0.12) 0.5deg 1deg), radial-gradient(120% 85% at 22% 0%, var(--d1) 0%, var(--d2) 58%, var(--d3) 100%); background-size: 160px 160px, 100% 100%, 100% 100%; }
.dtb-card.tono-oscuro.tx-oro .card-face { background-image: repeating-linear-gradient(45deg, rgba(255, 226, 150, 0.1) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 8px), radial-gradient(120% 85% at 22% 0%, var(--d1) 0%, var(--d2) 58%, var(--d3) 100%); }
.dtb-card.tono-oscuro.tx-facetas .card-face { background-image: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 26px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 22.5px), radial-gradient(120% 85% at 22% 0%, var(--d1) 0%, var(--d2) 58%, var(--d3) 100%); }
.dtb-card.tono-oscuro.tx-nacar .card-face { background-image: var(--grano-claro), linear-gradient(125deg, rgba(253, 241, 247, 0.14) 0%, rgba(238, 243, 255, 0.16) 42%, rgba(241, 255, 247, 0.1) 78%), radial-gradient(120% 85% at 22% 0%, var(--d1) 0%, var(--d2) 58%, var(--d3) 100%); background-size: 160px 160px, 100% 100%, 100% 100%; }

/* ---- tono oscuro: el contenido se aclara ---- */
.dtb-card.tono-oscuro .patient-number { color: rgba(239, 228, 208, 0.62); }
.dtb-card.tono-oscuro .points-box { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.dtb-card.tono-oscuro .points-box p { color: rgba(239, 228, 208, 0.72); }
.dtb-card.tono-oscuro .points-box.sin-plan h1 { color: rgba(239, 228, 208, 0.4); }
.dtb-card.tono-oscuro .flip-indicator { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #f3e2b3; }
.dtb-card.tono-oscuro .nivel-sello { background: linear-gradient(135deg, #f5e6b8, #c9a14f); color: #3a0f2a; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .dtb-card.tono-oscuro.texto-auto .patient-name { background: linear-gradient(90deg, #f5e6b8, #d8b56a 30%, #fff3cf 50%, #cfa65a 75%, #f5e6b8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}

/* ---- las capas de efecto: debajo del contenido, en este orden: imagen, tornasol, reflejo, destellos, marco ---- */
.dtb-card .fx-capas, .dtb-card .fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.dtb-card .fx-imagen { background-size: cover; background-position: center; background-repeat: no-repeat; }
.dtb-card .fx-imagen::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, var(--velo, 0)); }
.dtb-card.tono-oscuro .fx-imagen::after { background: rgba(12, 6, 10, var(--velo, 0)); }

/* Marco: su propia capa (para no pelearse con las capas de fondo del material). */
.dtb-card .fx-marco { overflow: visible; }
.dtb-card.marco-filete .fx-marco { border: 1px solid rgba(172, 153, 108, 0.4); box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.55), inset 0 0 0 8px rgba(172, 153, 108, 0.38); }
.dtb-card.tono-oscuro.marco-filete .fx-marco { border-color: rgba(243, 226, 179, 0.35); box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.18), inset 0 0 0 8px rgba(243, 226, 179, 0.3); }
.dtb-card.marco-fino .fx-marco { border: 1px solid var(--borde, rgba(172, 153, 108, 0.45)); }
.dtb-card.marco-metalico .fx-marco, .dtb-card.marco-holografico .fx-marco {
    border: 2px solid transparent;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.dtb-card.marco-metalico .fx-marco { background: linear-gradient(135deg, var(--m1), var(--m2) 30%, var(--m3) 50%, var(--m4) 72%, var(--m1)) border-box; }
.dtb-card.marco-holografico .fx-marco { background: conic-gradient(from 0deg, var(--c), #f6d365, #a1c4fd, #fbc2eb, var(--c)) border-box; }
.dtb-card.tono-oscuro.marco-holografico .fx-marco { background: conic-gradient(from 20deg, #f6d365, #fbc2eb, #a1c4fd, #c2ffd8, #f6d365) border-box; }

/* Reflejo: una franja de luz que cruza la tarjeta. */
.dtb-card .fx-reflejo::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%); transform: translateX(-130%) skewX(-12deg); animation: dtbReflejo var(--vel, 7s) ease-in-out infinite; }
.dtb-card.tono-oscuro .fx-reflejo::before { background: linear-gradient(100deg, transparent 20%, rgba(255, 236, 200, 0.22) 50%, transparent 80%); }
@keyframes dtbReflejo { 0%, 58% { transform: translateX(-130%) skewX(-12deg); } 100% { transform: translateX(260%) skewX(-12deg); } }

/* Tornasol: un disco de colores que gira despacio. */
/* Centrado en la tarjeta y 2.5 veces su tamaño: gira sobre el centro y cubre la cara entera en cualquier ángulo, aunque la
   app la estire (antes giraba sobre un punto arriba del centro y en 90°/270° la franja de abajo quedaba sin tornasol). */
.dtb-card .fx-holo::before { content: ''; position: absolute; width: 250%; height: 250%; left: -75%; top: -75%; background: conic-gradient(from 0deg, #ff9ad5, #a1c4fd, #c2ffd8, #f6d365, #ffb199, #ff9ad5); mix-blend-mode: multiply; opacity: var(--holo-op, 0.16); animation: dtbGirar 14s linear infinite; }
.dtb-card.tono-oscuro .fx-holo::before { mix-blend-mode: soft-light; }
@keyframes dtbGirar { to { transform: rotate(360deg); } }

/* Destellos: estrella de cuatro puntas (dos rayos y un centro) que aparece, gira y se apaga. */
.dtb-card .brillo { position: absolute; width: var(--s, 18px); height: var(--s, 18px); left: var(--x); top: var(--y); margin: calc(var(--s, 18px) / -2) 0 0 calc(var(--s, 18px) / -2); background: radial-gradient(circle, #fff 0 9%, var(--c, rgba(255, 255, 255, 0.75)) 16%, transparent 42%); opacity: 0; transform: scale(0.2); animation: dtbDestello var(--d, 3.2s) ease-in-out var(--t, 0s) infinite; }
.dtb-card .brillo::before, .dtb-card .brillo::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.dtb-card .brillo::before { width: 100%; height: 10%; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, var(--c, rgba(255, 255, 255, 0.8)) 30%, #fff 50%, var(--c, rgba(255, 255, 255, 0.8)) 70%, transparent); }
.dtb-card .brillo::after { width: 10%; height: 100%; transform: translate(-50%, -50%); background: linear-gradient(0deg, transparent, var(--c, rgba(255, 255, 255, 0.8)) 30%, #fff 50%, var(--c, rgba(255, 255, 255, 0.8)) 70%, transparent); }
.dtb-card.tono-claro .brillo { filter: drop-shadow(0 0 3px rgba(150, 105, 10, 0.5)); }
@keyframes dtbDestello { 0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 55% { opacity: 0.85; transform: scale(0.75) rotate(60deg); } 75% { opacity: 0; transform: scale(0.3) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
    .dtb-card, .dtb-card .card-face { transition: none; }
    .dtb-card .fx-reflejo::before, .dtb-card .fx-holo::before { animation: none; }
    .dtb-card .fx-reflejo::before { opacity: 0; }
    .dtb-card .brillo { animation: none; opacity: 0.8; transform: scale(0.8) rotate(45deg); }
}