/* =============================================================
   EXPERIENCIA · capa aditiva sobre styles.css + ajustes.css
   -------------------------------------------------------------
   Movimiento con direccion, cronometro vivo, profundidad, aros con
   marcas de dial, barras de instrumento, iconos line-art y fondo
   vivo. Paleta intacta: #25E600 · #00D2A0 · #00A9C4 · obsidiana.
   Se quita borrando su <link> y el <script> de experiencia.js.
   ============================================================= */

/* ===== 1 · TRANSICIONES CON DIRECCION ================================
   experiencia.js marca #app-container[data-dir] y la pantalla que se
   va con .saliente. Avanzar entra desde la derecha y sale por la
   izquierda; volver, al reves. Misma duracion y curva en las 25. */
.screen{
  transition-timing-function:cubic-bezier(.22,.61,.36,1), cubic-bezier(.22,.61,.36,1), linear;
}
#app-container[data-dir] .screen{ transform:translateX(7%); }
#app-container[data-dir="atras"] .screen{ transform:translateX(-7%); }
#app-container[data-dir] .screen.saliente{ transform:translateX(-7%); }
#app-container[data-dir="atras"] .screen.saliente{ transform:translateX(7%); }
#app-container[data-dir] .screen.active{ transform:none; }

/* ===== 2 · CRONOMETRO VIVO ============================================
   Ultimos 5 segundos: el aro late y cada numero entra con un tic.
   Al llegar a cero, destello (y vibracion desde experiencia.js). */
#timer-value{ font-variant-numeric:tabular-nums; display:inline-block; }
.exercise-ring.final #timer-ring{ animation:latido .5s ease-in-out infinite; }
.timer-value.tic{ animation:tic .45s cubic-bezier(.2,.8,.2,1); }
.exercise-ring.hecho #timer-ring{ animation:destello .9s ease-out; }
@keyframes latido{
  0%,100%{ filter:drop-shadow(0 0 4px rgba(37,230,0,.35)); transform:scale(1); }
  50%    { filter:drop-shadow(0 0 16px rgba(37,230,0,.8));  transform:scale(1.03); }
}
@keyframes tic{
  0%  { transform:scale(1.18); opacity:.4; }
  100%{ transform:scale(1);    opacity:1; }
}
@keyframes destello{
  0%  { filter:drop-shadow(0 0 0 rgba(37,230,0,0)); }
  30% { filter:drop-shadow(0 0 28px rgba(37,230,0,1)); }
  100%{ filter:drop-shadow(0 0 4px rgba(37,230,0,.3)); }
}

/* ===== 3 · GUIA QUE AVANZA ============================================ */
.guide-step{
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease,
             border-color .35s ease, background-color .35s ease;
}
.guide-step.active{ animation:guia-entra .45s cubic-bezier(.22,.61,.36,1); }
@keyframes guia-entra{
  0%  { transform:translateX(-6px); opacity:.5; }
  100%{ transform:translateX(0);    opacity:1; }
}

/* ===== 4 · MICRO-INTERACCIONES ======================================= */
.btn-primary, .btn-blue-solid, .btn-secondary, .survey-option, .tab-btn{
  position:relative; overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary:active, .btn-blue-solid:active, .btn-secondary:active{ transform:scale(.97); }
.onda{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(37,230,0,.32), rgba(37,230,0,0) 70%);
  transform:scale(0); pointer-events:none;
  animation:onda .55s ease-out forwards;
}
.btn-blue-solid .onda{ background:radial-gradient(circle, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); }
@keyframes onda{ to{ transform:scale(1); opacity:0; } }

/* ===== 5 · PROFUNDIDAD ================================================
   Solo luz: veladura arriba y sombra abajo. Esquinas y colores de
   fondo quedan como estan; el "Tech-Ops" de aristas vivas se respeta. */
.info-card, .home-card, .result-card, .faq-card, .weekly-card,
.missions-card, .streak-card, .badges-card, .shield-card, .comunidad-card,
.encuesta-card, .device-card, .tier-card, .molestia-card, .bonus-card,
.impact-card, .bio-analysis-card, .live-rank-panel, .reward-details,
.claim-form, .pathology-block, .ai-diagnosis, .evo-chart-wrap,
.evo-trend-wrap, .evo-heatmap-wrap, .bio-chart-wrap{
  background-image:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.35);
}
.screen-footer{ box-shadow:0 -12px 30px rgba(0,0,0,.35); }

