/* =====================================================================
   Perú Software APIs — Panel de control
   Sistema de diseño: Atlassian Design System (design.md)
   Token-first. 8px grid. T-shirt radius. Elevación de 4 planos.
   ===================================================================== */

@font-face {
  font-family: "DM Sans";
  src: url("/static/fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. TOKENS ---------- */
:root {
  /* Texto */
  --text: #292A2E;
  --text-subtle: #505258;
  --text-subtlest: #6B6E76;
  --text-inverse: #FFFFFF;
  --text-selected: #4e40ff;
  --text-brand: #4e40ff;
  --text-danger: #AE2E24;
  --text-warning: #9E4C00;
  --text-warning-inverse: #292A2E;
  --text-success: #4C6B1F;
  --text-success-bolder: #37471F;
  --text-discovery: #803FA5;
  --text-information: #3a2be6;
  --text-accent-blue: #3a2be6;
  --text-accent-purple: #803FA5;
  --text-accent-teal: #206A83;
  --text-accent-green: #216E4E;
  --text-accent-orange: #9E4C00;
  --text-accent-magenta: #943D73;
  --text-accent-gray: #505258;
  --link: #4e40ff;
  --link-pressed: #3a2be6;
  --link-visited: #803FA5;

  /* Iconos */
  --icon: #292A2E;
  --icon-subtle: #505258;
  --icon-subtlest: #6B6E76;
  --icon-inverse: #FFFFFF;
  --icon-brand: #4e40ff;
  --icon-danger: #C9372C;
  --icon-warning: #E06C00;
  --icon-success: #6A9A23;
  --icon-discovery: #AF59E1;
  --icon-information: #7d6dff;
  --icon-accent-blue: #7d6dff;
  --icon-accent-purple: #AF59E1;
  --icon-accent-teal: #2898BD;
  --icon-accent-green: #22A06B;
  --icon-accent-orange: #E06C00;
  --icon-accent-magenta: #CD519D;
  --icon-accent-gray: #7D818A;

  /* Bordes */
  --border: #0B120E24;
  --border-bold: #7D818A;
  --border-input: #8C8F97;
  --border-focused: #7d6dff;
  --border-selected: #4e40ff;
  --border-brand: #4e40ff;
  --border-danger: #E2483D;
  --border-success: #6A9A23;
  --border-warning: #E06C00;
  --border-accent-blue: #7d6dff;
  --border-accent-purple: #AF59E1;
  --border-accent-teal: #2898BD;
  --border-accent-green: #22A06B;
  --border-accent-orange: #E06C00;
  --border-accent-magenta: #CD519D;
  --border-accent-gray: #7D818A;

  /* Fondos / superficies */
  --surface: #FFFFFF;
  --surface-sunken: #F8F8F8;

  /* Lienzo de las pantallas de acceso. Ver `.auth-canvas`. */
  --auth-grid: rgba(78, 64, 255, 0.07);
  --auth-halo-1: rgba(78, 64, 255, 0.13);
  --auth-halo-2: rgba(150, 74, 192, 0.09);
  --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFF;
  --background-neutral: #0515240F;
  --background-neutral-hovered: #0B120E24;
  --background-neutral-subtle-hovered: #0515240F;
  --background-neutral-bold: #292A2E;
  --background-disabled: #0515240F;
  --background-input: #FFFFFF;
  --background-input-hovered: #F8F8F8;
  --background-selected: #eeecff;
  --background-selected-hovered: #ded9ff;
  --background-selected-bold: #4e40ff;

  /* Marca */
  --background-brand-subtlest: #eeecff;
  --background-brand-bold: #4e40ff;
  --background-brand-bold-hovered: #3a2be6;
  --background-brand-bold-pressed: #2c1fb8;
  --background-brand-boldest: #241f3f;

  /* Roles semánticos */
  --background-danger: #FFECEB;
  --background-danger-bold: #C9372C;
  --background-warning: #FFF5DB;
  --background-warning-bold: #FBC828;
  --background-success: #EFFFD6;
  --background-success-subtler: #D3F1A7;
  --background-success-bold: #5B7F24;
  --background-discovery: #F8EEFE;
  --background-discovery-bold: #964AC0;
  --background-information: #eeecff;
  --background-information-bold: #4e40ff;

  /* Acentos (decoración) */
  --background-accent-blue-subtlest: #eeecff;
  --background-accent-purple-subtlest: #F8EEFE;
  --background-accent-teal-subtlest: #E7F9FF;
  --background-accent-green-subtlest: #DCFFF1;
  --background-accent-orange-subtlest: #FFF5DB;
  --background-accent-magenta-subtlest: #FFECF8;
  --background-accent-gray-subtlest: #F0F1F2;
  --background-accent-gray-subtler: #DDDEE1;
  --background-accent-lime-subtlest: #EFFFD6;
  --background-accent-yellow-subtlest: #FEF7C8;
  --background-accent-red-subtlest: #FFECEB;

  /* Gráficas */
  --chart-categorical-1: #7d6dff;
  --chart-categorical-2: #82B536;
  --chart-categorical-3: #BF63F3;
  --chart-categorical-4: #F68909;
  --chart-categorical-5: #3a2be6;
  --chart-categorical-6: #964AC0;
  --chart-brand: #7d6dff;
  --chart-success: #82B536;
  --chart-warning: #F68909;
  --chart-danger: #E2483D;
  --chart-neutral: #8C8F97;

  /* Misc */
  --blanket: #050C1F75;
  --skeleton: #0515240F;

  /* Sombras (elevación) */
  --shadow-raised: 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F;
  --shadow-overlay: 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F;

  /* Radios (t-shirt) */
  --radius-xsmall: 0.125rem;
  --radius-small: 0.25rem;
  --radius-medium: 0.375rem;
  --radius-large: 0.5rem;
  --radius-xlarge: 0.75rem;
  --radius-full: 624.9375rem;

  /* Spacing (8px base) */
  --space-025: 0.125rem;
  --space-050: 0.25rem;
  --space-075: 0.375rem;
  --space-100: 0.5rem;
  --space-150: 0.75rem;
  --space-200: 1rem;
  --space-250: 1.25rem;
  --space-300: 1.5rem;
  --space-400: 2rem;
  --space-500: 2.5rem;
  --space-600: 3rem;
  --space-800: 4rem;
  --space-1000: 5rem;

  /* Bordes (ancho) */
  --bw-default: 0.0625rem;
  --bw-selected: 0.125rem;

  /* Tipografía */
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-code: "Atlassian Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Motion */
  --dur-xshort: 100ms;
  --dur-short: 150ms;
  --dur-medium: 200ms;
  --ease-practical: cubic-bezier(0.4, 1, 0.6, 1);
  --ease-bold: cubic-bezier(0, 0.4, 0, 1);
}

/* ---------- 2. RESET / BASE ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;        /* body */
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);  /* canvas siempre blanco */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 653; color: var(--text); }
p { margin: 0; }
a { color: var(--link); text-decoration: underline; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
button { font-family: inherit; }

/* Tipografía: escala de headings */
.h-xxlarge { font-size: 2rem; line-height: 2.25rem; font-weight: 653; }
.h-xlarge  { font-size: 1.75rem; line-height: 2rem; font-weight: 653; }
.h-large   { font-size: 1.5rem; line-height: 1.75rem; font-weight: 653; }
.h-medium  { font-size: 1.25rem; line-height: 1.5rem; font-weight: 653; }
.h-small   { font-size: 1rem; line-height: 1.25rem; font-weight: 653; }
.h-xsmall  { font-size: 0.875rem; line-height: 1.25rem; font-weight: 653; }
.body-large { font-size: 1rem; line-height: 1.5rem; }
.body-small { font-size: 0.75rem; line-height: 1rem; }
.metric-large { font-size: 1.75rem; line-height: 2rem; font-weight: 653; }
.metric-medium { font-size: 1.5rem; line-height: 1.75rem; font-weight: 653; }

.text-subtle { color: var(--text-subtle); }
.text-subtlest { color: var(--text-subtlest); }
.text-success { color: var(--text-success); }
.text-danger { color: var(--text-danger); }
.text-brand { color: var(--text-brand); }
.text-center { text-align: center; }
.brand-font { font-family: var(--font-brand); letter-spacing: -0.01em; }
.mono { font-family: var(--font-code); }

/* ---------- 3. LAYOUT HELPERS ---------- */
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-400); }
.container-narrow { max-width: 880px; margin-inline: auto; padding-inline: var(--space-400); }
.section { padding-block: var(--space-800); }
.section-sm { padding-block: var(--space-600); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap-050 { gap: var(--space-050); }
.gap-100 { gap: var(--space-100); }
.gap-150 { gap: var(--space-150); }
.gap-200 { gap: var(--space-200); }
.gap-300 { gap: var(--space-300); }
.gap-400 { gap: var(--space-400); }
.between { justify-content: space-between; }
.center { justify-content: center; }
.align-start { align-items: flex-start; }
.grow { flex: 1; }
.mt-100 { margin-top: var(--space-100); }
.mt-200 { margin-top: var(--space-200); }
.mt-300 { margin-top: var(--space-300); }
.mt-400 { margin-top: var(--space-400); }
.mb-200 { margin-bottom: var(--space-200); }
.mb-300 { margin-bottom: var(--space-300); }
.mb-400 { margin-bottom: var(--space-400); }
.hidden { display: none !important; }

.grid { display: grid; gap: var(--space-300); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 4. ICONOS (SVG stroke ~1.5px) ---------- */
.icon { width: 16px; height: 16px; display: inline-flex; flex: none; color: var(--icon); }
.icon svg { width: 100%; height: 100%; display: block; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-subtle { color: var(--icon-subtle); }
.icon-subtlest { color: var(--icon-subtlest); }
.icon-brand { color: var(--icon-brand); }
.icon-success { color: var(--icon-success); }

/* Tile de icono (glyph dentro de cuadro) */
.icon-tile {
  width: 40px; height: 40px; border-radius: var(--radius-large);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--background-neutral);
}
.icon-tile.lg { width: 48px; height: 48px; }
.icon-tile.blue { background: var(--background-accent-blue-subtlest); color: var(--icon-accent-blue); }
.icon-tile.purple { background: var(--background-accent-purple-subtlest); color: var(--icon-accent-purple); }
.icon-tile.teal { background: var(--background-accent-teal-subtlest); color: var(--icon-accent-teal); }
.icon-tile.green { background: var(--background-accent-green-subtlest); color: var(--icon-accent-green); }
.icon-tile.orange { background: var(--background-accent-orange-subtlest); color: var(--icon-accent-orange); }
.icon-tile.magenta { background: var(--background-accent-magenta-subtlest); color: var(--icon-accent-magenta); }

/* ---------- 5. BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-075);
  font-size: 0.875rem; font-weight: 500; line-height: 1.25rem;
  padding: var(--space-075) var(--space-150);
  border-radius: var(--radius-medium);
  border: var(--bw-default) solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-xshort) var(--ease-practical);
  white-space: nowrap;
}
.btn:focus-visible { outline: var(--bw-selected) solid var(--border-focused); outline-offset: 2px; }
.btn-default {
  background: transparent; color: var(--text-subtle); border-color: var(--border);
}
.btn-default:hover { background: var(--background-neutral-subtle-hovered); }
.btn-primary { background: var(--background-brand-bold); color: var(--text-inverse); }
.btn-primary:hover { background: var(--background-brand-bold-hovered); }
.btn-primary:active { background: var(--background-brand-bold-pressed); }
.btn-subtle { background: transparent; color: var(--text-subtle); }
.btn-subtle:hover { background: var(--background-neutral-subtle-hovered); }
.btn-danger { background: var(--background-danger-bold); color: var(--text-inverse); }
.btn-danger:hover { filter: brightness(0.94); }
.btn-discovery { background: var(--background-discovery-bold); color: var(--text-inverse); }
.btn-warning { background: var(--background-warning-bold); color: var(--text-warning-inverse); }
.btn-lg { padding: var(--space-100) var(--space-250); font-size: 1rem; line-height: 1.5rem; }
.btn-compact { padding: var(--space-025) var(--space-100); }
.btn-block { width: 100%; }
.btn:disabled, .btn.is-disabled {
  background: var(--background-disabled); color: #080F214A; border-color: var(--border);
  cursor: not-allowed; pointer-events: none;
}
.icon-btn {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-medium); border: var(--bw-default) solid var(--border);
  background: transparent; color: var(--text-subtle); cursor: pointer;
}
.icon-btn:hover { background: var(--background-neutral-subtle-hovered); }
.icon-btn.circle { border-radius: var(--radius-full); }
.icon-btn.borderless { border-color: transparent; }

/* ---------- 6. INPUTS / FORMS ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-050); }
.label { font-size: 0.75rem; line-height: 1rem; color: var(--text-subtle); }
.helper { font-size: 0.75rem; line-height: 1rem; color: var(--text-subtlest); }
.error-msg { font-size: 0.75rem; line-height: 1rem; color: var(--text-danger); display: flex; gap: var(--space-050); align-items: center; }
.valid-msg { font-size: 0.75rem; line-height: 1rem; color: var(--text-success); display: flex; gap: var(--space-050); align-items: center; }
.input, .select, .textarea {
  width: 100%;
  font-family: inherit; font-size: 0.875rem; line-height: 1.25rem; color: var(--text);
  background: var(--background-input);
  border: var(--bw-default) solid var(--border-input);
  border-radius: var(--radius-medium);
  padding: var(--space-075);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtlest); }
.input:hover, .select:hover { background: var(--background-input-hovered); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--border-focused);
  box-shadow: 0 0 0 1px var(--border-focused);
}
.input.is-invalid { border-color: var(--border-danger); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group .icon { position: absolute; inset-inline-start: var(--space-100); color: var(--icon-subtle); pointer-events: none; }
.input-group .input { padding-inline-start: var(--space-400); }
.select { appearance: none; background-image: none; cursor: pointer; }

/* Checkbox / radio (simplificados visualmente) */
.check { display: inline-flex; align-items: center; gap: var(--space-100); cursor: pointer; font-size: 0.875rem; }
.check input { width: 16px; height: 16px; accent-color: var(--background-selected-bold); }

/* Toggle */
.toggle { position: relative; width: 2rem; height: 1rem; border-radius: var(--radius-full);
  background: var(--background-neutral-bold); cursor: pointer; flex: none; transition: background var(--dur-short); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: var(--radius-full); background: var(--icon-inverse); transition: transform var(--dur-short) var(--ease-practical); }
.toggle.on { background: var(--background-success-bold); }
.toggle.on::after { transform: translateX(1rem); }

/* ---------- 7. CARD / SURFACES ---------- */
.card {
  background: var(--surface); border: var(--bw-default) solid var(--border);
  border-radius: var(--radius-large); padding: var(--space-300);
}
.card.raised { box-shadow: var(--shadow-raised); border-color: transparent; }
.card.interactive { transition: box-shadow var(--dur-medium) var(--ease-practical), transform var(--dur-medium) var(--ease-practical); cursor: pointer; }
.card.interactive:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.card.pad-200 { padding: var(--space-200); }
.well { background: var(--surface-sunken); border-radius: var(--radius-large); padding: var(--space-300); }

/* ---------- 8. LOZENGE (estado semántico) ---------- */
.lozenge {
  display: inline-flex; align-items: center; gap: var(--space-050);
  height: 1.25rem; padding: var(--space-025) var(--space-050);
  border-radius: var(--radius-small); font-size: 0.75rem; line-height: 1rem;
  border: var(--bw-default) solid var(--border-bold);
  background: var(--background-neutral); color: var(--text);
}
.lozenge.success { background: var(--background-success-subtler); color: var(--text-success-bolder); border-color: var(--border-success); }
.lozenge.info { background: var(--background-information); color: var(--text-information); border-color: var(--border-accent-blue); }
.lozenge.warning { background: var(--background-warning); color: var(--text-warning); border-color: var(--border-warning); }
.lozenge.danger { background: var(--background-danger); color: var(--text-danger); border-color: var(--border-danger); }
.lozenge.discovery { background: var(--background-discovery); color: var(--text-discovery); border-color: var(--border-accent-purple); }

/* ---------- 9. TAG (decorativo) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-050);
  padding: var(--space-025) var(--space-100);
  border-radius: var(--radius-small); font-size: 0.75rem; line-height: 1rem;
  background: transparent; color: var(--text); border: var(--bw-default) solid var(--border-accent-gray);
}
.tag.blue { border-color: var(--border-accent-blue); }
.tag.purple { border-color: var(--border-accent-purple); }
.tag.teal { border-color: var(--border-accent-teal); }
.tag.green { border-color: var(--border-accent-green); }
.tag.orange { border-color: var(--border-accent-orange); }
.tag.magenta { border-color: var(--border-accent-magenta); }

/* Badge */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem;
  padding: 0 var(--space-050); border-radius: var(--radius-xsmall); font-size: 0.75rem;
  background: var(--background-accent-gray-subtler); color: var(--text); }
.badge.success { background: var(--background-success-subtler); color: var(--text-success-bolder); }
.badge.brand { background: var(--background-brand-bold); color: var(--text-inverse); }

/* ---------- 10. SECTION MESSAGE ---------- */
.section-message {
  display: flex; gap: var(--space-200); padding: var(--space-200);
  border-radius: var(--radius-large); color: var(--text);
}
.section-message .icon { margin-top: 2px; }
.section-message.info { background: var(--background-information); }
.section-message.info .icon { color: var(--icon-information); }
.section-message.success { background: var(--background-success); }
.section-message.success .icon { color: var(--icon-success); }
.section-message.warning { background: var(--background-warning); }
.section-message.warning .icon { color: var(--icon-warning); }
.section-message.error { background: var(--background-danger); }
.section-message.error .icon { color: var(--icon-danger); }
.section-message .sm-title { font-weight: 653; font-size: 1rem; line-height: 1.25rem; margin-bottom: var(--space-050); }

/* ---------- 11. TABS ---------- */
.tabs { display: flex; gap: var(--space-050); border-bottom: var(--bw-default) solid var(--border); }
.tab {
  padding: var(--space-075) var(--space-100); font-size: 0.875rem; font-weight: 500;
  color: var(--text-subtle); cursor: pointer; background: none; border: none;
  border-bottom: var(--bw-selected) solid transparent; margin-bottom: -1px; text-decoration: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text-selected); border-bottom-color: var(--border-selected); }

