/* ═══════════════════════════════════════════════════════════════════
   MN IMPUESTOS  —  Estilos complementarios a Bootstrap 5
   La mayor parte del look & feel ahora la da Bootstrap; acá solo quedan
   los detalles que Bootstrap no cubre (marca de la navbar, iconos de
   los modales de mensaje y la lista de alertas de vencimientos).
═══════════════════════════════════════════════════════════════════ */
:root {
  --shell:      #354a5e;
  --success:    #107e3e;
  --success-bg: #ebf5eb;
  --warning:    #e9730c;
  --warning-bg: #fef3e4;
  --error:      #bb0000;
  --error-bg:   #faeaea;
  --info:       #0a6ed1;
  --info-bg:    #e8f4fd;

  /* Paleta de metric cards (misma que MNhogar) */
  --mnh-surface:       #ffffff;
  --mnh-border:        #e5e7eb;
  --mnh-border-strong: #d1d5db;
  --mnh-ink:           #111827;
  --mnh-ink-muted:     #6b7280;
  --mnh-ink-faint:     #9ca3af;
  --mnh-green:         #16a34a;
  --mnh-amber:         #d97706;
  --mnh-red:           #dc2626;
  --mnh-radius:        6px;
  --mnh-shadow:        0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
}

html { font-size: 14px; }

/* ── Metric cards (formato MNhogar / dashboard) ─────────────────────── */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.metric-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--mnh-border);
  border-radius: var(--mnh-radius);
  background: var(--mnh-surface);
  box-shadow: var(--mnh-shadow);
}

.metric-card span {
  font-size: 0.82rem;
  color: var(--mnh-ink-muted);
}

.metric-card small {
  font-size: 0.76rem;
  color: var(--mnh-ink-faint);
}

.metric-card strong {
  margin-top: 2px;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--mnh-ink);
}

.accent-green { border-top: 3px solid var(--mnh-green); }
.accent-amber { border-top: 3px solid var(--mnh-amber); }
.accent-ink   { border-top: 3px solid var(--mnh-border-strong); }
.accent-coral { border-top: 3px solid var(--mnh-red); }

/* ── Navbar de marca ───────────────────────────────────────────── */
.shell-navbar { background-color: var(--shell); }
.shell-navbar .navbar-brand { color: #fff; }
.shell-navbar .nav-link { color: rgba(255,255,255,.82); }
.shell-navbar .nav-link:hover { color: #fff; }
.shell-navbar .nav-link.active { color: #fff; font-weight: 600; }

/* ── Logo de marca (versión blanca: contrasta sobre el navy de la navbar) ── */
.brand-logo { height: 42px; width: auto; display: block; }

/* ── Icono circular de los modales de mensaje (success/warning/danger/info) ── */
.msg-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
}
.msg-icon-success { background: var(--success-bg); color: var(--success); }
.msg-icon-warning { background: var(--warning-bg); color: var(--warning); }
.msg-icon-danger  { background: var(--error-bg);   color: var(--error); }
.msg-icon-info    { background: var(--info-bg);    color: var(--info); }

/* ── Lista de vencimientos dentro del aviso automático ───────────── */
.alert-list { list-style: none; text-align: left; margin-top: 8px; max-height: 220px; overflow-y: auto; padding: 0; }
.alert-list li {
  padding: 8px 10px; border-bottom: 1px solid #dee2e6; font-size: .8125rem;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.alert-list li:last-child { border-bottom: none; }
.alert-list-importe { font-weight: 700; color: var(--warning); white-space: nowrap; }