/* ============================================================
   COMPONENTS — Botones, cards, badges, inputs, modals, etc.
   ============================================================ */

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), #6366F1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.35);
  font-weight: var(--fw-semibold);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #4338CA, #4F46E5);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
  color: #FFFFFF;
}

.btn-primary:active { transform: translateY(0); }

.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.45), 0 6px 14px -2px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.20) !important;
}

.btn-secondary {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-secondary:hover {
  background: var(--bg-surface-3);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.btn-success {
  background: var(--color-success);
  color: #0F1117;
  border-color: transparent;
}

.btn-success:hover {
  background: #1aad52;
  transform: translateY(-1px);
}

.btn-warning {
  background: var(--color-warning);
  color: #0F1117;
  border-color: transparent;
}

.btn-danger {
  background: var(--color-error);
  color: white;
  border-color: transparent;
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.btn-icon:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
}

.btn-icon.sm {
  width: 30px;
  height: 30px;
  font-size: var(--text-xs);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.card-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.card-body {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.card-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ---- ROLE CARDS ---- */
.role-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  cursor: pointer;
  transition: all var(--transition-spring);
  position: relative;
  overflow: hidden;
}

.role-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--role-color, var(--role-rector));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.role-card:hover {
  border-color: var(--role-color, var(--role-rector));
  transform: translateY(-3px);
  box-shadow: var(--role-glow, var(--shadow-glow-rector));
}

.role-card:hover::before { opacity: 1; }

.role-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
  display: block;
}

.role-card-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.role-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.role-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

.badge-normativa {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-pedagogica {
  background: rgba(168, 85, 247, 0.15);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.badge-ia {
  background: rgba(234, 179, 8, 0.15);
  color: #FCD34D;
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.badge-basic {
  background: rgba(34, 197, 94, 0.15);
  color: var(--diff-basic);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-intermediate {
  background: rgba(245, 158, 11, 0.15);
  color: var(--diff-intermediate);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-advanced {
  background: rgba(249, 115, 22, 0.15);
  color: var(--diff-advanced);
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.badge-expert {
  background: rgba(239, 68, 68, 0.15);
  color: var(--diff-expert);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-success {
  background: var(--color-success-light);
  color: #166534;
  border: none;
}

.badge-warning {
  background: var(--color-warning-light);
  color: #92400E;
  border: none;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress-wrap {
  width: 100%;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg, var(--role-rector), var(--role-coord));
}

.progress-bar.lg { height: 10px; }
.progress-bar.sm { height: 4px; }

/* Progress con color de rol */
.progress-fill.rector  { background: linear-gradient(90deg, var(--role-rector-dark), var(--role-rector)); }
.progress-fill.coord   { background: linear-gradient(90deg, var(--role-coord-dark), var(--role-coord)); }
.progress-fill.orient  { background: linear-gradient(90deg, var(--role-orient-dark), var(--role-orient)); }
.progress-fill.docente { background: linear-gradient(90deg, var(--role-docente-dark), var(--role-docente)); }

/* ============================================================
   FLASHCARD
   ============================================================ */
.flashcard-container {
  perspective: 1200px;
  width: 100%;
  max-width: 680px;
  min-height: 320px;
}

.flashcard {
  width: 100%;
  min-height: 320px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
}

.flashcard-front {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

.flashcard-back {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  transform: rotateY(180deg);
  box-shadow: var(--shadow-lg);
}

.flashcard-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.flashcard-question {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.flashcard-answer {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  font-weight: var(--fw-medium);
}

.flashcard-explanation {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  background: var(--bg-surface-3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  width: 100%;
}

.flashcard-flip-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Dificultad percibida ---- */
.difficulty-rating {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.difficulty-btn {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--transition-spring);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
}

.difficulty-btn:hover {
  transform: translateY(-2px);
  color: var(--text-primary);
}

.difficulty-btn.easy   { --btn-color: var(--color-success); }
.difficulty-btn.normal { --btn-color: var(--color-info); }
.difficulty-btn.hard   { --btn-color: var(--color-warning); }
.difficulty-btn.unknown{ --btn-color: var(--color-error); }

.difficulty-btn:hover,
.difficulty-btn.selected {
  border-color: var(--btn-color);
  background: color-mix(in srgb, var(--btn-color) 15%, transparent);
  color: var(--btn-color);
}

/* ============================================================
   PREGUNTAS / QUIZ
   ============================================================ */
.question-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 720px;
  margin: 0 auto;
}

.question-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.question-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.option-btn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface-2);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  width: 100%;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.option-btn:hover {
  background: var(--bg-surface-3);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.option-btn.selected {
  border-color: var(--color-info);
  background: rgba(59, 130, 246, 0.08);
  color: var(--text-primary);
}

.option-btn.correct {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.08);
  color: var(--color-success);
}

.option-btn.incorrect {
  border-color: var(--color-error);
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-error);
}

.option-letter {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
}

.option-btn.correct .option-letter  { background: var(--color-success); color: white; }
.option-btn.incorrect .option-letter{ background: var(--color-error); color: white; }
.option-btn.selected .option-letter { background: var(--color-info); color: white; }

.explanation-box {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--bg-surface-2);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-info);
}

.explanation-box.correct { border-left-color: var(--color-success); }
.explanation-box.incorrect { border-left-color: var(--color-error); }

.explanation-box p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   SOURCE BADGE (Fuente normativa)
   ============================================================ */
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: #93C5FD;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.source-badge:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

.source-badge-icon { font-size: 12px; }

/* ============================================================
   STAT CARDS (Dashboard)
   ============================================================ */
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
}

.stat-trend {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.up   { color: var(--color-success); }
.stat-trend.down { color: var(--color-error); }

/* ============================================================
   INPUTS
   ============================================================ */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.input {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  width: 100%;
  transition: all var(--transition-fast);
  outline: none;
}

.input:focus {
  border-color: var(--role-rector);
  box-shadow: 0 0 0 3px rgba(108, 62, 184, 0.15);
}

.input::placeholder { color: var(--text-tertiary); }

textarea.input {
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-relaxed);
}

/* ---- Search ---- */
.search-wrap {
  position: relative;
}

.search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 16px;
  pointer-events: none;
}

.search-input {
  padding-left: var(--space-10);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 560px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--transition-spring);
}

.modal-backdrop.open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.modal-body {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.modal-footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* ============================================================
   TOAST
   ============================================================ */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 500;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 280px;
  max-width: 400px;
  pointer-events: all;
  animation: toastSlideIn 0.3s var(--transition-spring) forwards;
}

.toast.hide {
  animation: toastSlideOut 0.25s ease forwards;
}

.toast-icon { font-size: 18px; }
.toast-message { font-size: var(--text-sm); color: var(--text-primary); flex: 1; }

.toast.success { border-left: 3px solid var(--color-success); }
.toast.error   { border-left: 3px solid var(--color-error); }
.toast.warning { border-left: 3px solid var(--color-warning); }
.toast.info    { border-left: 3px solid var(--color-info); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* ============================================================
   DOMAIN CHART (Dominio circular)
   ============================================================ */
.domain-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.domain-ring svg {
  transform: rotate(-90deg);
}

.domain-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.domain-ring-value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1;
}

.domain-ring-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ============================================================
   COMPETENCE CARD
   ============================================================ */
.competence-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}

.competence-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--role-color, var(--role-rector));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.competence-card:hover {
  border-color: var(--border-default);
  transform: translateX(3px);
  box-shadow: var(--shadow-md);
}

.competence-card:hover::after { opacity: 1; }

.competence-name {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.competence-def {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   XP / GAMIFICACIÓN
   ============================================================ */
.xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: #FCD34D;
}

.xp-badge::before {
  content: '⭐';
  font-size: 12px;
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: #FB923C;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  gap: var(--space-4);
}

.empty-state-icon {
  font-size: 3rem;
  opacity: 0.4;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  max-width: 320px;
}

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--bg-surface-2);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  border: none;
  background: none;
}

