:root {
  --bg: #f5f5f5;
  --panel: #ffffff;
  --border: #dddddd;
  --text: #111111;
  --muted: #666666;
  --primary: #1d4ed8;
  --primary-dark: #1e40af;
  --green: #059669;
  --red: #dc2626;
  /* Alias exacto de las variables de pm.ua.co.cr (repos/ua-horas/src/styles.css)
     para poder pegar sus reglas .mnp-* literalmente, sin traducir nombres. */
  --line: #d8d8d8;
  --ink: #111111;
  --ink-soft: #374151;
  --surface: #ffffff;
  --accent: #111111;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.badge {
  font-size: 12px;
  color: var(--primary-dark);
  background: #eef2ff;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── Shell (sidebar oscuro + topbar) ────────────────────────────────────── */

.app-shell { display: flex; min-height: 100vh; }

.dark-sidebar {
  width: 260px; flex-shrink: 0; background: #111111; color: #cccccc;
  display: flex; flex-direction: column; padding: 18px 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.brand { padding: 12px 22px 22px; }
.brand-mark { width: 52px; height: 52px; display: block; }

.shell-nav { display: flex; flex-direction: column; padding: 0 12px; gap: 2px; }

.shell-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 10px; border-radius: 7px; border: none; background: transparent;
  color: #cccccc; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.shell-nav-item:hover:not(.disabled) { background: #1f1f1f; color: #fff; }
.shell-nav-item.active { background: #f0f0f0; color: #111111; }
.shell-nav-item.disabled { color: #5b616e; cursor: default; }

.shell-subnav { display: flex; flex-direction: column; gap: 1px; padding: 2px 12px 8px 34px; }
.shell-nav-subitem {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 7px;
  border: none; background: transparent; color: #999999; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.shell-nav-subitem:hover:not(.disabled) { background: #1f1f1f; color: #fff; }
.shell-nav-subitem.active { background: #f0f0f0; color: #111111; }
.shell-nav-subitem.disabled { color: #4b515c; cursor: default; }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.shell-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.shell-topbar h1 { font-size: 18px; margin: 0; white-space: nowrap; }
.breadcrumb { color: var(--muted); font-weight: 500; }
.breadcrumb:not(:empty)::after { content: " › "; }

.stat-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; position: relative;
}
.stat-card .stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
  font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.stat-card .stat-value { font-size: 22px; font-weight: 700; margin-top: 6px; }
.stat-card .stat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); display: inline-block; }
.stat-card.accent { border-left: 4px solid var(--accent-color, var(--primary)); padding-left: 14px; }

/* ── Panel toolbar (Vista/Fecha + acciones) ─────────────────────────────── */
.panel-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.panel-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.panel-toolbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ── Gráfico de barras apiladas ──────────────────────────────────────────── */
.stacked-chart { display: flex; margin: 8px 0 18px; }
.stacked-chart-plot { position: relative; flex: 1; height: 320px; padding-left: 52px; }
.stacked-chart-gridlines { position: absolute; inset: 0 0 28px 52px; }
.stacked-chart-gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.stacked-chart-gridline span { position: absolute; left: -52px; top: -8px; width: 44px; text-align: right; font-size: 11px; color: var(--muted); }
.stacked-chart-bars { position: absolute; inset: 0 0 0 52px; display: flex; align-items: flex-end; gap: 6px; padding-bottom: 28px; }
.stacked-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 0; }
.stacked-bar { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; cursor: pointer; }
.stacked-bar .segment { width: 100%; min-height: 0; }
.stacked-bar .segment + .segment { border-top: 2px solid var(--panel); }
.stacked-bar-month { position: absolute; bottom: -24px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); }
.stacked-bar .segment.segment-proyectado { opacity: .45; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 3px, transparent 3px 7px); }

.grouped-bar-pair { width: 100%; height: 100%; display: flex; align-items: flex-end; gap: 3px; }
.grouped-bar { flex: 1; min-width: 0; border-radius: 3px 3px 0 0; }

.chart-legend-full { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.chart-legend-full .legend-item { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.chart-legend-full .legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.chart-legend-full .legend-name { font-weight: 600; color: var(--text); }
.chart-legend-full .legend-pct { color: var(--muted); }

.filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-tab {
  padding: 7px 13px; border: none; background: transparent; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.filter-tab:hover { background: var(--bg); color: var(--text); }
.filter-tab.active { background: var(--text); color: #fff; }

.equipo-search {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
  min-width: 220px; margin-left: auto;
}

.tipo-badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.tipo-colaborador { background: #dbeafe; color: #1e40af; }
.tipo-contratista { background: #f1f5f9; color: #475569; }
.tipo-contratista_auxiliar { background: #fce7f3; color: #9d174d; }
.tipo-personal_auxiliar { background: #fef9c3; color: #854d0e; }

.tabla tr.clickable { cursor: pointer; }
.tabla tr.clickable:hover { background: #f9fafb; }

.person-modal { display: flex; flex-direction: column; gap: 16px; }
.person-modal-header { display: flex; align-items: center; gap: 14px; }
.person-avatar-lg {
  width: 56px; height: 56px; border-radius: 999px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
  text-transform: uppercase; flex-shrink: 0;
}
.person-modal h3 { margin: 0; font-size: 17px; }
.person-badges { display: flex; gap: 6px; margin-top: 6px; }
.badge-estado { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.badge-activo { background: #d1fae5; color: #065f46; }
.badge-inactivo { background: #f3f4f6; color: #6b7280; }

.salario-box { background: var(--bg); border-radius: 10px; padding: 14px 16px; }
.salario-box .label { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: .03em; }
.salario-box .amount { font-size: 24px; font-weight: 700; margin-top: 4px; }
.salario-box .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.person-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.person-fields .field-label { font-weight: 700; }
.person-fields .field-value { color: var(--muted); }

.modal-nav-btn {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 60;
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-nav-btn.prev { left: 284px; }
.modal-nav-btn.next { right: 24px; }

.chart-cards-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.chart-box-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.chart-box-header h2 { margin: 0; font-size: 15px; }
.period-toggle { display: flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px; }
.period-btn { padding: 6px 12px; border: none; background: transparent; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.period-btn.active { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.chart-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.chart-legend .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.quincena-cards { display: flex; flex-direction: column; gap: 12px; }
.quincena-card {
  border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px;
  padding: 14px 16px; background: var(--panel);
}
.quincena-card.actual { border-left-color: var(--primary); }
.quincena-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.quincena-card .qc-title { font-size: 12px; color: var(--muted); font-weight: 600; }
.quincena-card .qc-label { font-size: 15px; font-weight: 700; margin-top: 2px; }
.quincena-card .qc-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.qc-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.qc-status.abierta { background: #dbeafe; color: #1e40af; }
.qc-status.completada { background: #d1fae5; color: #065f46; }
.qc-status.proxima { background: #f3f4f6; color: #6b7280; }
.shell-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.shell-icon-btn {
  border: none; background: transparent; cursor: pointer; color: var(--muted);
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.shell-icon-btn:hover:not(:disabled) { background: var(--bg); }
.shell-icon-btn svg { width: 17px; height: 17px; }

.nav-icon { display: inline-flex; }
.nav-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.shell-nav-subitem .nav-icon svg { width: 15px; height: 15px; }
.btn .nav-icon { vertical-align: -3px; }

.shell-profile-wrap { position: relative; }
.shell-profile {
  display: flex; align-items: center; gap: 8px; border: none; background: transparent;
  cursor: pointer; padding: 4px 6px; border-radius: 8px;
}
.shell-profile:hover { background: var(--bg); }
.shell-avatar {
  width: 30px; height: 30px; border-radius: 999px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  text-transform: uppercase;
}
.shell-profile-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.shell-profile-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
#userBadge { font-size: 12px; font-weight: 600; }

.shell-profile-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1); padding: 6px; z-index: 40;
}
.shell-profile-menu.hidden { display: none; }
.shell-profile-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: transparent; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.shell-profile-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.shell-profile-menu-item:hover:not(.disabled) { background: var(--bg); }
.shell-profile-menu-item.disabled { color: var(--muted); cursor: default; }

.calc-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-summary { cursor: pointer; list-style: none; }
.panel-summary::-webkit-details-marker { display: none; }
.panel-summary::before { content: "▸ "; color: var(--muted); font-size: 12px; }
details[open] > .panel-summary::before { content: "▾ "; }

@media print {
  .dark-sidebar, .shell-topbar, .calc-topbar, #btnImprimirReporte, .panel:not(#reportePagosPanel), details { display: none !important; }
  #reportePagosPanel { border: none; box-shadow: none; padding: 0; }
}

main { flex: 1; padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; }
.page.hidden { display: none; }
.hidden { display: none !important; }

.tipo-cambio { display: flex; align-items: flex-end; gap: 8px; }
.tc-fuente { font-size: 11px; color: var(--muted); margin-top: 4px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 24px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-header h2 { margin: 0; font-size: 15px; }

/* ── Toggle segmentado (Emisión / Recepción) ─────────────────────────────── */
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-toggle-btn { border: none; background: transparent; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg-toggle-btn + .seg-toggle-btn { border-left: 1px solid var(--border); }
.seg-toggle-btn.active { background: var(--primary); color: #fff; }

/* ── Minuta (mnp-*) — copiado literal de repos/ua-horas/src/styles.css ──── */

.mnp-subtabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-top: 14px; }
.mnp-subtab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--ink-soft); cursor: pointer; margin-bottom: -1px; }
.mnp-subtab:hover { color: var(--ink); }
.mnp-subtab--active { color: var(--ink); border-bottom-color: #1F2937; font-weight: 600; }

.mnp-fathom-week-box { background:#F0FDF4; border:1px solid #86EFAC; border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.mnp-fathom-week-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; cursor: pointer; }
.mnp-fathom-badge { display:inline-block; font-size:10px; font-weight:700; color:#15803D; background:#DCFCE7; border:1px solid #86EFAC; border-radius:4px; padding:1px 5px; margin-right:6px; vertical-align:middle; white-space:nowrap; }
.mnp-fathom-week-content { font-size:12px; color:#374151; white-space:pre-wrap; max-height:260px; overflow-y:auto; line-height:1.6; }
.mnp-fathom-week-content h4 { margin: 12px 0 5px; font-size: 12.5px; }
.mnp-fathom-week-content h4:first-child { margin-top: 0; }
.mnp-fathom-week-content h5 { margin: 8px 0 3px; font-size: 12px; color: var(--muted); }
.mnp-fathom-week-content ul { margin: 3px 0; padding-left: 18px; }

.mnp-group { margin-top: 14px; }
.mnp-group-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: #F3F4F6; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); }
.mnp-group-toggle:hover { background: #EBEDF0; }
.mnp-group .mnp-accordion { margin-top: 8px; }

.mnp-accordion { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 14px; }
.mnp-acc-item { border-bottom: 1px solid var(--line); }
.mnp-acc-item:last-child { border-bottom: none; }
.mnp-acc-item--open { background: #F9FAFB; }
.mnp-acc-header { display: grid; grid-template-columns: 80px 1fr auto auto 20px; gap: 12px; align-items: center; padding: 10px 14px; background: transparent; border: none; cursor: pointer; text-align: left; color: var(--ink); width: 100%; }
.mnp-acc-header:hover { background: #f6faf8; }
.mnp-acc-item--open .mnp-acc-header { background: #E5E7EB; }
.mnp-list-code { font-size: 11px; font-weight: 700; color: #fff; background: #4B5563; padding: 2px 7px; border-radius: 4px; white-space: nowrap; display: inline-block; }
.mnp-acc-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnp-acc-meta { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.mnp-acc-resp { font-size: 11px; font-weight: 600; color: #374151; background: #F3F4F6; padding: 2px 7px; border-radius: 4px; }
.mnp-acc-status { font-size: 11px; color: var(--muted); }
.mnp-acc-acts { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mnp-acc-chevron { transition: transform .2s; color: var(--muted); flex-shrink: 0; }
.mnp-acc-chevron--open { transform: rotate(180deg); }
.mnp-add-project-btn { display:flex; align-items:center; gap:6px; width:100%; padding:10px 16px; border:1px dashed #D1D5DB; border-top:none; border-radius:0 0 8px 8px; background:#FAFAFA; color:#6B7280; font-size:13px; cursor:pointer; transition:background .15s, color .15s; }
.mnp-add-project-btn:hover { background:#F0FDF4; color:#15803D; border-color:#86EFAC; }
.mnp-passive-section { margin-top: 8px; }
.mnp-passive-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #f3f4f6; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--muted); width: 100%; }
.mnp-passive-toggle:hover { background: #e5e7eb; }

.mnp-week-nav { display: flex; align-items: center; gap: 6px; }
.mnp-week-label { font-size: 13px; font-weight: 600; min-width: 160px; text-align: center; }

/* Inline detail */
.mnp-inline { border-top: 2px solid #4B5563; }
.mnp-inline-loading { display: flex; align-items: center; gap: 8px; padding: 16px; font-size: 13px; color: var(--muted); }
.mnp-empty-hint { font-size: 12px; color: #bbb; font-style: italic; margin: 0; }

.mnp-meta-band { display: flex; flex-wrap: wrap; background: #fff; border-bottom: 1px solid #D1D5DB; }
.mnp-meta-item { display: flex; align-items: center; gap: 0; border-right: 1px solid #D1D5DB; flex: 1; min-width: 180px; }
.mnp-meta-item--full { flex-basis: 100%; border-right: none; border-top: 1px solid #D1D5DB; }
.mnp-meta-label { background: #1F2937; color: #fff; font-size: 11px; font-weight: 700; padding: 7px 12px; white-space: nowrap; flex-shrink: 0; min-width: 76px; text-align: center; letter-spacing: .04em; }
.mnp-meta-value { font-size: 13px; padding: 7px 14px; color: #111827; font-weight: 500; }
.mnp-meta-select { font-size: 13px; padding: 5px 8px; margin: 3px 8px; border: 1px solid #D1D5DB; border-radius: 4px; background: #fff; color: #1a1a1a; font-weight: 500; flex: 1; }
.mnp-meta-input { font-size: 13px; padding: 5px 8px; margin: 3px 8px; border: 1px solid #D1D5DB; border-radius: 4px; background: #fff; color: #1a1a1a; flex: 1; font-family: inherit; }

.mnp-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 8px; flex: 1; }
.mnp-chip { display: inline-flex; align-items: center; gap: 4px; background: #E0E7FF; color: #3730A3; font-size: 11.5px; font-weight: 600; padding: 2px 4px 2px 8px; border-radius: 999px; }
.mnp-chip button { border: none; background: transparent; color: #3730A3; cursor: pointer; font-size: 10px; padding: 2px; line-height: 1; opacity: .65; }
.mnp-chip button:hover { opacity: 1; }
.mnp-chip-add-select { border: 1px dashed #D1D5DB; border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; padding: 2px 8px; cursor: pointer; }

.mnp-section-header { display: flex; justify-content: space-between; align-items: center; background: #595959; color: #fff; font-size: 11px; font-weight: 700; padding: 6px 16px; text-transform: uppercase; letter-spacing: .07em; }
.mnp-section-header--full { border-top: 2px solid #374151; }

/* Two-column writing grid */
.mnp-inline--writing { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #E5E7EB; }
.mnp-col-header { background: #1F2937; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 7px 14px; }
.mnp-cell--ref { border-right: 2px solid #E5E7EB; background: #F9FAFB; }
.mnp-cell--ref.mnp-col-header { background: #6B7280; }
.mnp-cell { min-width: 0; }
.mnp-cell--acts { vertical-align: top; }
.mnp-col-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #9CA3AF; padding: 8px 14px 4px; }
.mnp-cell--ref .mnp-resumen { padding: 8px 14px; background: transparent; border-bottom: none; }
.mnp-cell--ref .mnp-act-table { font-size: 12px; }

.mnp-resumen { padding: 10px 16px 14px; background: #F9FAFB; border-bottom: 1px solid #E5E7EB; min-height: 40px; }
.mnp-resumen-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mnp-resumen-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 4px; background: #fff; border-left: 3px solid #E5E7EB; }
.mnp-resumen-item--pinned { border-left-color: #D97706; background: #FFFBEB; }
.mnp-resumen-text { font-size: 13px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; flex: 1; }
.mnp-resumen-meta { font-size: 10.5px; color: var(--muted); }
.mnp-resumen-actions { display: flex; gap: 2px; flex-shrink: 0; }
.mnp-resumen-delete, .mnp-resumen-edit, .mnp-resumen-pin { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; border: none; background: transparent; color: #9CA3AF; cursor: pointer; flex-shrink: 0; padding: 0; font-size: 12px; }
.mnp-resumen-delete:hover { background: #FEE2E2; color: #DC2626; }
.mnp-resumen-edit:hover { background: #E5E7EB; color: var(--ink); }
.mnp-resumen-pin:hover, .mnp-resumen-pin--active { background: #FEF3C7; color: #D97706; }
.mnp-resumen-edit-form { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mnp-resumen-edit-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; font-size: 13px; font-family: inherit; resize: vertical; }
.mnp-resumen-edit-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mnp-resumen-edit-form-actions button { font-size: 11.5px; padding: 3px 9px; border-radius: 4px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.mnp-comment-compose { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.mnp-comment-compose textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 7px 10px; font-size: 13px; resize: vertical; font-family: inherit; margin-bottom: 6px; }
.mnp-comment-compose button { align-self: flex-end; display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 12px; border: 1px solid #374151; background: #374151; color: #fff; border-radius: 5px; cursor: pointer; }

/* Activities table */
.mnp-act-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mnp-act-th { background: #3f3f3f; color: #fff; padding: 7px 10px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-right: 1px solid #555; }
.mnp-act-th:last-child { border-right: none; }
.mnp-act-fecha-col { width: 96px; }
.mnp-act-check-col { width: 38px; text-align: center; }
.mnp-act-owner-col { width: 90px; }
.mnp-act-junior-col { width: 130px; }
.mnp-act-row td { padding: 8px 10px; border-bottom: 1px solid #EAECF0; border-right: 1px solid #EAECF0; vertical-align: middle; }
.mnp-act-row td:last-child { border-right: none; }
.mnp-act-row:hover { background: #F5F6F8; }
.mnp-act-row--done { opacity: .65; }
.mnp-act-detail { min-width: 200px; line-height: 1.45; }
.mnp-act-row--done .mnp-act-detail { text-decoration: line-through; color: var(--muted); }
.mnp-act-fecha { font-size: 12px; white-space: nowrap; color: #4B5563; font-variant-numeric: tabular-nums; }
.mnp-act-check-cell { text-align: center; vertical-align: middle !important; }
.mnp-check { width: 22px; height: 22px; border: 1.5px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 auto; transition: border-color .15s, background .15s; }
.mnp-check:hover:not(:disabled) { border-color: #6B7280; }
.mnp-check--done { background: var(--green); border-color: var(--green); color: #fff; }
.mnp-new-input { width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 5px 7px; font-size: 12px; background: #fff; }
.mnp-new-input:focus { outline: none; border-color: #9ca3af; }
.mnp-act-edit-btn { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:3px; border:none; background:transparent; color:#9CA3AF; cursor:pointer; padding:0; }
.mnp-act-edit-btn:hover { background:#EFF6FF; color:#1D4ED8; }

/* Fase del proyecto */
.mnp-fase-body { padding: 14px 16px 10px; background: #F9FAFB; border-bottom: 1px solid var(--line); }
.mnp-fase-track { display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
.mnp-fase-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 54px; cursor: pointer; position: relative; user-select: none; }
.mnp-fase-step::after { content: ''; position: absolute; top: 7px; right: 0; width: 50%; height: 2px; background: #D1D5DB; z-index: 0; }
.mnp-fase-step:last-child::after { display: none; }
.mnp-fase-step:not(:first-child)::before { content: ''; position: absolute; top: 7px; left: 0; width: 50%; height: 2px; background: #D1D5DB; z-index: 0; }
.mnp-fase-step--done::before, .mnp-fase-step--done::after { background: #6B7280; }
.mnp-fase-step--current::before { background: #6B7280; }
.mnp-fase-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #D1D5DB; position: relative; z-index: 1; transition: all .15s; flex-shrink: 0; }
.mnp-fase-step--done .mnp-fase-dot { background: #6B7280; border-color: #4B5563; }
.mnp-fase-step--current .mnp-fase-dot { background: #4B5563; border-color: #374151; width: 20px; height: 20px; box-shadow: 0 0 0 3px rgba(75,85,99,.2); }
.mnp-fase-step:hover .mnp-fase-dot { border-color: #4B5563; }
.mnp-fase-label { font-size: 9px; color: #9CA3AF; text-align: center; margin-top: 5px; line-height: 1.2; max-width: 58px; word-break: break-word; }
.mnp-fase-step--done .mnp-fase-label { color: #6B7280; }
.mnp-fase-step--current .mnp-fase-label { color: #1F2937; font-weight: 700; font-size: 10px; }
.mnp-fase-date-label { font-weight: 500; color: var(--ink); }
.mnp-fase-meta-rows { border-top: 1px solid #E5E7EB; margin-top: 12px; }
.mnp-fase-meta-row { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; border-bottom: 1px solid #F3F4F6; }
.mnp-fase-meta-row:last-child { border-bottom: none; }
.mnp-fase-meta-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9CA3AF; min-width: 52px; padding-top: 2px; flex-shrink: 0; }
.mnp-notas-input { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 7px 10px; font-size: 13px; resize: vertical; font-family: inherit; min-height: 60px; display: block; }

/* Pager */
.mnp-detail-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #F3F4F6; border-top: 2px solid #D1D5DB; gap: 8px; }
.mnp-detail-nav-btn { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #D1D5DB; border-radius: 6px; padding: 6px 12px; font-size: 12px; color: #374151; cursor: pointer; max-width: 42%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: background .12s, border-color .12s; }
.mnp-detail-nav-btn:hover:not(:disabled) { background: #E5E7EB; border-color: #9CA3AF; }
.mnp-detail-nav-btn:disabled { opacity: .35; cursor: default; }
.mnp-detail-nav-btn--right { flex-direction: row-reverse; }
.mnp-detail-nav-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnp-detail-nav-pos { font-size: 12px; color: #6B7280; flex-shrink: 0; }

.mnp-saved-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; background: #22c55e; color: #fff; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 12px rgba(0,0,0,.18); pointer-events: none; }
.mnp-saved-toast--error { background: #dc2626; }

@media (max-width: 780px) {
  .mnp-inline--writing { grid-template-columns: 1fr; }
  .mnp-cell--ref { border-right: none; border-bottom: 2px solid #E5E7EB; }
}

/* ── Recurso Humano (rh-*/ms-*) — copiado literal de repos/ua-horas ─────── */
.rh-view { padding: 16px 0; display: flex; flex-direction: column; gap: 20px; }
.rh-toolbar { display: flex; align-items: center; gap: 12px; }
.rh-view-toggle { display: flex; border: 1px solid #E5E7EB; border-radius: 6px; overflow: hidden; }
.rh-toggle-btn { background: transparent; border: none; padding: 5px 14px; font-size: 12px; font-weight: 500; color: var(--ink-soft); cursor: pointer; }
.rh-toggle-btn:hover { background: #F3F4F6; }
.rh-toggle-btn--active { background: #1F2937; color: #fff; }
.rh-toggle-btn--active:hover { background: #374151; }
.rh-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6B7280; padding: 4px 0 8px; border-bottom: 2px solid #E5E7EB; margin-bottom: 0; }
.rh-table-wrap { overflow-x: auto; }
.rh-table { border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.rh-table thead { background: #F3F4F6; }
.rh-th-name { text-align: left; padding: 7px 12px; font-weight: 600; white-space: nowrap; border: 1px solid #E5E7EB; width: 180px; min-width: 180px; max-width: 180px; vertical-align: bottom; }
.rh-th-project { border: none; border-bottom: 1px solid #E5E7EB; width: 32px; min-width: 32px; max-width: 32px; padding: 0; vertical-align: bottom; position: relative; height: 180px; overflow: visible; }
.rh-th-project span { display: block; position: absolute; bottom: 6px; left: 16px; transform-origin: 0% 100%; transform: rotate(-45deg); white-space: nowrap; font-size: 11px; font-weight: 600; color: #374151; line-height: 1; }
.rh-td-name { padding: 6px 12px; border: 1px solid #D1D5DB; white-space: nowrap; color: var(--ink); font-weight: 500; width: 180px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.rh-td-cell { text-align: center; padding: 6px 4px; border: 1px solid #D1D5DB; color: #15803d; width: 32px; cursor: default; }
.rh-td-cell--active { background: #dcfce7; }
.rh-td-cell--editable { cursor: pointer; }
.rh-td-cell--editable:hover { background: #F0FDF4; }
.rh-td-cell--active.rh-td-cell--editable:hover { background: #bbf7d0; }
.rh-group-row { background: #F3F4F6; }
.rh-group-cell { padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6B7280; border: 1px solid #D1D5DB; }
.rh-list-tables { display: flex; flex-direction: column; gap: 24px; }
.rh-list-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rh-list-th { text-align: left; padding: 7px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6B7280; border-bottom: 2px solid #9CA3AF; }
.rh-list-th--name { width: 190px; white-space: nowrap; }
.rh-list-name-cell { padding: 8px 14px; border-bottom: 1px solid #D1D5DB; font-weight: 500; white-space: nowrap; vertical-align: middle; width: 190px; }
.rh-list-proj-cell { padding: 5px 14px; border-bottom: 1px solid #D1D5DB; vertical-align: middle; }

.ms-wrap { position: relative; display: inline-block; min-width: 0; width: 100%; }
.ms-pills { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 28px; }
.ms-pill { display: inline-flex; align-items: center; gap: 4px; background: #E0F2FE; color: #0369A1; border-radius: 12px; padding: 2px 8px 2px 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.ms-pill-x { background: none; border: none; cursor: pointer; color: #0369A1; font-size: 14px; line-height: 1; padding: 0 1px; opacity: .7; }
.ms-pill-x:hover { opacity: 1; }
.ms-add-btn { background: none; border: 1px dashed #9CA3AF; border-radius: 12px; color: var(--ink-soft); font-size: 11px; padding: 2px 9px; cursor: pointer; white-space: nowrap; }
.ms-add-btn:hover { border-color: #6B7280; color: var(--ink); background: #F9FAFB; }
.ms-dropdown { position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 100; min-width: 160px; max-height: 220px; overflow-y: auto; padding: 4px; }
.ms-option { display: block; width: 100%; text-align: left; background: none; border: none; padding: 7px 12px; font-size: 13px; color: var(--ink); cursor: pointer; border-radius: 5px; }
.ms-option:hover { background: #F3F4F6; }
.ms-pill--project { background: #DCFCE7; color: #15803d; }
.ms-pill--project .ms-pill-x { color: #15803d; }
.ms-pill--saving { opacity: .55; pointer-events: none; }

/* ── Empezar Reunión (meeting-*) — copiado literal de repos/ua-horas ────── */
.meeting-start-btn { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:7px; background:#1D4ED8; color:#fff; border:none; cursor:pointer; font-size:13px; font-weight:600; }
.meeting-start-btn:hover { background:#1e40af; }
.meeting-overlay { position:fixed; inset:0; z-index:9000; background:var(--bg,#f8f9fa); display:flex; flex-direction:column; overflow:hidden; }
.meeting-topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#111827; color:#fff; flex-shrink:0; gap:12px; }
.meeting-topbar-center { flex:1; display:flex; align-items:center; gap:10px; justify-content:center; min-width:0; overflow:hidden; }
.meeting-slide-code { font-size:11px; font-family:monospace; background:rgba(255,255,255,.15); padding:2px 7px; border-radius:4px; flex-shrink:0; }
.meeting-slide-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meeting-counter { font-size:12px; color:#9CA3AF; flex-shrink:0; white-space:nowrap; }
.meeting-menu-btn, .meeting-close-btn { background:transparent; border:none; color:#fff; cursor:pointer; padding:6px; border-radius:5px; display:flex; align-items:center; flex-shrink:0; font-size:16px; }
.meeting-menu-btn:hover, .meeting-close-btn:hover { background:rgba(255,255,255,.1); }
.meeting-menu-dropdown { position:absolute; top:calc(100% + 4px); left:0; background:var(--surface,#fff); border:1px solid var(--line,#e5e7eb); border-radius:8px; min-width:280px; max-height:420px; overflow-y:auto; z-index:100; box-shadow:0 8px 28px rgba(0,0,0,.18); }
.meeting-menu-item { display:flex; align-items:flex-start; gap:8px; width:100%; padding:9px 14px; background:transparent; border:none; text-align:left; cursor:pointer; font-size:13px; color:var(--fg,#111); }
.meeting-menu-item:hover { background:var(--hover,#f3f4f6); }
.meeting-menu-item--active { background:#EFF6FF; color:#1D4ED8; font-weight:600; }
.meeting-menu-code { font-size:10px; color:var(--muted,#6b7280); font-family:monospace; flex-shrink:0; padding-top:2px; min-width:48px; }
.meeting-menu-divider { height:1px; background:var(--line,#e5e7eb); margin:4px 0; }
.meeting-content { flex:1; overflow-y:auto; padding:20px 28px; }
.meeting-bottomnav { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:var(--surface,#fff); border-top:1px solid var(--line,#e5e7eb); flex-shrink:0; gap:12px; }
.meeting-nav-btn { display:flex; align-items:center; gap:5px; padding:9px 20px; border-radius:8px; border:1px solid var(--line,#e5e7eb); background:var(--surface,#fff); cursor:pointer; font-size:14px; font-weight:500; color:var(--fg,#111); flex-shrink:0; }
.meeting-nav-btn:disabled { opacity:.35; cursor:default; }
.meeting-nav-btn--next { background:#1D4ED8; color:#fff; border-color:transparent; }
.meeting-nav-btn--next:not(:disabled):hover { background:#1e40af; }
.meeting-dots { display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:center; max-width:55%; }
.meeting-dot { width:8px; height:8px; border-radius:50%; background:var(--line,#d1d5db); border:none; cursor:pointer; padding:0; flex-shrink:0; transition:all .15s; }
.meeting-dot--active { background:#1D4ED8; width:20px; border-radius:4px; }
.meeting-dot:hover:not(.meeting-dot--active) { background:#9CA3AF; }
.meeting-cierre { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:340px; gap:12px; text-align:center; }
.meeting-cierre-check { width:80px; height:80px; border-radius:50%; background:#D1FAE5; color:#059669; display:flex; align-items:center; justify-content:center; font-size:38px; flex-shrink:0; }
.meeting-cierre-btn { padding:14px 36px; background:#1D4ED8; color:#fff; border:none; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; margin-top:8px; }
.meeting-cierre-btn:hover { background:#1e40af; }

.minuta-field-label {
  display: inline-block; background: #111111; color: #fff; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; padding: 3px 7px; border-radius: 4px; margin-right: 8px;
}

.btn {
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-danger { background: #fff; border-color: var(--red); color: var(--red); }
.btn-ghost { background: #f0f0f0; border-color: #dddddd; color: #111111; }
.btn-ghost:hover { background: #e5e5e5; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th, .tabla td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.tabla th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.tabla tr.detail-row td { background: #f9fafb; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.tab-strip { display: flex; gap: 8px; border-bottom: 2px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn {
  padding: 8px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab-btn.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
.tab-btn .count { color: var(--muted); font-weight: 400; }

.select-sm { padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: #fff; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.tabla-pivote { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.tabla-pivote th, .tabla-pivote td { padding: 12px 14px; text-align: right; white-space: nowrap; }
.tabla-pivote th:first-child, .tabla-pivote td:first-child { text-align: left; white-space: normal; }
.tabla-pivote thead th { background: #f3f4f6; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); }
.tabla-pivote tbody tr.fila-categoria { background: #fafafa; cursor: pointer; }
.tabla-pivote tbody tr.fila-categoria:hover { background: #f2f2f2; }
.tabla-pivote tbody tr.fila-categoria td:first-child { font-weight: 700; text-transform: uppercase; font-size: 12.5px; }
.tabla-pivote tbody tr.fila-categoria td { border-bottom: 1px solid var(--border); color: #374151; }
.tabla-pivote tbody tr.fila-rubro td { color: var(--muted); border-bottom: 1px solid #f1f1f1; }
.tabla-pivote tbody tr.fila-rubro td.celda-detalle, .tabla-pivote tbody tr.fila-rubro td.celda-detalle-ingreso { cursor: pointer; }
.tabla-pivote tbody tr.fila-rubro td.celda-detalle:hover, .tabla-pivote tbody tr.fila-rubro td.celda-detalle-ingreso:hover { background: #eef2ff; color: var(--primary-dark); text-decoration: underline; }
.detalle-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.detalle-tabla th, .detalle-tabla td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.detalle-tabla th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.detalle-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.evidencia-link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.evidencia-link:hover { text-decoration: underline; }
.tabla-pivote tbody tr.fila-rubro td:first-child { padding-left: 40px; }
.tabla-pivote tbody tr.fila-rubro.hidden { display: none; }
.tabla-pivote tbody tr.fila-total td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: none; background: #fafafa; }
.tabla-pivote .cat-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: #fff; margin-right: 10px; font-size: 13px; line-height: 1; color: var(--muted); }
.tabla-pivote .vacio { color: var(--muted); }

.consolidado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.consolidado .stat { font-size: 12px; color: var(--muted); }
.consolidado .stat strong { display: block; font-size: 15px; color: var(--text); margin-top: 2px; }

.estado-pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.estado-pendiente { background: #fef3c7; color: #92400e; }
.estado-procesada { background: #d1fae5; color: #065f46; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: #fff; border-radius: 10px; padding: 20px;
  width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
}
.modal.modal-wide { max-width: 700px; }
.modal h3 { margin: 0 0 4px; font-size: 17px; }
.modal .modal-subtitle { margin: 0 0 16px; font-size: 12px; color: var(--muted); }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #374151; margin-bottom: 10px; }
.modal input, .modal select, .modal textarea { padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; color: #111827; font-family: inherit; }
.modal input[type="checkbox"] { padding: 0; width: 16px; height: 16px; flex: none; }
.modal textarea { resize: vertical; min-height: 70px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.modal-grid label.span-2 { grid-column: 1 / -1; }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; }

.empty-state { color: var(--muted); font-size: 13px; padding: 20px 0; text-align: center; }