/* ============================================================
   AMS Deportivo — Design System
   Paleta, tipografía, layout y componentes base.
   Nunca usar colores hardcodeados en views — siempre variables.
   ============================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   ÍNDICE DE SECCIONES  ·  site.css  (design-system vivo — CONGELADO, ver CLAUDE.md)
   Saltá con Ctrl-F sobre el nombre. Rangos de línea (aprox.): inicio–fin
   ────────────────────────────────────────────────────────────────────────────
   0054–0183  Tokens / variables (:root)
   0184–0216  Reset & base
   0217–0331  Shell layout (sidebar · main area)
   0332–0408  Top bar
   0409–0411  Content area
   0412–0441  Page header
   0442–0536  Cards (+ chart card header)
   0537–0679  Tablas — core (alineación · footer)
   0680–0978  Tablas — sticky columns / thead
   0979–1021  Match-table (data-densa)
   1022–1075  Tablas — sortable + responsive ≤768
   1076–1169  Buttons (+ radio cards)
   1170–1213  Pagination
   1214–1228  Badges
   1229–1254  Forms
   1255–1322  Alerts / toast
   1323–1513  Tooltips (premium · chart · auto-tip)
   1514–1535  Empty state + action links
   1536–1562  Stat cards
   1563–1665  Login layout
   1666–1788  Time picker (HH:MM custom)
   1789–1825  Favorite star button
   1826–1835  Sidebar mobile overlay
   1836–2359  Mobile form components (jugador) + responsive
   2360–2398  Overflow safety nets (mobile-jugador)
   2399–3006  Player dashboard mobile (Apple HIG)
   3007–3647  Premium redesign — staff dashboards (macOS HIG)
   3648–3906  Table premium (sticky-first · scroll shadow · col groups)
   3907–4784  Premium config screens (macOS HIG)
   4785–4805  MD chip (colores de microciclo)
   4806–5049  Session picker (.ams-sp-*)
   5050–5059  Sessions list premium (/sessions) + filtros
   5060–5171  Filter bar (sistema global)
   5172–5467  Date picker (.ams-dp-*, global)
   5468–5590  Microcycle picker (.mc-*, global)
   5591–5629  Single-select dropdown (.ams-ss-*, global)
   5630–5743  File input premium
   5744–5953  GPS imported files list
   5954–6044  Multi-select dropdown (.ms-select-*, global)
   6045–6471  Sessions list — cycle blocks / rows / table view
   6472–6764  Tablet responsive (768–991.98px)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --color-bg:              #F1F5F9;
    --color-surface:         #FFFFFF;
    --color-sidebar:         #0F172A;
    --color-sidebar-hover:   #1E293B;
    --color-sidebar-active:  #1E293B;
    --color-sidebar-text:    #94A3B8;
    --color-sidebar-text-active: #FFFFFF;
    --color-primary:         #3B82F6;
    --color-primary-dark:    #2563EB;
    --color-text:            #0F172A;
    --color-text-muted:      #64748B;
    --color-border:          #E2E8F0;
    --color-success:         #34C759;  /* Apple iOS systemGreen  */
    --color-warning:         #FFCC00;  /* Apple iOS systemYellow */
    --color-danger:          #FF3B30;  /* Apple iOS systemRed    */

    --sidebar-width:         240px;
    --topbar-height:         56px;
    --border-radius:         8px;
    --shadow-sm:             0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:             0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);

    /* ═══════════════════════════════════════════════════════════
       PREMIUM DESIGN TOKENS (macOS HIG)
       Documentación completa: docs/07-premium-design-system.md
       Skill: .claude/skills/ams-premium-redesign
       ═══════════════════════════════════════════════════════════ */

    /* Apple HIG semantic colors — light mode (los --color-* legacy
       siguen vigentes para no romper 42 vistas existentes). */
    --apple-red:    #FF3B30;
    --apple-yellow: #FFCC00;
    --apple-green:  #28CD41;
    --apple-blue:   #007AFF;
    --apple-orange: #FF9500;
    --apple-indigo: #5856D6;

    /* Fills semánticos para chips/pills de estado en metric cards */
    --apple-red-bg:    #FEE2E2;   /* red-100 */
    --apple-yellow-bg: #FEF3C7;   /* amber-100 */
    --apple-blue-bg:   #DBEAFE;   /* blue-100 */

    /* Foregrounds — contraste WCAG AA sobre el bg respectivo */
    --apple-red-fg:    #B91C1C;   /* red-700 */
    --apple-yellow-fg: #B45309;   /* amber-700 */
    --apple-blue-fg:   #1D4ED8;   /* blue-700 */

    /* Fills green/orange (complementan el sistema de chips) */
    --apple-green-bg:    #DCFCE7;   /* green-100  */
    --apple-green-fg:    #15803D;   /* green-700  */
    --apple-orange-bg:   #FFEDD5;   /* orange-100 */
    --apple-orange-fg:   #C2410C;   /* orange-700 */

    /* Chip colors — solid fill para value chips (WCAG AA garantizado) */
    --chip-ok:         #22C55E;   /* green-500  — 3.7:1 con blanco a fw-700 */
    --chip-ok-text:    #FFFFFF;
    --chip-alert:      #FBBF24;   /* amber-400  — usar texto oscuro */
    --chip-alert-text: #78350F;   /* amber-900 */
    --chip-risk:       #EF4444;   /* red-500    — 3.8:1 con blanco */
    --chip-risk-text:  #FFFFFF;

    /* Tokens canónicos de chip numérico — soft pastel + ink saturado.
       UNA sola fuente de verdad para TODOS los chips del sistema:
         .ams-chip            (wellness/RPE en PlayerDashboard, ACWR en LoadDashboard)
         .ams-cockpit-chip    (Home cockpit table)
         .ams-cockpit-mini-chip (lista flagged wellness)
         .delta-pill          (MatchAnalysis comparativa)
       Editar estos 7 tokens → todos los chips del sistema cambian al unísono.
       El patrón usa color-mix para que el background herede la saturación del
       color semántico (--color-success/warning/danger Apple iOS), dando un
       look "vívido" en lugar de pastel apagado. */
    --ok-soft:     color-mix(in srgb, var(--color-success) 18%, transparent);
    --ok-ink:      var(--color-success);
    --alert-soft:  color-mix(in srgb, var(--color-warning) 25%, transparent);
    --alert-ink:   #B45309; /* amber-700 — readable yellow ink (no se puede usar #FFCC00 puro como text por contraste WCAG) */
    --risk-soft:   color-mix(in srgb, var(--color-danger)  15%, transparent);
    --risk-ink:    var(--color-danger);
    --empty-soft:  rgba(118, 118, 128, 0.10);

    /* Borders para cards de estado */
    --apple-red-border:    #FCA5A5;   /* red-300 */
    --apple-yellow-border: #FCD34D;   /* amber-300 */
    --apple-green-border:  #86EFAC;   /* green-300 */

    /* Hairlines (sustituyen --color-border en componentes premium) */
    --hairline:        rgba(60, 60, 67, 0.12);
    --hairline-strong: rgba(60, 60, 67, 0.18);
    --hairline-soft:   rgba(60, 60, 67, 0.06);

    /* 4px grid (Apple usa 4 — Material usa 8) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
    --space-10: 40px; --space-12: 48px;

    /* Radii por componente */
    --radius-sm:  6px;
    --radius-md:  8px;   /* botones, inputs, cards small */
    --radius-lg:  12px;  /* cards principales */
    --radius-xl:  16px;  /* popovers, modales, sidebars */
    --radius-pill: 999px;

    /* Shadows multi-layer Apple — dual blur, no drop shadow */
    --shadow-card:       0 1px 2px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 1px 2px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.06);

    /* Easings y duraciones — cubic-bezier de Apple */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 100ms;
    --duration-base: 150ms;
    --duration-slow: 200ms;

    /* Tipografía — SF Pro nativo en macOS, Inter como fallback web */
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    --font-text:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* ═══════════════════════════════════════════════════════════
       RESPONSIVE TOKENS — defaults mobile/desktop
       Los overrides tablet (768–991.98px) viven en el bloque
       "TABLET RESPONSIVE" al final del archivo.
       ═══════════════════════════════════════════════════════════ */
    --touch-target:    44px;   /* mín. táctil — sube a 48px en tablet  */
    --table-row-h:     44px;   /* sube a 52px en tablet                */
    --form-grid-gap:   16px;   /* sube a 20px en tablet                */
    --content-padding: 16px;   /* sube a 24px en tablet                */
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; height: 100%; }

body {
    font-family: var(--font-text);
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Inter alternates → look más SF Pro: a/g/y/l de un solo trazo */
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Headings con tipografía display + tracking apretado tipo macOS */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
h3, h4, h5, h6 { letter-spacing: -0.01em; }

/* Utility para números tabulares (datos en tablas, KPIs, etc.) */
.ams-num, .num,
.ams-table-premium tbody td,
.ams-metric-card-value,
.ams-chip {
    font-variant-numeric: tabular-nums;
}

/* ── Shell Layout ───────────────────────────────────────────── */
.ams-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.ams-sidebar {
    width: var(--sidebar-width);
    background-color: var(--color-sidebar);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    overflow-y: auto;
    transition: transform 0.25s ease;
    /* Scrollbar fino visible (sutil, blanco translúcido sobre el sidebar dark).
       Reemplaza al `scrollbar-width: none` original — sin esto, en viewports
       con altura limitada (laptop 1366×768 o iPad portrait), los últimos
       items del nav admin (Posiciones, Métricas, etc.) quedaban ocultos sin
       indicador de scroll. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.ams-sidebar::-webkit-scrollbar { width: 6px; }
.ams-sidebar::-webkit-scrollbar-track { background: transparent; }
.ams-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

.ams-sidebar-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.ams-brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ams-brand-name:hover { color: #FFFFFF; text-decoration: none; }

.ams-brand-icon {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: white;
    flex-shrink: 0;
}

.ams-sidebar-section {
    padding: 16px 12px 4px;
}

.ams-sidebar-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    padding: 0 8px;
    margin-bottom: 4px;
}

.ams-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--color-sidebar-text);
    text-decoration: none;
    font-size: 0.855rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 1px;
}
.ams-nav-item:hover { background: var(--color-sidebar-hover); color: #FFFFFF; text-decoration: none; }
.ams-nav-item.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); }
.ams-nav-item.active .ams-nav-icon { color: var(--color-primary); }

.ams-nav-icon { font-size: 0.95rem; width: 18px; text-align: center; flex-shrink: 0; }

/* ── Main Area ──────────────────────────────────────────────── */
.ams-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    /* Flex children con contenido ancho (tablas de 18+ columnas, pre largos, etc.) necesitan
       min-width: 0 para que el flex parent NO se expanda junto al contenido. Sin esto,
       el overflow-x:auto del .ams-table-wrapper no activa scroll horizontal — el card crece
       tanto como la tabla y rompe el layout. Fix canónico de overflow en flexbox. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* .ams-content es flex child de .ams-main — misma lógica, mismo fix. */
.ams-content { min-width: 0; }

/* ── Top Bar ────────────────────────────────────────────────── */
.ams-topbar {
    height: var(--topbar-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ams-topbar-context {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    flex: 1;
}
.ams-topbar-workspace {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
.ams-topbar-sep {
    color: var(--color-border);
    font-size: 0.875rem;
    flex-shrink: 0;
}
.ams-topbar-detail {
    font-size: 0.825rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ams-topbar-club-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.ams-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.ams-topbar-user {
    font-size: 0.835rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ams-topbar-logout {
    color: var(--color-text-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.15s;
}
.ams-topbar-logout:hover { color: var(--color-danger); }

.ams-sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    margin-right: 8px;
}
.ams-sidebar-toggle:hover { background: var(--color-bg); color: var(--color-text); }

/* ── Content ────────────────────────────────────────────────── */
.ams-content { padding: 24px; flex: 1; }

/* ── Page Header ────────────────────────────────────────────── */
.ams-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.ams-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px 0;
    letter-spacing: -0.022em;
}

.ams-breadcrumb {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: 0;
}
.ams-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.ams-breadcrumb a:hover { color: var(--color-primary); }

/* ── Cards ──────────────────────────────────────────────────── */
.ams-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);  /* 12px Apple-style */
    border: 1px solid var(--hairline);  /* hairline rgba en vez de gris duro */
    box-shadow: var(--shadow-card);     /* multi-layer Apple */
    padding: 20px;
}

/* Título de sección dentro de .ams-card — icono azul + texto semibold.
   Usado en Microcycle, MatchAnalysis, SessionGpsAnalysis, Sessions y
   cualquier pantalla con tablas o charts dentro de cards. */
/* Sección heading — patrón único y obligatorio para títulos de cards/secciones
   con tabla u otro contenido debajo. SIEMPRE con margen 0 0 12px (12px de gap
   entre título y la tabla/contenido).

   Cuando el heading necesita compartir fila con un control/badge a la derecha,
   usar `<div class="ams-table-header-row">` (definido abajo) — NO usar `mb-3`
   de Bootstrap, que es `1rem = 15px` y rompe la consistencia de 12px. */
.section-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.section-heading i { color: var(--color-primary); }

/* Header row — patrón único para "title a la izquierda + control/badge a la
   derecha", colocado encima de una tabla, chart o card-body. Garantiza que
   el bottom del title quede a EXACTOS 12px de la tabla, sin importar la
   altura del control derecho (badge, dropdown, dona, etc).

   Reemplaza el viejo combo `d-flex justify-content-between align-items-end
   mb-3 flex-wrap gap-2`. NO usar más mb-3 en estos casos — `mb-3` = 1rem = 15px,
   no 12px, y rompe la consistencia con `.section-heading`.

   El heading interno debe ir con `style="margin:0;"` para evitar doble gap. */
.ams-table-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

/* ── Chart card header (eyebrow + título de métrica + meta) ─────────────────
   Patrón unificado para los charts hermanos de carga/evolución (PlayerDashboard
   "Carga Diaria" + LoadDashboard "Control de Cargas"). Layout:

       [eyebrow uppercase muted ("Carga diaria")]
       [TÍTULO 1rem 600 con métrica + unidad]      [meta 0.78rem muted]

   El eyebrow contextualiza qué tipo de chart es (categoría) y el título
   muestra la métrica concreta. Coherente con el lenguaje del cockpit del home. */
.ams-chart-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.ams-chart-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.ams-chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}
.ams-chart-title-unit {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-left: 4px;
}
.ams-chart-card-header-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 14px;
}

/* ── Tables ─────────────────────────────────────────────────── */
/*
 * table-layout: auto (browser default) → columnas se ajustan al contenido.
 * Las <th> ya tienen white-space: nowrap, lo que ancla los headers a su
 * ancho mínimo y deja que las columnas de datos ocupen el espacio restante.
 */
/* La tabla nunca rebalsa el contenedor: usa todo el ancho disponible y
   reparte columnas según contenido. Tablas data-densas (.match-table) tienen
   sus propios overrides para forzar fit en pantallas chicas. */
.ams-table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 0.855rem; table-layout: auto; }

/* TODAS las celdas (th + td) centradas, sin excepción.
   !important para vencer:
     - styles inline (style="text-align: ...")
     - Bootstrap (.text-start / .text-end / .text-center)
     - reglas de clases más específicas (.match-table, etc.) */
.ams-table th,
.ams-table td {
    text-align: center !important;
}

/* Los d-flex dentro de celdas (típicamente foto + nombre de jugador) también
   deben quedar centrados como bloque inline, para matchear el text-align. */
.ams-table td > .d-flex,
.ams-table th > .d-flex {
    justify-content: center;
}

/* ── Alineación global de columnas especiales ──────────────────────────────
   Reglas opt-in: agregar la clase a cada <th> y <td> de la columna.

   .col-player  → nombre de jugador / entidad principal: siempre a la izquierda.
   .col-actions → acciones (editar, borrar, ver): siempre a la derecha.

   Ambas usan !important para vencer el text-align:center del bloque de arriba
   y cualquier Bootstrap utility (.text-start, .text-end) o inline style. */
.ams-table th.col-player,
.ams-table td.col-player {
    text-align: left !important;
}
/* Los d-flex de foto+nombre deben alinearse al inicio también. */
.ams-table td.col-player > .d-flex {
    justify-content: flex-start;
}

.ams-table th.col-actions,
.ams-table td.col-actions {
    text-align: right !important;
}

.ams-table th {
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    /* Header celeste tenue (Tailwind blue-50) — coherente en todo el sistema. */
    background: #EFF6FF;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.ams-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
    white-space: nowrap;
}

.ams-table tbody tr:last-child td { border-bottom: none; }
.ams-table tbody tr:hover td { background-color: #F8FAFC; }

/* ── Footer (tfoot) — patrón premium ──────────────────────────────────────
   Sin background diferenciado (queda nivelado con el body), números en bold.
   La celda de label ("Promedio equipo", etc.) usa .tfoot-label: peso 600,
   color muted, alineada a la izquierda. Colspan = solo las columnas sticky. */
.ams-table tfoot tr { background: var(--color-surface); }
.ams-table tfoot td { font-weight: 700; }
.ams-table tfoot td.tfoot-label {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-align: left !important;
}

/*
 * Clases de control de ancho. Alineación SIEMPRE a la izquierda (regla global arriba).
 *
 * .ams-col-shrink → columna se encoge al mínimo (acciones, badges).
 * .ams-col-expand → columna principal: permite wrap del contenido en varias líneas.
 * .ams-truncate   → recorta texto largo con "…" y tooltip al hover.
 */
.ams-table th.ams-col-shrink,
.ams-table td.ams-col-shrink {
    width: 1%;
    white-space: nowrap;
}

.ams-table td.ams-col-expand { white-space: normal; }

/* num / ams-col-center: legacy. Mantenemos las clases para no romper
   markup existente — alineación forzada a izquierda por la regla global. */
.ams-table th.num, .ams-table td.num,
.ams-table th.ams-col-center, .ams-table td.ams-col-center {
    white-space: nowrap;
}

.ams-table td.ams-truncate {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

/* Columnas de métricas GPS en listados densos (muchas columnas).
   Padding reducido y fuente monoespaciada para alinear números.
   Uso: th.gps-col en header; td.gps-cell en data. */
.ams-table th.gps-col,
.ams-table td.gps-cell {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.78rem;
}
.ams-table td.gps-cell {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    text-align: right !important;
}
.ams-table th.gps-col {
    text-align: right !important;
}
.ams-table th.gps-col .gps-col-unit {
    display: block;
    font-size: 0.65rem;
    opacity: 0.6;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Sticky first column / thead (frozen columns estilo Excel) ─────────────
   Para tablas con muchas columnas GPS que requieren scroll horizontal:
   la primera columna (jugador) y el thead quedan visibles al scrollear.
   Opt-in: agregar la clase `ams-table-sticky-first` al <table>. El wrapper
   debe tener overflow-x:auto (o style inline equivalente) para que el sticky
   funcione — el scroll vive en el contenedor scrollable más cercano.

   Importante: sticky requiere que el contenedor scrollable NO tenga
   overflow:hidden en NINGUN eje. El wrapper genérico ams-table-wrapper tiene
   overflow:hidden por default — las vistas que aplican sticky deben usar
   un wrapper con overflow-x:auto explícito. */
/* ── Thead sticky: aplica a TODAS las .ams-table dentro de un wrapper ──────
   El header queda pegado al top del wrapper al scrollear vertical interno.
   Selector `>` exige que la tabla sea hijo directo del wrapper (excluye
   tablas como .compliance-table que se montan dentro). */
.ams-table-wrapper > .ams-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    /* Repetimos el background aquí — sin esto, las filas que pasan por debajo
       del thead sticky se ven a través porque el sticky no tiene bg propio. */
    background: #EFF6FF;
}

/* Scroll shadow vertical — al scrollear vertical interno (JS añade .is-scrolled-y
   al wrapper), el thead sticky proyecta una sombra hacia abajo, indicando que
   hay contenido detrás. */
.ams-table-wrapper > .ams-table thead th::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 8px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.07), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}
.ams-table-wrapper.is-scrolled-y > .ams-table thead th::before {
    opacity: 1;
}

/* ── Sticky-first column (opt-in con .ams-table-sticky-first) ─────────────
   Adicional al thead sticky de arriba, fija la PRIMERA columna al scrollear
   horizontal. Útil en tablas con muchas columnas de métricas GPS.

   IMPORTANTE: el selector NO usa `th:first-child` plano, porque en tablas
   con thead multi-row (rowspan=2 en la primera columna + colspan en grupos),
   el `:first-child` de la SEGUNDA tr del thead también haría match — el primer
   sub-header (ej. "Partido" del primer grupo de métricas) se volvería sticky
   por accidente, pegado a la columna ancla. El selector específico apunta
   solo a la primera tr del thead + cualquier tr del tbody/tfoot. */
/* tbody/tfoot sticky-first: bg surface (blanco) — para que las filas pasen por
   debajo del sticky sin que se vea a través. */
.ams-table-sticky-first > tbody > tr > th:first-child,
.ams-table-sticky-first > tbody > tr > td:first-child,
.ams-table-sticky-first > tfoot > tr > th:first-child,
.ams-table-sticky-first > tfoot > tr > td:first-child {
    position: sticky;
    left: 0;
    background: var(--color-surface);
    z-index: 2;
    /* Sombra sutil del lado derecho — indica visualmente que la columna está
       flotando sobre el contenido scrolleado debajo. */
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
/* Header sticky-first: bg #EFF6FF (mismo que el resto del thead). Antes el
   sticky base aplicaba bg surface (blanco) y el thead bg #EFF6FF ganaba por
   especificidad — al hacer el selector específico, sticky pasó a ganar y el
   header quedó blanco en vez de azul claro. Restauramos el bg correcto aquí.
   z-index: 3 porque esta esquina top-left tiene que estar arriba del thead
   sticky vertical (que es z-index: 1) y del sticky-first column (z-index: 2). */
.ams-table-sticky-first > thead > tr:first-child > th:first-child {
    position: sticky;
    left: 0;
    background: #EFF6FF;
    z-index: 3;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
/* Hover de fila: el bg de hover global aplicaría a todas las celdas EXCEPTO
   la primera (que tiene su propio bg sticky). Sobreescribir para que coincida. */
.ams-table-sticky-first tbody tr:hover td:first-child { background-color: #F8FAFC; }

/* Scroll shadow — aparece al scrollear horizontal (JS añade .is-scrolled al wrapper).
   El ::after vive pegado al borde derecho de la primera columna sticky y se disuelve
   hacia la derecha, indicando visualmente que hay contenido detrás.
   Mismos selectores específicos que las reglas de arriba (evita que la segunda tr
   del thead con rowspan reciba el shadow por error). */
.ams-table-sticky-first > thead > tr:first-child > th:first-child::after,
.ams-table-sticky-first > tbody > tr > th:first-child::after,
.ams-table-sticky-first > tbody > tr > td:first-child::after,
.ams-table-sticky-first > tfoot > tr > th:first-child::after,
.ams-table-sticky-first > tfoot > tr > td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.07), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}
.ams-table-wrapper.is-scrolled .ams-table-sticky-first > thead > tr:first-child > th:first-child::after,
.ams-table-wrapper.is-scrolled .ams-table-sticky-first > tbody > tr > th:first-child::after,
.ams-table-wrapper.is-scrolled .ams-table-sticky-first > tbody > tr > td:first-child::after,
.ams-table-wrapper.is-scrolled .ams-table-sticky-first > tfoot > tr > th:first-child::after,
.ams-table-wrapper.is-scrolled .ams-table-sticky-first > tfoot > tr > td:first-child::after {
    opacity: 1;
}

/* Mobile: la primera columna ocupa menos espacio para dejar lugar al scroll
   de las métricas. El contenido se trunca con ellipsis si es muy largo. */
@media (max-width: 991.98px) {
    .ams-table-sticky-first > thead > tr:first-child > th:first-child,
    .ams-table-sticky-first > tbody > tr > th:first-child,
    .ams-table-sticky-first > tbody > tr > td:first-child,
    .ams-table-sticky-first > tfoot > tr > th:first-child,
    .ams-table-sticky-first > tfoot > tr > td:first-child {
        max-width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Sticky multi-column (2 ó 3 columnas) ──────────────────────────────────
   Variantes para tablas donde la identidad de fila vive en MÁS de una columna
   (ej: Fecha + Sesión, o Ciclo + MD + Ses). La última columna sticky lleva
   la sombra del edge — las anteriores no, así no se ve un gradient escalonado
   feo entre columnas pegadas.

   Uso:
   <table class="ams-table ams-table-sticky-2" style="--sticky-col1-width:70px;">
   <table class="ams-table ams-table-sticky-3" style="--sticky-col1-width:80px;--sticky-col2-width:80px;">

   Las columnas sticky deben tener width FIJO (`width:Xpx;min-width:Xpx`) en
   sus celdas <th>/<td> para que los offsets calzen — si el browser puede
   expandir la columna, las siguientes quedan desalineadas. */

/* Variante 2 columnas fijas */
.ams-table-sticky-2 thead th { position: sticky; top: 0; background: #EFF6FF; z-index: 1; }
/* thead — celeste, sticky col 1 y col 2 */
.ams-table-sticky-2 thead th:nth-child(1) {
    position: sticky; left: 0; background: #EFF6FF; z-index: 3;
}
.ams-table-sticky-2 thead th:nth-child(2) {
    position: sticky; left: var(--sticky-col1-width, 80px); background: #EFF6FF; z-index: 3;
}
/* tbody + tfoot — blanco, sticky col 1 y col 2 */
.ams-table-sticky-2 tbody td:nth-child(1),
.ams-table-sticky-2 tfoot td:nth-child(1) {
    position: sticky; left: 0; background: var(--color-surface); z-index: 2;
}
.ams-table-sticky-2 tbody td:nth-child(2),
.ams-table-sticky-2 tfoot td:nth-child(2) {
    position: sticky; left: var(--sticky-col1-width, 80px); background: var(--color-surface); z-index: 2;
}
.ams-table-sticky-2 tbody tr:hover td:nth-child(1),
.ams-table-sticky-2 tbody tr:hover td:nth-child(2) { background-color: #F8FAFC; }

/* Scroll shadow horizontal — gradient pegado al borde derecho de la última col
   sticky, gated por .is-scrolled (mismo patrón que sticky-first). */
.ams-table-sticky-2 thead th:nth-child(2)::after,
.ams-table-sticky-2 tbody td:nth-child(2)::after,
.ams-table-sticky-2 tfoot td:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.07), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}
.ams-table-wrapper.is-scrolled .ams-table-sticky-2 thead th:nth-child(2)::after,
.ams-table-wrapper.is-scrolled .ams-table-sticky-2 tbody td:nth-child(2)::after,
.ams-table-wrapper.is-scrolled .ams-table-sticky-2 tfoot td:nth-child(2)::after {
    opacity: 1;
}

/* Footer con colspan que mergea las cols sticky: el `<td>` que sigue al merge
   cae como `:nth-child(2)` y heredaría el sticky de la col 2 (left: col1-width),
   solapándose sobre el texto del merge. Desactivamos su sticky y le sacamos
   también el ::after — la sombra del scroll va en la celda colspan. */
.ams-table-sticky-2 tfoot td[colspan="2"]:first-child + td {
    position: static;
    left: auto;
}
.ams-table-sticky-2 tfoot td[colspan="2"]:first-child + td::after {
    display: none;
}
.ams-table-sticky-2 tfoot td[colspan="2"]:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.07), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}
.ams-table-wrapper.is-scrolled .ams-table-sticky-2 tfoot td[colspan="2"]:first-child::after {
    opacity: 1;
}

/* Variante 3 columnas fijas */
.ams-table-sticky-3 thead th { position: sticky; top: 0; background: #EFF6FF; z-index: 1; }
/* thead — celeste, sticky cols 1, 2, 3 */
.ams-table-sticky-3 thead th:nth-child(1) {
    position: sticky; left: 0; background: #EFF6FF; z-index: 3;
}
.ams-table-sticky-3 thead th:nth-child(2) {
    position: sticky; left: var(--sticky-col1-width, 80px); background: #EFF6FF; z-index: 3;
}
.ams-table-sticky-3 thead th:nth-child(3) {
    position: sticky;
    left: calc(var(--sticky-col1-width, 80px) + var(--sticky-col2-width, 80px));
    background: #EFF6FF; z-index: 3;
}
/* tbody + tfoot — blanco, sticky cols 1, 2, 3 */
.ams-table-sticky-3 tbody td:nth-child(1),
.ams-table-sticky-3 tfoot td:nth-child(1) {
    position: sticky; left: 0; background: var(--color-surface); z-index: 2;
}
.ams-table-sticky-3 tbody td:nth-child(2),
.ams-table-sticky-3 tfoot td:nth-child(2) {
    position: sticky; left: var(--sticky-col1-width, 80px); background: var(--color-surface); z-index: 2;
}
.ams-table-sticky-3 tbody td:nth-child(3),
.ams-table-sticky-3 tfoot td:nth-child(3) {
    position: sticky;
    left: calc(var(--sticky-col1-width, 80px) + var(--sticky-col2-width, 80px));
    background: var(--color-surface); z-index: 2;
}
.ams-table-sticky-3 tbody tr:hover td:nth-child(1),
.ams-table-sticky-3 tbody tr:hover td:nth-child(2),
.ams-table-sticky-3 tbody tr:hover td:nth-child(3) { background-color: #F8FAFC; }

/* Scroll shadow horizontal — gradient en el borde derecho de la última col
   sticky (col 3), gated por .is-scrolled. */
.ams-table-sticky-3 thead th:nth-child(3)::after,
.ams-table-sticky-3 tbody td:nth-child(3)::after,
.ams-table-sticky-3 tfoot td:nth-child(3)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.07), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}
.ams-table-wrapper.is-scrolled .ams-table-sticky-3 thead th:nth-child(3)::after,
.ams-table-wrapper.is-scrolled .ams-table-sticky-3 tbody td:nth-child(3)::after,
.ams-table-wrapper.is-scrolled .ams-table-sticky-3 tfoot td:nth-child(3)::after {
    opacity: 1;
}

/* Footer con colspan que mergea las 3 cols sticky: placeholders no sticky,
   sombra al final del merge. */
.ams-table-sticky-3 tfoot td[colspan="3"]:first-child + td,
.ams-table-sticky-3 tfoot td[colspan="3"]:first-child + td + td {
    position: static;
    left: auto;
}
.ams-table-sticky-3 tfoot td[colspan="3"]:first-child + td::after,
.ams-table-sticky-3 tfoot td[colspan="3"]:first-child + td + td::after {
    display: none;
}
.ams-table-sticky-3 tfoot td[colspan="3"]:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.07), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}
.ams-table-wrapper.is-scrolled .ams-table-sticky-3 tfoot td[colspan="3"]:first-child::after {
    opacity: 1;
}
/* sticky-3 con colspan=2 (mergea cols 1 y 2, deja col 3 separada) */
.ams-table-sticky-3 tfoot td[colspan="2"]:first-child + td {
    position: static;
    left: auto;
}