.tab:hover { color: var(--text-primary); }

.tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   WHO DOES WHAT
   ============================================================ */
.who-does-what {
  display: grid;
  gap: var(--space-4);
}

.who-does-what-role {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-4);
}

.who-role-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.who-role-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.who-role-name {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.who-role-tasks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.who-role-task {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: var(--leading-relaxed);
}

.who-role-task::before {
  content: '→';
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   DIVIDER
   ============================================================ */
.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-6) 0;
}

/* ============================================================
   CHIP
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chip:hover, .chip.active {
  background: var(--bg-surface-3);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ───────────────────────────────────────────────────────────────────────────
   Rejilla de resumen del panel de inicio
   ───────────────────────────────────────────────────────────────────────────

   Se apoya en auto-fit y minmax en vez de un número fijo de columnas: con
   cinco tarjetas de contenido desigual, fijar «tres por fila» obliga a
   decidir cuál queda huérfana abajo. Así el navegador acomoda lo que quepa y
   la última fila se completa sola.
   ─────────────────────────────────────────────────────────────────────────── */

.panel-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--space-4);
}

.panel-tarjeta:hover {
  border-color: var(--color-primary-light) !important;
  transform: translateY(-2px);
}

.panel-tarjeta:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .panel-tarjeta { transition: none; }
  .panel-tarjeta:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variantes de botón que faltaban
   ═══════════════════════════════════════════════════════════════════════════

   `btn-outline` y `btn-xs` se usaban dieciocho veces entre las pantallas y no
   estaban definidas en ninguna hoja: esos botones caían al estilo base y se
   veían como texto suelto. El caso peor es el de los conmutadores, donde
   `btn-outline` es el estado NO seleccionado frente a un `btn-primary`
   seleccionado. Sin definirlo, la opción no elegida no parecía un botón, y el
   grupo entero perdía la lectura de «esto se puede pulsar».
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.btn-outline:hover {
  background: var(--bg-surface-2);
  border-color: var(--color-primary-light);
  color: var(--text-primary);
}

