/* Anotador de Truco (spec G03). Mobile-first: el caso principal es el teléfono
   arriba de la mesa. Solo tokens de global.css; el diseño viene del anotador del
   DomaHub viejo (docs/roadmap/insumos/G03/). */

.sk-body { background: radial-gradient(circle at top right, rgba(var(--color-brand-rgb), 0.18) 0%, var(--color-bg) 60%); }

.sk {
    display: flex; flex-direction: column; gap: var(--space-4, 16px);
    width: 100%; max-width: 600px; margin: 0 auto;
    padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-6, 24px);
}

.sk-top { display: flex; align-items: center; justify-content: space-between; }
.sk-title {
    margin: 0; font-size: var(--text-lg); font-weight: var(--font-black); letter-spacing: 2px; text-transform: uppercase;
    color: var(--color-brand); text-shadow: var(--shadow-brand);
}
.sk-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--color-glass); border: 1px solid var(--border-brand); color: var(--color-text); cursor: pointer;
}

.sk-board { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, 12px); flex: 1; }
.sk-team {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-2, 8px);
    padding: var(--space-4, 16px) var(--space-2, 8px);
    background: var(--color-glass); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    min-width: 0;
}
.sk-team.is-leading { border-color: var(--color-brand); box-shadow: inset 0 0 24px rgba(var(--color-brand-rgb), 0.2); }
.sk-team.is-winner { border-color: var(--color-gold); box-shadow: var(--shadow-glow-gold); }

.sk-name-wrap { width: 100%; }
.sk-name {
    width: 100%; padding: var(--space-2, 8px) var(--space-3, 12px);
    background: rgba(0, 0, 0, 0.35); border: 1px solid transparent; border-radius: var(--radius-full);
    color: var(--color-brand); font: inherit; font-weight: var(--font-medium); text-align: center; text-transform: uppercase;
    outline: none;
}
.sk-name:focus { border-color: var(--color-brand); background: var(--color-bg); }

.sk-score {
    font-size: clamp(4rem, 22vw, 6rem); font-weight: var(--font-bold); line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--color-text);
}
.sk-half { min-height: 1.2em; font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; }
.sk-half.is-good { color: var(--color-success); }

.sk-bar { width: 80%; height: 6px; background: var(--color-surface-3); border-radius: var(--radius-full); overflow: hidden; }
.sk-bar-fill { height: 100%; width: 0; background: var(--color-brand); box-shadow: 0 0 8px var(--color-brand); transition: width var(--transition-normal); }

.sk-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3, 12px); }
.sk-btn {
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); border: 1px solid var(--border-default); cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
    touch-action: manipulation;
}
.sk-btn:active { transform: scale(0.92); }
.sk-btn:disabled { opacity: 0.4; cursor: default; }
.sk-btn--sub { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.08); color: var(--color-text-muted); }
.sk-btn--add { width: 64px; height: 64px; background: var(--color-brand); color: var(--color-text); border-color: var(--color-brand); box-shadow: var(--shadow-brand); }
.sk-btn--add .material-icons-round { font-size: 36px; }

.sk-tools {
    display: flex; flex-direction: column; gap: var(--space-3, 12px);
    padding: var(--space-4, 16px); background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.sk-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 8px); }
.sk-row--actions { justify-content: space-around; flex-wrap: wrap; }
.sk-label { font-size: var(--text-sm); color: var(--color-text-muted); }

.sk-switch { display: flex; padding: 4px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); }
.sk-switch-opt {
    min-width: 48px; min-height: 40px; padding: 0 var(--space-3, 12px);
    background: none; border: 0; border-radius: 6px; color: var(--color-text-muted); font: inherit; cursor: pointer;
}
.sk-switch-opt[aria-checked="true"] { background: var(--color-brand); color: var(--color-text); font-weight: var(--font-bold); }

.sk-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-2, 8px);
    background: none; border: 0; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.sk-link .material-icons-round { font-size: 20px; color: var(--color-brand); }
.sk-link:disabled { opacity: 0.4; cursor: default; }
.sk-link--danger, .sk-link--danger .material-icons-round { color: var(--color-danger); }

/* Modal propio (ganador, historial, señas). Las confirmaciones usan dialogs.js. */
.sk-modal {
    position: fixed; inset: 0; z-index: 2147480000;
    display: flex; align-items: center; justify-content: center; padding: var(--space-4, 16px);
    background: rgba(0, 0, 0, 0.85); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
}
.sk-modal[hidden] { display: none; }
.sk-modal-card {
    width: 100%; max-width: 400px; max-height: 85dvh; overflow-y: auto;
    padding: var(--space-6, 24px); text-align: center;
    background: var(--color-surface-2); border: 1px solid var(--color-brand); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand);
}
.sk-modal-title { margin: 0 0 var(--space-3, 12px); color: var(--color-brand); font-size: var(--text-2xl); }
.sk-modal-body { color: var(--color-text-muted); text-align: left; }
.sk-modal-actions { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin-top: var(--space-4, 16px); }
.sk-primary, .sk-secondary {
    min-height: 48px; border-radius: var(--radius-full); font: inherit; font-weight: var(--font-bold); cursor: pointer;
}
.sk-primary { background: var(--color-brand); color: var(--color-text); border: 0; }
.sk-secondary { background: none; color: var(--color-text-muted); border: 1px solid var(--border-hover); }

.sk-trophy { font-size: 64px; color: var(--color-gold); }
.sk-winner { margin: var(--space-2, 8px) 0; color: var(--color-text); font-size: var(--text-xl); text-align: center; }
.sk-winner-score { text-align: center; }
.sk-list { margin: 0; padding: 0; list-style: none; }
.sk-list li { padding: var(--space-3, 12px) 0; border-bottom: 1px solid var(--border-default); }
.sk-list strong { color: var(--color-brand); }
.sk-empty { text-align: center; }
.sk-history-date { color: var(--color-brand); font-size: var(--text-xs); display: block; }

@media (min-width: 768px) {
    .sk { padding-top: var(--space-6, 24px); }
}