/* ==============================
   SafeTrack Design System
   TEMA CLARO — optimizado para uso en campo / carretera
   ============================== */

:root {
  /* Colors – Light theme for outdoor visibility */
  --c-primary: #8B1A1A;
  --c-primary-light: #A52A2A;
  --c-primary-dark: #6B1010;
  --c-bg: #F2F2F7;
  --c-surface: #FFFFFF;
  --c-surface-2: #F7F7F7;
  --c-surface-3: #EFEFEF;
  --c-text: #1A1A1A;
  --c-text-secondary: #555555;
  --c-text-muted: #888888;
  --c-border: #D1D1D6;
  --c-success: #1B9E3E;
  --c-warning: #CC7A00;
  --c-error: #D32F2F;
  --c-info: #1565C0;

  /* Status colors */
  --c-draft: #6B7280;
  --c-pending: #CC7A00;
  --c-sent: #1B9E3E;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Borders */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;
}

/* ==============================
   Reset & Base 
   ============================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: var(--c-primary);
  text-decoration: none;
}

/* ==============================
   App Container 
   ============================== */

#app {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}

.page {
  min-height: 100%;
  padding: var(--sp-4);
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==============================
   Bottom Navigation 
   ============================== */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--c-surface);
  border-top: 2px solid var(--c-border);
  padding: var(--sp-2) 0;
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0));
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: var(--sp-2);
  transition: color var(--transition);
  min-height: 48px;
}

.nav-item.active {
  color: var(--c-primary);
}

.nav-item span {
  font-size: var(--fs-xs);
  font-weight: 600;
}

.hidden {
  display: none !important;
}

/* ==============================
   Splash Page
   ============================== */

.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: var(--sp-6);
  padding-bottom: 0;
  background: var(--c-primary-dark);
}

.splash-logo {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: white;
  letter-spacing: -1px;
}

.splash-logo span {
  color: rgba(255, 255, 255, .8);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.splash-text {
  color: rgba(255, 255, 255, .7);
  font-size: var(--fs-sm);
}

/* ==============================
   Login Page
   ============================== */

.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-8);
  padding-bottom: 0;
  background: var(--c-bg);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border);
}

.login-header {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.login-header h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}

.login-header h1 span {
  color: var(--c-text);
}

.login-header p {
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
}

/* ==============================
   Forms 
   ============================== */

.form-group {
  margin-bottom: var(--sp-5);
}

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

.form-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-size: var(--fs-base);
  transition: border-color var(--transition);
  min-height: 50px;
}

.form-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.12);
}

.form-input::placeholder {
  color: var(--c-text-muted);
}

.form-input.error {
  border-color: var(--c-error);
}

.form-error {
  font-size: var(--fs-sm);
  color: var(--c-error);
  font-weight: 600;
  margin-top: var(--sp-1);
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

.password-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: var(--sp-2);
}

/* ==============================
   Buttons 
   ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 52px;
  width: 100%;
}

.btn-primary {
  background: var(--c-primary);
  color: white;
  box-shadow: 0 4px 15px rgba(139, 26, 26, 0.25);
}

.btn-primary:hover {
  background: var(--c-primary-dark);
  box-shadow: 0 6px 20px rgba(139, 26, 26, 0.35);
  transform: translateY(-1px);
}

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

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border: 2px solid var(--c-border);
}

.btn-secondary:hover {
  background: var(--c-surface-2);
  border-color: var(--c-text-muted);
}

.btn-outline {
  background: transparent;
  color: var(--c-primary);
  border: 2px solid var(--c-primary);
}

.btn-outline:hover {
  background: rgba(139, 26, 26, 0.06);
}

.btn-ghost {
  background: transparent;
  color: var(--c-text-secondary);
  padding: var(--sp-2) var(--sp-3);
}

.btn-ghost:hover {
  color: var(--c-text);
  background: var(--c-surface-3);
}

.btn-sm {
  min-height: 40px;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-4);
}

.btn-icon {
  width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* ==============================
   Cards
   ============================== */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

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