/* ===== 6 · AROS CON MARCAS DE DIAL ==================================== */
.ring-wrap, .home-ring, .exercise-ring, .profile-avatar-ring{ position:relative; }
.ring-wrap::before, .home-ring::before, .exercise-ring::before, .profile-avatar-ring::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(37,230,0,.34) 0deg .55deg, transparent .55deg 7.5deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  pointer-events:none;
}
.exercise-ring::before{ inset:-10px; }

/* ===== 7 · BARRAS DE INSTRUMENTO ====================================== */
.riesgo-barra, .mini-bar, .ach-bar, .tier-progress-mini{
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 5px, transparent 5px 8px);
}
.riesgo-fill, .mini-fill, .ach-bar-fill, .tier-progress-fill{
  background-image:repeating-linear-gradient(115deg, var(--neon) 0 5px, rgba(0,0,0,.5) 5px 8px);
  box-shadow:0 0 10px rgba(37,230,0,.4);
}
.riesgo-fill.malo, .mini-fill.malo{
  background-image:repeating-linear-gradient(115deg, var(--danger) 0 5px, rgba(0,0,0,.5) 5px 8px);
  box-shadow:0 0 10px rgba(255,59,59,.4);
}
.riesgo-fill.caution, .mini-fill.caution{
  background-image:repeating-linear-gradient(115deg, var(--warning) 0 5px, rgba(0,0,0,.5) 5px 8px);
  box-shadow:0 0 10px rgba(255,184,0,.35);
}

/* ===== 8 · HOLOGRAMA QUE RESPIRA ====================================== */
.ai-hologram-img{ animation:holo-respira 6s ease-in-out infinite; transform-origin:50% 60%; }
@keyframes holo-respira{
  0%,100%{ transform:scale(1);    filter:drop-shadow(0 0 10px rgba(37,230,0,.25)); }
  50%    { transform:scale(1.025); filter:drop-shadow(0 0 22px rgba(37,230,0,.5)); }
}

/* ===== 9 · (fondo vivo retirado el 13-sep-2026) ===== */

/* ===== 10 · MANO BIOMETRICA CON MALLA HEXAGONAL ====================== */
.hand-silhouette{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 132'%3E%3Cdefs%3E%3Cpattern id='h' width='6' height='6.9' patternUnits='userSpaceOnUse'%3E%3Cpath d='M3 .2 5.6 1.7v3.2L3 6.4.4 4.9V1.7z' fill='none' stroke='rgb%2837,230,0%29' stroke-opacity='.6' stroke-width='.35'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M30 128V92l-8-8L8 66q-4-6 2-10t11 4l9 12 4-32q0-8 5-8t5 8v22h2V30q0-8 5-8t5 8v32h2V36q0-8 5-8t5 8v30h2V48q0-7 4.5-7t4.5 7v30q0 22-9 34v16z' fill='url%28%2523h%29' stroke='rgb%2837,230,0%29' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cg fill='rgb%2837,230,0%29'%3E%3Ccircle cx='39' cy='40' r='1.6'/%3E%3Ccircle cx='51' cy='30' r='1.6'/%3E%3Ccircle cx='63' cy='36' r='1.6'/%3E%3Ccircle cx='74.5' cy='48' r='1.6'/%3E%3Ccircle cx='15' cy='60' r='1.6'/%3E%3Ccircle cx='50' cy='96' r='1.6'/%3E%3Ccircle cx='39' cy='68' r='1.3'/%3E%3Ccircle cx='51' cy='66' r='1.3'/%3E%3Ccircle cx='63' cy='70' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.75 !important;
  filter:drop-shadow(0 0 12px rgba(37,230,0,.45));
}