/* ── Match-table responsive (data-densa: 8-12 columnas de métricas) ────────────
   Estas tablas viven en el módulo GPS (Análisis de Partido, Microciclo, etc).
   Estrategia: NUNCA scroll horizontal — ocupar 100% del ancho del card,
   font chico, padding mínimo, headers que envuelven en varias líneas. */
.ams-table-wrapper { width: 100%; overflow: hidden; }
.match-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    font-size: 12px !important;
}
.match-table th,
.match-table td {
    padding: 6px 6px !important;
    white-space: normal !important;       /* permite wrap en cualquier celda */
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: middle;
}
.match-table thead th {
    font-size: 10.5px !important;
    line-height: 1.2;
    letter-spacing: 0.02em !important;
}
/* primera columna (jugador) — ancho reducido, el nombre envuelve si hace falta */
.match-table thead th:first-child,
.match-table tbody td:first-child,
.match-table tfoot td:first-child { width: 10%; min-width: 80px; }

.match-table .player-cell { gap: 6px !important; min-width: 0 !important; flex-wrap: nowrap; }
.match-table .player-cell .name { white-space: normal !important; line-height: 1.15; font-size: 12px; }
.match-table .player-cell .avatar { width: 22px !important; height: 22px !important; }

@media (max-width: 1024px) {
    .match-table { font-size: 11px !important; }
    .match-table th, .match-table td { padding: 5px 4px !important; }
    .match-table .player-cell .avatar { display: none; }
}
@media (max-width: 640px) {
    .match-table { font-size: 10.5px !important; }
    .match-table th, .match-table td { padding: 4px 3px !important; }
}

/* ── Sortable columns ─────────────────────────────────────────────────────── */
.ams-table thead th.ams-sortable {
    cursor: pointer;
    user-select: none;
}
.ams-table thead th.ams-sortable:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
}
.ams-table thead th .ams-sort-icon {
    display: inline-block;
    margin-left: 5px;
    opacity: 0.3;
    font-size: 9px;
    vertical-align: middle;
    line-height: 1;
    transition: opacity .15s;
}
.ams-table thead th.ams-sortable:hover .ams-sort-icon { opacity: 0.6; }
.ams-table thead th.ams-sort-asc  .ams-sort-icon,
.ams-table thead th.ams-sort-desc .ams-sort-icon {
    opacity: 1;
    color: var(--color-primary);
}

/*
 * El wrapper hace scroll horizontal Y vertical en pantallas chicas en lugar de
 * cortar el contenido. border-radius se aplica sobre el wrapper mismo. La
 * altura limitada permite que el sticky `thead th { top: 0 }` pegue al borde
 * superior del wrapper en lugar de scrollear con la página.
 */
.ams-table-wrapper {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 70vh;
}
@media (max-width: 991.98px) {
    .ams-table-wrapper { max-height: 60vh; }
}

/* ── Responsive: pantallas ≤ 768px ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .ams-table { font-size: 0.8rem; }
    .ams-table th { padding: 8px 10px; font-size: 0.68rem; }
    .ams-table td { padding: 9px 10px; }
    .ams-table td.ams-truncate { max-width: 160px; }
    /* Padding interno del sort-link coherente con el TH mobile */
    .ams-sort-link { padding: 8px 10px; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Diseño canónico premium ("compact"). Métricas exactas:
       height: 30px · padding: 5px 10px · font-size: 0.78rem · line-height: 1.4
       border-radius: 6px · font-weight: 500 · gap: 6px (icono ↔ texto)
   - Primary: background var(--color-primary), color blanco, sin borde.
   - Secondary: background var(--color-surface), border 1px var(--color-border),
     color var(--color-text).
   Esta es la base. La clase modificadora `.btn-ams-sm` antiguamente forzaba
   este tamaño con !important; ahora es redundante (queda como no-op para
   retrocompat). Para tamaños mayores especiales (ej. landing/login CTA),
   sumar override puntual con specificity > base. */
/* .btn-ams-* (primary/secondary/danger + hover/active/focus-visible) migrados a
   Tailwind @layer components en Styles/tailwind.input.css (Fase 1, reescritos 1:1).
   Los overrides contextuales/responsive de botones (filter-bar, form-actions,
   player-mobile, .btn-ams-secondary.is-danger) permanecen más abajo en este archivo. */

/* ── Radio cards (para selectores de variante) ──────────────── */
.ams-radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 640px) {
    .ams-radio-group { grid-template-columns: 1fr; }
}
.ams-radio-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin: 0;
}
.ams-radio-card:hover {
    border-color: var(--color-primary);
    background: var(--color-bg);
}
.ams-radio-card input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.ams-radio-card:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.06);
}
.ams-radio-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text);
    margin-bottom: 2px;
}
.ams-radio-desc {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* ── Sortable table headers ─────────────────────────────────────
   El link de sort cubre TODA la celda del <th>. Enfoque limpio (sin
   tricks de margin negativo): el <th> que contiene un sort-link pierde
   su padding y el padding vive dentro del <a>, que pasa a ser block-level.
   Así clickear en cualquier píxel de la celda navega al mismo URL. */
.ams-table th:has(> .ams-sort-link) { padding: 0; }

.ams-sort-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: row;       /* texto + ícono SIEMPRE en una fila */
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 14px;
    font-weight: inherit;
    line-height: 1.2;          /* evita altura extra por line-height default */
    white-space: nowrap;       /* nunca wrappear texto e ícono */
    cursor: pointer;
    transition: color 0.15s;
}
.ams-sort-link:hover { color: var(--color-primary); text-decoration: none; }
.ams-sort-link i {
    font-size: 0.75rem;
    line-height: 1;            /* el icono no aporta altura vertical extra */
    color: var(--color-text-muted);
    flex-shrink: 0;
    display: inline-block;     /* Bootstrap Icons son pseudo-elementos: fijamos el box */
    vertical-align: middle;
}
.ams-sort-link:hover i { color: var(--color-primary); }

/* ── Pagination ─────────────────────────────────────────────── */
.ams-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}
.ams-page-link:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}
.ams-page-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
    cursor: default;
}
.ams-page-link.disabled {
    color: var(--color-text-muted);
    background: var(--color-bg);
    cursor: not-allowed;
    opacity: 0.6;
}
.ams-page-ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

/* ── Badges ─────────────────────────────────────────────────── */
.ams-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 600;
}
.ams-badge-success { background: var(--apple-green-bg);  color: var(--apple-green-fg); }
.ams-badge-warning { background: var(--apple-yellow-bg); color: var(--apple-yellow-fg); }
.ams-badge-danger  { background: var(--apple-red-bg);    color: var(--apple-red-fg); }
.ams-badge-neutral { background: var(--color-bg);        color: var(--color-text-muted); }
.ams-badge-primary { background: var(--apple-blue-bg);   color: var(--apple-blue-fg); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 5px;
    display: block;
}

.form-control, .form-select {
    font-size: 0.855rem;
    border-color: var(--color-border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    outline: none;
}
.form-control::placeholder { color: #CBD5E1; }
.invalid-feedback { font-size: 0.78rem; }

/* ── Alerts ─────────────────────────────────────────────────── */
/* ── Toast notifications ─────────────────────────────────────────────────── */
@keyframes toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0);    max-height: 80px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(24px); max-height: 0;    margin-bottom: -10px; }
}

.ams-toast-container {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    width: calc(100vw - 48px);
    pointer-events: none;
}

.ams-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 0.855rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
    border-left: 4px solid transparent;
    background: var(--color-surface);
    pointer-events: all;
    animation: toast-in .25s ease forwards;
    overflow: hidden;
}
.ams-toast.toast-hiding {
    animation: toast-out .3s ease forwards;
}
.ams-toast i.toast-icon { font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.ams-toast .toast-msg   { flex: 1; line-height: 1.45; }

.ams-toast-success { border-left-color: var(--color-success); color: var(--apple-green-fg); }
.ams-toast-success i.toast-icon { color: var(--color-success); }

.ams-toast-error   { border-left-color: var(--color-danger); color: var(--apple-red-fg); }
.ams-toast-error i.toast-icon { color: var(--color-danger); }

.ams-toast-info    { border-left-color: var(--color-primary); color: var(--apple-blue-fg); }
.ams-toast-info i.toast-icon { color: var(--color-primary); }

.ams-toast-dismiss {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
}
.ams-toast-dismiss:hover { opacity: 1; }

/* ── Tooltip premium (Dark slate) ───────────────────────────────────────────
   Componente reusable. Estructura mínima:
     <span class="ams-tooltip">
         <span class="ams-tooltip-trigger">texto disparador</span>
         <span class="ams-tooltip-content" role="tooltip">contenido del tip</span>
     </span>
   CSS-only para hover/focus (desktop + teclado). Para mobile, sumar la clase
   `is-open` via JS al hacer tap (ver site.js). z-index 1080 = por encima de
   toasts (1055) y modales Bootstrap (1050), debajo del overlay del sidebar
   mobile (1100). NO usar `overflow: hidden` en contenedores ancestros — corta
   el tooltip cuando sobresale del header de la tabla. */
.ams-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ams-tooltip-trigger {
    cursor: help;
    border-bottom: 1px dotted transparent;
    transition: border-color 150ms;
}
.ams-tooltip:hover .ams-tooltip-trigger,
.ams-tooltip:focus-within .ams-tooltip-trigger {
    border-bottom-color: currentColor;
}
/* El content original NUNCA se muestra directamente: el JS lo clona al
   <body> con position: fixed para escapar de cualquier stacking context
   de ancestor (un <th> con position:sticky + z-index crea un stacking
   context que atrapa incluso a hijos con position: fixed). El clon en
   body (`.ams-tt-portal`) se posiciona con left/top inline al hover. */
.ams-tooltip-content {
    display: none;
}
.ams-tt-portal {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 150ms ease, transform 150ms ease;
    min-width: 200px;
    max-width: 320px;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 500;
    white-space: normal;
    /* Estilo Dark slate — alto contraste, premium Linear/Stripe. */
    background: var(--color-text);
    color: white;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 14px rgba(15, 23, 42, .22),
        0 1px 3px rgba(15, 23, 42, .12);
}
.ams-tt-portal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ams-tt-portal::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--tt-caret-left, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text);
}
.ams-tt-portal.is-bottom::after {
    top: auto; bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--color-text);
}
/* `.is-simple` aplica también dentro del portal (el clon mantiene la clase). */
.ams-tt-portal.is-simple { min-width: 120px; max-width: 260px; }

/* Sub-componentes internos: title + rows (para tooltips ricos como umbrales). */
.ams-tt-title {
    display: block;
    font-weight: 700;
    font-size: 0.78rem;
    margin: 0 0 5px;
}
/* ── Tooltip HTML de gráficos Chart.js (.ams-chart-tt) ───────────────────────
   Render externo desde ams-charts.js (makeTooltip → chartTooltipExternal). Mismo
   look dark-slate que .ams-tt-portal pero flota ARRIBA del gráfico (position:
   fixed), así nunca tapa las barras. Reusa .ams-tt-title para el encabezado. */
.ams-chart-tt {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
    background: var(--color-text);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .22), 0 1px 3px rgba(15, 23, 42, .12);
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 500;
    white-space: nowrap;
}
.ams-chart-tt .ams-chart-tt-row { color: rgba(255, 255, 255, .92); }
.ams-chart-tt::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--actt-caret, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text);
}
.ams-tooltip-content.is-simple .ams-tt-title,
.ams-tt-portal.is-simple .ams-tt-title {
    margin: 0; padding: 0;
    border-bottom: none;
    font-size: 0.75rem; font-weight: 500;
}
.ams-tt-rows {
    display: flex; flex-direction: column;
    gap: 4px;
}
.ams-tt-row {
    display: flex; align-items: center; gap: 8px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .92);
}
.ams-tt-row .ams-tt-dot {
    width: 9px; height: 9px; border-radius: 50%;
    flex-shrink: 0;
}
.ams-tt-row .ams-tt-dot.is-ok    { background: var(--chip-ok); }
.ams-tt-row .ams-tt-dot.is-alert { background: var(--chip-alert); }
.ams-tt-row .ams-tt-dot.is-risk  { background: var(--chip-risk); }
.ams-tt-row .ams-tt-pct { font-weight: 600; }

/* Modificador `.ams-tooltip.is-bottom` lo lee el JS para posicionar el
   portal debajo del trigger y voltear el caret hacia arriba (manejado en
   `.ams-tt-portal.is-bottom::after`). */

/* ── Auto-tip JS: tooltip premium para headers de tabla truncados ─────────
   Generado dinámicamente por site.js cuando un <th> tiene scrollWidth >
   clientWidth. Usa position: fixed para evitar el clipping del overflow del
   wrapper de tabla. El caret-left se calcula en JS para apuntar al centro
   real del target (no al centro del tip cuando se clampeó por viewport). */
.ams-auto-tip {
    position: fixed;
    z-index: 1090;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 120ms ease, transform 120ms ease;
    /* Mismo look que .ams-tooltip-content Dark slate. */
    background: var(--color-text);
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 14px rgba(15, 23, 42, .22),
        0 1px 3px rgba(15, 23, 42, .12);
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 500;
    max-width: 320px;
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    /* El left se setea inline en JS. */
}
.ams-auto-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ams-auto-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--caret-left, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text);
}
.ams-auto-tip.is-bottom::after {
    top: auto; bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--color-text);
}

/* ── Empty State ────────────────────────────────────────────── */
.ams-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-muted);
}
.ams-empty-state-icon  { font-size: 2.25rem; margin-bottom: 12px; opacity: 0.35; display: block; }
.ams-empty-state-title { font-size: 0.9rem; font-weight: 600; color: var(--color-text); margin-bottom: 5px; }
.ams-empty-state-text  { font-size: 0.82rem; margin-bottom: 20px; }

