/* ==========================================================================
   GestIA · Colaboradores: lista con ficha lateral no modal y alta por pasos
   ========================================================================== */

/* Lista y ficha conviven: la ficha no oscurece ni bloquea la lista */
.people-admin { display: grid; }
.people-main { display: grid; gap: 12px; min-width: 0; container-type: inline-size; }
.people-table tbody tr.is-active { background: var(--blue-50); box-shadow: inset 3px 0 0 var(--blue-600); }
.people-table tbody tr.is-active strong { color: var(--blue-700); }
.people-table tbody tr:focus-visible { outline: 3px solid var(--blue-200); outline-offset: -3px; }
.people-table .col-start small { display: block; color: var(--ink-3); }

/* Ficha: barra lateral fija al borde derecho, de alto completo. En escritorio empuja el contenido. */
:root { --person-panel: 400px; }
@media (max-width: 1500px) { :root { --person-panel: 376px; } }
.person-panel {
  position: fixed;
  z-index: 55;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: var(--person-panel);
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.person-panel[hidden] { display: none; }
.person-panel.is-open { transform: none; }
@media (min-width: 1200px) {
  .main { transition: margin-right .35s var(--ease); }
  .has-person-panel .main { margin-right: var(--person-panel); }
}
@media (max-width: 767px) {
  .person-panel { width: 100vw; border-left: 0; }
}

.pp-hero { position: relative; isolation: isolate; flex: none; overflow: hidden; padding: 20px 22px; color: var(--on-color); background: var(--grad-deep); }
.pp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--brand-pattern); background-size: 56px 56px; opacity: .06; }
.pp-hero .eyebrow { color: var(--on-color-2); }
.pp-hero .drawer-person h2 { outline: none; overflow-wrap: anywhere; }
.pp-hero .drawer-person p { color: var(--on-color-2); }
.pp-close { position: absolute; top: 12px; right: 12px; color: var(--on-color); }
.pp-close:hover { background: var(--glass-soft); }
.pp-close:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; }

.pp-tabs { flex: none; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 14px 16px 0; }
.pp-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; line-height: 1.2; text-align: center; white-space: normal; }
.pp-tabs button .i { flex: none; width: 14px; height: 14px; }
.pp-tabs button:focus-visible { outline: 3px solid var(--blue-200); outline-offset: -3px; }

.pp-body { display: grid; align-content: start; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 24px; }
.pp-panel { display: grid; gap: 18px; animation: rise .3s var(--ease); }
.pp-panel[hidden] { display: none; }
.pp-error { display: grid; justify-items: start; gap: 10px; }

.pp-complete { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--tone-soft); background: linear-gradient(135deg, var(--tone-soft), var(--surface) 70%); }
.pp-complete-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-complete-top strong { display: block; font-size: 17px; font-weight: 800; color: var(--tone-ink); }
.pp-complete-top .icon-tile { color: var(--tone-ink); background: var(--surface); }
.pp-missing { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-missing .gap-chip { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; transition: transform .15s var(--ease); }
.pp-missing .gap-chip:hover { transform: translateY(-1px); }
.pp-missing .gap-chip:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; }
.pp-complete-ok { font-size: 12.5px; font-weight: 650; color: var(--green-700); }
.pp-group .facts { padding: 0; }
.pp-group .fact-text small { color: var(--ink-3); font-weight: 500; }

.pp-form { display: grid; gap: 14px; }
.pp-form .editor-grid { gap: 12px 14px; }
.field .field-error { color: var(--red-500); }
.pp-form [aria-invalid="true"] { border-color: var(--red-500); box-shadow: 0 0 0 3px var(--ring-danger); }
.pp-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); font-size: 12px; color: var(--ink-2); background: var(--surface-2); }
.pp-note .i { flex: none; width: 15px; height: 15px; color: var(--blue-600); }
.pp-foot { position: sticky; bottom: -24px; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 -18px -24px; padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.pp-foot .editor-status { color: var(--ink-3); }
.pp-form.is-dirty .editor-status { color: var(--amber-500); font-weight: 700; }
@media (max-width: 420px) {
  .pp-form .editor-grid { grid-template-columns: 1fr; }
  .pp-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Alta por pasos */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 22px 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); font-size: 12.5px; font-weight: 700; color: var(--ink-3); transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
.step-dot { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-3); background: var(--surface-2); transition: transform .3s var(--spring); }
.step-dot .i { width: 15px; height: 15px; }
.steps li.is-current { border-color: var(--blue-200); color: var(--blue-700); background: var(--blue-50); }
.steps li.is-current .step-dot { color: var(--on-color); background: var(--grad-brand); transform: scale(1.06); }
.steps li.is-done { color: var(--green-700); }
.steps li.is-done .step-dot { color: var(--on-color); background: var(--green-500); }
.new-employee [aria-invalid="true"] { border-color: var(--red-500); box-shadow: 0 0 0 3px var(--ring-danger); }
.new-employee .field span em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.new-employee [data-code-preview] { font-weight: 700; color: var(--blue-700); }
@media (max-width: 640px) { .steps { margin: 10px 16px 0; } }

