/* S29-T5 */
@layer components {
/* ============================================================
   VISITOR INTEL — CSS completo (S29 T5)
   Clases generadas en visitor-intel.js + page-visitor-intel.php
   ============================================================ */

/* Página y hero */
.avn-visitor-intel    { padding: 2rem 0; }
.avn-vi-page { }
.avn-vi-hero { padding: 4rem 0 2rem; text-align: center; }
.avn-vi-hero h1 { font-size: var(--avn-fs-h2); margin: 1rem 0; }

/* Loading + skeleton */
.avn-vi-loading       { text-align: center; padding: 3rem 1rem; color: var(--avn-text-muted); }
.avn-vi-skeleton      { display: flex; flex-direction: column; gap: .75rem; max-width: 480px; margin: 2rem auto; }
.avn-vi-sk-row        { height: 1rem; border-radius: 4px; background: linear-gradient(90deg, var(--avn-bg-card) 25%, var(--avn-surface-3) 50%, var(--avn-bg-card) 75%); background-size: 200% 100%; animation: avn-shimmer 1.5s infinite; }
.avn-vi-sk--sm        { width: 60%; }

/* Hook card (nivel 1) */
.avn-vi-hook          { background: var(--avn-bg-card); border: 1px solid var(--avn-border); border-radius: var(--avn-radius); padding: 2rem; margin-bottom: 2rem; }
.avn-vi-hook__grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.avn-vi-hook__item    { display: flex; flex-direction: column; gap: .25rem; }
.avn-vi-hook__icon    { font-size: 1.5rem; }
.avn-vi-hook__label   { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--avn-text-muted); }
.avn-vi-hook__val     { font-weight: 700; font-size: 1rem; color: var(--avn-on-surface); }

/* Nivel 2 — expandible */
.avn-vi-level2        { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.avn-vi-level2.is-open { max-height: 9999px; }

/* Grupos */
.avn-vi-groups        { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; padding: 2rem 0; }
.avn-vi-group         { background: var(--avn-bg-card); border: 1px solid var(--avn-border-subtle); border-radius: var(--avn-radius); padding: 1.5rem; }
.avn-vi-group__head   { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.avn-vi-group__head h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.avn-vi-group__icon   { font-size: 1.4rem; }
.avn-vi-group__body   { display: flex; flex-direction: column; gap: .35rem; }

/* Filas de datos */
.avn-vi-row           { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.avn-vi-row:last-child { border-bottom: none; }
.avn-vi-label         { font-size: .8rem; color: var(--avn-text-muted); flex-shrink: 0; }
.avn-vi-value         { font-size: .85rem; font-weight: 600; color: var(--avn-on-surface); text-align: right; word-break: break-all; }

/* GPS section */
.avn-vi-gps           { margin-top: .75rem; }
.avn-vi-gps-wrap      { margin-top: 1rem; }
.avn-vi-gps-btn       { }
.avn-vi-gps-out       { margin-top: 1rem; font-size: .85rem; }

/* Clock + timer (IDs usados en JS, CSS como clase) */
.avn-vi-clock         { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--avn-accent); }
.avn-vi-timer         { font-variant-numeric: tabular-nums; color: var(--avn-text-muted); font-size: .85rem; }

/* Expand button (ID en JS) */
.avn-vi-expand        { margin-top: .5rem; }

/* CTA final */
.avn-vi-cta           { text-align: center; padding: 3rem 1rem; }
.avn-vi-cta p         { color: var(--avn-text-muted); margin-bottom: 1.5rem; font-size: var(--avn-fs-lg); }

/* Warn */
.avn-vi-warn          { color: var(--avn-danger); font-size: .85rem; margin: .5rem 0 0; }

/* External link inside row value (fast.com) */
.avn-vi-ext-link      { color: var(--avn-accent); text-decoration: none; font-weight: 600; }
.avn-vi-ext-link:hover { text-decoration: underline; }

/* GPS map buttons */
.avn-vi-map-btns      { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; padding: 0 1rem .75rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .avn-vi-sk-row { animation: none; }
    .avn-vi-level2 { transition: none; }
}

@media (max-width: 640px) {
    .avn-vi-hook__grid { grid-template-columns: 1fr 1fr; }
    .avn-vi-groups     { grid-template-columns: 1fr; }
}

} /* end @layer components */