:root {
  --avanta-purple: #534AB7;
  --avanta-purple-dark: #3f3894;
  --avanta-green: #1D9E75;
  --avanta-offwhite: #F4F3FA;
  --avanta-amber: #B45309;
  --avanta-red: #C0392B;
  --avanta-text: #232336;
  --avanta-muted: #6b6b80;
  --avanta-border: #dcd9ec;
  --avanta-white: #ffffff;
  --avanta-radius: 10px;
  --avanta-font-heading: 'Barlow Condensed', 'Segoe UI', sans-serif;
  --avanta-font-body: 'DM Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--avanta-font-body);
  background: var(--avanta-offwhite);
  color: var(--avanta-text);
}

h1, h2, h3, h4 {
  font-family: var(--avanta-font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--avanta-purple-dark);
}

a { color: var(--avanta-purple); }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* Navbar */
.avanta-nav {
  background: var(--avanta-purple);
  position: sticky;
  top: 0;
  z-index: 10;
}
.avanta-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
}
.avanta-nav-brand {
  color: #fff;
  font-family: var(--avanta-font-heading);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
}
.avanta-nav-brand small { opacity: .7; font-size: .7rem; }
.avanta-nav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.avanta-nav-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: 6px;
}
.avanta-nav-links a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.avanta-nav-links a.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 600;
}

/* En pantallas angostas, la barra no alcanza para marca + 5 links + selector
   en una sola fila: se reparte en 2 filas y los links quedan en una franja
   deslizable horizontal, para que todos sigan siendo alcanzables (antes se
   cortaban fuera de pantalla sin ningún indicio de que había más). */
@media (max-width: 700px) {
  .avanta-nav-inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 16px;
  }
  .avanta-nav-links {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .avanta-nav-links a { flex-shrink: 0; }
  .avanta-project-selector { margin-left: 0 !important; }
}

/* Cards */
.card {
  background: var(--avanta-white);
  border: 1px solid var(--avanta-border);
  border-radius: var(--avanta-radius);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.module-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.module-card .step {
  font-family: var(--avanta-font-heading);
  color: var(--avanta-green);
  font-size: 0.85rem;
  font-weight: 700;
}
.module-card h3 { margin: 4px 0 6px; }
.module-card p { margin: 0; color: var(--avanta-muted); font-size: 0.9rem; }

/* Badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge-caso1 { background: #e6e3f7; color: var(--avanta-purple-dark); }
.badge-caso3 { background: #d9f2ea; color: var(--avanta-green); }
.badge-sim { background: #fdecd2; color: var(--avanta-amber); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--avanta-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--avanta-purple); color: #fff; }
.btn-primary:hover { background: var(--avanta-purple-dark); }
.btn-outline { background: #fff; border-color: var(--avanta-border); color: var(--avanta-text); }
.btn-outline:hover { border-color: var(--avanta-purple); color: var(--avanta-purple); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Tables */
table.avanta-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.avanta-table th, table.avanta-table td {
  border: 1px solid var(--avanta-border);
  padding: 8px 10px;
  text-align: left;
}
table.avanta-table th { background: var(--avanta-offwhite); font-family: var(--avanta-font-heading); }
table.avanta-table tr:nth-child(even) td { background: #fbfafd; }

/* KPI tiles */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.kpi-tile {
  background: #fff;
  border: 1px solid var(--avanta-border);
  border-radius: var(--avanta-radius);
  padding: 14px 16px;
}
.kpi-tile .label { font-size: 0.78rem; color: var(--avanta-muted); }
.kpi-tile .value { font-family: var(--avanta-font-heading); font-size: 1.6rem; color: var(--avanta-purple-dark); }
.kpi-tile .value.positive { color: var(--avanta-green); }
.kpi-tile .value.negative { color: var(--avanta-red); }

/* Mobile shell (reportes de campo) */
.mobile-shell {
  max-width: 420px;
  margin: 24px auto;
  background: #fff;
  border: 1px solid var(--avanta-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(83,74,183,0.08);
}
.mobile-shell-header {
  background: var(--avanta-purple);
  color: #fff;
  padding: 16px 18px;
}
.mobile-shell-body { padding: 18px; min-height: 380px; }
.screen { display: none; }
.screen.active { display: block; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.82rem; color: var(--avanta-muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--avanta-border);
  border-radius: 8px;
  font-family: var(--avanta-font-body);
  font-size: 0.9rem;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--avanta-border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}
.list-item:hover { border-color: var(--avanta-purple); }
.list-item.selected { border-color: var(--avanta-green); background: #f2fbf8; }

.muted { color: var(--avanta-muted); }
.hidden { display: none !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-title { margin-top: 28px; }

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--avanta-text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all .25s ease;
  pointer-events: none;
  max-width: 320px;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Estado de conexion con la API (cargando / error / ok) */
.api-status {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin: 14px 0;
  border: 1px solid transparent;
}
.api-status.loading { background: #eef0fc; color: var(--avanta-purple-dark); border-color: #d9d5f5; }
.api-status.error { background: #fbe9e7; color: var(--avanta-red); border-color: #f3cdc7; }
.api-status.ok { background: #e3f7ef; color: var(--avanta-green); border-color: #c8ecdd; }
.api-status.info { background: #eef2f7; color: #3f4b5c; border-color: #dbe3ea; }