/**
 * components.css — CSS de componentes globales reutilizables
 *
 * Extraído de: feedback-widget.php, confirm-modal.php, main.php layout
 * Incluir en el <head> del layout principal.
 *
 * @package Assets
 */

/* Orden de capas (Tailwind v4): las clases de componente quedan DEBAJO de las utilidades,
   así `p-*`, `mt-*`, `w-*` etc. pueden ajustar un componente sin !important. */
@layer theme, base, components, utilities;

/* ═══════════════════════════════════════════════════
   CONFIRM MODAL
   ═══════════════════════════════════════════════════ */

#confirm-modal.show #confirm-backdrop {
    opacity: 1;
}

#confirm-modal.show #confirm-dialog {
    opacity: 1;
    transform: scale(1);
}

@keyframes modal-shake {
    0%, 100% { transform: scale(1) translateX(0); }
    25% { transform: scale(1) translateX(-5px); }
    75% { transform: scale(1) translateX(5px); }
}

#confirm-dialog.shake {
    animation: modal-shake 0.3s ease-in-out;
}

/* ═══════════════════════════════════════════════════
   FEEDBACK WIDGET
   ═══════════════════════════════════════════════════ */

/* Modal animations */
#feedbackModal.show #feedbackBackdrop { opacity: 1; }
@media (min-width: 640px) {
    #feedbackModal.show #feedbackDialog { opacity: 1; transform: scale(1); }
}
@media (max-width: 639px) {
    #feedbackModal.show #feedbackDialog { transform: translateY(0); }
}

/* Feedback Button: auto-collapse animation */
.feedback-btn-label {
    display: inline-block;
    max-width: 120px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                margin-left 0.4s ease;
    margin-left: 0;
}

.feedback-btn.collapsed .feedback-btn-label {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
}

@media (min-width: 640px) {
    .feedback-btn.collapsed:hover .feedback-btn-label {
        max-width: 120px;
        opacity: 1;
        margin-left: 4px;
    }
}

.feedback-btn-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feedback-btn.collapsed .feedback-btn-icon {
    transform: scale(1.1);
}
.feedback-btn.collapsed:hover .feedback-btn-icon {
    transform: scale(1);
}

.feedback-btn-dot {
    animation: feedbackDotPulse 2s ease-in-out infinite;
}
.feedback-btn.collapsed .feedback-btn-dot {
    animation: none;
}
.feedback-btn.collapsed:hover .feedback-btn-dot {
    animation: feedbackDotPulse 2s ease-in-out infinite;
}