/* ── Action links (table row actions) ──────────────────────── */
.ams-action-link {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.ams-action-link:hover       { background: var(--color-bg); color: var(--color-primary); }
.ams-action-link.danger:hover { background: #FEE2E2; color: var(--color-danger); }

/* ── Stat Cards ─────────────────────────────────────────────── */
.ams-stat {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}
.ams-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.ams-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
}

/* ── Daily dashboard: premium table surface ───────────────────── */

/* ── Login Layout (sin sidebar) ─────────────────────────────── */
.ams-login-body {
    background: var(--color-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ams-login-card {
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: 40px;
    width: 100%;
    max-width: 380px;
}
.ams-login-wrap { width: 100%; max-width: 420px; padding: 16px; }
.ams-login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}
.ams-login-brand i {
    font-size: 1.4rem;
    color: var(--color-primary);
}
.ams-login-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 24px;
}
.ams-login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: -8px 0 20px;
    padding: 12px 14px;
    border: 1px solid rgba(239, 68, 68, 0.24);
    border-radius: 8px;
    background: #FEF2F2;
    color: #991B1B;
}
.ams-login-error > .bi {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1rem;
}
.ams-login-error-copy {
    min-width: 0;
    flex: 1;
}
.ams-login-error-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
}
.ams-login-error-text {
    font-size: 0.84rem;
    line-height: 1.35;
}
.ams-form-group { margin-bottom: 16px; }
.ams-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 6px;
}
/* .ams-input (base + textarea + focus + aria-invalid) migrado a Tailwind
   @layer components en Styles/tailwind.input.css (Fase 1, reescrito 1:1).
   Los overrides responsive (min 44px mobile, 16px iOS) y las variantes
   (-locked, -pro, -group-pro, -suffix, -inline) permanecen en este archivo. */
@media (max-width: 575.98px) {
    .ams-login-body {
        align-items: flex-start;
        padding: 24px 0;
    }
    .ams-login-wrap {
        max-width: none;
        padding: 12px;
    }
    .ams-login-card {
        padding: 24px 18px;
        border-radius: 10px;
    }
    .ams-login-brand {
        margin-bottom: 18px;
    }
    .ams-login-title {
        margin-bottom: 18px;
    }
    .ams-login-error {
        padding: 11px 12px;
        margin-bottom: 18px;
    }
}
/* ── Selector de horario custom (HH + MM) ─────────────────────
   Reemplaza al <input type="time"> nativo, que en Windows/Chrome tiene
   un spinner con bugs al scroll y visualmente no combina con el resto. */
.ams-time-input {
    display: inline-grid;
    grid-template-columns: 1fr 30px;
    /* width: 100% — respeta el ancho del padre (ej. .ams-form-field.is-time
       de 104px). Antes era 50% heredado de cuando vivía en col-md-4 Bootstrap
       de ~400px, lo que con el nuevo sistema de form-field encerraba el
       contenido en 52px y se cortaba "HH:MM" a "H:M". */
    width: 100%;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
    vertical-align: middle;
    box-sizing: border-box;
}
.ams-time-input:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    outline: none;
}
.ams-time-input.is-complete {
    border-color: var(--color-border);
}
.ams-time-input.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
.ams-time-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 12px;
}
.ams-time-input .ams-time-part {
    border: none;
    width: 100%;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    background: transparent;
    color: var(--color-text);
    text-align: center;
    outline: none;
    transition: background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.ams-time-input .ams-time-part:focus {
    background: transparent;
    color: var(--color-text);
    box-shadow: none;
}
.ams-time-input .ams-time-part::placeholder {
    color: #CBD5E1;
    opacity: 1;
}
.ams-time-input .ams-time-sep {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: var(--color-text-muted);
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 0.85rem;
    user-select: none;
}
.ams-time-stepper {
    display: grid;
    grid-template-rows: 1fr 1fr;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface);
}
.ams-time-stepper button {
    position: relative;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, color 0.15s;
}
.ams-time-stepper button::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 2.5px solid transparent;
    border-right: 2.5px solid transparent;
}
.ams-time-stepper button:first-child::before {
    border-bottom: 3.5px solid currentColor;
}
.ams-time-stepper button + button::before {
    border-top: 3.5px solid currentColor;
}
.ams-time-stepper button + button {
    border-top: 1px solid var(--color-border);
}
.ams-time-stepper button:hover {
    background: var(--color-bg);
    color: var(--color-text);
}
.ams-time-stepper button:active {
    background: var(--color-bg);
}
@media (max-width: 768px) {
    .ams-time-input {
        width: 100%;
    }
}

/* ── Botón de favorito (estrella clickeable) ──────────────────
   Se usa en tablas de perfiles para marcar/desmarcar un favorito.
   Un solo favorito por workspace; el flag llega al server via form POST. */
.ams-fav-btn {
    background: none;
    border: none;
    padding: 3px 6px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    transition: color .15s, transform .15s;
}
.ams-fav-btn:hover {
    color: var(--color-warning);
    transform: scale(1.12);
}
.ams-fav-btn.is-fav {
    color: var(--color-warning);
}
/* hint al hover del favorito actual: "si lo clickeás, lo desmarcás" */
.ams-fav-btn.is-fav:hover {
    color: var(--color-text-muted);
    transform: scale(1.05);
}
/* Resalte sutil de la fila cuyo perfil es el favorito */
.ams-table tr.is-favorite-row td {
    background: rgba(245, 158, 11, 0.04);
}

/* Marca de "favorito" en selectores/checklists (estrella chica al lado del nombre) */
.ms-fav-mark {
    color: var(--color-warning);
    font-size: .72rem;
    margin-left: 4px;
}

/* ── Sidebar Mobile Overlay ─────────────────────────────────── */
.ams-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}
.ams-sidebar-overlay.active { display: block; }

/* ── Mobile-first form components (player-facing) ───────────── */
/*
 * Estos estilos están diseñados para vistas que llenan los jugadores en celular:
 * Wellness, Checklist Diario, Feedback de Sesión.
 * Targets touch grandes (≥44px), ranges anchos, botones full-width en mobile.
 */
.ams-mobile-form { max-width: 600px; }

/* Range slider con track más grueso y thumb más grande para tap */
/* Bloque de pregunta del wellness mobile — agrupa label, foto opcional, y el control. */
.ams-question-block { margin-bottom: 28px; }
.ams-question-block:last-child { margin-bottom: 0; }
.ams-question-photo {
    margin-bottom: 12px;
}
.ams-question-photo img {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    display: block;
}

@media (max-width: 991.98px) {
    .ams-question-photo {
        margin-bottom: 14px;
    }
    .ams-question-photo img {
        max-height: 260px;
        border-radius: 14px;
        border: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
}

/* Lista vertical de opciones (SingleChoice) — cards full-width tactiles. */
.ams-choice-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 6px;
}
.ams-choice-option {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    min-height: 76px;
    margin: 0;
}
.ams-choice-option:hover { background: var(--color-bg); }
.ams-choice-option.is-selected {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.08);
}
.ams-choice-option img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Mobile: agrandar la foto de la opción para que se distinga de un golpe.
   Layout sigue horizontal, pero la foto pasa a ser ~70px (más cercano al
   estilo de cards de Apple Fitness / Whoop). */
@media (max-width: 991.98px) {
    .ams-choice-option {
        padding: 14px;
        gap: 14px;
        min-height: 104px;
    }
    .ams-choice-option img {
        width: 84px; height: 84px;
        border-radius: 12px;
    }
    .ams-choice-option .ams-choice-label {
        font-size: 1rem;
        font-weight: 500;
    }
}
.ams-choice-option .ams-choice-label {
    flex: 1;
    font-size: 0.95rem;
    color: var(--color-text);
}
.ams-choice-option input[type="radio"] {
    /* El radio queda oculto — la card entera es el target tactile.
       Mantenemos el input en el DOM para que el form binding funcione
       (clickear el label dispara el radio igual). */
    position: absolute; opacity: 0; pointer-events: none;
}
.ams-choice-option .ams-choice-check {
    color: var(--color-primary);
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity .15s;
}
.ams-choice-option.is-selected .ams-choice-check { opacity: 1; }

.ams-range-group { margin-bottom: 24px; }
.ams-range-help { font-size: 0.82rem; color: var(--color-text-muted); margin: 0.2rem 0 0.5rem; }
.ams-range-row { display: flex; align-items: center; gap: 14px; }
.ams-range { height: 28px; }
.ams-range::-webkit-slider-thumb { width: 26px; height: 26px; }
.ams-range::-moz-range-thumb { width: 26px; height: 26px; }
.ams-range-value {
    min-width: 38px;
    text-align: center;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-primary);
    background: rgba(59, 130, 246, .08);
    border-radius: 8px;
    padding: 4px 8px;
}
.ams-range-bounds { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 4px; }

/* ============================================================================
   LIQUID GLASS SLIDER — selector tipo iOS con píldora de cristal líquido.
   ----------------------------------------------------------------------------
   Estructura (ver ams-glass-slider.js + _LiquidGlassDefs.cshtml):
     .ams-glass-slider           wrapper, expone --p (0..1) y --thumb-w/-h
       .ams-glass-slider-input   <input range> transparente encima (interacción)
       .ams-glass-slider-track   carril gris
         .ams-glass-slider-fill  relleno azul hasta el thumb
       .ams-glass-slider-thumb   píldora de cristal (refracta el fondo)
         .ams-glass-slider-caustic  brillos ondulados "agua atrapada"

   Refracción real (feDisplacementMap vía backdrop-filter:url) solo en Chromium.
   Fallbacks: Safari/FF → frost; reduced-transparency → píldora sólida;
   reduced-motion → caústicas estáticas; sin backdrop-filter → gradiente opaco.
   ============================================================================ */
.ams-glass-slider {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    --thumb-w: 36px;
    --thumb-h: 28px;
    --p: 0;
}

/* Input nativo transparente: maneja drag/teclado/click/form; UI nativa oculta. */
.ams-glass-slider-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
}
.ams-glass-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.ams-glass-slider-input::-moz-range-thumb {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
}

/* Carril gris + relleno azul (diseño del "selector azul"). */
.ams-glass-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
    pointer-events: none;
}
.ams-glass-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(var(--p) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
}
.ams-glass-slider-input:focus-visible ~ .ams-glass-slider-track {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}
/* Disabled (ej. temporada cerrada en feedback): perilla atenuada, fill gris. */
.ams-glass-slider-input:disabled { cursor: default; }
.ams-glass-slider-input:disabled ~ .ams-glass-slider-thumb { opacity: 0.45; }
.ams-glass-slider-input:disabled ~ .ams-glass-slider-track .ams-glass-slider-fill { background: var(--color-text-muted); }

/* Píldora de cristal. backdrop-filter combina frost (blur+saturate) +
   refracción (url). En Safari/FF el url() se ignora → queda el frost. */
.ams-glass-slider-thumb {
    position: absolute;
    top: 50%;
    left: calc(var(--p) * (100% - var(--thumb-w)) + var(--thumb-w) / 2);
    width: var(--thumb-w);
    height: var(--thumb-h);
    transform: translate(-50%, -50%);
    border-radius: var(--radius-pill);
    pointer-events: none;
    /* Perilla BLANCA SÓLIDA (sin glass/transparencia): mismo look en desktop y
       mobile. El frost translúcido se veía difuminado en iOS Safari — no va. */
    background: var(--color-surface);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20), 0 3px 8px rgba(15, 23, 42, 0.12);
    transition: box-shadow 0.15s ease;
}
/* Especular: brillo de luz arriba-izquierda, como gota de agua. */
.ams-glass-slider-thumb::before {
    content: "";
    position: absolute;
    left: 9%;
    top: 7%;
    width: 58%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), transparent);
    filter: blur(0.5px);
    pointer-events: none;
    z-index: 1;
}
.ams-glass-slider:hover .ams-glass-slider-thumb,
.ams-glass-slider-input:active ~ .ams-glass-slider-thumb {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18), 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Caústicas del glass: desactivadas — la perilla es blanca sólida. */
.ams-glass-slider-caustic { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .ams-glass-slider-caustic {
        animation: ams-glass-caustic 6s ease-in-out infinite alternate;
    }
}
@keyframes ams-glass-caustic {
    0%   { transform: translate(-4%, -3%) rotate(0deg)  scale(1.05); }
    50%  { transform: translate(3%, 2%)   rotate(8deg)  scale(1.13); }
    100% { transform: translate(-2%, 3%)  rotate(-6deg) scale(1.08); }
}

/* Fallback: usuario pidió menos transparencia → píldora blanca sólida iOS. */
@media (prefers-reduced-transparency: reduce) {
    .ams-glass-slider-thumb {
        background: var(--color-surface);
        border-color: rgba(0, 0, 0, 0.06);
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }
    .ams-glass-slider-caustic { display: none; }
}

/* Fallback: navegador sin backdrop-filter → gradiente más opaco (igual se ve glass). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ams-glass-slider-thumb {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.80));
    }
}

/* Mobile: solo subimos el alto del carril para tap cómodo. El thumb mantiene
   el MISMO tamaño que en desktop (--thumb-w/-h base) para que el óvalo se vea
   idéntico en ambos — el área de tap real la da el <input> nativo (44px). */
@media (max-width: 640px) {
    .ams-glass-slider { height: 44px; }
}

/* Acciones del form: en mobile, full-width verticales y stickies opcionalmente */
.ams-form-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ams-btn-lg { font-size: 0.95rem; padding: 12px 22px; min-height: 46px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ams-sidebar { transform: translateX(-100%); }
    .ams-sidebar.open { transform: translateX(0); }
    .ams-main { margin-left: 0; }
    .ams-content { padding: 16px; }
    .ams-toast-container { top: 16px; right: 16px; }
}

@media (max-width: 640px) {
    .ams-content { padding: 12px; }
    .ams-card { padding: 14px; border-radius: 6px; }

    /* Forms player-facing: ocupan ancho completo, botones full-width */
    .ams-mobile-form { max-width: 100%; }
    .ams-form-actions { flex-direction: column; }
    .ams-form-actions > .btn-ams-primary,
    .ams-form-actions > .btn-ams-secondary,
    .ams-form-actions > .ams-btn-lg { width: 100%; justify-content: center; display: inline-flex; align-items: center; }

    /* En mobile, inputs suben a 44px (iOS no-zoom + tap target). Para que los
       botones y los wrappers premium (time-input, input-pro, dp-group, segmented,
       file-input compact) NO queden 12px más cortos que los inputs vecinos,
       igualamos la altura a 44px de todos los controles del sistema. */
    .btn-ams-primary,
    .btn-ams-secondary,
    .btn-ams-danger,
    .ams-time-input,
    .ams-input-group-pro,
    .ams-dp-group,
    .ams-filter-input,
    .ams-segmented-control { height: 44px; }
    .ams-time-input .ams-time-part { height: 42px; }

    /* Range más grande para tap preciso en pantallas chicas */
    .ams-range-value { font-size: 1.3rem; min-width: 44px; }

    /* Inputs cómodos en mobile */
    .ams-input, .form-control, .form-select { min-height: 44px; font-size: 16px; /* evita zoom iOS */ }
}

/* ============================================================================
   PLAYER MOBILE — experiencia app-nativa para el rol jugador
   Se activa con body.player-mobile + viewport < 992px
   ============================================================================ */

/* Safety net global: prevenir scroll horizontal accidental en cualquier página */
html, body { overflow-x: hidden; }

/* Bottom nav — oculta por defecto, solo aparece en mobile-jugador */
.ams-bottom-nav { display: none; }

/* Cards/listas para reemplazar tablas en mobile */
.ams-session-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ams-session-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    transition: transform .08s ease, background .12s ease;
}
.ams-session-card:hover { text-decoration: none; color: var(--color-text); }
.ams-session-card:active { background: var(--color-bg); transform: scale(0.99); }
.ams-session-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ams-session-card-date {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}
.ams-session-card-title {
    font-size: .82rem;
    color: var(--color-text);
    font-style: italic;
    padding: var(--space-1) 0 0;
}
.ams-session-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .78rem;
    color: var(--color-text-muted);
}

/* Grid 2-col para métricas GPS / KPIs */
.ams-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Charts responsive con aspect-ratio */
.ams-chart-frame {
    position: relative;
    width: 100%;
    height: 260px;
}

/* Filtros colapsables con <details> nativo */
.ams-filters-collapse {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}
.ams-filters-collapse > summary {
    padding: 12px 14px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ams-filters-collapse > summary::-webkit-details-marker { display: none; }
.ams-filters-collapse > summary::after {
    content: "›";
    font-size: 1.4rem;
    color: var(--color-text-muted);
    transform: rotate(90deg);
    transition: transform .15s ease;
}
.ams-filters-collapse[open] > summary::after { transform: rotate(-90deg); }
.ams-filters-collapse > div {
    padding: 0 14px 14px;
    border-top: 1px solid var(--color-border);
}

/* ── Reglas específicas para body.player-mobile en viewport móvil ─────────── */
@media (max-width: 991.98px) {

    /* Bottom nav visible */
    body.player-mobile .ams-bottom-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
    }
    body.player-mobile .ams-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 60px;
        padding: 8px 4px;
        text-decoration: none;
        color: var(--color-text-muted);
        font-size: 11px;
        font-weight: 500;
        transition: color .12s ease;
    }
    body.player-mobile .ams-bottom-nav-item i { font-size: 22px; line-height: 1; }
    body.player-mobile .ams-bottom-nav-item span { font-size: 11px; line-height: 1.2; }
    body.player-mobile .ams-bottom-nav-item.active {
        color: var(--color-primary);
    }
    body.player-mobile .ams-bottom-nav-item:active {
        background: var(--color-bg);
    }

    /* Sidebar y hamburguesa ocultos — el jugador usa el bottom nav */
    body.player-mobile .ams-sidebar,
    body.player-mobile .ams-sidebar-overlay,
    body.player-mobile .ams-sidebar-toggle {
        display: none !important;
    }

    /* Topbar compacto: ocultar breadcrumb workspace/club/season */
    body.player-mobile .ams-topbar-context { display: none; }
    body.player-mobile .ams-topbar { padding: 10px 14px; }
    body.player-mobile .ams-topbar-user { font-size: .85rem; }

    /* Main ocupa todo el ancho (no hay sidebar) */
    body.player-mobile .ams-main { margin-left: 0; }

    /* Padding-bottom en content para que el bottom nav no tape contenido */
    body.player-mobile .ams-content { padding-bottom: 90px; }

    /* Charts: altura por aspect-ratio en lugar de fixed */
    body.player-mobile .ams-chart-frame {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    /* Page title compacto */
    body.player-mobile .ams-page-title { font-size: 1.25rem; }
    body.player-mobile .ams-page-header { gap: 8px; margin-bottom: 12px; }
}

/* Más compacto en pantallas chicas (iPhone SE = 375px) */
@media (max-width: 640px) {
    /* Selects y inputs: ancho completo, sin min-width fijo */
    body.player-mobile select.ams-input,
    body.player-mobile select.form-select,
    body.player-mobile input.ams-input,
    body.player-mobile input.form-control {
        min-width: 0 !important;
        width: 100%;
    }

    /* Formularios con d-flex: stack vertical */
    body.player-mobile form.d-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    body.player-mobile form.d-flex > div { width: 100%; }
    body.player-mobile form.d-flex .btn-ams-primary,
    body.player-mobile form.d-flex .btn-ams-secondary {
        width: 100%;
    }

    /* Cards internos más ajustados */
    body.player-mobile .ams-card { padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERFLOW SAFETY NETS — evitar scroll lateral en mobile-jugador
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Box-sizing universal dentro del player-mobile */
    body.player-mobile .ams-card,
    body.player-mobile .ams-card * {
        box-sizing: border-box;
    }
    /* Inputs / selects / textarea nunca exceden el contenedor */
    body.player-mobile input,
    body.player-mobile select,
    body.player-mobile textarea {
        max-width: 100%;
    }
    /* Cards del player-mobile contienen su contenido */
    body.player-mobile .ams-card {
        overflow: hidden;
        word-break: break-word;
    }
    /* Tablas residuales dentro del player-mobile: permitir scroll interno
       pero que el wrapper sí tenga scroll en lugar de rebalsar */
    body.player-mobile .ams-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Input range flex: asegurarse de que no tenga min-width heredado */
    body.player-mobile input[type="range"] {
        min-width: 0;
        width: 100%;
        flex: 1 1 0;
    }
    /* Badges con texto largo: permitir wrap */
    body.player-mobile .ams-badge {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPLE-STYLE MOBILE PATTERNS — Player Home & Session Detail
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero greeting (Large Title iOS) ─────────────────────────────────────── */
.ams-hero-greeting {
    margin: 8px 0 20px 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.ams-hero-greeting-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.ams-hero-greeting-photo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(16, 185, 129, 0.10));
    border-color: transparent;
}
.ams-hero-greeting-text { min-width: 0; flex: 1; }
.ams-hero-greeting-sub {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-weight: 400;
    margin-bottom: 2px;
}
.ams-hero-greeting-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Section header (iOS-style uppercase label) ──────────────────────────── */
.ams-section-header {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 24px 0 10px 0;
}
.ams-section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 24px 0 10px 0;
}
.ams-section-header-row .ams-section-header { margin: 0; }
.ams-section-link {
    font-size: 0.85rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.ams-section-link:hover { text-decoration: underline; }

/* ── Stats grid (Apple Fitness workout summary) ──────────────────────────── */
.ams-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
/* En desktop el grid tiene más espacio horizontal — meter más columnas
   para que las métricas no queden estiradas y la info entre en una pantalla
   sin scroll excesivo. */
@media (min-width: 768px) {
    .ams-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 992px) {
    .ams-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ams-stat-card {
    background: var(--color-bg);
    border-radius: 12px;
    padding: 14px 14px 12px;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ams-stat-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin-bottom: 6px;
    /* Clamp a 2 líneas — evita empujar */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ams-stat-value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}
.ams-stat-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.1;
    /* Si la cifra es larga (ej 11.234,5), no rompa el layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ams-stat-unit {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ── Last session card (hero card con stats embebidas) ───────────────────── */
.ams-last-session-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.08s ease;
}
.ams-last-session-card:active {
    transform: scale(0.995);
    background: #FAFAFA;
}
.ams-last-session-card:hover { text-decoration: none; color: inherit; }
.ams-last-session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    align-items: baseline;
}
.ams-last-session-date {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: capitalize;
}
.ams-last-session-meta .sep { opacity: 0.5; }

/* ── Inset grouped list (iOS-style table) ────────────────────────────────── */
.ams-inset-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}
.ams-inset-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    min-height: 56px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.1s ease;
}
.ams-inset-row:last-child { border-bottom: none; }
.ams-inset-row:hover { text-decoration: none; color: inherit; background: var(--color-bg); }
.ams-inset-row:active { background: var(--color-bg); }
.ams-inset-row > .bi:first-child {
    font-size: 1.05rem;
    color: var(--color-primary);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.ams-inset-row-body {
    flex: 1;
    min-width: 0;
}
.ams-inset-row-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    text-transform: capitalize;
}
.ams-inset-row-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.ams-inset-row-badge {
    font-size: 0.72rem;
    color: var(--color-success);
    font-weight: 500;
    flex-shrink: 0;
}
.ams-inset-chevron {
    color: var(--color-text-muted);
    opacity: 0.5;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── Session detail hero (fecha grande + meta chicas) ────────────────────── */
.ams-session-hero {
    margin: 4px 0 18px 0;
}
.ams-session-hero-date {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    text-transform: capitalize;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 4px;
}
.ams-session-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.ams-session-hero-meta .sep { opacity: 0.5; }
.ams-session-hero-obj {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--color-primary);
    font-weight: 500;
}