.card-title {
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* ==============================
   Home Page
   ============================== */

.home-header {
  padding: var(--sp-4) 0 var(--sp-4);
}

.home-greeting {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-1);
}

.home-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
}

.home-title span {
  color: var(--c-primary);
}

.new-observation-btn {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-5);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.stat-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-size: var(--fs-2xl);
  font-weight: 800;
}

.stat-label {
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  font-weight: 600;
  margin-top: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stat-card.draft .stat-value {
  color: var(--c-draft);
}

.stat-card.pending .stat-value {
  color: var(--c-pending);
}

.stat-card.error .stat-value {
  color: var(--c-error);
}

.stat-card.sent .stat-value {
  color: var(--c-sent);
}

.sync-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.sync-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-success);
  flex-shrink: 0;
}

.sync-dot.offline {
  background: var(--c-error);
}

.sync-dot.syncing {
  background: var(--c-warning);
  animation: pulse 1.5s ease infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.sync-text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  font-weight: 500;
}

.sync-btn {
  min-height: 40px;
  width: auto;
}

/* ==============================
   Stepper / Wizard
   ============================== */

.stepper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--c-border);
}

.stepper-title {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.stepper-progress {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-border);
  transition: all var(--transition);
}

.step-dot.active {
  background: var(--c-primary);
  width: 24px;
  border-radius: var(--radius-full);
}

.step-dot.completed {
  background: var(--c-success);
}

.step-content {
  animation: fadeIn 0.25s ease;
}

.step-footer {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-4);
}

.step-footer .btn {
  flex: 1;
}

/* ==============================
   Evaluation Items
   ============================== */

.category-card {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  cursor: pointer;
  background: var(--c-primary);
  color: white;
  transition: background var(--transition);
  min-height: 56px;
}

.category-header:hover {
  background: var(--c-primary-dark);
}

.category-name {
  font-weight: 700;
  font-size: var(--fs-base);
  flex: 1;
}

.category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-right: var(--sp-2);
}

.category-badge.complete {
  background: white;
  color: var(--c-success);
}

.category-badge.incomplete {
  background: rgba(255, 255, 255, .25);
  color: white;
}

.category-chevron {
  transition: transform var(--transition);
  color: rgba(255, 255, 255, .7);
}

.category-card.open .category-chevron {
  transform: rotate(180deg);
}

.category-items {
  border-top: none;
}

.eval-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  min-height: 60px;
}

.eval-item:last-child {
  border-bottom: none;
}

.eval-item-label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-text);
}

.eval-options {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.eval-option {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.eval-option:hover {
  border-color: var(--c-text-muted);
}

.eval-option.safe.selected {
  border-color: var(--c-success);
  background: #E8F5E9;
  color: var(--c-success);
}

.eval-option.risk.selected {
  border-color: var(--c-error);
  background: #FFEBEE;
  color: var(--c-error);
}

.eval-option.na.selected {
  border-color: var(--c-text-muted);
  background: #F5F5F5;
  color: var(--c-text-muted);
}

/* ==============================
   Checklist (Areas)
   ============================== */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 58px;
  box-shadow: var(--shadow-sm);
}

.checklist-item:hover {
  border-color: var(--c-text-muted);
}

.checklist-item.selected {
  border-color: var(--c-primary);
  background: #FFF5F5;
}

.checklist-check {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  font-weight: 700;
  color: white;
}

.checklist-item.selected .checklist-check {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.checklist-label {
  font-weight: 600;
}

/* ==============================
   Pending List
   ============================== */

.pending-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
}

.pending-filters {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  -webkit-overflow-scrolling: touch;
}

.filter-chip {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  min-height: 40px;
}

.filter-chip.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: white;
}

.observation-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.observation-card:hover {
  border-color: var(--c-text-muted);
  box-shadow: var(--shadow-md);
}