@keyframes feedbackDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Mobile: always collapsed (icon-only) */
@media (max-width: 639px) {
    .feedback-btn-label {
        max-width: 0 !important;
        opacity: 0 !important;
        margin-left: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════
   ACCESSIBILITY — Reduced Motion
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


@layer components {

/* ═══════════════════════════════════════════════════════════════════
   PODIUM UI 1.0 — tokens y componentes (fuente: DESIGN.md)
   Las clases de componente viven aquí; Tailwind se usa solo para layout.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Marca Podium: FIJA en Admin, Acceso, Campo y TV. */
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-primary-soft: color-mix(in srgb, var(--color-primary) 13%, #fff);
    --color-primary-tint: color-mix(in srgb, var(--color-primary) 7%, #fff);
    --color-on-primary-soft: color-mix(in srgb, var(--color-primary) 75%, #000);
    --color-on-primary: #FFFFFF;
    /* Marca del organizador: solo Público, Correo e Impresión (la inyecta Brand::cssVars()). */
    --color-org: var(--color-primary);
    --color-on-org: #FFFFFF;
    /* Neutros */
    --color-ink: #0F172A;
    --color-ink-2: #334155;
    --color-text-secondary: #475569;
    --color-text-muted: #64748B;
    --color-text-muted-canvas: #5B6577;
    --color-canvas: #EEF0F3;
    --color-surface: #FFFFFF;
    --color-surface-subtle: #F3F5F8;
    --color-surface-hover: #F6F7F9;
    --color-track: #F1F3F6;
    --color-border: #DCE1E8;
    --color-divider: #EEF1F5;
    --color-overlay: rgba(15, 23, 42, 0.38);
    /* Semánticos */
    --color-success: #15803D;
    --color-danger: #B91C1C;
    --color-danger-strong: #DC2626;
    /* Forma y profundidad */
    --radius-control: 12px;
    --radius-card: 22px;
    --radius-modal: 24px;
    --shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .04);
    --shadow-3: 0 24px 64px rgba(15, 23, 42, .22);
    --ease: cubic-bezier(.4, 0, .2, 1);
}

.num { font-variant-numeric: tabular-nums; }

/* Foco visible (WCAG 2.2) */
.btn:focus-visible, .icon-btn:focus-visible, a.nav:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Botones ───────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border: 0; border-radius: 9999px;
    font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.btn i { font-size: 16px; line-height: 1; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
.btn-sm { height: 36px; padding: 0 14px; }
.btn-lg { height: 46px; padding: 0 20px; }
.btn-field { height: 56px; padding: 0 20px; border-radius: 16px; font-size: 16px; }
.btn-field i { font-size: 20px; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-border); }
.btn-secondary:hover { background: var(--color-surface-hover); }
.btn-soft { background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.btn-soft:hover { filter: brightness(.97); }
.btn-ink { background: var(--color-ink); color: #fff; }
.btn-ink:hover { background: var(--color-ink-2); color: #fff; }
.btn-ghost { background: transparent; color: var(--color-ink-2); }
.btn-ghost:hover { background: var(--color-surface-subtle); color: var(--color-ink); }
.btn-danger { background: var(--color-surface); color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-border); }
.btn-danger:hover { background: #FDE8EA; }
.btn-org { background: var(--color-org); color: var(--color-on-org); }
.btn-org:hover { filter: brightness(.92); }
.btn-spin { animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--color-text-secondary); text-decoration: none;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn i { font-size: 18px; line-height: 1; }
.icon-btn:hover { background: var(--color-divider); color: var(--color-ink); }
.icon-btn-soft { background: var(--color-surface-subtle); }
.icon-btn-surface { background: var(--color-surface); box-shadow: var(--shadow-1); }

/* ── Tags, chips, avisos ───────────────────────────────────────── */
.tag {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
    border-radius: 9999px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.tag-blue { background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.tag-amber { background: #FDF1DC; color: #92400E; }
.tag-green { background: #E3F5E9; color: #166534; }
.tag-violet { background: #EFEAFD; color: #5B21B6; }
.tag-rose { background: #FDE8EA; color: #9F1239; }
.tag-teal { background: #DFF4F2; color: #115E59; }
.tag-slate { background: #EEF1F5; color: #334155; }
.dot-live {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
    animation: ui-pulse 2s ease-in-out infinite;
}
@keyframes ui-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 8%, transparent); } }

.chip {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: 10px; font-size: 11.5px; font-weight: 600; line-height: 1;
}
.chip-xs { width: 20px; height: 20px; border-radius: 6px; font-size: 9.5px; }
.chip-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10.5px; }
.chip-lg { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
.chip-round { border-radius: 50%; }
.chip-blue { background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.chip-amber { background: #FDF1DC; color: #92400E; }
.chip-green { background: #E3F5E9; color: #166534; }
.chip-teal { background: #DFF4F2; color: #115E59; }
.chip-violet { background: #EFEAFD; color: #5B21B6; }
.chip-rose { background: #FDE8EA; color: #9F1239; }

.alert {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px;
    font-size: 13px; line-height: 1.45;
}
.alert i { font-size: 16px; line-height: 1.45; flex: none; }
.alert-info { background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.alert-success { background: #E3F5E9; color: #166534; }
.alert-warning { background: #FDF1DC; color: #92400E; }
.alert-danger { background: #FDE8EA; color: #9F1239; }

/* ── Card, encabezado de página, KPI, vacío, progreso ──────────── */
.card {
    background: var(--color-surface); border-radius: var(--radius-card); padding: 22px 24px;
    box-shadow: var(--shadow-1); min-width: 0; box-sizing: border-box;
}
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.card-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--color-ink); }
.card-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--color-text-muted); }
.card-actions { display: flex; align-items: center; gap: 8px; }
.card-foot { margin-top: auto; padding-top: 14px; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 10px 4px 2px; margin-bottom: 16px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-text-muted-canvas); }
.h1 { margin: 6px 0; font-size: 34px; line-height: 1.1; letter-spacing: -.025em; font-weight: 600; color: var(--color-ink); }
.lead { margin: 0; font-size: 14px; color: var(--color-text-secondary); }
.lead b { color: var(--color-ink); font-weight: 600; }
@media (max-width: 639px) { .h1 { font-size: 28px; } }

.kpi-card { padding: 20px 22px; }
.kpi-label { margin: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--color-primary) 70%, var(--color-ink)); }
.kpi-row { display: flex; align-items: baseline; gap: 10px; }
.kpi-value { font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--color-ink); }
.kpi-delta { font-size: 12.5px; font-weight: 600; }
.kpi-up { color: var(--color-success); }
.kpi-down { color: var(--color-danger); }
.kpi-flat { color: var(--color-text-muted); }
.kpi-context { margin: 10px 0 0; font-size: 12.5px; color: var(--color-text-muted); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; text-align: center; color: var(--color-text-muted); }
.empty-state > i { font-size: 28px; color: var(--color-text-muted); }
.empty-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-ink); }
.empty-text { margin: 0; font-size: 13px; }
.empty-action { margin-top: 10px; }

.progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--color-ink); }
.progress-meta > span:last-child { color: var(--color-text-muted); font-weight: 400; }
.progress-track { height: 20px; border-radius: 9999px; background: var(--color-track); overflow: hidden; }
.progress-fill { height: 100%; min-width: 28px; border-radius: 9999px; background: linear-gradient(90deg, #0F172A, #334155); }
.progress-fill-primary { background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 55%, #fff), var(--color-primary)); }
.progress-thin .progress-track { height: 6px; }
.progress-thin .progress-fill { min-width: 6px; }

/* ── Formularios ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 500; color: #1E293B; }
.field-optional { font-weight: 400; color: var(--color-text-muted); }
.field-help { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.field-error { margin: 0; font-size: 12px; color: var(--color-danger); }
.input {
    width: 100%; height: 42px; padding: 0 14px; box-sizing: border-box; border: 0; outline: 0;
    border-radius: var(--radius-control); background: var(--color-surface-subtle); color: var(--color-ink);
    font: inherit; font-size: 14px;
    transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder { color: var(--color-text-muted-canvas); }
.input:focus {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1.5px var(--color-primary), 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.input-error, .input-error:focus { background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-danger-strong); }
.input-error:focus { box-shadow: inset 0 0 0 1.5px var(--color-danger-strong), 0 0 0 4px color-mix(in srgb, var(--color-danger-strong) 18%, transparent); }
.textarea { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; }
select.input {
    appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .btn, .icon-btn, .input { transition: none; }
    .btn-spin, .dot-live { animation: none; }
}

/* ── Lienzo y acceso (H2) ──────────────────────────────────────── */
.ui-canvas {
    margin: 0; min-height: 100vh; color: var(--color-ink); font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px; -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 70%),
        var(--color-canvas);
}
.ui-canvas-left { background:
        radial-gradient(900px 420px at 0% 0%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 70%),
        var(--color-canvas); }

.logo-group { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-ink); }
.logo-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--color-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.logo-word { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }

/* Split del login: formulario | panel de marca */
.auth-split { display: flex; gap: 16px; padding: 16px; min-height: 100vh; box-sizing: border-box; }
.auth-form-side {
    flex: 1 1 0; display: flex; flex-direction: column; padding: 28px 32px; box-sizing: border-box; min-width: 0;
    background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1);
}
.auth-form-main { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 380px; margin: 0 auto; gap: 20px; padding: 24px 0; }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.auth-brand-side {
    flex: 1 1 0; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: 40px; box-sizing: border-box; border-radius: var(--radius-card); color: #fff;
    background: radial-gradient(620px 420px at 85% 10%, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 70%), var(--color-ink);
}
.auth-brand-title { margin: 14px 0 10px; font-size: 40px; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; max-width: 460px; }
.auth-brand-lead { margin: 0; max-width: 440px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.glass { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); border-radius: 18px; backdrop-filter: blur(6px); }
.auth-mini { background: #fff; color: var(--color-ink); border-radius: 18px; padding: 16px 18px; box-shadow: 0 24px 64px rgba(2, 6, 23, .45); max-width: 360px; }
.auth-mini-label { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-on-primary-soft); }
.auth-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.auth-mini-row b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.auth-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.auth-kpi { padding: 14px 16px; }
.auth-kpi b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.auth-kpi span { font-size: 12px; color: rgba(255, 255, 255, .72); }
@media (max-width: 639px) { .auth-title { font-size: 28px; } }
@media (max-width: 1023px) {
    .auth-brand-side { display: none; }
    .auth-form-side { padding: 24px; }
}

/* Acceso secundario y errores: auth-card centrada */
.auth-center { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 16px; box-sizing: border-box; }
.auth-card {
    width: 100%; max-width: 420px; box-sizing: border-box; padding: 32px; display: flex; flex-direction: column; gap: 20px;
    background: var(--color-surface); border-radius: var(--radius-modal); box-shadow: var(--shadow-1);
}
.auth-card-center { text-align: center; align-items: center; }
.auth-eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-on-primary-soft); }
.auth-title { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -.025em; font-weight: 600; }
.auth-title-sm { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.auth-lead { margin: 0; font-size: 14px; color: var(--color-text-secondary); }
.auth-badge { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.auth-badge-success { background: #E3F5E9; color: #166534; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Input con ícono y acción (mostrar contraseña) */
.input-wrap { position: relative; }
.input-wrap > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--color-text-muted); pointer-events: none; }
.input-wrap .input { height: 44px; padding-left: 42px; }
.input-wrap > .icon-btn { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; }
.input-wrap > .icon-btn + .input, .input-wrap .input { padding-right: 44px; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

.link { color: var(--color-on-primary-soft); font-weight: 600; font-size: 13px; text-decoration: none; }
.link:hover { text-decoration: underline; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-primary); border-radius: 6px; }
.or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--color-text-muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--color-divider); }
.btn-google img { width: 18px; height: 18px; }

/* Error 404 / 403 / 500 */
.err-code { margin: 0; font-size: 72px; line-height: 1; font-weight: 600; letter-spacing: -.05em; background: linear-gradient(180deg, var(--err-from, var(--color-primary)), var(--err-to, #60A5FA)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.err-403 { --err-from: #0F172A; --err-to: #64748B; }
.err-500 { --err-from: #B91C1C; --err-to: #F87171; }
.err-meta { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.err-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--color-text-secondary); }

.err-debug { text-align: left; width: 100%; box-sizing: border-box; padding: 16px; border-radius: 14px; background: var(--color-ink); color: #F8FAFC; overflow-x: auto; }
.err-debug pre { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; color: #94A3B8; }
.err-debug summary { cursor: pointer; font-size: 12px; color: #94A3B8; }
.err-debug-title { margin: 0 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #F87171; }
.err-debug-file { margin: 0 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #94A3B8; }

/* Marca de acceso rápido (solo desarrollo) */
.quick-access { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--color-divider); }
.quick-access-title { margin: 0; text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-text-muted-canvas); }
.quick-access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.quick-access-grid .btn { white-space: normal; height: auto; min-height: 36px; padding: 6px 12px; line-height: 1.25; text-align: left; justify-content: flex-start; }

/* ── Shell de administración (H3) ──────────────────────────────── */
.ui-shell { display: flex; gap: 16px; padding: 16px; min-height: 100vh; box-sizing: border-box; }
.sidebar {
    position: sticky; top: 16px; align-self: flex-start; flex: none; width: 232px; height: calc(100vh - 32px);
    display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; padding: 18px 14px 14px;
    background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1); z-index: 50;
    transition: width .25s var(--ease), transform .25s var(--ease);
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 14px; }
.sidebar-brand { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sidebar-org { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.sidebar-search { position: relative; margin-bottom: 6px; }
.sidebar-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--color-text-muted); pointer-events: none; }
.sidebar-search .input { height: 38px; padding-left: 36px; font-size: 13px; }
.nav-scroll { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.nav-section-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 10px 6px;
    border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left;
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-text-muted);
}
.nav-section-items { overflow: hidden; transition: max-height .2s var(--ease); }
.section-chevron { font-size: 12px; transition: transform .2s var(--ease); }
.nav {
    display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; margin-bottom: 2px;
    border-radius: var(--radius-control); color: var(--color-ink-2); text-decoration: none;
    font-size: 13.5px; font-weight: 500; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav > i { flex: none; font-size: 18px; color: var(--color-text-muted); }
.nav:hover { background: var(--color-surface-subtle); color: var(--color-ink); }
.nav.active { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 28%, transparent); }
.nav.active > i { color: var(--color-on-primary); }
.sidebar-foot { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--color-surface-subtle); text-decoration: none; color: inherit; min-width: 0; }
.user-card-text { min-width: 0; flex: 1; }
.user-card-name { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-role { margin: 0; font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-actions { display: flex; gap: 8px; }
.sidebar-actions .btn { flex: 1; }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; max-width: 1600px; margin: 0 auto; width: 100%; }
.topbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 8px 8px 18px;
    background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-1);
}
.crumb { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--color-text-muted); }
.crumb strong { color: var(--color-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-menu { display: none; }
.shell-content { min-width: 0; padding-bottom: 32px; }
.sidebar-overlay { position: fixed; inset: 0; background: var(--color-overlay); z-index: 40; }

.toast-stack { position: fixed; right: 16px; bottom: 84px; z-index: 95; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast {
    display: flex; align-items: flex-start; gap: 10px; width: 360px; max-width: 100%; box-sizing: border-box; padding: 12px 14px;
    background: var(--color-ink); color: #fff; border-radius: 14px; box-shadow: var(--shadow-3); font-size: 13px; line-height: 1.45;
    animation: toast-in .2s var(--ease);
}
.toast > i { font-size: 18px; flex: none; }
.toast-success > i { color: #4ADE80; }
.toast-error > i { color: #F87171; }
.toast-close { margin-left: auto; border: 0; background: transparent; color: #94A3B8; cursor: pointer; padding: 0; font-size: 16px; line-height: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.sidebar-tooltip {
    position: fixed; left: 88px; z-index: 100; padding: 6px 10px; border-radius: 10px; background: var(--color-ink); color: #fff;
    font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-6px);
    transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.sidebar-tooltip.visible { opacity: 1; transform: none; }

@media (min-width: 1024px) {
    .sidebar-collapsed { width: 72px; }
    .sidebar-collapsed .sidebar-text, .sidebar-collapsed .sidebar-section-title, .sidebar-collapsed .sidebar-footer-text,
    .sidebar-collapsed .sidebar-logo-text, .sidebar-collapsed .sidebar-search, .sidebar-collapsed .sidebar-section-meta, .sidebar-collapsed .sidebar-org { display: none; }
    .sidebar-collapsed .nav, .sidebar-collapsed .nav-section-btn, .sidebar-collapsed .user-card { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar-collapsed .sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; flex-direction: column; }
    .sidebar-collapsed .sidebar-actions { flex-direction: column; }
}
@media (max-width: 1023px) {
    .ui-shell { padding: 12px; }
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; height: 100vh; border-radius: 0 var(--radius-card) var(--radius-card) 0; transform: translateX(-100%); }
    .sidebar.is-open { transform: none; box-shadow: var(--shadow-3); }
    .topbar-menu { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .nav-section-items, .section-chevron, .toast, .sidebar-tooltip { transition: none; animation: none; } }

/* ── Listas de actividad ───────────────────────────────────────── */
.list-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--color-divider); }
.list-row:first-child { border-top: 0; padding-top: 0; }
.list-row-text { flex: 1; min-width: 0; }
.list-row-title { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-meta { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-end { display: flex; align-items: center; gap: 10px; flex: none; }
.list-row-date { font-size: 12px; color: var(--color-text-muted); }
.inline-links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 6px; }

/* ── Tabla (DESIGN.md §Tabla) ──────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0 4px; font-size: 13.5px; }
.tbl th { padding: 0 14px 6px; text-align: left; font-size: 12px; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl td { height: 54px; padding: 0 14px; white-space: nowrap; font-weight: 500; color: var(--color-ink); vertical-align: middle; }
.tbl td:first-child, .tbl th:first-child { padding-left: 14px; }
.tbl tbody tr td:first-child { border-radius: 14px 0 0 14px; }
.tbl tbody tr td:last-child { border-radius: 0 14px 14px 0; }
.tbl tbody tr:hover td { background: var(--color-surface-hover); }
.tbl tr.is-highlight td { background: var(--color-primary-tint); }
.tbl .muted { color: var(--color-text-secondary); font-weight: 400; }
.tbl .row-actions { display: flex; justify-content: flex-end; gap: 6px; opacity: 0; transform: translateX(16px); transition: opacity .15s var(--ease), transform .15s var(--ease); }
.tbl tr:hover .row-actions, .tbl tr:focus-within .row-actions { opacity: 1; transform: none; }
@media (hover: none) { .tbl .row-actions { opacity: 1; transform: none; } }
.tbl .pos { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--color-track); font-size: 12px; font-weight: 600; }
.tbl tr.is-highlight .pos { background: var(--color-primary); color: #fff; }
.tbl-note { margin: 10px 4px 0; font-size: 12px; color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .tbl .row-actions { transition: none; } }

/* ── Lista de definiciones ─────────────────────────────────────── */
.dl { margin: 0; display: flex; flex-direction: column; }
.dl-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--color-divider); font-size: 13.5px; }
.dl-row:first-child { border-top: 0; padding-top: 0; }
.dl-row dt { color: var(--color-text-secondary); }
.dl-row dd { margin: 0; font-weight: 600; color: var(--color-ink); text-align: right; }

/* ── Contexto Público: marca del organizador (--color-org) ─────── */
.ui-public {
    background:
        radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--color-org) 13%, transparent), transparent 70%),
        var(--color-canvas);
}
.public-shell { max-width: 1152px; margin: 0 auto; padding: 16px; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.public-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 18px;
    background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-1);
}
.public-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--color-ink); }
.public-logo { height: 40px; max-width: 160px; object-fit: contain; }
.public-name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-initial { background: var(--color-org); color: var(--color-on-org); }
.public-main { flex: 1; min-width: 0; }
.public-foot { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.public-foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.public-foot-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-ink); }
.public-foot-text { margin: 6px 0 0; max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.public-contact { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--color-text-secondary); }
.public-contact li { display: flex; align-items: center; gap: 10px; }
.public-contact a { color: var(--color-ink); text-decoration: none; }
.public-contact a:hover { text-decoration: underline; }
.public-foot-meta { margin: 0; padding-top: 12px; border-top: 1px solid var(--color-divider); font-size: 12px; color: var(--color-text-muted); }
.public-foot-meta a { color: var(--color-text-secondary); }

/* Segmented control (pestañas del portal) */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 9999px; background: var(--color-surface-subtle); }
.segmented > a, .segmented > button {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 9999px;
    background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.segmented > a:hover, .segmented > button:hover { color: var(--color-ink); }
.segmented > .is-active, .segmented > .is-active:hover { background: var(--color-ink); color: #fff; }

/* ── Páginas públicas: contenedor, pila y tarjeta-enlace ───────── */
.public-page { display: flex; flex-direction: column; gap: 4px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.card-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: box-shadow .15s var(--ease); }
.card-link:hover { box-shadow: var(--shadow-1), 0 0 0 1.5px color-mix(in srgb, var(--color-org) 35%, transparent); }
.card-link-text { flex: 1; min-width: 0; }
.card-link-arrow { color: var(--color-text-muted); font-size: 18px; flex: none; }

/* ── Portal del torneo ─────────────────────────────────────────── */
.tabs { align-self: flex-start; margin-bottom: 8px; }
.section-title { margin: 14px 4px 6px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--color-ink); }
.match-card { padding: 16px 20px; }
.match-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.match-team { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; }
.match-home { text-align: right; }
.match-score { min-width: 72px; text-align: center; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--color-ink); }
.match-vs { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.match-meta { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--color-text-muted); }
.champion { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 4px; border-radius: 18px; background: color-mix(in srgb, var(--color-org) 12%, #fff); color: var(--color-ink); }
.champion > i { font-size: 28px; color: var(--color-org); }
.champion-title { margin: 0; font-size: 16px; font-weight: 600; }
.champion-sub { margin: 2px 0 0; font-size: 13px; color: var(--color-text-secondary); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.team-shield { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; }
.award-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--color-org) 12%, #fff); color: var(--color-org); font-size: 20px; }

/* ── Monitor diario (asistencia del staff) ─────────────────────── */
.monitor-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.monitor-input { width: auto; min-width: 180px; }
.monitor-refresh { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--color-text-muted); }
.monitor-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.monitor-time { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.monitor-card-meta { display: flex; align-items: center; gap: 10px; }
.monitor-court { font-size: 12px; color: var(--color-text-muted); }
.monitor-teams { margin: 0 0 12px; text-align: center; font-size: 15px; font-weight: 600; color: var(--color-ink); }
.staff-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
.staff-row-sep { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--color-divider); }
.staff-name { flex: 1; min-width: 0; color: var(--color-ink-2); }
.staff-role { color: var(--color-text-muted); }
.staff-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.staff-dot.is-in { background: #16A34A; }
.staff-dot.is-out { background: var(--color-danger-strong); animation: ui-pulse 2s ease-in-out infinite; }
.staff-state { font-weight: 500; }
.staff-state.is-in { color: var(--color-success); }
.staff-state.is-out { color: var(--color-danger); }
@media (prefers-reduced-motion: reduce) { .staff-dot.is-out { animation: none; } }

/* Foco visible en enlaces de las páginas públicas y pestañas */
.segmented > a:focus-visible, .segmented > button:focus-visible, .card-link:focus-visible, .public-brand:focus-visible, .public-contact a:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .segmented > a, .segmented > button, .card-link { transition: none; } }

/* Puente temporal para site/company.php (aún sin migrar): clases de marca del layout anterior sobre --color-org. */
.brand-gradient { background: var(--color-org); color: var(--color-on-org); }
.brand-text-gradient { color: var(--color-org); }
.brand-border { border-color: var(--color-org); }
.brand-bg { background-color: var(--color-org); color: var(--color-on-org); }
.brand-bg-light { background-color: color-mix(in srgb, var(--color-org) 13%, #fff); }
.brand-text { color: var(--color-org); }

/* ── Contexto Campo (mesa y árbitro): escala táctil + barra inferior ── */
.ctx-field .shell-content { font-size: 16px; }
.ctx-field .shell-content .btn { min-height: 48px; font-size: 16px; }
.ctx-field .shell-content button, .ctx-field .shell-content a.block { min-height: 48px; }
.ctx-field .shell-content .input { height: 52px; font-size: 16px; }
.field-body { font-size: 16px; line-height: 1.45; }
.field-card { padding: 16px; }
.field-teams { text-align: center; }
.field-team { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--color-ink); }
.field-score { margin: 6px 0; font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--color-ink); }
.field-vs { margin: 4px 0; font-size: 13px; color: var(--color-text-muted); }
.field-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 10px; font-size: 14px; color: var(--color-text-muted); }
.field-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.field-time { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.field-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 16px; background: #E3F5E9; color: #166534; font-size: 16px; font-weight: 600; }
.field-link { display: block; color: inherit; text-decoration: none; }
.bottom-nav { display: none; }
@media (max-width: 1023px) {
    .ctx-field .shell-content { padding-bottom: 88px; }
    .bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-around; align-items: stretch;
        height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
        background: var(--color-surface); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
    }
    .bottom-nav-item {
        flex: 1; min-width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        text-decoration: none; font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
    }
    .bottom-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 9999px; font-size: 24px; }
    .bottom-nav-item.is-active { color: var(--color-primary); }
    .bottom-nav-item.is-active .bottom-nav-icon { background: var(--color-primary-soft); }
    .bottom-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 12px; }
    .ctx-field .toast-stack { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Contexto TV: marcador a pantalla completa (tema oscuro; tokens tv-* de DESIGN.md) ── */
.ctx-tv { --tv-bg: #0B1120; --tv-surface: #131C31; --tv-surface-2: #1C2742; --tv-text: #F8FAFC; --tv-muted: #94A3B8; --tv-live: #60A5FA; --tv-danger: #F87171;
    margin: 0; min-height: 100vh; background: var(--tv-bg); color: var(--tv-text); font-family: Inter, system-ui, sans-serif; }
.tv-wrap { max-width: 1600px; margin: 0 auto; padding: 48px; display: flex; flex-direction: column; gap: 28px; min-height: 100vh; box-sizing: border-box; }
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tv-title { margin: 0; font-size: 44px; font-weight: 600; letter-spacing: -.025em; color: var(--tv-text); }
.tv-sub { margin: 4px 0 0; font-size: 24px; color: var(--tv-muted); }
.tv-clock { font-size: 44px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tv-text); }
.tv-label { margin: 0 0 14px; font-size: 20px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tv-muted); }
.tv-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; flex: 1; }
.tv-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.tv-panel { background: var(--tv-surface); border-radius: 28px; padding: 28px 32px; }
.tv-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid var(--tv-surface-2); }
.tv-match:first-of-type { border-top: 0; }
.tv-team { font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--tv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-team.is-away { text-align: right; }
.tv-score { min-width: 160px; text-align: center; font-size: 56px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: var(--tv-text); }
.tv-time { min-width: 160px; text-align: center; font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tv-live); }
.tv-live { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 18px; font-weight: 600; color: var(--tv-danger); }
.tv-live::before { content: ""; width: 10px; height: 10px; border-radius: 9999px; background: var(--tv-danger); animation: tv-pulse 1.4s ease-in-out infinite; }
@keyframes tv-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tv-live::before { animation: none; } }
.tv-table { width: 100%; border-collapse: collapse; font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tv-table th { padding: 8px 10px; text-align: right; font-size: 18px; font-weight: 600; color: var(--tv-muted); }
.tv-table td { padding: 12px 10px; text-align: right; border-top: 1px solid var(--tv-surface-2); color: var(--tv-text); }
.tv-table th:nth-child(2), .tv-table td:nth-child(2) { text-align: left; }
.tv-table td:nth-child(2) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-table td.is-pts { font-weight: 600; color: var(--tv-live); }
.tv-empty { margin: 0; font-size: 24px; color: var(--tv-muted); }
@media (max-width: 1100px) { .tv-grid { grid-template-columns: 1fr; } .tv-wrap { padding: 20px; } .tv-title { font-size: 28px; } .tv-team { font-size: 20px; } .tv-score { font-size: 32px; min-width: 90px; } }

/* ── Medidor de seguridad de contraseña (orientativo) ── */
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.pw-meter > span { height: 4px; border-radius: 9999px; background: var(--color-divider); transition: background-color .2s var(--ease); }
.pw-meter[data-level="1"] > span:nth-child(-n+1) { background: var(--color-danger-strong); }
.pw-meter[data-level="2"] > span:nth-child(-n+2) { background: var(--color-primary); }
.pw-meter[data-level="3"] > span:nth-child(-n+3) { background: var(--color-primary); }
.pw-meter[data-level="4"] > span:nth-child(-n+4) { background: var(--color-success); }


    /* ── Navegación del torneo y «Volver» (DESIGN 1.1.0) ───────────── */
    .back-link {
        display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0 0 4px -8px; padding: 0 12px 0 8px;
        border-radius: 9999px; color: var(--color-text-secondary); font-size: 13.5px; font-weight: 500; text-decoration: none;
        transition: background-color .15s var(--ease), color .15s var(--ease);
    }
    .back-link i { font-size: 16px; transition: transform .15s var(--ease); }
    .back-link:hover { background: color-mix(in srgb, var(--color-ink) 7%, transparent); color: var(--color-ink); }
    .back-link:hover i { transform: translateX(-2px); }
    .back-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

    .tabs { position: relative; margin-bottom: 20px; background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-1); overflow: hidden; }
    .tabs-scroll { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .tabs-scroll::-webkit-scrollbar { display: none; }
    .tab {
        position: relative; display: inline-flex; align-items: center; flex: none; height: 52px; padding: 0 14px;
        color: var(--color-text-secondary); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
        transition: color .15s var(--ease);
    }
    .tab::after {
        content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
        background: var(--color-primary); transform: scaleX(0); transform-origin: center;
        transition: transform .22s cubic-bezier(.16, 1, .3, 1), background-color .15s var(--ease);
    }
    .tab:hover { color: var(--color-ink); }
    .tab:hover::after { background: color-mix(in srgb, var(--color-ink) 14%, transparent); transform: scaleX(1); }
    .tab[aria-current="page"] { color: var(--color-ink); }
    .tab[aria-current="page"]::after { background: var(--color-primary); transform: scaleX(1); }
    .tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; border-radius: 12px; }
    .tabs::before, .tabs::after {
        content: ""; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .15s var(--ease);
    }
    .tabs::before { left: 0; background: linear-gradient(90deg, var(--color-surface), transparent); }
    .tabs::after { right: 0; background: linear-gradient(270deg, var(--color-surface), transparent); }
    .tabs[data-more-left]::before, .tabs[data-more-right]::after { opacity: 1; }
    .section-lead { margin: -6px 4px 18px; font-size: 14px; color: var(--color-text-secondary); }
    @media (max-width: 639px) { .tab { padding: 0 12px; } }
    .team-shield-lg { width: 112px; height: 112px; padding: 8px; border-radius: 22px; object-fit: contain; background: var(--color-surface-subtle); }
    .team-shield-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 40px; }
    .h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--color-ink); }
    .row-actions-static { display: inline-flex; justify-content: flex-end; gap: 4px; width: 100%; }
    @media (prefers-reduced-motion: reduce) { .tab, .tab::after, .back-link, .back-link i { transition: none; } }
}

