/* Estilos propios de las vistas personalizadas de los paneles (admin y atleta).
   Filament solo compila las clases de Tailwind que usa internamente, por eso estas vistas usan clases "vk-". */

.vk-stack > * + * { margin-top: 1.5rem; }
.vk-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vk-grid-4 { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.vk-card { display: block; border-radius: .9rem; border: 1px solid rgba(0,0,0,.1); background: #fff; padding: 1rem 1.1rem; transition: border-color .2s, background .2s, transform .2s; }
.dark .vk-card { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
a.vk-card:hover { border-color: rgba(var(--primary-500), .6); transform: translateY(-2px); }
.dark a.vk-card:hover { background: rgba(255,255,255,.07); }

.vk-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.vk-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.dark .vk-kicker { color: rgb(var(--gray-400)); }
.vk-title { font-weight: 600; }
.vk-big { margin-top: .4rem; font-size: 1.9rem; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; color: rgb(var(--primary-600)); }
.dark .vk-big { color: rgb(var(--primary-400)); }
.vk-status-active { color: rgb(var(--success-500)) !important; }
.vk-status-expiring { color: rgb(var(--warning-500)) !important; }
.vk-status-expired { color: rgb(var(--danger-500)) !important; }
.vk-status-none { color: rgb(var(--gray-400)) !important; }
.vk-muted { font-size: .8rem; color: rgb(var(--gray-500)); margin-top: .3rem; }
.dark .vk-muted { color: rgb(var(--gray-400)); }
.vk-chevron { width: 1.1rem; height: 1.1rem; color: rgb(var(--gray-500)); flex: none; }
a.vk-card:hover .vk-chevron { color: rgb(var(--primary-400)); }

.vk-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: .9rem; padding: 1rem 1.25rem; border: 1px solid rgba(var(--primary-500), .35); background: rgba(var(--primary-500), .1); }
.vk-banner:hover { background: rgba(var(--primary-500), .16); }
.vk-banner .vk-kicker { color: rgb(var(--primary-400)); }
.vk-banner strong { display: block; font-size: 1.1rem; margin-top: .15rem; }

.vk-empty { text-align: center; padding: 2rem .5rem; }
.vk-empty h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1rem; }
.vk-empty p { max-width: 28rem; margin: .5rem auto 1.5rem; font-size: .9rem; color: rgb(var(--gray-400)); }
.vk-empty-icon { width: 3rem; height: 3rem; margin: 0 auto; color: rgb(var(--primary-400)); }

.vk-section-title { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--gray-400)); margin-bottom: .75rem; }

.vk-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.vk-pct { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vk-pct th, .vk-pct td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); }
.vk-pct th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--gray-400)); font-weight: 700; }
.vk-pct td:last-child, .vk-pct th:last-child { text-align: right; }
.vk-pct tr.is-max td { color: rgb(var(--primary-400)); font-weight: 800; }
.vk-pct-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }

.vk-list > * + * { border-top: 1px solid rgba(0,0,0,.08); }
.dark .vk-list > * + * { border-top-color: rgba(255,255,255,.08); }
.vk-list-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 0; }
.vk-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.vk-code { border-radius: .35rem; padding: .05rem .35rem; background: rgba(127,127,127,.15); font-family: ui-monospace, monospace; font-size: .85em; }
.vk-note { font-size: .88rem; color: rgb(var(--gray-500)); line-height: 1.55; }
.dark .vk-note { color: rgb(var(--gray-400)); }
.vk-note + .vk-note { margin-top: .5rem; }

/* Aviso para instalar la app */
[x-cloak] { display: none !important; }
.vk-install { display: flex; gap: .9rem; align-items: center; margin: 0 0 1rem; padding: .9rem 1rem; border-radius: .9rem; border: 1px solid rgba(var(--primary-500), .4); background: rgba(var(--primary-500), .1); }
.vk-install-icon img { width: 44px; height: 44px; border-radius: 10px; display: block; }
.vk-install-body { flex: 1; min-width: 0; }
.vk-install-body .vk-muted { margin-top: .2rem; }
.vk-install-actions { display: flex; align-items: center; gap: .4rem; }
.vk-install .vk-btn { padding: .55rem 1.1rem; font-size: .9rem; }
.vk-install-close { background: none; border: 0; color: rgb(var(--gray-400)); font-size: 1rem; cursor: pointer; padding: .3rem; }

/* Metas: barra de progreso */
.vk-progress { height: 8px; border-radius: 999px; background: rgba(127,127,127,.2); overflow: hidden; margin-top: .6rem; }
.vk-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7fd3f5, #46b6e9, #1f6fc4); }
.vk-card-done { border-color: rgba(var(--success-500), .45) !important; }
.vk-card-done .vk-progress span { background: rgb(var(--success-500)); }

