/* ── base.css — Variables globales y reset ───────────────────────────────── */
:root {
  /* Colores DIGESETT */
  --color-primary:       #003082;
  --color-primary-dark:  #001f5c;
  --color-primary-light: #1a4db8;
  --color-accent:        #c8a84b;   /* dorado escudo */
  --color-danger:        #d32f2f;
  --color-success:       #2e7d32;
  --color-warning:       #f57f17;

  /* Superficie */
  --color-bg:            #f0f2f5;
  --color-surface:       #ffffff;
  --color-surface-2:     #f8f9fc;
  --color-border:        #e0e4ef;

  /* Texto */
  --color-text:          #1a2340;
  --color-text-muted:    #6b7a9a;
  --color-text-inv:      #ffffff;

  /* Sidebar */
  --sidebar-w:           240px;
  --sidebar-bg:          #001f5c;
  --sidebar-active:      #003082;
  --sidebar-hover:       rgba(255,255,255,.08);

  /* Topbar */
  --topbar-h:            60px;
  --topbar-bg:           #ffffff;

  /* Tipografía */
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'Consolas', monospace;

  /* Radios y sombras */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --shadow-card: 0 2px 12px rgba(0,0,0,.08);
  --shadow-pop:  0 8px 32px rgba(0,0,0,.18);

  /* Transiciones */
  --transition: .18s ease;
}

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

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

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

img { display: block; max-width: 100%; }

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

/* ── Utility classes ──────────────────────────────────────────────────────── */
.hidden    { display: none !important; }
.sr-only   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1     { gap: .25rem; }
.gap-2     { gap: .5rem; }
.gap-3     { gap: .75rem; }
.gap-4     { gap: 1rem; }
.mt-auto   { margin-top: auto; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ───────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.toast {
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-pop);
  animation: toastIn .2s ease;
  max-width: 320px;
}
.toast-error   { background: var(--color-danger); }
.toast-success { background: var(--color-success); }
.toast-info    { background: var(--color-primary); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}