/* Paleta idéntica a AppTheme (frontend/lib/core/theme/app_theme.dart) y a
   marketing/style.css / legal/base.html — mismos tokens, ningún color nuevo inventado.
   Sin Google Fonts: marketing/legal tampoco las cargan (system font stack), se mantiene el
   mismo precedente para no añadir una petición de red externa más de la estrictamente necesaria. */
:root {
  color-scheme: light;
  --background: #F8F6F2;
  --surface: #FFFFFF;
  --text-primary: #181D27;
  --text-secondary: #585E69;
  --text-tertiary: #6C727E;
  --accent: #606CDD;
  --accent-tint-bg: #E6EAFC;
  --accent-tint-text: #2F3390;
  --border: #DFDAD4;
  --border-subtle: #EBE7E2;
  --error: #C8393A;
  --error-tint-bg: #FFE7E6;
  --error-tint-text: #831826;
  --success: #0A924B;
  --success-tint-bg: #DBF2E0;
  --success-tint-text: #00541A;
  --field-fill: #F4EFE9;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background: var(--background);
}

a { color: var(--accent); }

.panel-topbar-mobile {
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 16px;
}
.panel-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  color: var(--text-primary);
}
.panel-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  display: inline-block;
}
.navbar-nav .nav-link {
  color: var(--text-secondary);
  font-weight: 600;
}
.navbar-nav .nav-link.active {
  color: var(--accent);
}

/* Sidebar (reemplaza el navbar superior en el panel privado, spec 012-panel-web). Bootstrap's
   `.offcanvas-md`: fijo a la izquierda desde md (>=768px) hacia arriba, drawer deslizante por
   debajo de ese ancho (activado por el botón hamburguesa de .panel-topbar-mobile). */
.panel-sidebar {
  --bs-offcanvas-width: 260px;
  background: var(--surface);
}
@media (min-width: 768px) {
  .panel-sidebar {
    width: 240px;
    flex: 0 0 240px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--border-subtle);
  }
}
.panel-sidebar-nav .nav-link {
  color: var(--text-secondary);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 0;
}
.panel-sidebar-nav .nav-link.active {
  color: var(--accent);
  background: var(--accent-tint-bg);
}
.panel-sidebar-divider {
  margin: 8px 20px;
  border-color: var(--border-subtle);
}
.panel-sidebar-footer {
  border-top: 1px solid var(--border-subtle);
}
.panel-main {
  min-width: 0;
}

/* Cards planas: 1px borde, sin sombra, radio 16px — no el sombreado por defecto de Bootstrap. */
.card {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: none;
}

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
  border-radius: 12px;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--accent-tint-text);
  border-color: var(--accent-tint-text);
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-tint-bg);
}

.panel-auth-wrap {
  max-width: 420px;
  margin: 48px auto;
}

/* Badges de alertas — mismos tokens que Flutter (status_colors.dart / app_theme.dart). */
.badge.panel-badge-accent {
  background: var(--accent-tint-bg);
  color: var(--accent-tint-text);
  font-weight: 600;
}
.badge.panel-badge-amber {
  background: #FFE7C7;
  color: #663E00;
  font-weight: 600;
}
.badge.panel-badge-cyan {
  background: #C5F6F8;
  color: #00545D;
  font-weight: 600;
}
.badge.panel-badge-locked {
  background: var(--field-fill);
  color: var(--text-secondary);
  font-weight: 600;
}
.badge.panel-fraction-badge {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Desglose de criterios de una alerta (desplegable) — punto verde/gris por criterio (igual que
   CriterionDot en Flutter: "criterio individual cumplido" es verde/gris, no rojo) + barra de
   resumen final con los tokens del semáforo (--success/--error vía semaforo_style), mismo
   estilo que el mockup móvil (spec/features/003-frontend-mvp/mockups/mobile/03-my-alerts.png). */
.criteria-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.criteria-dot.is-met {
  background-color: var(--success);
}
.criteria-dot.is-unmet {
  background-color: var(--border);
}
.criteria-fraction-pill {
  text-align: center;
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 8px 12px;
  border-radius: 10px;
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.criterion-row select,
.criterion-row input {
  font-size: 0.85rem;
}

.panel-avatar-initials {
  letter-spacing: 0.02em;
}

.panel-unread {
  background: #C5F6F8;
}

.panel-progress-accent {
  background-color: var(--accent);
}