/* ── Player status card (foto + estado + minutos en Detail) ──────────────── */
.ams-player-status-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 4px;
}
.ams-player-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
}
.ams-player-avatar-placeholder {
    background: var(--color-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1.6rem;
}
.ams-player-status-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ams-player-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.ams-player-status-minutes {
    text-align: center;
    padding: 4px 10px;
    background: var(--color-bg);
    border-radius: 10px;
    min-width: 58px;
    flex-shrink: 0;
}
.ams-player-status-minutes .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}
.ams-player-status-minutes .label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ── Info card genérica (notas, texto) ──────────────────────────────────── */
.ams-info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.5;
}

/* ── Player home / session container — más padding lateral ───────────────── */
.ams-player-home, .ams-player-session {
    padding: 0;
}

/* ═══ Responsive fine-tuning ═══════════════════════════════════════════════ */
@media (max-width: 420px) {
    .ams-stat-value { font-size: 1.4rem; }
    .ams-stat-card { min-height: 72px; padding: 12px; }
    .ams-hero-greeting-name { font-size: 1.55rem; }
    .ams-session-hero-date { font-size: 1.25rem; }
    .ams-last-session-date { font-size: 0.92rem; }
}

/* ── Feedback season picker: 320px desktop, full-width mobile ────────────── */
.ams-feedback-season-picker { max-width: 320px; }
@media (max-width: 768px) {
    .ams-feedback-season-picker { max-width: 100%; }
}

/* ── Eval cards (Nutrición / Kinesiología) ───────────────────────────────── */
.ams-eval-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ams-eval-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ams-eval-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.ams-eval-card-icon--nutri {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success);
}
.ams-eval-card-icon--kine {
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-primary);
}
.ams-eval-card-area {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.ams-eval-card-meta {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ams-eval-card-meta .sep {
    color: var(--color-text-muted);
    opacity: 0.6;
    margin: 0 3px;
    font-weight: 400;
}
.ams-eval-values {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg);
    border-radius: 10px;
    padding: 4px 12px;
}
.ams-eval-value-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border);
    gap: 12px;
    min-width: 0;
}
.ams-eval-value-row:last-child { border-bottom: none; }
.ams-eval-value-row .label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.ams-eval-value-row .value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    flex-shrink: 0;
}
.ams-eval-value-row .unit {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: 3px;
}
.ams-eval-notes {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.4;
    padding-top: 2px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Sessions/Edit — Asignación de objetivos físicos por jugador
   Cards apiladas, una por objetivo. Cada card tiene un dropdown del objetivo
   y un grid de chips clickeables (uno por jugador convocado).
   ────────────────────────────────────────────────────────────────────────── */
.ams-objective-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    margin-bottom: 12px;
}
.ams-objective-card:last-child { margin-bottom: 0; }

.ams-objective-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ams-objective-select {
    flex: 1;
    max-width: 320px;
    font-weight: 600;
}
.ams-objective-card-remove {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, color 0.1s ease;
    flex-shrink: 0;
}
.ams-objective-card-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.ams-objective-card-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 0.82rem;
}
.ams-objective-count {
    color: var(--color-text-muted);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.ams-link-btn {
    border: none;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.1s ease;
}
.ams-link-btn:hover { background: rgba(59, 130, 246, 0.08); }
.ams-link-btn-muted { color: var(--color-text-muted); }
.ams-link-btn-muted:hover { background: var(--color-bg); }

.ams-player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ams-player-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text);
    transition: background 0.1s ease, border-color 0.1s ease, transform 0.05s ease;
    user-select: none;
}
.ams-player-chip:hover { background: var(--color-bg); }
.ams-player-chip:active { transform: scale(0.97); }
.ams-player-chip.is-active {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-primary);
    font-weight: 600;
}
.ams-player-chip-photo {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-bg);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}
.ams-player-chip.is-active .ams-player-chip-photo {
    border-color: var(--color-primary);
}
.ams-player-chip-name {
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .ams-objective-card-header { flex-wrap: wrap; }
    .ams-objective-select { max-width: 100%; width: 100%; }
    .ams-player-chip-name { max-width: 130px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Sessions/Detail — Cards de cumplimiento por objetivo
   Una mini-card por cada objetivo asignado, con barra de progreso + stats.
   ────────────────────────────────────────────────────────────────────────── */
.ams-compliance-objective-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    margin-bottom: 10px;
}
.ams-compliance-objective-card:last-child { margin-bottom: 0; }
.ams-compliance-objective-card .compliance-mini-bar {
    margin-top: 8px;
}

.ams-unassigned-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ams-unassigned-list .ams-badge {
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.78rem;
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — staff dashboards (macOS HIG)
   Documentación: docs/07-premium-design-system.md
   Skill: .claude/skills/ams-premium-redesign

   Todas estas clases son OPT-IN y paralelas al sistema legacy. Nunca
   redefinir clases legacy (.ams-table, .ams-card heredan tokens nuevos
   pero su API queda intacta).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar premium ────────────────────────────────────────────────── */
.ams-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.ams-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.ams-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ── Segmented control (iOS-style) ────────────────────────────────────
   Altura 32px coherente con `.ams-filter-input` para que en filter bars
   (Sessions, Home cockpit, cualquier toolbar) los controles queden
   perfectamente alineados sin "salto" entre input y segmented.
   Las labels son flex stretch (relleno vertical), con padding solo
   horizontal — el `align-items: center` interno centra el texto. */
.ams-segmented-control {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    padding: 2px;
    box-sizing: border-box;
    background: rgba(118, 118, 128, 0.10);
    border-radius: var(--radius-md);
    font-family: var(--font-text);
    font-size: 0.76rem;
    line-height: 1.4;
}
.ams-segmented-control input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ams-segmented-control label {
    padding: 0 12px;
    margin: 0;
    cursor: pointer;
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--color-text-muted);
    font-weight: 600;
    user-select: none;
    transition: background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.ams-segmented-control label:has(input:checked) {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07),
                0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.ams-segmented-control label:hover:not(:has(input:checked)) {
    color: var(--color-text);
}

/* ── Target picker (chips de posiciones / jugadores) ─────────────────────
   Usado en /config/objectives/{id}/edit cuando una regla tiene scope
   Positions o Players. Reusa el mismo lenguaje visual que .ams-player-chip
   (asignación de objetivos a sesión) — chips con foto/inicial + nombre,
   click para alternar, estado activo en azul primary. */
.ams-target-picker-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: 12px;
}
.ams-target-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.ams-target-picker-search-input {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    font-size: 0.85rem;
    transition: border-color var(--duration-base) var(--ease-out);
}
.ams-target-picker-search-input:focus-within {
    border-color: var(--color-primary);
}
.ams-target-picker-search-input i {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}
.ams-target-picker-search-input input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    color: var(--color-text);
}
.ams-target-picker-count {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-weight: 500;
}

/* ── Zone cards (verde / amarillo) en /config/objectives/{id}/edit ────────
   Cards lado a lado en lg (≥992px), apiladas en pantallas más chicas.
   Border-left de color identifica visualmente la zona. */
.ams-zone-card {
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: var(--color-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ams-zone-card--green {
    border-left-color: var(--color-success);
}
.ams-zone-card--yellow {
    border-left-color: var(--color-warning);
}
.ams-zone-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.ams-zone-card--green .ams-zone-card-title {
    color: var(--color-success);
}
.ams-zone-card--yellow .ams-zone-card-title {
    color: var(--chip-alert-text);
}
.ams-zone-input-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ams-zone-error {
    font-size: 0.76rem;
    color: var(--color-danger);
    margin-top: 8px;
    min-height: 0;
    line-height: 1.3;
    display: none;
}
.ams-zone-error.is-visible {
    display: block;
}
.ams-zone-card.has-error {
    border-color: var(--color-danger);
}
.ams-zone-card.has-error.ams-zone-card--green {
    border-left-color: var(--color-danger);
}
.ams-zone-card.has-error.ams-zone-card--yellow {
    border-left-color: var(--color-danger);
}

/* ── Density toggle (especialización) ───────────────────────────────── */
.ams-density-toggle .bi {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* ── Metric Card (Stripe-style) ─────────────────────────────────────── */
.ams-metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    min-width: 0;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.ams-metric-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}
.ams-metric-card.is-warning {
    border-color: var(--apple-yellow-border);
    background: linear-gradient(180deg, #FFFBEB 0%, var(--color-surface) 60%);
}
.ams-metric-card.is-risk {
    border-color: var(--apple-red-border);
    background: linear-gradient(180deg, #FEF2F2 0%, var(--color-surface) 60%);
}
.ams-metric-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ams-metric-card-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--apple-blue-bg);
    color: var(--apple-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ams-metric-card.is-warning .ams-metric-card-icon {
    background: var(--apple-yellow-bg);
    color: var(--apple-yellow-fg);
}
.ams-metric-card.is-risk .ams-metric-card-icon {
    background: var(--apple-red-bg);
    color: var(--apple-red-fg);
}
.ams-metric-card-label {
    font-family: var(--font-text);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.ams-metric-card-value-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}
.ams-metric-card-value {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ams-metric-card-value-suffix {
    font-family: var(--font-text);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}
.ams-metric-card-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    font-weight: 500;
}

/* Grid de metric cards */
.ams-metric-grid-premium {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: var(--space-4);
}

/* Forzar 2x2 simétrico + COMPACT en el rango problemático del auto-fit:
   • 600-1199px sin sidebar visible (mobile-tablet) o con sidebar 240px
     (laptop angosto): auto-fit con minmax(220) da 3+1 desbalanceado en
     este rango. 2x2 es más limpio.
   • <600px: auto-fit cae a 1-col naturalmente (OK).
   • ≥1200px: auto-fit puede dar 4 cards sin huecos (OK).

   Además, las cards se reducen de tamaño en tablet — la skill
   tablet-ui-adaptation manda cards más densas, no del mismo tamaño que
   mobile. El valor "25" no necesita ser 30px de alto en iPad. */
@media (min-width: 600px) and (max-width: 1199.98px) {
    .ams-metric-grid-premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }
    .ams-metric-card {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-1);
    }
    .ams-metric-card-icon {
        width: 28px;
        height: 28px;
        font-size: 0.92rem;
    }
    .ams-metric-card-label {
        font-size: 0.68rem;
    }
    .ams-metric-card-value {
        font-size: 1.4rem;
    }
    .ams-metric-card-value-suffix {
        font-size: 0.82rem;
    }
    .ams-metric-card-sub {
        font-size: 0.72rem;
    }
}

/* ── Donut reusable (técnica SVG stroke-dasharray) ───────────────────
   Misma técnica que el donut del header de cumplimiento (.cs-donut), promovida
   a componente global para reusar en reportes (ej: disponibilidad por modo en
   el Dashboard Individual). El SVG va con viewBox 0 0 36 36 y r=15.915 para que
   la circunferencia ≈ 100 → stroke-dasharray="L 100" dibuja un arco de L%. El
   Razor calcula los offsets acumulados (off = -cumulative) en cultura invariante. */
.ams-donut {
    position: relative;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}
.ams-donut svg {
    width: 100%;
    height: 100%;
    /* Arranca el arco a las 12 (en lugar de las 3). */
    transform: rotate(-90deg);
    transform-origin: center;
}
.ams-donut-bg  { fill: none; stroke: var(--color-bg); stroke-width: 3.4; }
.ams-donut-arc { fill: none; stroke-width: 3.4; stroke-linecap: butt; transition: stroke-dasharray .3s var(--ease-out); }
.ams-donut-arc.is-normal  { stroke: var(--apple-green); }
.ams-donut-arc.is-diff    { stroke: var(--apple-blue); }
.ams-donut-arc.is-partial { stroke: var(--apple-orange); }
.ams-donut-arc.is-absent  { stroke: var(--apple-red); }
.ams-donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ams-donut-value {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.85rem; letter-spacing: -0.03em; line-height: 1;
    color: var(--color-text); font-variant-numeric: tabular-nums;
}
.ams-donut-value small { font-size: 0.95rem; font-weight: 700; }
.ams-donut-label {
    font-size: 0.64rem; font-weight: 600; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 5px;
}
/* Leyenda que acompaña al donut: dot de color + nombre + valor + %. */
.ams-donut-legend { display: flex; flex-direction: column; gap: 10px; min-width: 210px; }
.ams-donut-legend-row { display: flex; align-items: center; gap: 10px; }
.ams-donut-legend-dot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
.ams-donut-legend-dot.is-normal  { background: var(--apple-green); }
.ams-donut-legend-dot.is-diff     { background: var(--apple-blue); }
.ams-donut-legend-dot.is-partial  { background: var(--apple-orange); }
.ams-donut-legend-dot.is-absent   { background: var(--apple-red); }
.ams-donut-legend-name { font-size: 0.85rem; font-weight: 550; flex: 1; }
.ams-donut-legend-val  { font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ams-donut-legend-pct  { color: var(--color-text-muted); font-size: 0.78rem; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Reporte de disponibilidad: banner de estado + desglose de partidos ── */
.ams-status-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 18px; border-radius: var(--radius-lg);
}
.ams-status-banner.is-absent { background: linear-gradient(135deg, var(--apple-red-bg), transparent); border: 1px solid var(--apple-red-border); }
.ams-status-banner.is-avail  { background: linear-gradient(135deg, var(--apple-green-bg), transparent); border: 1px solid var(--apple-green-border); }
.ams-status-banner.is-punctual { background: linear-gradient(135deg, var(--apple-yellow-bg), transparent); border: 1px solid var(--apple-yellow-border); }
.ams-status-icon { width: 44px; height: 44px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; color: #fff; }
.ams-status-banner.is-absent .ams-status-icon { background: var(--apple-red); }
.ams-status-banner.is-avail  .ams-status-icon { background: var(--apple-green); }
.ams-status-banner.is-punctual .ams-status-icon { background: var(--apple-yellow); color: #7a5b00; }
.ams-status-main { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.ams-status-sub  { font-size: 0.83rem; color: var(--color-text-muted); margin-top: 2px; }
.ams-status-tag  { margin-left: auto; font-size: 0.74rem; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.ams-status-banner.is-absent .ams-status-tag { background: var(--apple-red-bg); color: var(--apple-red-fg); }
.ams-status-banner.is-avail  .ams-status-tag { background: var(--apple-green-bg); color: var(--apple-green-fg); }
.ams-status-banner.is-punctual .ams-status-tag { background: var(--apple-yellow-bg); color: var(--apple-yellow-fg); }

/* Filas de desglose (partidos): icono + nombre + barra + valor + %. */
.ams-breakdown-grouphead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.ams-breakdown-grouphead .bg-l { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.ams-breakdown-grouphead .bg-r { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ams-breakdown-row { display: flex; align-items: center; gap: 11px; padding: 7px 0; }
.ams-breakdown-ico { width: 25px; height: 25px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.ams-breakdown-name { flex: 0 0 178px; font-size: 0.86rem; font-weight: 550; }
.ams-breakdown-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--hairline-soft); overflow: hidden; }
.ams-breakdown-bar > i { display: block; height: 100%; border-radius: 5px; }
.ams-breakdown-val { font-weight: 700; font-size: 0.9rem; min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.ams-breakdown-pct { color: var(--color-text-muted); font-size: 0.78rem; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ams-breakdown-name { flex-basis: 130px; } }

/* ── Chips premium — pastel canónico ─────────────────────────────────
   Usado en wellness/RPE tables de PlayerDashboard individual. Comparte
   los tokens canónicos --ok-soft/ink, --alert-soft/ink, --risk-soft/ink
   con .ams-cockpit-chip y .delta-pill — editar un token actualiza todos. */
.ams-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-text);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}
.ams-chip.is-ok    { background: var(--ok-soft);    color: var(--ok-ink); }
.ams-chip.is-alert { background: var(--alert-soft); color: var(--alert-ink); }
.ams-chip.is-risk  { background: var(--risk-soft);  color: var(--risk-ink); }
.ams-chip.is-empty { background: var(--empty-soft); color: var(--color-text-muted); }

/* ── Spec-grid — label arriba / valor abajo, en N columnas. Para fichas con
   campos cortos (Diagnóstico de lesión, detalle de sesión). ─────────────── */
.ams-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
}
.ams-spec-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ams-spec-k { color: var(--color-text-muted); font-size: 0.78rem; font-weight: 500; }
.ams-spec-v { font-weight: 600; color: var(--color-text); font-size: 0.92rem; line-height: 1.35; }
.ams-spec-grid.is-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) {
    .ams-spec-grid, .ams-spec-grid.is-3col { grid-template-columns: 1fr 1fr; }
}

/* ── Estado-card del dashboard individual — estado físico + rehab unificados en
   una sola card tintada según escenario. Reemplaza el banner + rtp-card sueltos.
   Tokens del sistema (--risk/alert/ok-soft). */
.estado-card { border-radius: var(--radius-md); border: 1px solid var(--hairline); padding: 15px 17px; background: var(--color-surface); }
.estado-card.is-injury        { background: var(--risk-soft);  border-color: var(--color-danger); }
.estado-card.is-absence       { background: var(--alert-soft); border-color: var(--color-warning); }
.estado-card.is-differentiated,
.estado-card.is-available     { background: var(--ok-soft);    border-color: color-mix(in srgb, var(--color-success) 45%, transparent); }
.estado-top { display: flex; align-items: flex-start; gap: 13px; }
.estado-icon { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; }
.estado-card.is-injury  .estado-icon { background: var(--color-danger); }
.estado-card.is-absence .estado-icon { background: var(--color-warning); }
.estado-card.is-differentiated .estado-icon,
.estado-card.is-available      .estado-icon { background: var(--color-success); }
.estado-main { flex: 1; min-width: 0; }
.estado-title { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.estado-card.is-injury  .estado-title { color: var(--color-danger); }
.estado-card.is-absence .estado-title { color: #B45309; }
.estado-sub { color: var(--color-text-muted); font-size: 0.86rem; margin-top: 2px; }
.estado-aside { text-align: right; flex-shrink: 0; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; }
.estado-aside .estado-since-pill { display: inline-block; background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 0.72rem; }
.estado-detail { margin-top: 13px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.estado-detail-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; margin-bottom: 7px; }
.estado-detail-head .strong { font-weight: 600; color: var(--color-text); }
.estado-detail-head .muted { color: var(--color-text-muted); }

/* Barra de rehab continua (gradiente) + 5 labels de etapa debajo */
.rehab-bar { position: relative; height: 8px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.rehab-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, var(--color-warning), var(--color-danger)); }
.rehab-bar-labels { display: flex; margin-top: 6px; }
.rehab-bar-labels > span { flex: 1; font-size: 0.7rem; color: var(--color-text-muted); text-align: center; }
.rehab-bar-labels > span:first-child { text-align: left; }
.rehab-bar-labels > span:last-child { text-align: right; }
.rehab-bar-labels > span.is-current { color: var(--color-text); font-weight: 600; }

/* Timeline de disponibilidad de temporada (.av-tl) — barra verde + tramos
   rojos (lesión) / naranjas (otra ausencia) + ticks de meses + leyenda. */
.av-tl-track { position: relative; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--color-success) 16%, transparent); overflow: hidden; }
.av-tl-seg { position: absolute; top: 0; bottom: 0; }
.av-tl-seg.is-injury { background: var(--color-danger); opacity: 0.82; }
.av-tl-seg.is-other  { background: var(--color-warning); opacity: 0.88; }
.av-tl-months { display: flex; justify-content: space-between; margin-top: 5px; }
.av-tl-months > span { font-size: 0.64rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.av-tl-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 0.72rem; color: var(--color-text-muted); flex-wrap: wrap; }
.av-tl-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.av-tl-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Grilla del formulario de lesión — 3 columnas que comparten las MISMAS gridlines
   en todas las filas (a diferencia del flex-wrap, que deja cada campo en una
   posición distinta según su ancho intrínseco → se ve "dropeado al azar"). */
.ams-med-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
    align-items: start;
}
.ams-med-grid > .span-2 { grid-column: span 2; }
.ams-med-grid > .span-full { grid-column: 1 / -1; }
@media (max-width: 768px) {
    .ams-med-grid { grid-template-columns: 1fr; }
    .ams-med-grid > .span-2,
    .ams-med-grid > .span-full { grid-column: auto; }
}

/* ── Header de contexto para tablas GPS ────────────────────────────────
   Subtítulo gris + leyenda inline siempre visible. Reemplaza el patrón
   "icono ⓘ con tooltip" que quedó descartado por accesibilidad: la
   información clave de los umbrales debe verse sin requerir hover. */
.ams-table-context {
    margin: 0 0 var(--space-2);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.ams-table-context strong { color: var(--color-text); font-weight: 600; }

.ams-zone-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.ams-zone-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.ams-zone-legend-item strong { font-weight: 600; color: var(--color-text); }
.ams-zone-legend-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Mismos colores sólidos que `.ams-chip` para coherencia visual perfecta. */
.ams-zone-legend-dot.is-ok    { background: var(--chip-ok); }
.ams-zone-legend-dot.is-alert { background: var(--chip-alert); }
.ams-zone-legend-dot.is-risk  { background: var(--chip-risk); }
.ams-zone-legend-sep {
    width: 1px; height: 12px;
    background: var(--hairline);
    align-self: center;
}

/* ── Choice chip (con foto opcional) ───────────────────────────────── */
.ams-chip-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 4px;
    border-radius: var(--radius-pill);
    background: rgba(118, 118, 128, 0.08);
    color: var(--color-text);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: inset 0 0 0 1px var(--hairline);
    white-space: nowrap;
    max-width: 140px;
}
.ams-chip-choice img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ams-chip-choice span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Empty state premium ────────────────────────────────────────────── */
.ams-empty-state-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-align: center;
}
.ams-empty-state-premium-compact {
    padding: var(--space-7) var(--space-5);
}
.ams-empty-state-premium .icon {
    font-size: 2rem;
    color: var(--color-text-muted);
    opacity: 0.6;
}
.ams-empty-state-premium .title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.015em;
}
.ams-empty-state-premium .text {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 480px;
}
.ams-empty-state-premium .text a { color: var(--apple-blue); text-decoration: none; font-weight: 500; }
.ams-empty-state-premium .text a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════
   TABLE PREMIUM — sticky-first + scroll shadow + density + col groups
   Opt-in vía .ams-table-premium-wrapper > table.ams-table-premium
   ════════════════════════════════════════════════════════════════════════ */

.ams-table-premium-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    scrollbar-color: rgba(142, 142, 147, 0.42) transparent;
    position: relative;
}
.ams-table-premium-wrapper::-webkit-scrollbar {
    height: 8px;
}
.ams-table-premium-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.ams-table-premium-wrapper::-webkit-scrollbar-thumb {
    background: rgba(142, 142, 147, 0.4);
    border-radius: 4px;
}
.ams-table-premium-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(142, 142, 147, 0.6);
}

