/* ==========================================================================
 * 01-base.css · parte 1/11 — Base: tokens, reset y visibilidad de administrador
 * Orden de carga obligatorio (reproduce la cascada del styles.css original).
 * No reordenar los <link> ni mover reglas entre partes sin revisar la cascada.
 * ========================================================================== */

:root {
  --topbar-height: 62px;
  --sidebar-width: 270px;
  --ink: #202020;
  --ink-2: #1e293b;
  --ink-3: #334155;
  --muted: #68717b;
  --muted-strong: #475569;
  --muted-2: #94a3b8;
  --soft-muted: #94999e;
  --line: #d9dadd;
  --line-soft: #e9eaec;
  --line-soft2: #e2e8f0;
  --line-mid: #cbd5e1;
  --surface: #fff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --surface-soft: #f7f7f8;
  --topbar: #1e293b;
  --accent: #4f46e5;
  --accent-hover: #6366f1;
  --accent-dark: #4338ca;
  --accent-text: #4f46e5;
  --accent-light: #818cf8;
  --accent-mid: #c7d2fe;
  --accent-soft: #e0e7ff;
  --accent-faint: #eef2ff;
  --accent-deep: #312e81;
  --accent-ink: #1e1b4b;
  --accent-on: #fff;
  --info-text: #1d4ed8;
  --info-solid: #2563eb;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;
  --green: #38ad4f;
  --green-text: #16a34a;
  --green-text-2: #15803d;
  --green-bg: #ecfdf5;
  --green-border: #bbf7d0;
  --red-border: #fecaca;
  --amber-border: #fde68a;
  --red: #f04b43;
  --red-text: #dc2626;
  --red-bg: #fef2f2;
  --yellow: #fffbc4;
  --amber-text: #b45309;
  --amber-bg: #fffbeb;
  --shadow: 0 1px 3px rgba(25, 25, 25, .12);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Visibilidad estricta para elementos de Administrador */
body:not(.is-admin) .admin-only,
body:not(.is-admin) .nav-link-admin,
body:not(.is-admin) #nav-item-reportes,
.admin-only[hidden],
.nav-link-admin[hidden],
#nav-item-reportes[hidden] {
  display: none !important;
}
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--surface); color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }