@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-primary:   #1B3A6B;
  --color-primary-light: #2B5BA8;
  --color-accent:    #7B1C2E;
  --color-accent-light: #A3283F;

  --color-bg:        #F4F6FA;
  --color-surface:   #FFFFFF;
  --color-border:    #DDE2EC;
  --color-text:      #1A1F2E;
  --color-muted:     #6B7280;

  /* Tonos de texto semántico: contraste AA sobre sus fondos claros. */
  --color-ok:        #15803D;
  --color-warn:      #92400E;
  --color-danger:    #B91C1C;
  --color-neutral:   #6B7280;

  --color-danger-bg: #FEF2F2;
  --color-warn-bg:   #FFFBEB;
  --color-ok-bg:     #F0FDF4;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 10px -2px rgb(27 58 107 / 0.08), 0 2px 4px -2px rgb(27 58 107 / 0.06);
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

.label-muted {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.num-grande {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.num-mediano {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

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

.shadow-app-sm { box-shadow: var(--shadow-sm); }
.shadow-app-md { box-shadow: var(--shadow-md); }

/* Estado de foco visible y consistente para inputs y botones */
.campo-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.campo-input:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgb(43 91 168 / 0.15);
}

/* Transiciones estándar de la app */
.transicion-modal {
  transition: opacity 200ms ease;
}

.barra-progreso-fill {
  transition: width 600ms ease-out;
}

/* Sidebar: tooltip de ícono en modo colapsado (tablet) */
.sidebar-tooltip {
  pointer-events: none;
  position: absolute;
  left: 100%;
  margin-left: 0.5rem;
  white-space: nowrap;
  border-radius: 0.25rem;
  background: #111827;
  color: white;
  font-size: 12px;
  padding: 0.25rem 0.5rem;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 50;
}
.sidebar-link:hover .sidebar-tooltip {
  opacity: 1;
}

/* Toast */
.toast {
  transition: opacity 300ms ease, transform 300ms ease;
}