.ams-table-premium {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-text);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* Headers — colores base alineados con `.ams-table` del sistema. */
.ams-table-premium thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Group-row: tipografía idéntica al legacy `.daily-group-row` */
.ams-table-premium thead tr.ams-col-group-row th {
    padding: 11px 12px 9px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

/* Detail-row: tipografía idéntica al legacy `.daily-detail-row` */
.ams-table-premium thead tr.ams-col-detail-row th {
    padding: 9px 10px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.15;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    vertical-align: middle;
}

/* col-main / col-sub: heredados del legacy (.daily-col-main / .daily-col-sub) */
.ams-table-premium .col-main {
    display: block;
    color: #475569;
    font-weight: 700;
    line-height: 1.2;
}
.ams-table-premium .col-sub {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}

/* Body cells — líneas verticales sutiles entre celdas para separar
   visualmente las columnas (UX: tabla con muchas cols necesita "rails"
   para que el ojo no se pierda al escanear horizontalmente). */
.ams-table-premium tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--hairline-soft);
    background: var(--color-surface);
    transition: background var(--duration-fast) var(--ease-out);
    text-align: center;
    vertical-align: middle;
}
.ams-table-premium tbody td:last-child { border-right: 0; }
.ams-table-premium tbody tr:last-child td { border-bottom: 0; }

/* Hover y is-risk-row con backgrounds OPACOS sólidos.
   CRÍTICO: la sticky-first column necesita bg opaco (sin alpha) para no
   dejar ver las cells de atrás cuando hay scroll horizontal. */
.ams-table-premium tbody tr:hover td             { background: #F8FAFC; }
.ams-table-premium tbody tr.is-risk-row td       { background: var(--color-surface); }
.ams-table-premium tbody tr.is-risk-row:hover td { background: #F8FAFC; }

/* Detail-row headers también con línea vertical sutil */
.ams-table-premium thead tr.ams-col-detail-row th {
    border-right: 1px solid var(--hairline-soft);
}
.ams-table-premium thead tr.ams-col-detail-row th:last-child { border-right: 0; }

/* Group-row también con líneas verticales más suaves entre grupos */
.ams-table-premium thead tr.ams-col-group-row th {
    border-right: 1px solid var(--hairline-soft);
}
.ams-table-premium thead tr.ams-col-group-row th:last-child { border-right: 0; }

/* Sticky first column (Jugador) — ANCHOR.
   CRÍTICO: la regla aplica SOLO a la celda JUGADOR del group-row del thead,
   NO al primer th del detail-row (que es la primera métrica). Con
   `tr.ams-col-group-row > th:first-child` evitamos que Aceleraciones se
   convierta accidentalmente en sticky con bg blanco y 240px de width.
   Width FIJO para que el nombre largo haga ellipsis y no expanda la cell. */
.ams-table-premium > thead > tr.ams-col-group-row > th:first-child,
.ams-table-premium > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    background: var(--color-surface);
    border-right: 1px solid var(--hairline-strong);
    padding-right: 16px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}
/* Override del header del Jugador: mismo fondo que el thead del sistema. */
.ams-table-premium > thead > tr.ams-col-group-row > th:first-child {
    z-index: 3;
    background: var(--color-bg);
    text-align: left;
    padding-left: 12px;
}
/* Si la tabla no tiene group-row (single-row header), usar th[rowspan] o
   un selector que apunte a la primera celda del header simple. */
.ams-table-premium > thead > tr:not(.ams-col-group-row):not(.ams-col-detail-row) > th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--color-bg);
    text-align: left;
    border-right: 1px solid var(--hairline-strong);
    padding-right: 16px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}
/* Sticky-first hereda el bg de la fila — pero opaco, no rgba */
.ams-table-premium tbody tr:hover td:first-child             { background: #F8FAFC; }
.ams-table-premium tbody tr.is-risk-row td:first-child       { background: var(--color-surface); }
.ams-table-premium tbody tr.is-risk-row:hover td:first-child { background: #F8FAFC; }

/* Scroll shadow indicator (activado por JS cuando scrollLeft > 4) */
.ams-table-premium > thead > tr > th:first-child::after,
.ams-table-premium > tbody > tr > td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}
.ams-table-premium-wrapper.is-scrolled > .ams-table-premium > thead > tr > th:first-child::after,
.ams-table-premium-wrapper.is-scrolled > .ams-table-premium > tbody > tr > td:first-child::after {
    opacity: 1;
}

/* Density modes — controlados por data-density en el wrapper o tabla */
.ams-table-premium[data-density="compact"]     tbody td { padding: 4px 10px; height: 32px; }
.ams-table-premium[data-density="comfortable"] tbody td { padding: 8px 12px; height: 40px; }
.ams-table-premium[data-density="spacious"]    tbody td { padding: 12px 14px; height: 48px; }

/* Player cell premium (foto + nombre + link). Flex container con
   min-width: 0 para que el child name pueda truncar con ellipsis
   sin expandir la cell. */
.ams-table-premium .player-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
    width: 100%;
    min-width: 0;
    padding: 0;
    transition: color var(--duration-base) var(--ease-out);
}
.ams-table-premium .player-cell:hover {
    color: var(--apple-blue);
    text-decoration: none;
}
.ams-table-premium .player-cell-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--hairline);
}
.ams-table-premium .player-cell-avatar.is-placeholder {
    background: rgba(118, 118, 128, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1rem;
}
.ams-table-premium .player-cell-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.86rem;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ams-table-premium[data-density="compact"] .player-cell-avatar { width: 24px; height: 24px; }
.ams-table-premium[data-density="spacious"] .player-cell-avatar { width: 36px; height: 36px; }

/* Hide muted dash con estilo Apple */
.ams-table-premium .muted-dash {
    color: rgba(118, 118, 128, 0.55);
    font-weight: 500;
    font-size: 0.85rem;
}

/* Mobile: respetar player-mobile (la tabla premium se oculta y se usa
   .daily-mobile-list que ya está en mobile-jugador) */
@media (max-width: 991.98px) {
    body.player-mobile .ams-table-premium-wrapper { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM CONFIG SCREENS (macOS HIG)
   Componentes para pantallas de configuración del staff. Apilables, full-width,
   "lujo silencioso" — jerarquía tipográfica + hairlines + tokens del sistema
   premium. NO duplica `.ams-toolbar`/`.ams-metric-card`/`.ams-segmented-control`
   (esos siguen siendo la fuente de verdad para sus respectivos casos de uso).

   Documentación: docs/07-premium-design-system.md (sección "Config screens")
   Skill:        .claude/skills/ams-premium-redesign
   ──────────────────────────────────────────────────────────────────────── */

/* ── Page wrapper full-width con lede opcional ──────────────────────── */
.ams-config-page { width: 100%; }
.ams-config-lede {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 var(--space-6);
    max-width: 720px;
}

/* ── Form row + field sizing premium ─────────────────────────────────
   Reemplaza el uso de Bootstrap `row g-3` + `col-md-N` para formularios
   con campos mixtos (texto + select + date + time + number). Cada field
   tiene ancho intrínseco según el contenido máximo razonable de su tipo,
   NO una fracción rígida del row. En pantallas chicas hace wrap natural.

   Filosofía Stripe/Linear/Notion: un input de tiempo (HH:MM + spinners)
   necesita ~104px, NO el 16% del row. Un input "Entrenamiento" necesita
   ~200px, NO el 25%. Estirar inputs cortos al ancho del row deja aire
   muerto a la derecha (pantalla de hobby). Forzar inputs largos a un
   col-md-2 hace que el contenido se vea cortado/encarcelado (1:0 en vez
   de 10:00).

   Patrón:
     <div class="ams-form-row">
       <div class="ams-form-field is-time"><label/>...input...</div>
       <div class="ams-form-field is-date"><label/>...input...</div>
       <div class="ams-form-field is-grow"><label/>...input...</div>
     </div>

   Variantes y tamaños — ver tabla en docs/07-premium-design-system.md.
   En tablet (≤900px) y mobile (≤640px) los anchos compactos se mantienen
   pero los growable ocupan full-width forzando wrap. */
.ams-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    align-items: flex-end;
}
.ams-form-row:last-child { margin-bottom: 0; }
.ams-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* permite shrink dentro de su flex-basis */
}
.ams-form-field > label { margin-bottom: 0; }
/* Controles inline-flex (segmented) dentro de un form-field column-flex se
   estirarían al ancho del field por el align-items:stretch default. Forzamos
   align-self:flex-start + fit-content para que respeten su tamaño intrínseco
   (sino el track gris del segmented muestra aire vacío a la derecha). */
.ams-form-field > .ams-segmented-control {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
}

/* Variantes por tipo de contenido — flex: <grow> <shrink> <basis> */
.ams-form-field.is-time      { flex: 0 0 120px;  min-width: 110px; }
.ams-form-field.is-number-sm { flex: 0 0 88px;   min-width: 72px;  }
.ams-form-field.is-number    { flex: 0 0 108px;  min-width: 96px;  }
.ams-form-field.is-number-lg { flex: 0 0 140px;  min-width: 120px; }
.ams-form-field.is-code      { flex: 0 0 130px;  min-width: 110px; }
.ams-form-field.is-date      { flex: 0 0 220px;  min-width: 200px; }
.ams-form-field.is-date-sm   { flex: 0 0 130px;  min-width: 110px; }
.ams-form-field.is-chip      { flex: 0 0 110px;  min-width: 90px;  }
.ams-form-field.is-select-sm { flex: 0 0 140px;  min-width: 110px; }
.ams-form-field.is-select    { flex: 0 0 200px;  min-width: 160px; }
.ams-form-field.is-select-lg { flex: 1 1 280px;  min-width: 220px; }
.ams-form-field.is-text-sm   { flex: 0 0 140px;  min-width: 100px; }
.ams-form-field.is-text      { flex: 0 0 220px;  min-width: 180px; }
.ams-form-field.is-grow      { flex: 1 1 280px;  min-width: 200px; }
.ams-form-field.is-full      { flex: 1 1 100%;   min-width: 100%;  }
.ams-form-field.is-toggle    { flex: 0 0 auto;   min-width: 220px; max-width: 360px; }
.ams-form-field.is-action    { flex: 0 0 auto;   min-width: 0; }    /* botón de acción inline (Agregar, etc.) */
.ams-form-field.is-switch    { flex: 0 0 auto;   min-width: 0; }    /* toggle compacto inline (switch + label) */

/* Cuando un field hosta un toggle/switch compacto, su contenido se alinea
   al baseline del row para quedar a la misma altura que inputs/buttons. */
.ams-form-field.is-switch > .ams-switch-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;  /* mismo height que .ams-input y .btn-ams-* */
}
.ams-form-field.is-switch .ams-switch { vertical-align: middle; }
.ams-form-field.is-switch-text {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1;
}

/* En pantallas muy chicas (≤640px), todo se va a su propia fila para
   evitar inputs aplastados con contenido cortado. */
@media (max-width: 640px) {
    .ams-form-field.is-time,
    .ams-form-field.is-number-sm,
    .ams-form-field.is-number,
    .ams-form-field.is-number-lg,
    .ams-form-field.is-code,
    .ams-form-field.is-date,
    .ams-form-field.is-date-sm,
    .ams-form-field.is-chip,
    .ams-form-field.is-select-sm,
    .ams-form-field.is-select,
    .ams-form-field.is-select-lg,
    .ams-form-field.is-text-sm,
    .ams-form-field.is-text,
    .ams-form-field.is-grow,
    .ams-form-field.is-toggle  { flex-basis: 100%; }
}

/* ── Tier system para Create/Edit pages ──────────────────────────────
   Cap inteligente del ancho de las pantallas Create/Edit, centrado con
   margin-inline auto. Tier por densidad de contenido:
     is-tier-sm    560px  → forms simples ≤5 campos cortos (Club, Temporada, Rol, Ítem, Posición).
     is-tier-md    720px  → forms con 2-col grids (Jugador, Usuario, Wellness/Feedback question, Métrica, Sesión Crear).
     is-tier-lg    960px  → forms extensos con varias secciones (Métrica calculada, Plantilla de evaluación, Rol con permisos).
     (sin clase)   100%   → tablas, listas y pantallas densas (Sesión Editar, PhysicalObjectives Editar).
   Filosofía Stripe/Linear/Notion: monitor grande NO se "llena" con whitespace
   muerto — la card respira centrada e intencional. En tablet ≤900px el cap
   se desactiva (full-bleed) para que las pantallas no queden chiquitas en iPad. */
.ams-config-page.is-tier-sm   { max-width: 560px; margin-inline: auto; }
.ams-config-page.is-tier-md   { max-width: 720px; margin-inline: auto; }
.ams-config-page.is-tier-lg   { max-width: 960px; margin-inline: auto; }

@media (max-width: 900px) {
    .ams-config-page.is-tier-sm,
    .ams-config-page.is-tier-md,
    .ams-config-page.is-tier-lg { max-width: 100%; margin-inline: 0; }
}

/* ── Section card (panel con header tipo macOS Settings) ────────────── */
.ams-section-card {
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-5);
    /* overflow: visible (default) — antes era hidden para clipear el gradient
       del header al border-radius, pero eso también clipeaba los panels de
       dropdowns (_AmsSingleSelect) que se abren con position:absolute saliendo
       del field. Ahora el clip del gradient lo hace el propio header con sus
       top-corners redondeadas (ver .ams-section-card-header abajo). */
}
.ams-section-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--hairline-soft);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
    /* Top corners redondeadas — el header tiene su propio clip ahora que el
       padre quitó el overflow:hidden (sino los dropdowns absolutos se cortan). */
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}
.ams-section-card-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: var(--apple-blue-bg);
    color: var(--apple-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.ams-section-card-icon.is-accent {
    background: rgba(40, 205, 65, 0.12);
    color: #15803D;
}
.ams-section-card-icon.is-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #B45309;
}
.ams-section-card-icon.is-danger {
    background: rgba(255, 59, 48, 0.10);
    color: var(--color-danger);
}

/* Action button / count opcional en el header de la section-card.
   Patrón: a la derecha del título/subtitle, empujado por margin-left:auto.
   `.ams-section-card-action` para botones (+ Agregar / Eliminar), o
   `.ams-section-card-header-count` para "N campos / N objetivos" en texto. */
.ams-section-card-header .ams-section-card-action {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}
.ams-section-card-header .ams-section-card-header-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
}
.ams-section-card-title {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.ams-section-card-subtitle {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.ams-section-card-body { padding: var(--space-5) var(--space-6); }
.ams-section-card-body.is-flush { padding: 0; }

/* Variante compacta — cuando va dentro de un grid 2-col arriba */
.ams-section-card.is-compact .ams-section-card-header { padding-bottom: var(--space-3); }
.ams-section-card.is-compact .ams-section-card-body { padding-top: var(--space-4); }

/* Variante deshabilitada — para mostrar secciones "preview" en pantallas Create
   donde la sección se habilita después de guardar (GPS / Convocados / Objetivos
   de una sesión nueva). El header del section sigue legible (icon + title +
   subtitle + badge "Disponible al guardar" a la derecha), el body queda
   semi-transparente con un placeholder informativo. */
.ams-section-card.is-disabled {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.7) 0%, var(--color-bg) 100%);
}
.ams-section-card.is-disabled .ams-section-card-header {
    opacity: 0.75;
}
.ams-section-card.is-disabled .ams-section-card-header .ams-section-card-action,
.ams-section-card.is-disabled .ams-section-card-header .ams-section-card-header-count,
.ams-section-card.is-disabled .ams-section-card-header > .ams-badge {
    opacity: 1; /* el badge "Disponible al guardar" se mantiene legible */
}
.ams-section-card.is-disabled .ams-section-card-icon {
    background: rgba(118, 118, 128, 0.10);
    color: var(--color-text-muted);
}
.ams-section-card.is-disabled .ams-section-card-body {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
/* Placeholder del body de la section disabled — icon de candado + mensaje. */
.ams-disabled-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}
.ams-disabled-placeholder > i {
    font-size: 1.5rem;
    color: var(--color-text-muted);
    opacity: 0.55;
}
.ams-disabled-placeholder-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}
.ams-disabled-placeholder-text {
    font-size: 0.82rem;
    max-width: 360px;
    line-height: 1.5;
}

/* ── Layout grids para top section / cards anidadas ─────────────────── */
.ams-config-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    /* align-items: start para que cada card respete su altura natural — si no,
       el grid las iguala y la card con menos contenido queda con un hueco
       vertical antiestético. */
    align-items: start;
    /* Separación generosa respecto a las cards/secciones que vienen abajo. */
    margin-bottom: var(--space-5);
}
/* Bajado a 900px (era 1100px) — habilita 2-col en tablet ≥900px y desktop. */
@media (min-width: 900px) {
    .ams-config-top-grid { grid-template-columns: 1fr 1fr; }
    .ams-config-top-grid > .ams-section-card { margin-bottom: 0; }
}

.ams-config-rows-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
}
@media (min-width: 1280px) {
    .ams-config-rows-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Form labels + help text ────────────────────────────────────────── */
.ams-form-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.ams-form-label.is-sm {
    font-size: 0.7rem;
    margin-bottom: var(--space-1);
}
.ams-form-help {
    margin: var(--space-2) 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ── Input premium con suffix (input numérico + unidad inline) ──────────
   Auto-contenido: no depende de Bootstrap `.form-control`. Flex layout propio
   con input + suffix lado a lado, todo a 32px alineado al canon del sistema. */
.ams-input-group-pro {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    box-sizing: border-box;
}
.ams-input-group-pro:focus-within {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
}
.ams-input-pro {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent;
    padding: 0 12px;
    height: 100%;
    font-family: var(--font-text);
    font-size: 0.85rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--color-text);
    outline: none !important;
    box-shadow: none !important;
}
.ams-input-pro::placeholder { color: var(--color-text-muted); opacity: 0.55; }
.ams-input-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    border-left: 1px solid var(--hairline-strong);
    white-space: nowrap;
    user-select: none;
}

/* Variante stand-alone — un `.ams-input-pro` que no está dentro de un
   `.ams-input-group-pro` (input solo, sin suffix). Necesita su propio
   borde, tamaño y width: 100% porque el wrapper flex no aplica.
   El width: 100% es CRÍTICO — sin él, el `<input>` toma su ancho default
   (~200px basado en attr size) y desborda su parent .is-input-sm/.is-grow
   en .ams-form-grid, pisando visualmente al campo de al lado. */
.ams-input-pro:not(.ams-input-group-pro .ams-input-pro) {
    display: block;
    width: 100%;
    border: 1px solid var(--hairline-strong) !important;
    border-radius: var(--radius-md);
    height: 32px;
    box-sizing: border-box;
}
.ams-input-pro:not(.ams-input-group-pro .ams-input-pro):focus {
    border-color: var(--apple-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16) !important;
    outline: none;
}
.ams-input-inline {
    width: 56px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
    margin: 0 var(--space-1);
    font-weight: 600;
    text-align: center;
    background: var(--color-surface);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.ams-input-inline:focus {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
    outline: none;
}

/* ── Radio cards (opciones con descripción larga, apiladas) ─────────── */
.ams-radio-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.ams-radio-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out);
    background: var(--color-surface);
    margin: 0;
}
.ams-radio-card:hover { border-color: var(--hairline-strong); background: var(--color-bg); }
.ams-radio-card:has(input:checked) {
    border-color: var(--apple-blue);
    background: var(--apple-blue-bg);
}
.ams-radio-card input[type="radio"] {
    width: 18px; height: 18px;
    accent-color: var(--apple-blue);
    cursor: pointer;
    flex-shrink: 0;
}
.ams-radio-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ams-radio-card-content strong {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 600;
}
.ams-radio-card-content span {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ── iOS toggle switch ─────────────────────────────────────────────── */
.ams-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    margin: 0;
    user-select: none;
    flex-shrink: 0;
}
.ams-switch input[type="checkbox"] { display: none; }
.ams-switch-track {
    position: relative;
    width: 36px; height: 20px;
    background: rgba(118, 118, 128, 0.30);
    border-radius: var(--radius-pill);
    transition: background var(--duration-slow) var(--ease-in-out);
    flex-shrink: 0;
}
.ams-switch-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.06);
    transition: transform var(--duration-slow) var(--ease-in-out);
}
.ams-switch input:checked ~ .ams-switch-track { background: var(--apple-green); }
.ams-switch input:checked ~ .ams-switch-track .ams-switch-thumb { transform: translateX(16px); }
.ams-role-toggle-card:has(input:checked) .ams-switch-track { background: var(--apple-green); }
.ams-role-toggle-card:has(input:checked) .ams-switch-thumb { transform: translateX(16px); }
.ams-switch-label {
    font-size: 0.82rem;
    color: var(--color-text);
    font-weight: 500;
}

