/* ════════════════════════════════════════════════════════════════
   CAPTA OS · Sistema visual
   Paleta: navy #112550 · teal #2aa8a0 · bright #38cdc4
   Tipografía: DM Serif Display (titulares) + DM Sans (cuerpo)
   Las fuentes se cargan vía <link> en cada HTML.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Paleta CAPTA ─── */
  --navy:    #112550;
  --navy-2:  #1b3a6b;
  --teal:    #2aa8a0;
  --teal-d:  #228f88;
  --bright:  #38cdc4;
  --sub:     #3a5070;   /* cuerpo de texto */
  --p1:      #d9433a;   /* alertas / frenos / crítico */
  --p2:      #e8893b;   /* advertencias */
  --ok:      #1f8a6b;

  /* ─── Neutrales ─── */
  --ink:     #112550;
  --muted:   #6b7a93;
  --faint:   #9aa6ba;
  --line:    #e4e7ec;
  --line-2:  #eef0f3;
  --bg:      #f4f6f8;
  --panel:   #ffffff;

  /* ─── Sistema ─── */
  --radius:    11px;
  --radius-sm: 7px;
  --shadow:    0 1px 2px rgba(17,37,80,.06), 0 1px 3px rgba(17,37,80,.08);
  --shadow-lg: 0 14px 36px -14px rgba(17,37,80,.28);
  --topbar-h:  58px;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Reset ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body { height:100%; }