/* ---------- 12. TABLE ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: start; font-size: 0.75rem; font-weight: 653; color: var(--text-subtle);
  padding: var(--space-050) var(--space-100);
  border-bottom: var(--bw-selected) solid var(--border);
}
.table td {
  font-size: 0.875rem; color: var(--text);
  padding: var(--space-100); border-bottom: var(--bw-default) solid var(--border);
  vertical-align: middle;
}
.table tr:hover td { background: var(--background-neutral-subtle-hovered); }
.table-wrap { overflow-x: auto; }

/* ---------- 13. CODE ---------- */
.code-inline { font-family: var(--font-code); font-size: 0.85em; background: var(--background-neutral);
  border-radius: var(--radius-small); padding: var(--space-025) 0.5ch; }
.code-block { font-family: var(--font-code); font-size: 0.8125rem; line-height: 20px;
  background: var(--background-neutral); color: var(--text); border-radius: var(--radius-large);
  padding: var(--space-200); overflow-x: auto; white-space: pre; }

/* ---------- 14. AVATAR ---------- */
.avatar { border-radius: var(--radius-full); background: var(--background-accent-purple-subtlest);
  color: var(--text-accent-purple); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 653; flex: none; width: 32px; height: 32px; font-size: 0.75rem; }
.avatar.lg { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar.sm { width: 24px; height: 24px; font-size: 0.625rem; }
.avatar.blue { background: var(--background-accent-blue-subtlest); color: var(--text-accent-blue); }
.avatar.teal { background: var(--background-accent-teal-subtlest); color: var(--text-accent-teal); }
.avatar.green { background: var(--background-accent-green-subtlest); color: var(--text-accent-green); }

/* ---------- 15. PROGRESS / METER ---------- */
.meter { height: 8px; background: var(--background-neutral); border-radius: var(--radius-full); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--background-brand-bold); border-radius: var(--radius-full); }
.meter.success > span { background: var(--background-success-bold); }
.meter.warning > span { background: var(--icon-warning); }
.meter.danger > span { background: var(--background-danger-bold); }