/* ── Form grid responsive (utility) ─────────────────────────────────── */
.ams-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: end;
}
/* Inputs pequeños (% verde, % rojo): ancho fijo. */
.ams-form-grid > .is-input-sm {
    flex: 0 0 120px;
    min-width: 110px;
}
/* Item flexible (ej: dirección óptima) crece para ocupar el aire restante.
   min-width grande fuerza wrap cuando el contenedor es estrecho — se va a
   su propia row antes de aplastarse. min-width:0 permite que el contenido
   interno (el segmented control) shrinquee dentro del item. */
.ams-form-grid > .is-grow {
    flex: 1 1 280px;
    min-width: 0;
}
/* Acciones: empujadas a la derecha en pantallas anchas, full-width en angostas. */
.ams-form-grid > .is-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
    align-items: end;
}
@media (max-width: 1280px) {
    .ams-form-grid > .is-actions { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 600px) {
    .ams-form-grid > .is-input-sm { flex-basis: calc(50% - var(--space-2)); }
    .ams-form-grid > .is-grow     { flex-basis: 100%; }
}

/* Override del segmented control DENTRO de .ams-form-grid: que ocupe todo
   el ancho de su .is-grow y reparta las opciones equitativamente. Sin esto,
   el segmented (inline-flex con nowrap) se desborda del contenedor cuando
   el espacio es justo y termina pisando la card de al lado. */
.ams-form-grid .ams-segmented-control {
    display: flex;
    width: 100%;
    max-width: 100%;
}
.ams-form-grid .ams-segmented-control label {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}
.ams-form-grid .ams-segmented-control label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Config row (cada métrica como mini-card dentro del grid) ───────── */
.ams-config-row {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    background: var(--color-surface);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.ams-config-row:hover { box-shadow: var(--shadow-card); }
.ams-config-row.is-disabled { background: var(--color-bg); border-style: dashed; }
.ams-config-row.is-disabled .ams-config-row-controls,
.ams-config-row.is-disabled .ams-rule-preview { opacity: 0.55; pointer-events: none; }

.ams-config-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.ams-config-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ams-config-row-meta-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.ams-config-row-meta-code {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* ── Live rule preview ──────────────────────────────────────────────── */
.ams-rule-preview {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline-soft);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.84rem;
    color: var(--color-text);
    line-height: 1.55;
}
.ams-rule-preview-icon { color: var(--color-text-muted); flex-shrink: 0; margin-top: 1px; }
.ams-rule-preview-text { flex: 1; min-width: 0; }
.ams-rule-preview-text em { color: var(--color-text-muted); font-style: italic; }
.ams-rule-preview-text em.is-error { color: var(--apple-red-fg); font-style: normal; font-weight: 500; }

/* Mini pill inline para legends/help text (ej. "Verde si el valor ≤ 40% · Amarillo · Rojo").
   Tamaño compact propio (es texto inline, no chip numérico de tabla), pero usa los
   mismos tokens canónicos que .ams-chip / .delta-pill / .ams-cockpit-chip — al editar
   --ok-soft/ink, --alert-soft/ink, --risk-soft/ink en :root, este pill se actualiza. */
.ams-rule-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 2px;
    vertical-align: 1px;
}
.ams-rule-pill.is-ok    { background: var(--ok-soft);    color: var(--ok-ink); }
.ams-rule-pill.is-alert { background: var(--alert-soft); color: var(--alert-ink); }
.ams-rule-pill.is-risk  { background: var(--risk-soft);  color: var(--risk-ink); }

/* ── Form actions footer ─────────────────────────────────────────────
   Orden canónico (de izquierda a derecha):
     [Primary] [Secondary] [Secondary…]      [.ms-auto: Danger]
                                              ↑ empujado a la derecha
   Patrón Stripe/Linear/Notion: la acción principal va primero (izquierda),
   secundarias inmediatamente al lado, y acciones destructivas o "ms-auto"
   van empujadas a la derecha del row con margin-left:auto. `flex-wrap`
   garantiza que en mobile cada botón rompa a su línea si no entra. */
.ams-config-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-8);
}
.ams-config-actions .ms-auto { margin-left: auto; }

/* ── Toggle row (texto a la izquierda + switch a la derecha) ────────
   Patrón estándar para "ítem on/off con descripción larga": el label es
   primario (a la izquierda) y el switch va alineado a la derecha. Reusable
   en cualquier section card. */
.ams-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}
.ams-toggle-row-text { flex: 1; min-width: 0; }
.ams-toggle-row--compact {
    justify-content: flex-start;
    gap: var(--space-3);
}
.ams-toggle-row--compact .ams-toggle-row-text { flex: 0 1 auto; }
.ams-toggle-row-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}
.ams-toggle-row-help {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ── Section divider (separador interno dentro de un section-card-body) */
.ams-section-divider {
    border: 0;
    border-top: 1px solid var(--hairline-soft);
    margin: var(--space-4) 0;
}

/* ── Role toggle grid / card (lista de roles como toggles on/off) ─────── */
.ams-role-toggle-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ams-role-toggle-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex: none;
    width: 100%;
    max-width: 400px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: opacity var(--duration-base) var(--ease-out);
}
.ams-role-toggle-card:has(input:checked) {
    background: transparent;
}
.ams-role-toggle-card:has(input:focus-visible) {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 3px var(--apple-blue-bg);
}
.ams-role-toggle-card > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ams-role-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.ams-role-toggle-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.2;
}
.ams-role-toggle-help {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}
.ams-role-toggle-card .ams-badge {
    padding: 0 var(--space-2);
    font-size: 0.65rem;
}
.ams-toggle-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.ams-toggle-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex: 0 1 320px;
    max-width: 360px;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-out);
}
.ams-toggle-card:has(input:checked) {
    background: transparent;
}
.ams-toggle-card:has(input:checked) .ams-switch-track { background: var(--apple-green); }
.ams-toggle-card:has(input:checked) .ams-switch-thumb { transform: translateX(16px); }
.ams-toggle-card:has(input:focus-visible) {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 3px var(--apple-blue-bg);
}
.ams-toggle-card:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.68;
}
.ams-toggle-card.is-fluid {
    flex: 1 1 100%;
    max-width: none;
}
.ams-toggle-card.is-fluid:hover {
    background: rgba(0, 0, 0, 0.025);
    border-radius: var(--radius-sm);
}
.ams-toggle-card.is-dense {
    min-height: auto;
    padding: 0;
}
.ams-toggle-card > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ams-toggle-card-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.ams-toggle-card-title {
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.2;
}
.ams-toggle-card-help {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}
.ams-permission-toggle-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ams-permission-group {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-surface);
}
.ams-permission-group-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ams-permission-group-count {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
}
.ams-permission-section-title {
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ams-permission-section-title:first-of-type {
    margin-top: 0;
}
.ams-permission-card-desc {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}
.ams-permission-card-code {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    line-height: 1.2;
    opacity: 0.7;
}
.ams-permission-card-code code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}
.ams-card-info {
    background: var(--color-bg);
    border-color: var(--color-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   MD CHIP — fuente única de colores para etiquetas de microciclo (MD, MD-1…6, MD+1/2)
   Uso: <span class="ams-md-chip is-md">MD</span>
   Clases:  is-md (partido)  |  is-pre (MD-N, preparación)  |  is-post (MD+N, recuperación)
   Todas las vistas consumen estas clases — cambiar aquí afecta toda la UI.
   ══════════════════════════════════════════════════════════════════════════ */
.ams-md-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
    line-height: 1.4;
}
.ams-md-chip.is-md   { background: var(--apple-blue-bg);   color: var(--apple-blue-fg); }
.ams-md-chip.is-pre  { background: var(--apple-orange-bg); color: var(--apple-orange-fg); }
.ams-md-chip.is-post { background: var(--apple-green-bg);  color: var(--apple-green-fg); }

/* ══════════════════════════════════════════════════════════════════════════
   SESSION PICKER — panel flotante premium para análisis GPS
   Prefijo: .ams-sp-*   (scoped, no colisiona con .ams-session-* existentes)
   ══════════════════════════════════════════════════════════════════════════ */

.ams-sp-wrap { position: relative; }

/* ── Trigger ─────────────────────────────────────────────────────────── */
.ams-sp-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 260px;
    height: 32px;
    padding: 0 10px;
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-text);
    text-align: left;
    box-sizing: border-box;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.ams-sp-trigger:hover:not(:disabled) { border-color: var(--hairline-strong); }
.ams-sp-trigger.is-open {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
}
.ams-sp-trigger:disabled { opacity: 0.55; cursor: not-allowed; }

.ams-sp-trigger-icon { color: var(--color-text-muted); flex-shrink: 0; line-height: 1; }
.ams-sp-trigger-content {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--space-2);
    overflow: hidden;
}
.ams-sp-trigger-main {
    font-size: 0.84rem; font-weight: 500; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.ams-sp-trigger-main.is-placeholder { color: var(--color-text-muted); font-weight: 400; }
.ams-sp-chevron {
    margin-left: auto; flex-shrink: 0; color: var(--color-text-muted); line-height: 1;
    transition: transform var(--duration-base) var(--ease-out);
}
.ams-sp-trigger.is-open .ams-sp-chevron { transform: rotate(180deg); }

/* ── Panel ───────────────────────────────────────────────────────────── */
.ams-sp-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    width: 400px;
    max-height: 480px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-elevated);
    z-index: 1100;
    display: none; flex-direction: column;
    overflow: hidden;
    animation: amsSpPanelIn var(--duration-slow) var(--ease-out) both;
}
.ams-sp-panel.is-visible { display: flex; }

@keyframes amsSpPanelIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header: búsqueda + filtros ──────────────────────────────────────── */
.ams-sp-header {
    padding: var(--space-2) var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}
.ams-sp-search {
    display: flex; align-items: center; gap: var(--space-2);
    background: rgba(118,118,128,0.10);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2); height: 32px;
    margin-bottom: var(--space-2);
}
.ams-sp-search-icon { color: var(--color-text-muted); flex-shrink: 0; line-height: 1; }
.ams-sp-search-input {
    flex: 1; border: none; background: transparent; outline: none;
    font-family: var(--font-text); font-size: 12.5px; color: var(--color-text);
    caret-color: var(--apple-blue);
}
.ams-sp-search-input::placeholder { color: var(--color-text-muted); opacity: 0.8; }

.ams-sp-filters { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
/* Variant match-only: el factory agrega .is-no-type-seg al wrap cuando se
   inicializa con hideTypeSeg:true. Útil para selectores que sólo eligen
   partidos (MatchAnalysis) — el segmented Todos|Partidos|... no aplica. */
.ams-sp-wrap.is-no-type-seg .ams-sp-seg { display: none; }

/* Mini segmented dentro del panel */
.ams-sp-seg {
    display: flex; background: rgba(118,118,128,0.10);
    border-radius: var(--radius-sm); padding: 2px; gap: 1px;
}
.ams-sp-seg input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ams-sp-seg label {
    padding: 3px 8px; font-size: 11px; font-weight: 500; color: var(--color-text-muted);
    border-radius: 4px; cursor: pointer; white-space: nowrap; user-select: none;
    transition: all var(--duration-fast) var(--ease-out);
}
.ams-sp-seg input:checked + label {
    background: var(--color-surface); color: var(--color-text); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Toggle "Solo GPS" */
.ams-sp-gps-toggle input { display: none; }
.ams-sp-gps-toggle label {
    display: flex; align-items: center; gap: var(--space-1);
    padding: 3px 9px; font-size: 11px; font-weight: 500;
    border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong);
    color: var(--color-text-muted); cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out); white-space: nowrap;
}
.ams-sp-gps-toggle input:checked + label {
    background: var(--apple-green-bg); color: var(--apple-green-fg);
    border-color: rgba(21,128,61,0.25); font-weight: 600;
}

/* ── Body: lista scrollable ──────────────────────────────────────────── */
.ams-sp-body {
    overflow-y: auto; flex: 1;
    scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent;
}
.ams-sp-body::-webkit-scrollbar { width: 4px; }
.ams-sp-body::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--radius-sm); }

/* ── Grupos colapsables ──────────────────────────────────────────────── */
.ams-sp-group { border-bottom: 1px solid var(--hairline-soft); }
.ams-sp-group:last-child { border-bottom: none; }
.ams-sp-group-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) var(--space-4) 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--color-text-muted); cursor: pointer; user-select: none;
    background: rgba(241,245,249,0.7);
    transition: background var(--duration-fast);
}
.ams-sp-group-header:hover { background: rgba(226,232,240,0.8); }
.ams-sp-group-chevron {
    font-size: 9px; opacity: 0.5; display: inline-block;
    transition: transform var(--duration-base) var(--ease-out);
}
.ams-sp-group.is-collapsed .ams-sp-group-chevron { transform: rotate(-90deg); }
.ams-sp-group.is-collapsed .ams-sp-group-body { display: none; }

/* ── Fila de sesión ──────────────────────────────────────────────────── */
.ams-sp-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    cursor: pointer; border-bottom: 1px solid var(--hairline-soft);
    transition: background var(--duration-fast);
}
.ams-sp-row:last-child { border-bottom: none; }
.ams-sp-row:hover  { background: rgba(0,122,255,0.04); }
.ams-sp-row.is-selected { background: var(--apple-blue-bg); }
.ams-sp-row.is-selected  .ams-sp-row-day { color: var(--apple-blue-fg); }
/* Solo partidos oficiales colorean el número de día (azul) */
.ams-sp-row.is-match-day .ams-sp-row-day { color: var(--apple-blue-fg); }

/* Fecha */
.ams-sp-date { display: flex; flex-direction: column; align-items: center; width: 32px; flex-shrink: 0; }
.ams-sp-row-day {
    font-size: 18px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--color-text);
}
.ams-sp-row-mon {
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--color-text-muted); margin-top: 1px;
}

/* Contenido de la fila */
.ams-sp-row-content {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
}
.ams-sp-type-muted { font-size: 11.5px; color: var(--color-text-muted); font-weight: 500; }
.ams-sp-row-title {
    font-size: 11px; color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}

/* GPS pill */
.ams-sp-gps-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: var(--radius-pill);
    background: var(--apple-green-bg); color: var(--apple-green-fg);
}
.ams-sp-gps-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--apple-green); flex-shrink: 0; }

/* ── Badges de tipo ──────────────────────────────────────────────────── */
.ams-sp-badge {
    display: inline-flex; align-items: center;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
    padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap;
}
/* Colores MD: delegados a .ams-md-chip global; solo override de tamaño en picker */
.ams-sp-body .ams-md-chip { font-size: 9.5px; }
.ams-sp-badge.amistoso { background: rgba(88,86,214,0.10); color: #4338CA; }
.ams-sp-badge.gps { background: var(--apple-green-bg); color: var(--apple-green-fg); font-size: 9px; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.ams-sp-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center; color: var(--color-text-muted); font-size: 13px;
}

/* ── Mobile back navigation (form detail del jugador) ────────────────── */
.ams-mobile-back-nav { padding-bottom: 16px; }
.ams-mobile-back-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
}
.ams-mobile-back-btn {
    display: inline-flex; align-items: center; gap: 2px;
    color: var(--color-primary); font-size: 0.92rem; font-weight: 500;
    text-decoration: none; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.ams-mobile-back-btn i { font-size: 0.85rem; }
.ams-mobile-back-btn:active { opacity: 0.5; transition: opacity 0.1s ease; }
.ams-mobile-back-info { text-align: right; min-width: 0; }
.ams-mobile-back-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--color-text); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ams-mobile-back-sub {
    font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px;
}
.ams-mobile-back-sub::first-letter { text-transform: uppercase; }

/* ════════════════════════════════════════════════════════════════════════
   SESSIONS LIST PREMIUM — Vista /sessions agrupada por microciclo
   Inset list pattern (Linear / Stripe / Notion vibe). Cycle headers con
   info del rango + partidos + acciones de bulk expand/collapse. Filas
   colapsables que despliegan métricas GPS en grid responsive.
   ──────────────────────────────────────────────────────────────────────
   Design system tokens: --apple-*, --hairline*, --space-*, --radius-*,
   --shadow-card, --duration-*, --ease-*. NO hardcodear hex/px.
   Mobile-jugador (body.player-mobile / d-block d-lg-none) intocable.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Filter bar (sistema global premium) ───────────────────────────────
   Stripe-Dashboard-style: cada filtro es un "field" con label arriba
   (uppercase, muted) y control abajo. Todos los controles a la misma
   altura (32px) — la coherencia vertical es lo que da el look caro.
   Aplica a TODAS las pantallas del staff que tengan toolbar de filtros.
   Excepción documentada: SessionGpsAnalysis usa session picker custom
   `.ams-sp-*` por requerimientos UX específicos. */
.ams-filter-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.ams-filter-bar-left {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}
.ams-filter-bar-right {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
}

.ams-filter-group {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
}
.ams-filter-group.is-range { flex-shrink: 0; }
.ams-filter-label {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    padding-left: 2px;
}

/* Input/select/button premium — altura fija 32px, mismos paddings,
   hover/focus consistentes. Tipografía tabular para fechas + números.
   Aplicable a <input>, <select>, <button> y custom triggers. */
.ams-filter-input {
    height: 32px;
    padding: 0 10px;
    font-size: 0.84rem;
    font-family: var(--font-text);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.ams-filter-input:hover { border-color: var(--hairline-strong); }
.ams-filter-input:focus,
.ams-filter-input:focus-visible {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
}
.ams-filter-input:disabled,
.ams-filter-input[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--color-bg);
}
select.ams-filter-input {
    padding-right: 28px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
input[type="date"].ams-filter-input {
    min-width: 138px;
}
button.ams-filter-input,
a.ams-filter-input {
    cursor: pointer;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: var(--color-text);
}
a.ams-filter-input:hover { color: var(--color-text); }
/* Variante "ícono solo" para nav buttons (prev/next/today) — square 32x32 */
.ams-filter-input.is-icon-only {
    width: 32px;
    padding: 0;
    flex-shrink: 0;
}

/* ── Date picker (.ams-dp-*) — sistema global ─────────────────────────
   Variant D3 ("Apple Calendar dual-button") del design system: trigger
   compuesto con chip de fecha + botón "HOY" para reset rápido. Calendar
   custom con 3 vistas anidadas (day → month → year) — Apple Calendar pattern.
   Documentación: docs/07-premium-design-system.md (Receta 12).
   Markup: ver _AmsDatePicker.cshtml. JS: wwwroot/js/ams-date-picker.js. */
.ams-dp-wrap { position: relative; display: inline-block; }
.ams-dp-group {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 32px;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.ams-dp-group:hover { border-color: var(--hairline-strong); }
/* Open state: SOLO cuando el panel está abierto (idéntico a `.ams-ss-wrap.is-open
   .ams-ss-trigger` y al resto de los dropdowns del sistema). NO se usa borde azul
   como "active permanent" cuando hay valor — eso rompía la consistencia con
   `.ams-filter-input` y los demás triggers del sistema. */
.ams-dp-group.is-open {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
}
.ams-dp-group.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    background: var(--color-bg);
}
.ams-dp-group.is-disabled .ams-dp-trigger { cursor: not-allowed; }

/* Trigger del chip — calendar icon + texto */
.ams-dp-trigger {
    height: 100%; padding: 0 12px;
    background: transparent; border: 0;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-text); font-size: 0.84rem;
    color: var(--color-text); cursor: pointer;
    border-right: 1px solid var(--hairline-soft);
    min-width: 140px;
    flex: 1;
}
/* Si NO hay botón HOY, el trigger no necesita el border-right divisor. */
.ams-dp-group:not(:has(.ams-dp-today)) .ams-dp-trigger { border-right: 0; }
.ams-dp-trigger:hover { background: rgba(0, 0, 0, 0.02); }
.ams-dp-icon { color: var(--color-text-muted); display: inline-flex; flex-shrink: 0; }
.ams-dp-text {
    font-variant-numeric: tabular-nums; flex: 1; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ams-dp-text.is-placeholder { color: var(--color-text-muted); font-weight: 400; }
.ams-dp-text-day {
    color: var(--color-text-muted); font-size: 0.7rem; margin-left: 6px;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}

/* Botón HOY — reset rápido del campo */
.ams-dp-today {
    height: 100%; padding: 0 10px;
    background: transparent; border: 0;
    font-family: var(--font-text); font-size: 0.7rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-muted); cursor: pointer;
    transition: color var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out);
}
.ams-dp-today:hover {
    background: rgba(0, 122, 255, 0.08);
    color: var(--apple-blue-fg);
}
.ams-dp-today.is-active {
    background: var(--apple-blue);
    color: white;
}

/* Panel desplegable — wrapper del calendar */
.ams-dp-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
    z-index: 1100;
    display: none;
}
.ams-dp-panel.is-open { display: block; }
.ams-dp-cal { padding: 10px 12px; }

/* Header del calendar — flechas + título clickeable (zoom out) */
.ams-dp-cal-month {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 4px 10px;
    font-weight: 600; color: var(--color-text);
    font-size: 0.85rem;
}
.ams-dp-cal-nav {
    width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer;
    border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.ams-dp-cal-nav:hover { background: var(--hairline-soft); color: var(--color-text); }

/* Título del mes/año/década — clickeable para subir un nivel de vista */
.ams-dp-cal-title {
    border: 0; background: transparent;
    font-family: var(--font-text); font-size: 0.85rem;
    font-weight: 600; color: var(--color-text);
    cursor: pointer; padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    transition: background var(--duration-fast) var(--ease-out);
}
.ams-dp-cal-title:hover { background: var(--hairline-soft); }
.ams-dp-cal-title .bi {
    font-size: 0.7rem; color: var(--color-text-muted);
    transition: transform var(--duration-base) var(--ease-out);
}
.ams-dp-cal-title.is-up .bi { transform: rotate(180deg); }

/* DAY view — grid 7 columnas */
.ams-dp-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px; font-size: 0.78rem; text-align: center;
}
.ams-dp-cal-grid .dn {
    color: var(--color-text-muted); font-size: .68rem;
    padding: 4px 0; font-weight: 600;
}
.ams-dp-cal-grid .d {
    padding: 6px 0; border-radius: 6px; cursor: pointer;
    color: var(--color-text); font-variant-numeric: tabular-nums;
    border: 0; background: transparent;
    font-family: var(--font-text); font-size: 0.78rem;
    transition: background var(--duration-fast) var(--ease-out);
}
.ams-dp-cal-grid .d:hover { background: rgba(0, 122, 255, 0.08); }
.ams-dp-cal-grid .d.is-selected {
    background: var(--apple-blue); color: white; font-weight: 600;
}
.ams-dp-cal-grid .d.is-today { font-weight: 700; color: var(--apple-blue); }
.ams-dp-cal-grid .d.is-other-month { opacity: 0.35; }
.ams-dp-cal-grid .d.is-disabled,
.ams-dp-cal-grid .d:disabled {
    opacity: 0.25; cursor: not-allowed; pointer-events: none;
}

