/* ============================================================
   PSG1 — Estilos globales
   Paleta: beige, verdes salud mental, neutros cálidos
   ============================================================ */

:root {
  --psg-green:      #6B9E8A;
  --psg-green-lt:   #A8C5A0;
  --psg-green-dk:   #3a5a50;
  --psg-beige:      #F5E6D3;
  --psg-beige-dk:   #e8d5bb;
  --psg-cream:      #FDFAF6;
  --psg-text:       #2d3748;
  --psg-muted:      #718096;
  --psg-border:     #e2d9ce;
  --psg-shadow:     rgba(107,158,138,.15);
  --psg-danger:     #c0392b;
}

/* Base */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--psg-cream);
  color: var(--psg-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── Navbar ─────────────────────────────────────────────── */
.navbar-psg {
  background: linear-gradient(135deg, var(--psg-green-dk) 0%, var(--psg-green) 100%);
}
.navbar-psg .navbar-brand,
.navbar-psg .nav-link,
.navbar-psg .btn {
  color: rgba(255,255,255,.92) !important;
}
.navbar-psg .nav-link:hover,
.navbar-psg .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.12);
  border-radius: .375rem;
}
.navbar-psg .dropdown-menu {
  border-color: var(--psg-border);
  box-shadow: 0 .5rem 1.5rem var(--psg-shadow);
}

/* ─── Botón principal ────────────────────────────────────── */
.btn-psg {
  background: var(--psg-green);
  border-color: var(--psg-green);
  color: #fff;
}
.btn-psg:hover, .btn-psg:focus {
  background: var(--psg-green-dk);
  border-color: var(--psg-green-dk);
  color: #fff;
}

/* ─── Colores de texto/fondo ─────────────────────────────── */
.text-psg        { color: var(--psg-green) !important; }
.text-psg-dark   { color: var(--psg-green-dk) !important; }
.bg-psg-soft     { background: rgba(168,197,160,.2) !important; }
.bg-psg          { background: var(--psg-green) !important; }

/* ─── Main content ────────────────────────────────────────── */
.psg-main {
  flex: 1;
  padding-bottom: 2rem;
}

/* ─── Auth ────────────────────────────────────────────────── */
.auth-body    { background: linear-gradient(135deg, var(--psg-beige) 0%, var(--psg-cream) 60%, #d4ecd4 100%); }
.auth-card    { max-width: 420px; width: 100%; border-radius: 1rem; background: #fff; }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  border: 1px solid var(--psg-border);
  border-radius: .75rem;
}
.card-header  { padding: 1rem 1.25rem .75rem; }

/* ─── Stat cards ─────────────────────────────────────────── */
.stat-card:hover { transform: translateY(-2px); transition: transform .2s; }
.stat-icon       { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; }

/* ─── Tables ─────────────────────────────────────────────── */
.table thead th {
  background: rgba(107,158,138,.1);
  border-color: var(--psg-border);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--psg-green-dk);
}
.table td { vertical-align: middle; border-color: var(--psg-border); }
.table-hover tbody tr:hover { background: rgba(168,197,160,.1); }

/* ─── Forms ──────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--psg-green);
  box-shadow: 0 0 0 .2rem rgba(107,158,138,.25);
}
.form-label { font-weight: 500; font-size: .9rem; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge-genero-M  { background: #6B9E8A; color: #fff; }
.badge-genero-F  { background: #A8C5A0; color: #2d4a3e; }
.badge-genero-NB { background: #c8b8e0; color: #3a1a5e; }

/* ─── Leyenda genograma ──────────────────────────────────── */
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: var(--psg-muted);
}
.legend-sep {
  width: 1px;
  height: 18px;
  background: var(--psg-border);
  display: inline-block;
}

/* ─── Footer ──────────────────────────────────────────────── */
.footer-psg {
  border-top: 1px solid var(--psg-border);
  background: #fff;
}

/* ─── Offcanvas ──────────────────────────────────────────── */
.offcanvas-header { background: var(--psg-beige); border-bottom: 1px solid var(--psg-border); }

/* ─── Lista relaciones ───────────────────────────────────── */
.rel-badge-MATRIMONIO { background: #3a5a50; color: #fff; }
.rel-badge-UNION_LIBRE{ background: #6B9E8A; color: #fff; }
.rel-badge-SEPARACION { background: #e67e22; color: #fff; }
.rel-badge-DIVORCIO   { background: #c0392b; color: #fff; }
.rel-badge-OTRO       { background: #95a5a6; color: #fff; }

/* ─── Responsivo ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .psg-main { padding: 0 0 1rem; }
  .card-body { padding: 1rem; }
  h2.h4 { font-size: 1.1rem; }
}

/* ─── Print / PDF helper ─────────────────────────────────── */
@media print {
  .navbar-psg, .footer-psg, .btn, .offcanvas { display: none !important; }
  .psg-main { padding: 0; }
  #genogram-canvas { page-break-inside: avoid; }
}