/* ---------- 16. NAV PÚBLICA (marketing) ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--surface);
  border-bottom: var(--bw-default) solid var(--border); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: var(--space-100); text-decoration: none; color: var(--text); }
.logo-mark { width: 32px; height: 32px; border-radius: var(--radius-large); background: var(--background-brand-bold);
  color: var(--text-inverse); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.02em; }
/* El logotipo ya dice «psw», asi que este rotulo solo nombra el producto.
   Con «Peru Software APIs» al lado de la marca, la marca salia dos veces.
   Va en peso medio y tono atenuado para que lea como etiqueta de producto y
   no compita con el logotipo, y la barra lo separa sin necesidad de un guion. */
.logo-text {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text-subtle);
  padding-inline-start: var(--space-100);
  border-inline-start: 1px solid var(--border);
}
.nav-links { display: flex; align-items: center; gap: var(--space-300); }
.nav-links a { color: var(--text-subtle); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav-toggle { display: none; }

/* ---------- 17. HERO ---------- */
.hero { background: var(--surface); padding-block: var(--space-1000) var(--space-800); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-600); align-items: center; }
.eyebrow-loz { margin-bottom: var(--space-200); }

/* ---------- 18. FOOTER ---------- */
.footer { background: var(--background-brand-boldest); color: var(--text-inverse); padding-block: var(--space-600) var(--space-400); }
.footer a { color: #ded9ff; text-decoration: none; }
.footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer h4 { color: var(--text-inverse); font-size: 0.875rem; margin-bottom: var(--space-150); }
.footer .muted { color: #8FB8F6; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-400); }

/* ---------- 19. APP SHELL (dashboard/admin) ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface-sunken); border-inline-end: var(--bw-default) solid var(--border);
  padding: var(--space-200); display: flex; flex-direction: column; gap: var(--space-050);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-section-label { font-size: 0.75rem; color: var(--text-subtlest); padding: var(--space-150) var(--space-100) var(--space-050); }
.side-link { display: flex; align-items: center; gap: var(--space-100); padding: var(--space-100);
  border-radius: var(--radius-medium); color: var(--text-subtle); text-decoration: none; font-weight: 500;
  border-left: var(--bw-selected) solid transparent; }
.side-link:hover { background: var(--background-neutral-subtle-hovered); color: var(--text); }
.side-link.active { background: var(--background-selected); color: var(--text-selected); }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-header { height: 64px; border-bottom: var(--bw-default) solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-400); position: sticky; top: 0; background: var(--surface); z-index: 20; }
.app-content { padding: var(--space-400); background: var(--surface); flex: 1; }
.app-mobilebar { display: none; }

/* Stat tile (métrica) */
.stat { border: var(--bw-default) solid var(--border); border-radius: var(--radius-large); padding: var(--space-300); background: var(--surface); }
.stat .stat-label { font-size: 0.75rem; color: var(--text-subtle); }
.stat .stat-value { font-size: 1.75rem; line-height: 2rem; font-weight: 653; margin-top: var(--space-050); }
.stat .stat-delta { font-size: 0.75rem; display: inline-flex; align-items: center; gap: var(--space-050); margin-top: var(--space-100); }
.stat .stat-delta.up { color: var(--text-success); }
.stat .stat-delta.down { color: var(--text-danger); }

/* ---------- 20. STEPPER (checkout) ---------- */
.stepper { display: flex; align-items: center; gap: var(--space-100); }
.step { display: flex; align-items: center; gap: var(--space-100); color: var(--text-subtlest); }
.step .dot { width: 24px; height: 24px; border-radius: var(--radius-full); border: var(--bw-default) solid var(--border-bold);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 653; flex: none; }
.step.active { color: var(--text); }
.step.active .dot { background: var(--background-brand-bold); color: var(--text-inverse); border-color: var(--background-brand-bold); }
.step.done .dot { background: var(--background-success-bold); color: var(--text-inverse); border-color: var(--background-success-bold); }
.step.done { color: var(--text); }
.step-sep { width: 32px; height: 1px; background: var(--border-bold); }

/* ---------- 21. EMPTY / LOADING STATE ---------- */
.empty { text-align: center; padding: var(--space-800) var(--space-400); }
.empty .icon-tile { margin: 0 auto var(--space-200); }
.skeleton { background: var(--skeleton); border-radius: var(--radius-medium); }
.skeleton.line { height: 12px; margin-bottom: var(--space-100); }
@keyframes shimmer { 0% { opacity: .6 } 50% { opacity: 1 } 100% { opacity: .6 } }
.skeleton { animation: shimmer 1.2s ease-in-out infinite; }
.spinner { width: 24px; height: 24px; border-radius: var(--radius-full);
  border: 2px solid var(--background-neutral); border-top-color: var(--icon-subtle);
  animation: spin 0.86s cubic-bezier(0.4,0.15,0.6,0.85) infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- 22. MODAL ---------- */
.blanket { position: fixed; inset: 0; background: var(--blanket); display: flex; align-items: center;
  justify-content: center; padding: var(--space-400); z-index: 100; }
.modal { background: var(--surface-overlay); box-shadow: var(--shadow-overlay); border-radius: var(--radius-xlarge);
  width: 100%; max-width: 480px; }
.modal-header { padding: var(--space-300) var(--space-300) var(--space-200); }
.modal-body { padding: var(--space-025) var(--space-300); }
.modal-footer { padding: var(--space-200) var(--space-300) var(--space-300); display: flex; justify-content: flex-end; gap: var(--space-100); }

/* ---------- 23. UTIL ---------- */
.divider { height: 1px; background: var(--border); border: none; margin-block: var(--space-300); }
.dot-list li { list-style: none; display: flex; gap: var(--space-100); align-items: flex-start; margin-bottom: var(--space-100); }
.pill-filter { display: inline-flex; align-items: center; gap: var(--space-050); padding: var(--space-075) var(--space-150);
  border-radius: var(--radius-full); border: var(--bw-default) solid var(--border); background: var(--surface);
  color: var(--text-subtle); cursor: pointer; font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.pill-filter:hover { background: var(--background-neutral-subtle-hovered); }
.pill-filter.active { background: var(--background-selected); color: var(--text-selected); border-color: var(--border-selected); border-width: var(--bw-selected); }

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-400); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .container, .container-narrow { padding-inline: var(--space-200); }
  .section { padding-block: var(--space-600); }
  .hero { padding-block: var(--space-600) var(--space-500); }
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; inset-inline: 0;
    background: var(--surface); border-bottom: var(--bw-default) solid var(--border); padding: var(--space-200); gap: var(--space-100); }
  .nav-toggle { display: inline-flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* App shell: sidebar oculta, barra móvil */
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .app-mobilebar { display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-150) var(--space-200); border-bottom: var(--bw-default) solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 30; }
  .hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stepper .step span.step-label { display: none; }
}

/* ===================================================================
   25. MODO OSCURO — paleta dark de Atlassian.
   Activado por theme.js mediante <html data-theme="dark">.
   =================================================================== */
[data-theme="dark"] {
  --text: #E6EBF0;
  --text-subtle: #9FADBC;
  --text-subtlest: #8C9BAB;
  --text-inverse: #FFFFFF;
  --text-selected: #9c8fff;
  --text-brand: #9c8fff;
  --text-danger: #FD9891;
  --text-warning: #F5CD47;
  --text-warning-inverse: #1D2125;
  --text-success: #B3DF72;
  --text-success-bolder: #D3F1A7;
  --text-discovery: #D8A0F7;
  --text-information: #9c8fff;
  --text-accent-blue: #9c8fff;
  --text-accent-purple: #D8A0F7;
  --text-accent-teal: #9DD9EE;
  --text-accent-green: #7EE2B8;
  --text-accent-orange: #FEC57B;
  --text-accent-magenta: #F797D2;
  --text-accent-gray: #9FADBC;
  --link: #7d6dff;
  --link-pressed: #9c8fff;
  --link-visited: #D8A0F7;

  --icon: #C7D1DB;
  --icon-subtle: #9FADBC;
  --icon-subtlest: #8C9BAB;
  --icon-inverse: #FFFFFF;
  --icon-brand: #9c8fff;
  --icon-danger: #F87168;
  --icon-warning: #F5CD47;
  --icon-success: #94C748;
  --icon-discovery: #C97CF4;
  --icon-information: #7d6dff;
  --icon-accent-blue: #9c8fff;
  --icon-accent-purple: #C97CF4;
  --icon-accent-teal: #6CC3E0;
  --icon-accent-green: #7EE2B8;
  --icon-accent-orange: #FCA700;
  --icon-accent-magenta: #E774BB;
  --icon-accent-gray: #9FADBC;

  --border: #A6C5E229;
  --border-bold: #738496;
  --border-input: #738496;
  --border-focused: #9c8fff;
  --border-selected: #7d6dff;
  --border-brand: #7d6dff;
  --border-danger: #F87168;
  --border-success: #94C748;
  --border-warning: #CF9F02;
  --border-accent-blue: #7d6dff;
  --border-accent-purple: #AF59E1;
  --border-accent-teal: #2898BD;
  --border-accent-green: #22A06B;
  --border-accent-orange: #E06C00;
  --border-accent-magenta: #CD519D;
  --border-accent-gray: #738496;

  --surface: #1D2125;
  --surface-sunken: #161A1D;

  /* En oscuro la rejilla se dibuja con gris azulado y no con el violeta: el
     violeta sobre un fondo casi negro se ve sucio, no tenue. Los halos, en
     cambio, suben de opacidad, porque sobre oscuro rinden menos. */
  --auth-grid: rgba(166, 197, 226, 0.055);
  --auth-halo-1: rgba(78, 64, 255, 0.22);
  --auth-halo-2: rgba(128, 63, 165, 0.16);
  --surface-raised: #22272B;
  --surface-overlay: #282E33;
  --background-neutral: #A1BDD914;
  --background-neutral-hovered: #A6C5E229;
  --background-neutral-subtle-hovered: #A1BDD914;
  --background-neutral-bold: #9FADBC;
  --background-disabled: #BCD6F00A;
  --background-input: #22272B;
  --background-input-hovered: #282E33;
  --background-selected: #241f3f;
  --background-selected-hovered: #322a5c;
  --background-selected-bold: #7d6dff;

  --background-brand-subtlest: #241f3f;
  --background-brand-bold: #4e40ff;
  --background-brand-bold-hovered: #3a2be6;
  --background-brand-bold-pressed: #322a5c;
  --background-brand-boldest: #241f3f;

  --background-danger: #42221F;
  --background-danger-bold: #C9372C;
  --background-warning: #332E1B;
  --background-warning-bold: #E2B203;
  --background-success: #28311B;
  --background-success-subtler: #37471F;
  --background-success-bold: #4C6B1F;
  --background-discovery: #35243F;
  --background-discovery-bold: #803FA5;
  --background-information: #241f3f;
  --background-information-bold: #4e40ff;

  --background-accent-blue-subtlest: #241f3f;
  --background-accent-purple-subtlest: #2B273F;
  --background-accent-teal-subtlest: #1E3137;
  --background-accent-green-subtlest: #1C3329;
  --background-accent-orange-subtlest: #38291B;
  --background-accent-magenta-subtlest: #3D2232;
  --background-accent-gray-subtlest: #282E33;
  --background-accent-gray-subtler: #38414A;
  --background-accent-lime-subtlest: #28311B;
  --background-accent-yellow-subtlest: #332E1B;
  --background-accent-red-subtlest: #42221F;

  --chart-categorical-1: #7d6dff;
  --chart-categorical-2: #94C748;
  --chart-categorical-3: #C97CF4;
  --chart-categorical-4: #FCA700;
  --chart-categorical-5: #9c8fff;
  --chart-categorical-6: #B8ACF6;
  --chart-brand: #7d6dff;
  --chart-success: #94C748;
  --chart-warning: #FCA700;
  --chart-danger: #F87168;
  --chart-neutral: #738496;

  --blanket: #10121499;
  --skeleton: #A1BDD914;
  --shadow-raised: 0px 1px 1px #03040480, 0px 0px 1px #03040440;
  --shadow-overlay: 0px 8px 12px #0304045C, 0px 0px 1px #03040440;
}

/* Botón switch de tema */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: none;
  border-radius: var(--radius-medium); border: var(--bw-default) solid var(--border);
  background: transparent; color: var(--icon-subtle); cursor: pointer;
}
.theme-toggle:hover { background: var(--background-neutral-subtle-hovered); color: var(--icon); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle.floating { position: fixed; inset-block-start: var(--space-200); inset-inline-end: var(--space-200);
  z-index: 80; background: var(--surface); box-shadow: var(--shadow-raised); }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* Transición suave de tema */
body, .card, .sidebar, .topbar, .app-header, .app-content, .well, .input, .table td, .table th, .stat, .pill-filter {
  transition: background-color var(--dur-medium) var(--ease-practical),
              border-color var(--dur-medium) var(--ease-practical),
              color var(--dur-medium) var(--ease-practical);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Logo de marca GA (imagen SVG) */
.logo-img { height: 26px; width: auto; display: block; }
[data-theme="dark"] .logo-img { filter: saturate(1.1) brightness(1.18); }
.footer .logo-img { height: 28px; }
, .table th {
  transition: background-color var(--dur-medium) var(--ease-practical), border-color var(--dur-medium) var(--ease-practical), color var(--dur-medium) var(--ease-practical);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Marca ----------
   Dos archivos y no un filtro: el logotipo es negro sobre claro y blanco sobre
   oscuro, y `brightness()` sobre un SVG negro da gris, no blanco. Cada uno se
   enseña en su tema y el otro no se descarga porque `display:none` en una
   imagen ya declarada sí la pide igual — de ahí que sean SVG de 1,5 KB y no
   mapas de bits. */
.logo-oscuro { display: none; }
[data-theme="dark"] .logo-claro { display: none; }
[data-theme="dark"] .logo-oscuro { display: block; }
[data-theme="dark"] .logo-img { filter: none; }

/* Separador "o" entre el acceso con Google y el formulario de siempre.
   Las dos rayas se dibujan con un borde que crece a cada lado del texto, asi
   la linea se ajusta sola al ancho de la tarjeta sin medidas fijas. */
.auth-sep {
  display: flex; align-items: center; gap: var(--space-150);
  margin: var(--space-200) 0;
  color: var(--text-subtle); font-size: 0.8125rem;
}
.auth-sep::before, .auth-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ---------- Lienzo de las pantallas de acceso ----------
   Login y registro son las dos unicas pantallas que ve alguien que todavia no
   ha entrado, y eran un gris plano. Se les pone fondo propio: una reticula
   tecnica muy tenue con dos halos del color de marca.

   Todo es CSS. Una imagen habria sido una peticion mas justo en la pantalla
   que mas rapido tiene que aparecer, y ademas habria que servirla en dos
   versiones para tema claro y oscuro.

   La tarjeta no se ve afectada: tiene fondo opaco propio, asi que el contraste
   de su texto es el mismo que antes. */
.auth-canvas {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-400);
  background-color: var(--surface-sunken);
}

/* Reticula. Dos degradados repetidos en lugar de un SVG: son cuatro lineas de
   CSS y escalan solas a cualquier tamanio de pantalla. */
.auth-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--auth-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--auth-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Se desvanece hacia los bordes. Una cuadricula que llega entera hasta el
     borde de la ventana y se corta a media casilla se lee como un fallo de
     maquetacion; asi parece que la pagina continua. */
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 42%, #000 15%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 65% at 50% 42%, #000 15%, transparent 80%);
  pointer-events: none;
}

/* Halos de color, en esquinas opuestas para que el fondo tenga direccion en
   vez de quedar centrado y simetrico como un foco de teatro. */
.auth-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38rem 26rem at 12% -5%, var(--auth-halo-1) 0%, transparent 62%),
    radial-gradient(32rem 24rem at 94% 105%, var(--auth-halo-2) 0%, transparent 62%);
  pointer-events: none;
}

/* La tarjeta, por encima de los dos pseudoelementos. */
.auth-canvas > * {
  position: relative;
  z-index: 1;
}

/* Navegadores sin soporte de `mask-image` pintarian la reticula hasta el borde.
   Es aceptable, pero si se puede comprobar, se baja el contraste de la rejilla
   en lugar de cortarla de golpe. */
@supports not (mask-image: radial-gradient(#000, transparent)) {
  .auth-canvas::before { opacity: 0.55; }
}