/* MONTH view — grid 3 columnas (4 filas) */
.ams-dp-month-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; padding: 4px 0;
}
.ams-dp-month-btn {
    padding: 10px 4px;
    border: 0; background: transparent; cursor: pointer;
    border-radius: 6px;
    font-family: var(--font-text); font-size: 0.8rem;
    color: var(--color-text);
    transition: background var(--duration-fast) var(--ease-out);
}
.ams-dp-month-btn:hover { background: rgba(0, 122, 255, 0.08); color: var(--apple-blue-fg); }
.ams-dp-month-btn.is-current { font-weight: 700; color: var(--apple-blue); }
.ams-dp-month-btn.is-selected {
    background: var(--apple-blue); color: white; font-weight: 600;
}
.ams-dp-month-btn.is-selected:hover {
    background: var(--apple-blue); color: white;
}

/* YEAR view — grid 3 columnas (4 filas) */
.ams-dp-year-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; padding: 4px 0;
}
.ams-dp-year-btn {
    padding: 10px 4px;
    border: 0; background: transparent; cursor: pointer;
    border-radius: 6px;
    font-family: var(--font-text); font-size: 0.8rem;
    color: var(--color-text); font-variant-numeric: tabular-nums;
    transition: background var(--duration-fast) var(--ease-out);
}
.ams-dp-year-btn:hover { background: rgba(0, 122, 255, 0.08); color: var(--apple-blue-fg); }
.ams-dp-year-btn.is-current { font-weight: 700; color: var(--apple-blue); }
.ams-dp-year-btn.is-selected {
    background: var(--apple-blue); color: white; font-weight: 600;
}
.ams-dp-year-btn.is-selected:hover {
    background: var(--apple-blue); color: white;
}
.ams-dp-year-btn.is-faded { opacity: 0.4; }

/* Chart sort toggle — botón premium para alternar orden asc/desc en charts.
   Usa la misma base que `.ams-filter-input` (32px, hairline, radius-md) +
   layout flex para acomodar icon + label. Al hover se realza el border;
   `aria-pressed=true` indica el estado desc activo. */
button.ams-chart-sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 168px;
}
button.ams-chart-sort-btn .bi { color: var(--color-text-muted); font-size: 0.92rem; }
button.ams-chart-sort-btn:hover .bi { color: var(--apple-blue); }
button.ams-chart-sort-btn[aria-pressed="true"] {
    border-color: var(--apple-blue);
    background: rgba(0, 122, 255, 0.06);
}
button.ams-chart-sort-btn[aria-pressed="true"] .bi { color: var(--apple-blue); }
.ams-chart-sort-label { font-weight: 500; }

/* Variante búsqueda — input con icono de lupa a la izquierda. */
.ams-filter-input.ams-filter-search {
    padding-left: 30px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 9px center;
}

/* Date range pill — los dos date inputs + flecha entre ellos visualmente
   como un único campo compuesto. */
.ams-filter-date-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ams-filter-date-sep {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    opacity: 0.55;
}

/* Segmented control dentro del filter bar: misma altura que los inputs
   (32px) — sin esto queda más bajo que el resto. */
/* `.ams-filter-segmented` y `.ams-filter-view-toggle` son alias semánticos del
   .ams-segmented-control para filter bars (Sessions/Index Tipo / Vista). Antes
   tenían overrides de padding (3px vs 2px), line-height (1 vs 1.4) e iconos
   (0.78rem vs heredado 0.76rem) que hacían los filter-bar segmented ~2px más
   chicos que los del resto del sistema. Eliminamos todos los overrides para
   que TODOS los segmented controls se vean idénticos sin importar dónde vivan.
   Las clases siguen disponibles como alias semánticos por si una vista las
   reusa, pero NO modifican el look. */

/* Botón "Limpiar" — alineado al baseline del toolbar, look secundario.
   Hover en rojo Apple para señalar acción destructiva ligera. */
.ams-filter-clear {
    height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.ams-filter-clear:hover {
    background: var(--apple-red-bg);
    color: var(--apple-red-fg);
    border-color: var(--apple-red-border);
}
.ams-filter-clear .bi { font-size: 0.82rem; }

/* Auto-equalización de altura — cualquier control interactivo dentro de
   un .ams-filter-bar queda en 32px sin importar la clase específica.
   Resuelve botones de navegación de fecha, .btn-ams-primary inline, etc.
   Scopeado al .ams-filter-bar para no afectar botones en otros contextos. */
.ams-filter-bar .btn-ams-primary,
.ams-filter-bar .btn-ams-secondary {
    height: 32px;
    padding: 0 14px;
    font-size: 0.84rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── Microcycle picker (.mc-*) — sistema global ───────────────────────
   Variante M2: cycle card con stats + timeline. Inspirado en session
   picker (acordeones por mes, hover azul, selección apple-blue-bg) pero
   cada row es una "mini card" con 3 líneas:
     1. Nombre del ciclo + chip MD/Doble/Manual
     2. Timeline (dots: gris=sesión, azul=partido)
     3. Fechas + stats numéricas (partidos, sesiones)

   El trigger se construye con la clase del session picker (.ams-sp-trigger)
   reutilizando el icono de calendario. Solo el panel y los rows son nuevos. */
.mc-wrap { position: relative; }
.mc-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    width: 440px;
    max-height: 480px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-elevated);
    z-index: 1100;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.mc-wrap.is-open .mc-panel { display: flex; }
.mc-body {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--hairline-strong) transparent;
}
.mc-body::-webkit-scrollbar { width: 4px; }
.mc-body::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--radius-sm); }

.mc-group { border-bottom: 1px solid var(--hairline-soft); }
.mc-group:last-child { border-bottom: none; }
.mc-group-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--color-text-muted);
    background: rgba(241,245,249,0.7);
    cursor: pointer; user-select: none;
    transition: background var(--duration-fast);
}
.mc-group-header:hover { background: rgba(226,232,240,0.8); }
.mc-group-header-label { flex: 1; min-width: 0; }
.mc-group-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    color: var(--color-text-muted);
    transition: transform var(--duration-fast) var(--ease-out);
}
.mc-group.is-collapsed .mc-group-chevron { transform: rotate(-90deg); }
.mc-group.is-collapsed .mc-row { display: none; }
.mc-group-count {
    font-weight: 600; font-size: 9px; color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
}

.mc-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    padding: 7px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--hairline-soft);
    transition: background var(--duration-fast);
}
.mc-row:last-child { border-bottom: none; }
.mc-row:hover { background: rgba(0,122,255,0.04); }
.mc-row.is-selected { background: var(--apple-blue-bg); }

.mc-line1 { display: flex; align-items: center; gap: 8px; width: 100%; }
.mc-line1-title {
    font-size: 12.5px; font-weight: 700; color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.mc-line1-chip { margin-left: auto; }

.mc-timeline {
    display: flex; align-items: center; gap: 4px;
    height: 10px;
}
.mc-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--hairline-strong);
    flex-shrink: 0;
}
.mc-dot.is-match {
    width: 7px; height: 7px;
    background: var(--apple-blue);
    box-shadow: 0 0 0 2px var(--apple-blue-bg);
}

.mc-line2 {
    font-size: 10.5px; color: var(--color-text-muted);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mc-line2-dates { font-variant-numeric: tabular-nums; }
.mc-line2-sep { opacity: 0.5; }
.mc-line2-num { font-weight: 600; color: var(--color-text); }

.mc-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center; color: var(--color-text-muted); font-size: 13px;
}

/* Chips compactos del microcycle picker (estilos heredados pero
   redefinidos para el panel — fontsize chico, uppercase). */
.mc-chip {
    display: inline-flex; align-items: center;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap;
    text-transform: uppercase;
}
.mc-chip.is-double { background: rgba(88,86,214,.10); color: #4338CA; }
.mc-chip.is-manual { background: var(--color-bg); color: var(--color-text-muted); }
.mc-chip.is-md     { background: var(--apple-blue-bg); color: var(--apple-blue-fg); }

/* ── Single-select dropdown (.ams-ss-*) — sistema global ───────────────
   Widget de selección de UNA opción con panel desplegable + búsqueda
   opcional (auto-activada cuando hay >= data-ss-search-min items, default 7).
   JS factory en wwwroot/js/ams-single-select.js (AmsSingleSelect.bootstrap).

   El trigger comparte look con .ams-filter-input (32px, hairline, focus apple-blue);
   el panel comparte vocabulario con .ms-select-panel (rounded, soft shadow).

   Variante elegida: D — lista con búsqueda. */
.ams-ss-wrap { position: relative; }

.ams-ss-trigger {
    justify-content: space-between;
    width: 100%;
}
.ams-ss-label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* Forzamos left para que el dropdown se vea igual independientemente del
       contexto del padre. Sin esto, dentro de `.ams-table td` (que tiene
       `text-align: center !important`) el label se centra y queda raro. */
    text-align: left;
}
.ams-ss-label.is-empty { color: var(--color-text-muted); font-style: italic; font-weight: 400; }
.ams-ss-chevron {
    font-size: 11px;
    color: var(--color-text-muted);
    transition: transform var(--duration-base) var(--ease-out);
    flex-shrink: 0;
}
.ams-ss-wrap.is-open .ams-ss-trigger {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16);
}
.ams-ss-wrap.is-open .ams-ss-chevron { transform: rotate(180deg); }
.ams-ss-wrap.is-disabled { opacity: 0.55; pointer-events: none; }

/* ── File input premium ───────────────────────────────────────────────────
   Drop-zone vertical tipo Apple Files: icono grande arriba, label de acción,
   hint debajo, filename en bullet abajo cuando se carga. Patrón:
   ```html
   <label class="ams-file-input" for="file">
       <div class="ams-file-input-icon-wrap">
           <i class="bi bi-cloud-arrow-up"></i>
       </div>
       <div class="ams-file-input-text">Seleccionar archivo CSV</div>
       <div class="ams-file-input-hint">o arrastralo aquí</div>
       <div class="ams-file-input-name" hidden>Ningún archivo seleccionado</div>
   </label>
   <input type="file" id="file" hidden ... />
   ```
   El JS de la pantalla cambia el hint por el filename cuando se elige archivo
   y agrega `is-filled` al wrap.
*/
.ams-file-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 140px;
    padding: 24px 20px;
    background: var(--color-surface);
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.ams-file-input:hover {
    background: var(--color-bg);
    border-color: var(--apple-blue);
}
.ams-file-input.is-dragover {
    background: var(--apple-blue-bg);
    border-color: var(--apple-blue);
    border-style: solid;
}
.ams-file-input.is-filled {
    background: var(--apple-blue-bg);
    border-style: solid;
    border-color: var(--apple-blue);
}
.ams-file-input-icon-wrap {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg);
    border-radius: 50%;
    margin-bottom: 6px;
    transition: background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}
.ams-file-input-icon-wrap i {
    font-size: 1.4rem;
    color: var(--color-text-muted);
}
.ams-file-input:hover .ams-file-input-icon-wrap,
.ams-file-input.is-filled .ams-file-input-icon-wrap {
    background: var(--color-surface);
}
.ams-file-input.is-filled .ams-file-input-icon-wrap i { color: var(--apple-blue-fg); }
.ams-file-input-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}
.ams-file-input-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* Variante compacta: inline en cards densas (ej. _SessionGpsCard).
   Layout horizontal con icono chico al lado del label — mismo lenguaje
   visual (dashed → filled) pero más bajo (~64px). */
.ams-file-input.is-compact {
    flex-direction: row;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px;
    text-align: left;
}
.ams-file-input.is-compact .ams-file-input-icon-wrap {
    width: 36px; height: 36px;
    margin-bottom: 0;
    flex-shrink: 0;
}
.ams-file-input.is-compact .ams-file-input-icon-wrap i { font-size: 1.05rem; }
.ams-file-input.is-compact .ams-file-input-text { font-size: 0.86rem; }
.ams-file-input.is-compact .ams-file-input-hint { font-size: 0.75rem; }
.ams-file-input.is-compact .ams-file-input-name { margin-top: 0; }
.ams-file-input.is-compact > div:not(.ams-file-input-icon-wrap) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    overflow: hidden;
    min-width: 0;
}
.ams-file-input-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--apple-blue-fg);
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Lista de archivos GPS importados (card de la sesión) ──────────
   Cada import activo es una card con sombra suave (estilo macOS Finder).
   Usado en _SessionGpsCard.cshtml. */
.ams-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ams-file-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.ams-file-card:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--hairline-strong);
}
.ams-file-card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--apple-green-bg);
    color: var(--apple-green-fg);
    font-size: 1.05rem;
}
.ams-file-card-info {
    flex: 1;
    min-width: 0;
}
.ams-file-card-name {
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ams-file-card-meta {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}
.ams-file-card-meta .ams-file-card-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}
.ams-file-card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* Botón-icono cuadrado (acción por archivo). */
.ams-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    background: var(--color-surface);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.ams-icon-btn:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--hairline-strong);
}
.ams-icon-btn.is-danger:hover {
    color: var(--apple-red);
    border-color: var(--apple-red);
}

.ams-ss-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 360px;
    background: var(--color-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
    z-index: 50;
    max-height: 320px;
    flex-direction: column;
    overflow: hidden;
    animation: amsSsPanelIn 180ms var(--ease-out) both;
}
.ams-ss-wrap.is-open .ams-ss-panel { display: flex; }
.ams-ss-panel.is-floating {
    position: fixed;
    z-index: 3000;
}
/* Variant `is-end-aligned`: el panel se ancla al borde DERECHO del trigger en
   lugar del izquierdo. Usar cuando el .ams-ss-wrap vive en el extremo derecho
   de un header/card — evita que el panel se salga del viewport hacia la derecha
   (mismo patrón que `.ms-select.is-end-aligned`). */
.ams-ss-wrap.is-end-aligned .ams-ss-panel { left: auto; right: 0; }
@keyframes amsSsPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Search header — auto-oculto cuando count < threshold (JS aplica .is-no-search) */
.ams-ss-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}
.ams-ss-search-icon {
    color: var(--color-text-muted);
    line-height: 1;
    flex-shrink: 0;
    font-size: 12px;
}
.ams-ss-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-text);
    font-size: 0.82rem;
    color: var(--color-text);
}
.ams-ss-search-input::placeholder { color: var(--color-text-muted); opacity: 0.8; }
.ams-ss-wrap.is-no-search .ams-ss-search { display: none; }

.ams-ss-items {
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}
.ams-ss-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--color-text);
    user-select: none;
    transition: background 100ms var(--ease-out);
}
.ams-ss-item:hover { background: rgba(0, 122, 255, 0.05); }
.ams-ss-item.is-selected {
    background: var(--apple-blue-bg);
    font-weight: 500;
}
.ams-ss-item.is-hidden { display: none; }
/* Estado bloqueado: usado por el mutex de player-select en GpsImports/Preview
   (un jugador ya elegido en otra fila se deshabilita visualmente acá). */
.ams-ss-item.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}
.ams-ss-item-leading {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.ams-ss-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Mismo motivo que `.ams-ss-label`: forzar left para que el panel del
       dropdown sea agnóstico al text-align del contexto padre. */
    text-align: left;
}

.ams-ss-empty {
    padding: 16px 12px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}

/* ── Multi-select dropdown (.ms-select-*) — sistema global ─────────────
   Widget de selección múltiple con panel desplegable. JS factory en
   wwwroot/js/ams-multi-select.js (AmsMultiSelect.init). El trigger
   .ms-select-btn comparte el look con .ams-filter-input (32px, hairline,
   focus apple-blue) — sólo se sobrescribe justify-content + width.
   Live-update del label y badge se hace en JS, no en CSS. */
.ms-select { position: relative; }
.ms-select-btn {
    justify-content: space-between;
    width: 100%;
}
.ms-label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-label.is-empty { color: var(--color-text-muted); font-style: italic; }
.ms-badge {
    font-size: 11px; font-weight: 600; background: var(--color-primary); color: #fff;
    padding: 1px 7px; border-radius: 10px; line-height: 1.4; flex-shrink: 0;
}
.ms-chevron { font-size: 11px; color: var(--color-text-muted); transition: transform .15s; flex-shrink: 0; }
.ms-select.open .ms-select-btn { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.16); }
.ms-select.open .ms-chevron { transform: rotate(180deg); }

.ms-select-panel {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 100%; width: max-content; max-width: 360px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.10);
    z-index: 50; max-height: 320px; flex-direction: column; overflow: hidden;
}
/* Variant `is-end-aligned`: el panel se ancla al borde DERECHO del trigger
   en lugar del izquierdo. Usar cuando el .ms-select vive en el extremo
   derecho de un header/toolbar — evita que el panel se salga del viewport. */
.ms-select.is-end-aligned .ms-select-panel { left: auto; right: 0; }
.ms-select.open .ms-select-panel { display: flex; }
.ms-select-panel.is-floating {
    position: fixed;
    z-index: 3000;
}
.ms-select-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--color-border);
    font-size: 12px; flex-shrink: 0; background: var(--color-bg);
}
.ms-toolbar-btn {
    background: none; border: none; color: var(--color-primary);
    padding: 0; font-weight: 600; cursor: pointer; font-size: 12px;
}
.ms-toolbar-btn:hover { text-decoration: underline; }
.ms-toolbar-divider { color: var(--color-border); }
.ms-toolbar-count { margin-left: auto; font-size: 11px; color: var(--color-text-muted); }
.ms-select-items { padding: 4px 0; overflow-y: auto; flex: 1; }
.ms-select-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; cursor: pointer; font-size: 13px;
    user-select: none; margin: 0; border-left: 2px solid transparent;
    transition: background .1s, border-color .1s;
}
.ms-select-item:hover { background: var(--color-bg); }
.ms-select-item.is-checked { border-left-color: var(--color-primary); background: #F8FAFC; }
/* Item disabled — visible cuando hay data-ms-max y se alcanzó el cap. Item
   no chequeado queda muted, sin hover, con cursor not-allowed. Los chequeados
   siguen activos (se pueden destildar). */
.ms-select-item.is-disabled { opacity: 0.4; cursor: not-allowed; }
.ms-select-item.is-disabled:hover { background: transparent; }
.ms-select-item.is-disabled input[type="checkbox"] { cursor: not-allowed; }
.ms-select-item input[type="checkbox"] { margin: 0; accent-color: var(--color-primary); flex-shrink: 0; }
.ms-select-item input[type="checkbox"]:disabled { cursor: not-allowed; }
.ms-select-item .ms-item-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-unassigned {
    font-size: 10px; color: #92400E; padding: 1px 7px;
    background: #FEF3C7; border-radius: 10px;
    font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.ms-select-empty { padding: 16px 12px; font-size: 12px; color: var(--color-text-muted); text-align: center; }

/* Compact secondary button para acciones inline (Ver / Editar / Eliminar
   dentro del drawer expandido). */
.btn-ams-sm {
    padding: 5px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    height: 30px !important;
}
.btn-ams-secondary.is-danger {
    color: var(--apple-red-fg);
}
.btn-ams-secondary.is-danger:hover {
    background: var(--apple-red-bg);
    border-color: var(--apple-red-border);
    color: var(--apple-red-fg);
}

/* ── Summary strip (debajo de la toolbar) ─────────────────────────────── */
.sessions-summary-strip {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 0 var(--space-2);
    font-size: 0.78rem; color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    font-variant-numeric: tabular-nums;
}
.sessions-summary-strip strong { color: var(--color-text); font-weight: 600; }
.sessions-summary-strip .sep { opacity: 0.4; }

/* ── Cycle block (microciclo) ─────────────────────────────────────────── */
.cycle-block { margin-bottom: var(--space-6); }

.cycle-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: 0 var(--space-2) var(--space-3);
    flex-wrap: wrap;
}
.cycle-header-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cycle-header-title {
    font-family: var(--font-display); font-size: 0.98rem; font-weight: 700;
    letter-spacing: -0.01em; color: var(--color-text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    line-height: 1.3;
}
.cycle-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--radius-pill);
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; background: rgba(118,118,128,0.10);
    color: var(--color-text-muted);
}
.cycle-tag.is-double {
    background: var(--apple-orange-bg); color: var(--apple-orange-fg);
}
.cycle-tag .bi { font-size: 0.68rem; }

.cycle-header-meta {
    font-size: 0.78rem; color: var(--color-text-muted);
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.cycle-header-meta .sep { opacity: 0.45; }
.cycle-header-meta .bi { font-size: 0.72rem; opacity: 0.7; }
.cycle-match-info {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--color-text); font-weight: 500;
}

.cycle-header-actions {
    display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}