.btn-outline:active { background: var(--bg-surface-3); }

.btn-xs {
  padding: 4px var(--space-2);
  font-size: 11px;
  border-radius: var(--radius-sm);
  gap: 4px;
}

/* Foco visible en todos los botones y enlaces de acción.
   Estaba solo en algunos sitios: quien navega con teclado perdía el rastro al
   entrar en una pantalla nueva. */
.btn:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Distintivos con significado
   ═══════════════════════════════════════════════════════════════════════════

   Los distintivos del menú llevaban su color escrito a mano en cada sitio
   —un verde aquí, un azul allá, un rosa más allá— sin que el color dijera
   nada. Tres clases con significado fijo: azul es novedad, verde es
   completado, y el conteo es neutro porque un número no es una alerta.
   ═══════════════════════════════════════════════════════════════════════════ */

.badge-nuevo,
.badge-hecho,
.nav-conteo {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
  box-shadow: none;
}

.badge-nuevo { background: rgba(99, 102, 241, .18); color: var(--color-primary-light); }
.badge-hecho { background: rgba(16, 185, 129, .16); color: #6EE7B7; }

/* El conteo de una lista no compite por atención: informa cuando el ojo pasa
   por encima, no antes. */
.nav-conteo {
  background: var(--bg-surface-3);
  color: var(--text-tertiary);
  font-weight: var(--fw-semibold);
}

.nav-item.activo .nav-conteo { color: var(--text-secondary); }

/* Lista desplegable de un <select>: `color-scheme` en tokens.css cubre el
   caso general, pero varios navegadores/entornos siguen pintando el popup
   de opciones en blanco pase lo que pase con esa propiedad (visto en el
   modal de filtros de tarjetas — el <select> cerrado se veía bien, la
   lista abierta salía blanca con texto claro casi invisible). Estilar
   <option> directamente sí lo respetan de forma consistente. */
select option {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}