dialog.modal-confirm { width: min(440px, calc(100vw - 24px)); }
.confirm-card .modal-body p { color: var(--ink-2); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .person-panel, .pp-panel, .step-dot { transition: none; animation: none; }
  .person-panel { transform: none; }
}

/* ---------- Densidad: Colaboradores aprovecha todo el ancho y muestra más filas ---------- */
.shell[data-view="admin"] .content { max-width: none; padding-top: 16px; }
.shell[data-view="admin"] .view { gap: 12px; }
.people-bar { display: flex; align-items: center; gap: 10px; }
.people-bar .gap-stats { flex: 1; min-width: 0; }
.people-bar .page-actions { flex: none; gap: 8px; }

.gap-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gap-stat { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px 5px 6px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-xs); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); }
.gap-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.gap-stat:active { transform: scale(.98); }
.gap-stat:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; }
.gap-stat.is-active { border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft); }
.gap-stat .icon-tile { flex: none; width: 26px; height: 26px; border-radius: 8px; }
.gap-stat .icon-tile .i { width: 16px; height: 16px; }
.gap-stat-text { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.gap-stat-text b { font-size: 16px; font-weight: 800; color: var(--tone-ink); }
.gap-stat-text small { overflow: hidden; font-size: 12px; font-weight: 650; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }

.people-list .toolbar { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
.people-list .toolbar .control { flex: 1 1 200px; min-width: 150px; }
.people-list .toolbar select.input { flex: 0 1 170px; min-width: 120px; }
.people-list .toolbar .input { height: 38px; }
.people-table th { padding-top: 9px; padding-bottom: 9px; }
.people-table td { padding: 8px 12px; }
.people-table .person { gap: 10px; min-width: 190px; }
.people-table .truncate { max-width: 280px; }
.people-table .role-select { height: 34px; }
.people-table .edit-btn { width: 32px; height: 32px; }
.people-list .pagination { padding: 9px 14px; }

/* Ficha lateral compacta */
.pp-hero { padding: 14px 18px; }
.pp-hero .drawer-person { gap: 12px; margin-top: 6px; }
.pp-hero .drawer-person h2 { font-size: 18px; }
.pp-hero .drawer-person p { font-size: 12.5px; }
.pp-hero .drawer-chips { gap: 6px; margin-top: 10px; }
.pp-hero .chip { height: 24px; padding: 0 9px; font-size: 11.5px; }
.pp-hero .chip-seniority { color: var(--violet-100); background: var(--glass-soft); }
.pp-tabs { margin: 10px 14px 0; }
.pp-tabs button { min-height: 34px; padding: 5px 6px; font-size: 11.5px; }
.pp-body { padding: 12px 14px 20px; }
.pp-panel { gap: 12px; }
.pp-complete { gap: 8px; padding: 12px 14px; }
.pp-complete-top strong { font-size: 15px; }
.pp-complete-top .icon-tile { width: 32px; height: 32px; }
.pp-group .section-head { margin-bottom: 4px; }
.pp-group .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.pp-group .fact { gap: 9px; padding: 6px; }
.pp-group .fact .icon-tile { width: 30px; height: 30px; border-radius: 9px; }
.pp-group .fact .icon-tile .i { width: 15px; height: 15px; }
.pp-group .fact-text span { font-size: 11px; }
.pp-group .fact-text strong { font-size: 13px; overflow-wrap: anywhere; }
.pp-foot { bottom: -20px; margin: 0 -14px -20px; padding: 10px 14px; }
@media (max-width: 420px) { .pp-group .facts { grid-template-columns: 1fr; } }
/* Con la lista angosta (ficha abierta en pantallas medianas) los filtros e indicadores se reacomodan */
/* Las columnas secundarias se ocultan según el ancho real de la lista, con o sin ficha abierta */
@container (max-width: 1150px) { .people-table .col-start, .people-table .col-manager { display: none; } }
@container (max-width: 900px) {
  .people-table .col-title { display: none; }
  .people-bar { flex-wrap: wrap; }
  .people-bar .gap-stats { flex-basis: 100%; }
}
@container (max-width: 760px) {
  .gap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-list .toolbar { flex-wrap: wrap; }
  .people-list .toolbar .control { flex-basis: 100%; }
  .people-list .toolbar select.input { flex: 1 1 0; }
  .people-table .col-area, .people-table .actions-cell, .people-table th:last-child { display: none; }
}