/* Botones reales (no link-text) para acciones del cycle header */
.btn-cycle-action {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; background: var(--color-surface);
    color: var(--color-text-muted); border: 1px solid var(--hairline);
    border-radius: var(--radius-md); font-size: 0.76rem; font-weight: 600;
    line-height: 1.4; cursor: pointer; font-family: var(--font-text);
    transition: background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.btn-cycle-action:hover {
    background: rgba(0,122,255,0.06); color: var(--apple-blue-fg);
    border-color: rgba(0,122,255,0.3);
}
.btn-cycle-action:active { transform: translateY(0.5px); }
.btn-cycle-action .bi { font-size: 0.78rem; }

/* ── Sessions list (contenedor de filas dentro de un cycle) ───────────── */
.sessions-list {
    background: var(--color-surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    overflow: hidden;
}
.sessions-row + .sessions-row { border-top: 1px solid var(--hairline); }

/* Row head — botón clickeable que expande/colapsa */
.sessions-row-head {
    width: 100%; background: transparent; border: none;
    padding: 12px 18px;
    display: grid;
    grid-template-columns: 32px 88px minmax(0, 1fr) minmax(0, auto) auto auto;
    gap: 14px;
    align-items: center;
    cursor: pointer; text-align: left;
    font-family: var(--font-text); color: inherit;
    transition: background var(--duration-fast) var(--ease-out);
}
.sessions-row-head:hover { background: #F5F9FF; }
.sessions-row.is-expanded .sessions-row-head { background: #F8FAFC; }

.sessions-row-icon {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem; flex-shrink: 0;
    background: var(--apple-blue-bg); color: var(--apple-blue);
}
.sessions-row-icon.is-match    { background: var(--apple-green-bg); color: var(--apple-green-fg); }
.sessions-row-icon.is-friendly { background: rgba(88,86,214,0.10); color: #4338CA; }
.sessions-row-icon.is-training { background: var(--apple-blue-bg); color: var(--apple-blue-fg); }
.sessions-row-icon.is-rest     { background: rgba(118,118,128,0.10); color: var(--color-text-muted); }

.sessions-row-date {
    display: flex; flex-direction: column; gap: 1px;
    font-variant-numeric: tabular-nums; min-width: 0;
}
.sessions-row-date strong {
    font-weight: 600; font-size: 0.86rem;
    text-transform: capitalize;
}
.sessions-row-date span { font-size: 0.74rem; color: var(--color-text-muted); }

.sessions-row-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sessions-row-title strong {
    font-weight: 600; font-size: 0.92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sessions-row-title > span {
    font-size: 0.78rem; color: var(--color-text-muted);
    display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.gps-no { color: var(--color-text-muted); font-style: italic; }

.sessions-row-objective {
    font-size: 0.7rem; padding: 2px 9px; border-radius: var(--radius-pill);
    background: rgba(118,118,128,0.08); color: var(--color-text-muted);
    white-space: nowrap; max-width: 160px;
    overflow: hidden; text-overflow: ellipsis;
}
.sessions-row-objective.is-empty {
    background: transparent;
    /* Reservamos el espacio aunque esté vacío para que el grid no salte */
    visibility: hidden;
}

.sessions-row-caret {
    color: var(--color-text-muted); font-size: 0.92rem;
    transition: transform var(--duration-base) var(--ease-out);
}
.sessions-row.is-expanded .sessions-row-caret { transform: rotate(90deg); }

/* Container para MD chip + badge de override + dash. Ocupa una sola columna
   del grid del row-head, así la flecha caret no se va a una segunda fila
   cuando hay MD chip + badge simultáneamente. */
.sessions-row-tags {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Venue tag (L/V) en filas y cycle header */
.venue-tag {
    display: inline-flex; align-items: center;
    padding: 1px 6px; border-radius: var(--radius-sm, 6px);
    font-size: 0.66rem; font-weight: 700;
    background: rgba(118,118,128,0.12); color: var(--color-text-muted);
    line-height: 1.4;
}

/* Session-type chip (para vista tabla) */
.session-type-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--radius-pill);
    font-size: 0.72rem; font-weight: 500; line-height: 1.4;
    background: rgba(118,118,128,0.08); color: var(--color-text);
}
.session-type-chip.is-match    { background: var(--apple-green-bg); color: var(--apple-green-fg); }
.session-type-chip.is-friendly { background: rgba(88,86,214,0.10); color: #4338CA; }
.session-type-chip.is-training { background: var(--apple-blue-bg); color: var(--apple-blue-fg); }

.muted-dash { color: var(--color-text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Sessions row body (drawer expandido) ─────────────────────────────── */
.sessions-row-body {
    padding: 0 18px 16px;
    border-top: 1px dashed var(--hairline-soft);
    display: none;
    background: #FBFCFE;
}
.sessions-row.is-expanded .sessions-row-body { display: block; }

/* Grid de métricas GPS — auto-fit asegura que escalee bien con 4, 8, 12, 20+ métricas */
.sessions-metrics-grid {
    display: grid; gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin: var(--space-4) 0;
}
.sessions-metric {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; background: var(--color-surface);
    border: 1px solid var(--hairline-soft); border-radius: var(--radius-md);
    min-width: 0;
}
.sessions-metric > span:first-child {
    font-size: 0.66rem; font-weight: 600; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sessions-metric > strong {
    font-size: 1.05rem; font-weight: 700; color: var(--color-text);
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.sessions-metric > em {
    font-style: normal; font-size: 0.7rem; color: var(--color-text-muted);
    font-weight: 500;
}

.no-gps-banner {
    margin: var(--space-4) 0; padding: 14px 16px;
    background: rgba(118,118,128,0.05); border: 1px dashed var(--hairline);
    border-radius: var(--radius-md); color: var(--color-text-muted);
    font-size: 0.84rem; display: flex; align-items: center; gap: 8px;
}
.no-gps-banner .bi { font-size: 0.92rem; opacity: 0.75; }

.sessions-row-actions {
    display: flex; gap: var(--space-2); flex-wrap: wrap;
    margin-top: var(--space-3);
}

/* ── Cycle empty card ─────────────────────────────────────────────────
   Se muestra cuando un microciclo NO tiene sesiones que pasen el filtro
   (pero el cycle igual existe porque el partido lo cierra). El header
   con info del partido sigue visible — el body solo informa que el filtro
   no devolvió nada para ese cycle. */
.cycle-empty-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--color-surface);
    border: 1px dashed var(--hairline);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: 0.84rem;
}
.cycle-empty-card .bi {
    font-size: 1rem;
    opacity: 0.7;
}

/* ── Vista Tabla (fallback para comparar muchas sesiones de una) ──────
   La base `.ams-table-premium` maneja sticky-first column, density,
   alineación centrada, hairlines verticales. Acá hacemos overrides
   propios de esta vista: headers wide+wrapped a 2-3 líneas con
   `text-wrap: balance`, sub-line con la unidad anclada al borde inferior
   (mismo baseline entre todas las columnas), tipografía premium.

   Patrón inspirado en: Apple HIG (multi-line cell content), Stripe
   Dashboard (header en sub-line bottom-aligned), Carbon Design System
   (wrap to 2 lines then scroll), CSS modern (text-wrap balance para
   distribución pareja de palabras en cada línea). */

.sessions-table-wrapper {
    margin-bottom: var(--space-4);
}

/* Headers: replica el estilo de `.ams-table th` (pantalla de análisis
   GPS por sesión). Padding compacto, single-line, uppercase sutil.
   La unidad va inline en <small> muted entre paréntesis, no en chip pill.
   El bg / color muted / border-bottom / sticky / text-align center
   se heredan de `.ams-table-premium thead th` base. */
.sessions-table-premium thead th {
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Body cells respiran un poco más para acompañar el header alto */
.sessions-table-premium tbody td {
    padding: 10px 12px;
}
.sessions-table-premium tbody tr { cursor: pointer; }

/* min-width consistente para columnas GPS — garantiza que ninguna se
   apriete por debajo de un umbral legible incluso con muchas cols */
.sessions-table-premium thead th,
.sessions-table-premium tbody td {
    min-width: 108px;
}

/* La col Sesión (primera) tiene contenido más largo — fecha + hora +
   título. 200px encaja sin truncar feo en la mayoría de los casos.
   Override del min-width genérico por width fija. */
.sessions-table-premium > thead > tr > th:first-child,
.sessions-table-premium > tbody > tr > td:first-child {
    width: 200px; min-width: 200px; max-width: 200px;
    vertical-align: middle;
}
.sessions-table-premium > thead > tr > th:first-child {
    background: #F4F6FA;   /* matchea el bg del thead pero un punto más visible */
    text-align: left;
    padding-left: 14px;
}
/* MD y Tipo: columnas chicas que no necesitan min-width grande */
.sessions-table-premium > thead > tr > th:nth-child(2),
.sessions-table-premium > tbody > tr > td:nth-child(2),
.sessions-table-premium > thead > tr > th:nth-child(3),
.sessions-table-premium > tbody > tr > td:nth-child(3) {
    min-width: 0;
    width: auto;
}

/* Acciones inline (vista tabla) — botones icon-only chicos */
.row-actions { display: inline-flex; gap: 2px; }
.row-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    background: transparent; border: none; cursor: pointer;
    color: var(--color-text-muted); text-decoration: none;
    transition: background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}
.row-action-btn:hover { background: rgba(118,118,128,0.10); color: var(--color-text); }
.row-action-btn.is-danger:hover { background: var(--apple-red-bg); color: var(--apple-red-fg); }

/* ── Empty state premium variant ──────────────────────────────────────── */
.ams-empty-state-premium {
    background: var(--color-surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    padding: 56px 24px; text-align: center; color: var(--color-text-muted);
}
.ams-empty-state-premium > .bi {
    font-size: 2.6rem; opacity: 0.5; display: block; margin-bottom: var(--space-3);
}
.ams-empty-state-premium .ams-empty-state-title {
    font-weight: 600; font-size: 1.05rem; color: var(--color-text);
    margin-bottom: var(--space-1);
}
.ams-empty-state-premium .ams-empty-state-text {
    font-size: 0.88rem; max-width: 480px; margin: 0 auto;
}

/* ── Responsive (≥1200px y >992px y ≤768px) ───────────────────────────── */

/* Pantallas anchas (1280+): cycle header en una sola fila, más respiro */
@media (min-width: 1280px) {
    .cycle-header {
        gap: var(--space-4);
    }
    .sessions-metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}

/* Pantallas medianas (≤992px): el grid del row-head se simplifica para que
   no se rompa cuando el title tiene mucho ancho. El objetivo se oculta y
   se mueve al body expandido. */
@media (max-width: 992px) {
    .sessions-row-head {
        grid-template-columns: 32px 88px 1fr auto auto;
        gap: 10px;
    }
    .sessions-row-objective { display: none; }
    .cycle-header-actions { gap: 4px; }
    .btn-cycle-action {
        font-size: 0.72rem; padding: 4px 8px;
    }
}

/* Mobile (≤768px): verticalizar el row-head; el objetivo y el caret quedan
   apilados con la info principal. La date va inline con el title compacto. */
@media (max-width: 768px) {
    .sessions-row-head {
        grid-template-columns: 32px 1fr auto;
        gap: 10px;
        padding: 12px 14px;
    }
    .sessions-row-date {
        grid-column: 2;
        flex-direction: row; align-items: baseline; gap: 6px;
        order: -1;
    }
    .sessions-row-date strong { font-size: 0.8rem; }
    .sessions-row-date span { font-size: 0.72rem; }
    .sessions-row-title { grid-column: 2; }
    .sessions-row-title strong { font-size: 0.86rem; }
    .sessions-row-objective { display: none; }
    .sessions-row .ams-md-chip { grid-column: 2; justify-self: start; }
    .sessions-row-caret { grid-column: 3; }
    .sessions-row-body { padding: 0 14px 14px; }
    .sessions-metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }
    .cycle-header {
        flex-direction: column; align-items: stretch;
    }
    .cycle-header-actions {
        align-self: flex-start;
    }
}

/* Player-mobile: la nueva inset list NO aplica al jugador (su propio layout
   se renderiza por el branch isPlayer en la view). Por defensa: si por algún
   motivo el HTML staff llega a body.player-mobile, ocultar para no romper. */
body.player-mobile .cycle-block,
body.player-mobile .sessions-summary-strip,
body.player-mobile .sessions-table-wrapper {
    display: none !important;
}

/* ── Eval cards en grid responsive ──────────────────────────────────────
   Wrapper para mostrar cards de evaluaciones (Nutrición, Kinesiología, etc.)
   en columna en mobile y 2-col a partir de tablet. Aprovecha el ancho
   horizontal de iPad sin tocar la jerarquía mobile. */
.ams-eval-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
@media (min-width: 768px) {
    .ams-eval-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        align-items: start;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   TABLET RESPONSIVE (768–991.98px)
   ────────────────────────────────────────────────────────────────────────────
   Overrides foundational para iPad-class devices. Pure CSS — no body class
   nueva. La negación `body:not(.player-mobile)` mantiene el sistema dual:

     • body:not(.player-mobile)  → staff tablet (drawer premium 280px)
     • body.player-mobile        → player tablet (3-col stats, bottom nav)

   Este bloque va al FINAL del archivo a propósito: las reglas tablet pisan
   los leaks `max-width: 991.98px` que hoy aplicaban mobile-player styling
   al staff a 800px (sticky cols a 130px, inputs 44px, etc.).

   Patrones: B1 split-view, B2 density tables, B3 filter popover, B4 sticky bar.
   Documentación completa: docs/10-tablet-patterns.md
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* ── A3. Token overrides en tablet ─────────────────────────────────── */
    :root {
        --font-size-base:  16px;     /* ↑ desde 15px (más legible iPad)   */
        --touch-target:    48px;     /* ↑ desde 44px                       */
        --table-row-h:     52px;     /* ↑ desde 44px (respiro premium)     */
        --form-grid-gap:   20px;     /* ↑ desde 16px                       */
        --content-padding: 24px;     /* ↑ desde 16px                       */
        --sidebar-width:   280px;    /* drawer premium (era 240px)          */
    }
    html { font-size: var(--font-size-base); }

    /* ── A4. Staff: drawer hamburguesa premium ─────────────────────────── */
    /* La sidebar ya se oculta a ≤991.98px (línea 2152). Acá la upgrade-amos
       a "premium drawer" cuando se abre con el toggle: ancho 280px, hairlines
       en separadores de sección, shadow multi-layer, overlay más profundo. */
    /* Sidebar drawer premium en tablet: 280px (token sidebar-width override
       arriba) + shadow card-hover. Scrollbar fino se hereda de la regla
       global de .ams-sidebar (ahora siempre visible). */
    body:not(.player-mobile) .ams-sidebar {
        box-shadow: var(--shadow-card-hover);
    }
    body:not(.player-mobile) .ams-sidebar-section {
        padding: var(--space-3) var(--space-3) var(--space-1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    body:not(.player-mobile) .ams-sidebar-section:last-of-type {
        border-bottom: none;
    }
    body:not(.player-mobile) .ams-sidebar-label {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        margin-bottom: var(--space-1);
    }
    /* Items del nav: altura compacta para que entre todo el menú admin
       en una iPad portrait. min-height 40px sigue siendo touch-friendly. */
    body:not(.player-mobile) .ams-nav-item {
        padding: var(--space-2) var(--space-3);
        font-size: 0.9rem;
        min-height: 40px;
    }
    body:not(.player-mobile) .ams-sidebar-overlay {
        background: rgba(15, 23, 42, 0.55);   /* slate-900 / 55%, más profundo */
    }

    /* ── Staff: layout content más espacioso ───────────────────────────── */
    body:not(.player-mobile) .ams-content {
        padding: var(--content-padding);
    }
    body:not(.player-mobile) .ams-card {
        padding: var(--space-5);
    }
    body:not(.player-mobile) .ams-page-title {
        font-size: 1.5rem;
    }

    /* ── Staff: forms respiran ─────────────────────────────────────────── */
    body:not(.player-mobile) .ams-form-grid,
    body:not(.player-mobile) .ams-form-grid.is-row,
    body:not(.player-mobile) .ams-form-grid.is-bulk {
        gap: var(--form-grid-gap);
    }
    body:not(.player-mobile) input.ams-input,
    body:not(.player-mobile) input.form-control,
    body:not(.player-mobile) select.ams-input,
    body:not(.player-mobile) select.form-select,
    body:not(.player-mobile) textarea.form-control {
        min-height: var(--touch-target);
    }

    /* ── Staff: tablas respiran ─────────────────────────────────────────── */
    body:not(.player-mobile) .ams-table th,
    body:not(.player-mobile) .ams-table td,
    body:not(.player-mobile) .ams-table-premium th,
    body:not(.player-mobile) .ams-table-premium td {
        min-height: var(--table-row-h);
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }
    /* Sticky-first column: revertir el clamp de 130px del bloque mobile */
    body:not(.player-mobile) .ams-table-sticky th:first-child,
    body:not(.player-mobile) .ams-table-sticky td:first-child,
    body:not(.player-mobile) .ams-table-sticky-2 th:first-child,
    body:not(.player-mobile) .ams-table-sticky-2 td:first-child,
    body:not(.player-mobile) .ams-table-sticky-3 th:first-child,
    body:not(.player-mobile) .ams-table-sticky-3 td:first-child {
        min-width: 180px;
        max-width: 200px;
    }

    /* ── A5. Utilidades tablet ─────────────────────────────────────────── */
    .ams-tablet-only { display: revert; }
    .ams-tablet-hide { display: none !important; }

    /* ── B1. Master-detail split view ──────────────────────────────────── */
    /* Wrapper se aplica con `.ams-split`. Apila a <768px (lista solo); en
       tablet+ presenta lista+detalle 40/60 lado a lado. */
    .ams-split {
        display: flex;
        gap: var(--space-5);
        align-items: flex-start;
    }
    .ams-split-list {
        flex: 0 0 40%;
        min-width: 0;
    }
    .ams-split-detail {
        flex: 1 1 60%;
        min-width: 0;
        position: sticky;
        top: calc(var(--topbar-height) + var(--space-4));
    }

    /* ── B2. Density-aware tables ──────────────────────────────────────── */
    /* Convención: anotar <th>/<td> con data-priority="high|med|low".
       En tablet ocultamos solo "low" — datos secundarios.
       En mobile (<768px) ocultaríamos también "med". Decisión por módulo
       documentada en docs/10-tablet-patterns.md. */
    [data-priority="low"] { display: none !important; }

    /* ── B3. Filter popover ────────────────────────────────────────────── */
    /* Trigger compacto + panel flotante. El partial _FilterPopover.cshtml
       monta el HTML; este CSS es el comportamiento visual. */
    .ams-filter-popover {
        position: relative;
        display: inline-block;
    }
    .ams-filter-popover-trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        min-height: var(--touch-target);
        background: var(--color-surface);
        border: 1px solid var(--hairline);
        border-radius: var(--radius-md);
        font-size: 0.92rem;
        font-weight: 500;
        color: var(--color-text);
        cursor: pointer;
        transition: background var(--duration-base) var(--ease-out);
        list-style: none;                  /* ocultar marker de <summary> */
        user-select: none;
    }
    .ams-filter-popover-trigger::-webkit-details-marker { display: none; }
    .ams-filter-popover-trigger::marker { display: none; }
    .ams-filter-popover-trigger:hover {
        background: var(--color-bg);
    }
    /* Estado expandido — funciona tanto con <details open> como con
       attribute `aria-expanded="true"` para implementaciones JS-driven. */
    .ams-filter-popover[open] .ams-filter-popover-trigger,
    .ams-filter-popover-trigger[aria-expanded="true"] {
        background: var(--color-bg);
        border-color: var(--color-primary);
    }
    .ams-filter-popover-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: var(--color-primary);
        color: #fff;
        border-radius: var(--radius-pill);
        font-size: 0.72rem;
        font-weight: 700;
    }
    .ams-filter-popover-panel {
        position: absolute;
        top: calc(100% + var(--space-2));
        left: 0;
        z-index: 50;
        min-width: 320px;
        max-width: 90vw;
        padding: var(--space-5);
        background: var(--color-surface);
        border: 1px solid var(--hairline);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card-hover);
        display: none;
    }
    .ams-filter-popover[open] .ams-filter-popover-panel,
    .ams-filter-popover-panel.is-open {
        display: block;
    }

    /* ── B4. Sticky bottom bar premium ─────────────────────────────────── */
    .ams-sticky-bar {
        position: sticky;
        bottom: 0;
        z-index: 30;
        padding: var(--space-4) var(--space-5);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        background: var(--color-surface);
        box-shadow:
            0 -1px 0 var(--hairline),
            0 -8px 24px rgba(0, 0, 0, 0.04);
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    /* ── PlayerDashboard tablet — 3-col stats grid ─────────────────────── */
    /* El stats grid ya tiene min-width: 768px → 3-col. Acá nos aseguramos
       que el gap respira más en tablet y que el hero card aprovecha el ancho. */
    body.player-mobile .ams-stats-grid {
        gap: var(--space-4);
    }
    /* Inset list 2-col en tablet (de 1-col mobile) — opt-in con .is-tablet-grid */
    body.player-mobile .ams-inset-list.is-tablet-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        background: transparent;
    }
    body.player-mobile .ams-inset-list.is-tablet-grid .ams-inset-row {
        background: var(--color-surface);
        border-radius: var(--radius-lg);
        border: 1px solid var(--hairline);
    }

    /* ── Aliviar min-width inline en filtros del PlayerDashboard staff ───
       Los selects/inputs tienen `style="min-width:150-220px"` inline para
       desktop, lo que en tablet provoca overflow + scroll horizontal feo.
       Reset puntual: dejamos que el flex container distribuya el ancho. */
    body:not(.player-mobile) .ams-card form select.ams-input[style*="min-width"],
    body:not(.player-mobile) .ams-card form input.ams-input[style*="min-width"] {
        min-width: 0 !important;
    }

    /* (KPI grid 2x2 balanceado vive ahora en una regla aparte con rango
       extendido — ver fuera del bloque tablet, después de este media. El
       rango 600-1199px cubre iPad mini portrait (744), iPad Air (820),
       iPad Pro 11 (834), iPad Pro 13 portrait (1024) y laptop angosto.) */

    /* ── Sidebar toggle (hamburger) — touch target premium ─────────────────
       El button original tenía padding 4×8 lo que lo hacía 16×8 si el icon
       no cargaba (ej: bloqueo de ad blocker al CDN). Forzar min-height 48px
       garantiza un blanco táctil correcto y un look premium. */
    body:not(.player-mobile) .ams-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        font-size: 1.4rem;
    }

    /* ── Daily mobile-list staff: grid 2-col en tablet ─────────────────────
       Las cards de jugador del Home staff fueron diseñadas para mobile
       (375px) — apiladas en una columna con 250px+ de alto cada una. En
       tablet 800-991px ese layout deja la pantalla mayormente vacía
       horizontalmente y obliga a scrollear ~25 cards verticalmente.
       Grid 2-col duplica la densidad sin tocar markup. */
    body:not(.player-mobile) .daily-mobile-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
        padding: 0;
    }

}

/* ── Mobile (<768px): density-aware ocultar también priority="med" ─────── */
@media (max-width: 767.98px) {
    [data-priority="low"],
    [data-priority="med"] { display: none !important; }
}

/* ── Restaurar visibilidad por defecto fuera del rango tablet ─────────── */
.ams-tablet-only { display: none; }
@media (min-width: 992px) {
    .ams-tablet-hide { display: revert; }
}