/* ===== 11 · ICONOS LINE-ART EN VERDE ================================= */
img.icon-3d{ filter:drop-shadow(0 0 8px rgba(37,230,0,.4)); }
img.icon-3d[src$="icons/icon_unlock_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Crect x='10' y='21' width='28' height='19' rx='4'/%3E %3Cpath d='M16 21v-6a8 8 0 0 1 15.2-3.4'/%3E %3Ccircle cx='24' cy='28' r='2.6'/%3E %3Cpath d='M24 30.6V34'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_package_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M24 7 40 15v18L24 41 8 33V15z'/%3E %3Cpath d='M8 15l16 8 16-8'/%3E %3Cpath d='M24 23v18'/%3E %3Cpath d='M16 11l16 8'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_phone_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Crect x='14' y='5' width='20' height='38' rx='4'/%3E %3Cpath d='M21 38h6'/%3E %3Cpath d='M20 10h8'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_camera_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Crect x='7' y='15' width='34' height='23' rx='4'/%3E %3Cpath d='M18 15l3-5h6l3 5'/%3E %3Ccircle cx='24' cy='27' r='6.5'/%3E %3Ccircle cx='34.5' cy='20.5' r='1.4'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_hand_open_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M17 27V14a2.4 2.4 0 0 1 4.8 0v11'/%3E %3Cpath d='M21.8 25V11a2.4 2.4 0 0 1 4.8 0v14'/%3E %3Cpath d='M26.6 25V12.5a2.4 2.4 0 0 1 4.8 0V26'/%3E %3Cpath d='M31.4 26v-3.5a2.4 2.4 0 0 1 4.8 0V31a11 11 0 0 1-11 11h-2a9 9 0 0 1-6.4-2.7l-6.2-6.2a2.6 2.6 0 0 1 3.7-3.7L17 32'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_recovery_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M39 24a15 15 0 1 1-4.4-10.6'/%3E %3Cpath d='M39 8v7h-7'/%3E %3Cpath d='M24 16v9l6 4'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_shield_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M24 6l15 6v11c0 9-6.4 15.8-15 19-8.6-3.2-15-10-15-19V12z'/%3E %3Cpath d='M17.5 24.5l4.5 4.5 9-9.5'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_lightning_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M26 5L11 27h10l-3 16 16-22H24z'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_warning_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M24 7l17 30H7z'/%3E %3Cpath d='M24 18v10'/%3E %3Ccircle cx='24' cy='32.5' r='1.6' fill='currentColor' stroke='none'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_gift_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Crect x='8' y='19' width='32' height='21' rx='3'/%3E %3Cpath d='M6 19h36v6H6z'/%3E %3Cpath d='M24 19v21'/%3E %3Cpath d='M24 19c-3-6-12-8-12-2 0 3 5 3 12 2z'/%3E %3Cpath d='M24 19c3-6 12-8 12-2 0 3-5 3-12 2z'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_briefcase_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Crect x='7' y='16' width='34' height='23' rx='3'/%3E %3Cpath d='M18 16v-4a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4'/%3E %3Cpath d='M7 26h34'/%3E %3Cpath d='M21 26v3h6v-3'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_gaming_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M17 17h14a10 10 0 0 1 9.7 12.4l-1.4 5.6a4 4 0 0 1-7.2 1.3L29 32H19l-3.1 4.3a4 4 0 0 1-7.2-1.3l-1.4-5.6A10 10 0 0 1 17 17z'/%3E %3Cpath d='M15 22v6M12 25h6'/%3E %3Ccircle cx='32' cy='24' r='1.6' fill='currentColor' stroke='none'/%3E %3Ccircle cx='36' cy='28' r='1.6' fill='currentColor' stroke='none'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_creative_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M32 7l9 9-21 21-11 2 2-11z'/%3E %3Cpath d='M28 11l9 9'/%3E %3Cpath d='M11 28l9 9'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/fingergene-ia.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M19 9a7 7 0 0 0-7 7 6 6 0 0 0-2 11v3a6 6 0 0 0 9 5'/%3E %3Cpath d='M29 9a7 7 0 0 1 7 7 6 6 0 0 1 2 11v3a6 6 0 0 1-9 5'/%3E %3Cpath d='M24 8v33'/%3E %3Ccircle cx='17' cy='19' r='2'/%3E %3Ccircle cx='31' cy='27' r='2'/%3E %3Cpath d='M19 19h5M24 27h5'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_pinky_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M13 21V10a2.6 2.6 0 0 1 5.2 0v11'/%3E %3Cpath d='M18.2 21v-3a2.6 2.6 0 0 1 5.2 0v3'/%3E %3Cpath d='M23.4 21v-2a2.6 2.6 0 0 1 5.2 0v2'/%3E %3Cpath d='M28.6 21v-1a2.6 2.6 0 0 1 5.2 0v10a11 11 0 0 1-11 11h-2a10 10 0 0 1-7.1-2.9l-5.6-5.6a2.7 2.7 0 0 1 3.8-3.8L13 30'/%3E %3Ccircle cx='15.6' cy='10' r='3.4' stroke-dasharray='2.2 2.6'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_thumb_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M31 15V11a2.6 2.6 0 0 0-5.2 0v11'/%3E %3Cpath d='M25.8 22v-2.5a2.6 2.6 0 0 0-5.2 0V23'/%3E %3Cpath d='M20.6 23v-1.5a2.6 2.6 0 0 0-5.2 0v11a11 11 0 0 0 11 11h3a10 10 0 0 0 10-10v-6'/%3E %3Cpath d='M39.4 27.5a2.6 2.6 0 0 0-5.2 0'/%3E %3Cpath d='M15.4 26.5l-4.6-4.6a2.7 2.7 0 0 0-3.8 3.8l4.2 4.2'/%3E %3Ccircle cx='11' cy='25' r='4' stroke-dasharray='2.2 2.6'/%3E%3C/svg%3E"); }
img.icon-3d[src$="icons/icon_wrist_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%2325E600' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' color='%2325E600'%3E%3Cpath d='M15 6v13M21 5v14M27 6v13M32.6 12.5a2.6 2.6 0 0 1 5.2 0V19'/%3E %3Cpath d='M12 19h26l-1.6 6H13.6z'/%3E %3Cpath d='M13.6 25h22.8l-2 8a7 7 0 0 1-6.8 5.4h-5.2A7 7 0 0 1 15.6 33z'/%3E %3Cpath d='M9 30a6 6 0 0 0 3 4M41 30a6 6 0 0 1-3 4'/%3E%3C/svg%3E"); }
.btn-blue-solid img.icon-3d[src$="icons/icon_unlock_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%23FFFFFF' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' color='%23FFFFFF'%3E%3Crect x='10' y='21' width='28' height='19' rx='4'/%3E %3Cpath d='M16 21v-6a8 8 0 0 1 15.2-3.4'/%3E %3Ccircle cx='24' cy='28' r='2.6'/%3E %3Cpath d='M24 30.6V34'/%3E%3C/svg%3E"); }
.btn-blue-solid img.icon-3d[src$="icons/icon_recovery_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%23FFFFFF' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' color='%23FFFFFF'%3E%3Cpath d='M39 24a15 15 0 1 1-4.4-10.6'/%3E %3Cpath d='M39 8v7h-7'/%3E %3Cpath d='M24 16v9l6 4'/%3E%3C/svg%3E"); }
.btn-blue-solid img.icon-3d[src$="icons/icon_gift_3d.png"]{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%23FFFFFF' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' color='%23FFFFFF'%3E%3Crect x='8' y='19' width='32' height='21' rx='3'/%3E %3Cpath d='M6 19h36v6H6z'/%3E %3Cpath d='M24 19v21'/%3E %3Cpath d='M24 19c-3-6-12-8-12-2 0 3 5 3 12 2z'/%3E %3Cpath d='M24 19c3-6 12-8 12-2 0 3-5 3-12 2z'/%3E%3C/svg%3E"); }

/* ===== MOVIMIENTO REDUCIDO ============================================ */
@media (prefers-reduced-motion: reduce){
  #app-container[data-dir] .screen,
  #app-container[data-dir] .screen.saliente{ transform:none; }
  .exercise-ring.final #timer-ring, .timer-value.tic, .exercise-ring.hecho #timer-ring,
  .guide-step.active, .ai-hologram-img, .onda{ animation:none !important; }
}