.observation-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.observation-date {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  font-weight: 500;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.draft {
  background: #F3F4F6;
  color: var(--c-draft);
}

.status-badge.pending,
.status-badge.completed {
  background: #FFF3E0;
  color: var(--c-warning);
}

.status-badge.error {
  background: #FFEBEE;
  color: var(--c-error);
}

.status-badge.sent {
  background: #E8F5E9;
  color: var(--c-success);
}

.observation-card-dept {
  font-weight: 700;
  margin-bottom: var(--sp-1);
}

.observation-card-meta {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  font-weight: 500;
}

.observation-card-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}

/* ==============================
   Summary Page
   ============================== */

.summary-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}

.summary-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.summary-dot.safe {
  background: var(--c-success);
}

.summary-dot.risk {
  background: var(--c-error);
}

.summary-dot.na {
  background: var(--c-draft);
}

.summary-count {
  font-weight: 800;
  font-size: var(--fs-lg);
  min-width: 30px;
}

.summary-label {
  color: var(--c-text-secondary);
  font-weight: 500;
}

/* ==============================
   Radio / Checkbox Custom
   ============================== */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.radio-item,
.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 52px;
  font-weight: 500;
}

.radio-item:hover,
.checkbox-item:hover {
  border-color: var(--c-text-muted);
}

.radio-item.selected {
  border-color: var(--c-primary);
  background: #FFF5F5;
}

.radio-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}

.radio-item.selected .radio-dot {
  border-color: var(--c-primary);
}

.radio-item.selected .radio-dot::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-primary);
}

.checkbox-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  font-weight: 700;
  color: white;
}

.checkbox-item.selected {
  border-color: var(--c-primary);
  background: #FFF5F5;
}

.checkbox-item.selected .checkbox-box {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

/* ==============================
   Profile Page
   ============================== */

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: white;
  margin: var(--sp-6) auto var(--sp-4);
}

.profile-name {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--sp-1);
}

.profile-email {
  text-align: center;
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}

.profile-section {
  margin-bottom: var(--sp-6);
}

.profile-section-title {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-sm);
}

.profile-item-label {
  font-weight: 600;
}

.profile-item-value {
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ==============================
   Toast
   ============================== */

.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-text);
  color: white;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  animation: toastIn 0.3s ease;
}

.toast.success {
  background: var(--c-success);
}

.toast.error {
  background: var(--c-error);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ==============================
   Empty State
   ============================== */

.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-4);
  color: var(--c-text-muted);
}

.empty-state svg {
  margin-bottom: var(--sp-4);
  opacity: 0.3;
}

.empty-state p {
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ==============================
   Severity badges inline
   ============================== */

.severity-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.severity-badge.grave {
  background: #FFEBEE;
  color: var(--c-error);
}

.severity-badge.menor {
  background: #FFF3E0;
  color: var(--c-warning);
}

.severity-badge.minimo {
  background: #E3F2FD;
  color: var(--c-info);
}

.severity-badge.ergonomico {
  background: #F3E5F5;
  color: #7B1FA2;
}

/* ==============================
   Section divider
   ============================== */

.section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-6);
}

.section-title:first-child {
  margin-top: 0;
}

/* ==============================
   Char counter
   ============================== */

.char-counter {
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-weight: 500;
  margin-top: var(--sp-1);
}

.char-counter.warn {
  color: var(--c-warning);
}

.char-counter.over {
  color: var(--c-error);
}

/* ==============================
   Eval Legend (SafeTrack card top)
   ============================== */

.eval-legend {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.legend-item {
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.legend-item.safe {
  color: var(--c-success);
}

.legend-item.risk {
  color: var(--c-error);
}

.legend-item.na {
  color: var(--c-text-muted);
}

/* ==============================
   Toggle Group (Sí/No, M/V/N)
   ============================== */

.toggle-group {
  display: flex;
  gap: var(--sp-2);
}

.toggle-btn {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 48px;
  text-align: center;
  color: var(--c-text);
}

.toggle-btn:hover {
  border-color: var(--c-text-muted);
}

.toggle-btn.selected {
  border-color: var(--c-primary);
  background: #FFF5F5;
  color: var(--c-primary);
}