/* Logros */
.vk-badge { text-align: center; padding: 1.2rem .8rem; }
.vk-badge .vk-emoji { font-size: 2.4rem; line-height: 1; }
.vk-badge.is-locked { opacity: .38; filter: grayscale(1); }
.vk-badge .vk-title { margin-top: .6rem; }

/* Asistencia: últimas semanas */
.vk-weeks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.vk-day { aspect-ratio: 1; border-radius: 6px; background: rgba(127,127,127,.14); display: grid; place-items: center; font-size: .7rem; color: rgb(var(--gray-400)); }
.vk-day.is-on { background: rgb(var(--primary-500)); color: #04121b; font-weight: 800; }
.vk-day.is-today { outline: 2px solid rgb(var(--primary-400)); }
.vk-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: .68rem; text-align: center; color: rgb(var(--gray-500)); margin-bottom: 6px; }
.vk-hero-check { text-align: center; padding: 1.6rem 1rem; }
.vk-hero-check .vk-emoji { font-size: 3.4rem; }
.vk-hero-check h2 { font-size: 1.6rem; font-weight: 800; margin-top: .6rem; }

/* Ranking del WOD */
.vk-rank { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.vk-rank:last-child { border-bottom: 0; }
.vk-rank .pos { font-weight: 900; color: rgb(var(--gray-400)); text-align: center; }
.vk-rank.is-me { background: rgba(var(--primary-500), .1); border-radius: .5rem; padding-left: .4rem; padding-right: .4rem; }
.vk-rank .score { font-weight: 800; color: rgb(var(--primary-400)); font-variant-numeric: tabular-nums; }
.vk-rank:nth-child(1) .pos { color: #f5c542; }
.vk-rank:nth-child(2) .pos { color: #c9d1d6; }
.vk-rank:nth-child(3) .pos { color: #d08a52; }
.vk-two { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }

/* Calculadora de discos */
.vk-bar { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 1.4rem .5rem; overflow-x: auto; }
.vk-bar .sleeve { width: 38px; height: 10px; background: #9aa3a8; border-radius: 2px; flex: none; }
.vk-bar .shaft { width: 90px; height: 6px; background: #b8c0c4; flex: none; }
.vk-bar .collar { width: 8px; height: 22px; background: #6b7479; border-radius: 2px; flex: none; }
.vk-plate { width: 16px; border-radius: 3px; flex: none; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; writing-mode: vertical-rl; }
.vk-plates-list { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.vk-chip { border-radius: 999px; padding: .3rem .8rem; font-weight: 700; font-size: .85rem; background: rgba(127,127,127,.15); }

/* Cronómetro */
.vk-timer { text-align: center; }
.vk-timer .clock { font-family: 'Barlow Condensed', 'Manrope', sans-serif; font-weight: 800; font-size: clamp(4.5rem, 22vw, 11rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vk-timer .phase { font-size: 1rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--primary-400)); min-height: 1.5rem; }
.vk-timer .phase.is-rest { color: rgb(var(--warning-400)); }
.vk-timer .phase.is-done { color: rgb(var(--success-400)); }
.vk-timer .sub { color: rgb(var(--gray-400)); margin-top: .4rem; font-weight: 600; }
.vk-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.vk-mode { border-radius: .75rem; padding: .7rem .4rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-weight: 800; font-size: .85rem; cursor: pointer; color: inherit; }
.vk-mode.is-active { background: rgb(var(--primary-500)); color: #04121b; border-color: transparent; }
.vk-timer-inputs { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 1rem 0; }
.vk-timer-inputs label { font-size: .75rem; color: rgb(var(--gray-400)); display: grid; gap: .25rem; text-align: left; }
.vk-timer-inputs input { width: 6.5rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: inherit; padding: .5rem .6rem; font-size: 1rem; font-weight: 700; }
.vk-timer-buttons { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.vk-btn { border-radius: 999px; padding: .85rem 1.6rem; font-weight: 800; border: 0; cursor: pointer; font-size: 1rem; }
.vk-btn-primary { background: rgb(var(--primary-500)); color: #04121b; }
.vk-btn-ghost { background: rgba(255,255,255,.08); color: inherit; }
.vk-btn-round { background: rgb(var(--success-500)); color: #04121b; }
.vk-timer.is-full { position: fixed; inset: 0; z-index: 60; background: #0a0c0b; display: grid; place-content: center; padding: 1rem; }
.vk-timer.is-full .clock { font-size: clamp(6rem, 30vw, 22rem); }