/* ═══════════════════════════════════════════════════════════════════
   PUENTE CON VISTAS HEREDADAS (transitorio)
   Sin @layer a propósito: gana sobre las utilidades Tailwind y acerca las vistas aún
   no migradas a Podium UI (sin MAYÚSCULAS/trackings, tarjetas sin borde, botones píldora,
   texto mínimo legible). Se elimina en H11 cuando `bin/ui-lint.php --report` marque 0
   violaciones; cada vista migrada a componentes deja de depender de estas reglas.
   ═══════════════════════════════════════════════════════════════════ */

/* DESIGN.md: MAYÚSCULAS solo en overline/nav-section/tv-label y tipografía sin tracking ancho. */
[class~="uppercase"] { text-transform: none; }
[class~="tracking-widest"], [class~="tracking-wider"], [class~="tracking-wide"] { letter-spacing: normal; } /* ui-lint-ignore */

/* Sin textos de 9–10 px (mínimo 11 px; 12 px para legibilidad). */
[class*="text-[8px]"], [class*="text-[9px]"] { font-size: 11px; } /* ui-lint-ignore */
[class*="text-[10px]"] { font-size: 12px; } /* ui-lint-ignore */

/* Tarjetas heredadas: superficie blanca sin borde con sombra nivel 1 (radio 22 vía tema). */
[class~="bg-white"][class~="rounded-2xl"],
[class~="bg-white"][class~="rounded-3xl"] {
    border-color: transparent;
    box-shadow: var(--shadow-1);
}

/* Acciones heredadas en azul Podium: botones píldora. */
a[class~="bg-indigo-600"], button[class~="bg-indigo-600"], /* ui-lint-ignore */
a[class~="bg-slate-900"][class~="text-white"], button[class~="bg-slate-900"][class~="text-white"] {
    border-radius: 9999px;
}

/* Lienzo: el fondo gris plano heredado pasa a canvas. */
.bg-slate-50.min-h-screen, body.bg-slate-50 { background-color: var(--color-canvas); }

/* Puente: las etiquetas de estado heredadas (span redondeado de 10–11px) nunca se parten en dos líneas. */
span[class*="rounded"][class*="-[10px]"],
span[class*="rounded"][class*="-[11px]"] { white-space: nowrap; }