body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { color:var(--teal-d); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ─── Tipografía ─── */
h1, h2, h3 { font-weight:600; color:var(--navy); line-height:1.2; }
.serif { font-family:var(--font-serif); font-weight:400; }
.muted { color:var(--muted); }
.tiny  { font-size:12px; }

/* ════════════════════════════════════════════════════════════════
   APP SHELL — barra superior
   ════════════════════════════════════════════════════════════════ */

.topbar {
  position:sticky; top:0; z-index:50;
  height:var(--topbar-h);
  background:var(--navy);
  display:flex; align-items:center;
  gap:28px;
  padding:0 24px;
}

.topbar__brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.topbar__logo  { height:22px; width:auto; display:block; }

.topbar__nav { display:flex; align-items:center; gap:4px; }
.topbar__nav a {
  color:rgba(255,255,255,.66);
  font-size:13px; font-weight:500;
  padding:7px 13px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.topbar__nav a:hover { color:#fff; background:rgba(255,255,255,.08); }
.topbar__nav a.is-active { color:#fff; background:rgba(255,255,255,.13); }

.topbar__spacer { flex:1; }

.topbar__user {
  display:flex; align-items:center; gap:9px;
  color:#fff; font-size:12.5px;
}
.topbar__user .avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:12px; color:#fff;
  flex-shrink:0;
}
.topbar__user .role {
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════════ */

.main { padding:32px 24px 64px; }
.container { max-width:1100px; margin:0 auto; }
.container--narrow { max-width:720px; }

.page-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:24px;
}
.page-head__title { font-family:var(--font-serif); font-weight:400; font-size:30px; color:var(--navy); }
.page-head__sub   { color:var(--muted); font-size:13.5px; margin-top:2px; }
.page-head__actions { display:flex; gap:10px; flex-shrink:0; }

.breadcrumb { font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--teal-d); }

/* ════════════════════════════════════════════════════════════════
   BOTONES
   ════════════════════════════════════════════════════════════════ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:13px; font-weight:600;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-decoration:none;
  transition:filter .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover { text-decoration:none; }
.btn--primary { background:var(--teal); color:#fff; }
.btn--primary:hover { filter:brightness(1.07); }
.btn--navy { background:var(--navy); color:#fff; }
.btn--navy:hover { filter:brightness(1.15); }
.btn--ghost { background:var(--panel); color:var(--sub); border-color:var(--line); }
.btn--ghost:hover { border-color:var(--teal); color:var(--teal-d); }
.btn--danger { background:var(--panel); color:var(--p1); border-color:#e7b3af; }
.btn--danger:hover { background:#fdf2f1; }
.btn--sm { padding:6px 11px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; filter:none; }

/* ════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════ */

.card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card__body { padding:22px 24px; }
.card__head {
  padding:16px 24px;
  border-bottom:1px solid var(--line-2);
  font-weight:600; color:var(--navy); font-size:14px;
}

.grid { display:grid; gap:16px; }
.grid--3 { grid-template-columns:repeat(3, 1fr); }
.grid--4 { grid-template-columns:repeat(4, 1fr); }

/* tarjeta de métrica */
.stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.stat__label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.stat__value { font-family:var(--font-serif); font-size:34px; color:var(--navy); margin-top:6px; line-height:1; }

/* fila de tarjetas de métrica */
.stat-row { display:flex; gap:16px; flex-wrap:wrap; }
.stat-row > .stat { flex:1 1 200px; }

/* distribución por fase */
.dist__row { display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.dist__row:last-child { border-bottom:none; }
.dist__label { width:172px; flex-shrink:0; font-size:13px; color:var(--sub); font-weight:500; }
.dist__bar  { flex:1; height:8px; background:var(--line-2); border-radius:5px; overflow:hidden; }
.dist__bar > span { display:block; height:100%; background:var(--teal); border-radius:5px; }
.dist__count { width:30px; text-align:right; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }

/* ─── Ficha de cliente ─── */
.ficha-foto {
  width:54px; height:54px; border-radius:50%;
  object-fit:cover; background:var(--line-2); flex-shrink:0;
}
.kv { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px 28px; }
.kv__label { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.kv__value { font-size:14px; color:var(--ink); margin-top:3px; word-break:break-word; }
.kv__value.muted { color:var(--faint); }
.bloque-texto { margin-top:18px; }
.bloque-texto .kv__value { white-space:pre-wrap; }

.fase-item { display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.fase-item:last-child { border-bottom:none; }
.fase-item__name { flex:1; font-size:13.5px; }
.fase-item__name strong { color:var(--navy); }
.fase-item.is-actual .fase-item__name strong { color:var(--teal-d); }
.fase-fecha { width:160px; flex-shrink:0; }

a.card { display:block; text-decoration:none; }
a.card:hover { border-color:var(--teal); box-shadow:var(--shadow-lg); text-decoration:none; }

.save-status { font-size:12px; color:var(--muted); font-weight:500; }
.save-status.ok  { color:var(--ok); }
.save-status.err { color:var(--p1); }

/* ════════════════════════════════════════════════════════════════
   TABLA
   ════════════════════════════════════════════════════════════════ */

.table-wrap {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
table.table { width:100%; border-collapse:collapse; }
.table thead th {
  text-align:left;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  background:#fafbfc;
}
.table tbody td {
  padding:13px 18px;
  border-bottom:1px solid var(--line-2);
  font-size:13.5px;
}
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr.row-link { cursor:pointer; }
.table tbody tr.row-link:hover { background:#fafbfc; }

/* ════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════ */

.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.badge--navy   { background:rgba(17,37,80,.08);  color:var(--navy); }
.badge--teal   { background:rgba(42,168,160,.12); color:var(--teal-d); }
.badge--muted  { background:var(--line-2);        color:var(--muted); }
.badge--ok     { background:rgba(31,138,107,.12); color:var(--ok); }
.badge--warn   { background:rgba(232,137,59,.14); color:var(--p2); }
.badge--alert  { background:rgba(217,67,58,.10);  color:var(--p1); }

/* ════════════════════════════════════════════════════════════════
   FORMULARIOS
   ════════════════════════════════════════════════════════════════ */

.field { margin-bottom:16px; }
.field > label {
  display:block;
  font-size:12px; font-weight:600; color:var(--sub);
  margin-bottom:6px;
}
.field__hint { font-size:11.5px; color:var(--muted); font-weight:400; }

.input, .select, .textarea {
  width:100%;
  font-family:inherit; font-size:13.5px; color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(42,168,160,.13);
}
.input::placeholder, .textarea::placeholder { color:var(--faint); }
.textarea { resize:vertical; min-height:84px; line-height:1.5; }
.input:disabled, .select:disabled, .textarea:disabled { background:#f4f5f7; color:var(--faint); cursor:not-allowed; }

.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* validación */
.input.is-error, .select.is-error, .textarea.is-error {
  border-color:var(--p1);
  box-shadow:0 0 0 3px rgba(217,67,58,.10);
}
.field-error { color:var(--p1); font-size:11.5px; margin-top:4px; }
.field-error:empty { display:none; }

/* subtítulo de grupo dentro de un formulario */
.form-group-label {
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--teal-d); font-weight:700;
  margin:24px 0 14px;
}
.form-group-label:first-child { margin-top:4px; }

/* ════════════════════════════════════════════════════════════════
   ESTADO VACÍO / AVISOS
   ════════════════════════════════════════════════════════════════ */

.empty {
  background:var(--panel);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:46px 28px;
  text-align:center;
  color:var(--muted);
}
.empty__title { font-family:var(--font-serif); font-size:20px; color:var(--navy); margin-bottom:6px; }

.notice {
  border-radius:var(--radius-sm);
  padding:11px 15px;
  font-size:13px;
}
.notice--info  { background:rgba(42,168,160,.09); color:var(--teal-d); }
.notice--warn  { background:rgba(232,137,59,.12); color:var(--p2); }
.notice--alert { background:rgba(217,67,58,.09);  color:var(--p1); }

/* ─── Utilidades ─── */
.flex     { display:flex; }
.flex-mid { display:flex; align-items:center; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.hidden { display:none !important; }

/* ─── Responsive ─── */
@media (max-width:780px) {
  .grid--3, .grid--4 { grid-template-columns:1fr 1fr; }
  .row-2 { grid-template-columns:1fr; }
  .page-head { flex-direction:column; align-items:flex-start; }
  .main { padding:24px 16px 48px; }
  .topbar { gap:14px; padding:0 14px; }
}
@media (max-width:480px) {
  .grid--3, .grid--4 { grid-template-columns:1fr; }
}