/* ============================================================
   SAPIENS PLANNING · users.css
   Pantalla de administración de usuarios (Equipo).
   Construida sobre los tokens de styles.css / app.css.
   ============================================================ */

/* —— layout: rail de filtros + tabla —— */
.users-layout { display: grid; grid-template-columns: 232px 1fr; gap: 30px; align-items: start; }
.users-main { min-width: 0; }

/* —— seat meter —— */
.seat-meter { background: var(--sap-cream); border-radius: var(--radius-md); padding: 16px 16px 18px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); margin-bottom: 18px; }
.seat-meter__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.seat-meter__n { font-family: var(--font-display); text-transform: uppercase; font-size: 34px; line-height: .9; white-space: nowrap; }
.seat-meter__n span { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--text-muted-on-light);
  margin-left: 3px; }
.seat-meter__lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted-on-light); text-align: right; line-height: 1.25; }
.seat-bar { height: 8px; border-radius: 999px; background: var(--sap-stone); overflow: hidden; display: flex; }
.seat-bar > i { height: 100%; display: block; }
.seat-bar .seg-use { background: var(--st-hecho); }
.seat-bar .seg-pend { background: var(--st-revision); }
.seat-legend { display: flex; gap: 14px; margin-top: 11px; flex-wrap: wrap; }
.seat-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-light); }
.seat-legend .d { width: 8px; height: 8px; border-radius: 50%; }
.seat-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 14px;
  border: 1px dashed var(--border-on-light); background: none; border-radius: var(--radius-pill); padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease; }
.seat-add .ic { width: 14px; height: 14px; }
.seat-add:hover { border-color: var(--sap-ink); color: var(--sap-ink); background: var(--sap-cream); }

/* —— modal: stepper de asientos —— */
.seat-stepper { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0 4px; }
.seat-step { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--sap-paper);
  box-shadow: inset 0 0 0 1px var(--border-on-light); font-size: 24px; font-weight: 500; color: var(--sap-ink);
  cursor: pointer; line-height: 1; display: grid; place-items: center; transition: background .14s ease, box-shadow .14s ease; }
.seat-step:hover { background: var(--sap-cream); box-shadow: inset 0 0 0 1px var(--sap-ink); }
.seat-step:disabled { opacity: .4; cursor: not-allowed; }
.seat-stepper__n { font-family: var(--font-display); text-transform: uppercase; font-size: 56px; line-height: .9;
  min-width: 110px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.seat-stepper__n span { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted-on-light); margin-top: 4px; }
.seat-quick { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.seat-quick-b { border: none; background: var(--sap-sand); border-radius: 999px; padding: 8px 16px; font-size: 13px;
  font-weight: 600; color: var(--text-muted-on-light); cursor: pointer; transition: background .14s ease, color .14s ease; }
.seat-quick-b:hover { background: var(--sap-stone); color: var(--sap-ink); }
.seat-quick-b.on { background: var(--sap-ink); color: var(--sap-cream); }
.seat-result { text-align: center; font-family: var(--font-serif); font-size: 15px; color: var(--text-muted-on-light); margin: 18px 0 2px; }
.seat-result b { color: var(--sap-ink); }

/* —— rail de filtros —— */
.users-rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 24px; }
.rail-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--text-muted-on-light); padding: 16px 10px 7px; }
.rail-item { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: none;
  padding: 9px 11px; border-radius: 11px; font-size: 14px; font-weight: 500; color: var(--sap-ink);
  cursor: pointer; text-align: left; position: relative; transition: background .14s ease, color .14s ease; }
.rail-item:hover { background: var(--sap-sand); }
.rail-item.on { background: var(--sap-cream); box-shadow: inset 0 0 0 1px var(--border-on-light); font-weight: 600; }
.rail-item.on::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent); }
.rail-item .rdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rail-item .ic { width: 17px; height: 17px; color: var(--text-muted-on-light); }
.rail-item .rname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-item .rcount { font-size: 12px; font-weight: 600; color: var(--text-muted-on-light);
  background: var(--sap-sand); border-radius: 999px; padding: 1px 9px; flex-shrink: 0; }
.rail-item.on .rcount { background: var(--sap-paper); }

/* —— toolbar —— */
.users-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.usearch { flex: 1; min-width: 220px; position: relative; display: inline-flex; align-items: center; }
.usearch .ic { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--text-muted-on-light); pointer-events: none; }
.usearch input { width: 100%; font-family: var(--font-ui); font-size: 14px; color: var(--sap-ink);
  background: var(--sap-cream); border: none; border-radius: var(--radius-pill); padding: 12px 16px 12px 40px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); outline: none; transition: box-shadow .14s ease; }
.usearch input:focus { box-shadow: inset 0 0 0 1.5px var(--sap-ink); }
.usearch input::placeholder { color: var(--text-muted-on-light); }

/* —— tabla de usuarios —— */
.utable .c-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.utable .c-user .umeta { min-width: 0; line-height: 1.3; }
.utable .c-user .uname { font-family: var(--font-serif); font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  color: var(--sap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utable .c-user .umail { font-size: 12.5px; color: var(--text-muted-on-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utable td.c-email { color: var(--text-muted-on-light); font-size: 13.5px; }
.utable .you-tag { display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-ink); background: rgba(225,6,0,.1); border-radius: 999px; padding: 2px 7px; vertical-align: middle; }

/* role pill */
.rpill { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-pill);
  padding: 5px 12px 5px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1; color: var(--rc);
  background: color-mix(in oklab, var(--rc) 14%, var(--sap-cream));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rc) 38%, transparent); }
.rpill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--rc); }

/* status pill (reuse schip pattern) */
.ustatus { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 11px 5px 9px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1; color: var(--sc);
  background: color-mix(in oklab, var(--sc) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 38%, transparent); }
.ustatus .d { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.ustatus.is-inactivo { box-shadow: inset 0 0 0 1px var(--border-on-light); background: var(--sap-sand); color: var(--text-muted-on-light); }
.ustatus.is-inactivo .d { background: var(--st-pendiente); }

/* space access chips */
.spx-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.spx { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px 4px 8px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-light);
  box-shadow: inset 0 0 0 1px var(--border-on-light); white-space: nowrap; }
.spx .sd { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.spx.is-edit { color: var(--st-progreso-ink); background: var(--st-progreso-soft); box-shadow: none; }
.spx.is-none { opacity: .6; font-style: italic; }

/* checkbox */
.ucheck { width: 19px; height: 19px; border-radius: 6px; border: none; background: var(--sap-cream);
  box-shadow: inset 0 0 0 1px var(--border-on-light); display: grid; place-items: center; cursor: pointer;
  color: #fff; flex-shrink: 0; padding: 0; }
.ucheck:hover { box-shadow: inset 0 0 0 1px var(--sap-ink); }
.ucheck.on { background: var(--sap-ink); box-shadow: inset 0 0 0 1px var(--sap-ink); }
.ucheck .ic { width: 13px; height: 13px; stroke-width: 2.6; opacity: 0; }
.ucheck.on .ic { opacity: 1; }
.utable th.c-check, .utable td.c-check { width: 1%; padding-right: 6px; }
.utable th.c-act, .utable td.c-act { width: 1%; text-align: right; white-space: nowrap; }

/* row actions */
.urow-act { width: 30px; height: 30px; border: none; background: none; border-radius: 9px; color: var(--text-muted-on-light);
  display: inline-grid; place-items: center; cursor: pointer; transition: background .14s ease, color .14s ease; }
.urow-act .ic { width: 18px; height: 18px; }
.urow-act:hover { background: var(--sap-sand); color: var(--sap-ink); }
.utable tbody tr:hover .urow-act { color: var(--sap-ink); }

/* —— vista única, densa, con scroll horizontal y primera columna fija —— */
.utable { overflow: visible; }
.utable-scroll { overflow-x: auto; overflow-y: visible; border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }
.utable table { min-width: 1040px; }
.utable thead th { position: sticky; top: 0; background: var(--sap-cream); z-index: 2; }
.utable .umail { display: none; }
.utable tbody td { padding: 10px 18px; }
.utable thead th { padding: 12px 18px; }
.utable .c-user .uname { font-size: 14.5px; }
.utable td.c-email { color: var(--text-muted-on-light); font-size: 13.5px; white-space: nowrap; }
.utable td.c-last { color: var(--text-muted-on-light); font-size: 13px; white-space: nowrap; }
.utable th.col-email { min-width: 220px; }
.utable th.col-spaces { min-width: 244px; }
.utable th.col-last { min-width: 132px; }

/* columnas congeladas: checkbox + Usuario */
.utable th.c-check, .utable td.c-check { width: 46px; min-width: 46px; padding-left: 14px; padding-right: 8px;
  position: sticky; left: 0; z-index: 3; background: var(--sap-cream); }
.utable th.col-name, .utable td.c-user-cell { position: sticky; left: 46px; z-index: 3; background: var(--sap-cream);
  min-width: 230px; box-shadow: 8px 0 10px -8px rgba(16,9,6,.16); }
.utable thead th.c-check { z-index: 4; }
.utable thead th.col-name { z-index: 4; }
.utable tbody tr:hover td.c-check, .utable tbody tr:hover td.c-user-cell { background: var(--sap-paper); }

/* selection bar */
.ubar { display: flex; align-items: center; gap: 14px; background: var(--sap-ink); color: var(--sap-cream);
  border-radius: var(--radius-pill); padding: 10px 12px 10px 20px; margin-bottom: 16px; box-shadow: var(--shadow-soft); }
.ubar__n { font-size: 13.5px; font-weight: 600; }
.ubar__sp { flex: 1; }
.ubar .btn-ghost { color: var(--text-muted-on-dark); }
.ubar .btn-ghost:hover { background: rgba(255,252,245,.1); color: var(--sap-cream); }
.ubar .btn-line { box-shadow: inset 0 0 0 1px var(--border-on-dark); color: var(--sap-cream); }
.ubar .btn-line:hover { box-shadow: inset 0 0 0 1px var(--sap-cream); }

/* empty state */
.uempty { padding: 60px 20px; text-align: center; }
.uempty .ic { width: 30px; height: 30px; color: var(--text-muted-on-light); margin-bottom: 8px; }
.uempty p { font-family: var(--font-serif); font-style: italic; color: var(--text-muted-on-light); font-size: 16px; margin: 0; }

/* ============================================================
   MODALES — invitar / detalle de usuario
   ============================================================ */
.modal.umodal { width: 560px; }
.modal.umodal .modal-body { max-height: min(70vh, 620px); overflow-y: auto; margin: 0 -4px; padding: 4px 4px 2px; }

/* detalle: cabecera */
.udetail-head { display: flex; align-items: center; gap: 16px; padding: 4px 0 18px; }
.udetail-head .uh-meta { min-width: 0; }
.udetail-head .uh-name { font-family: var(--font-serif); font-weight: 600; font-size: 22px; letter-spacing: -.015em; line-height: 1.15; }
.udetail-head .uh-mail { font-size: 13.5px; color: var(--text-muted-on-light); margin-top: 3px; }

.umodal .form-block { margin-top: 18px; }
.umodal .form-block > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light);
  letter-spacing: .01em; margin-bottom: 10px; }

/* role radio cards */
.role-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; border: none; cursor: pointer;
  background: var(--sap-cream); border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--border-on-light);
  transition: box-shadow .14s ease, background .14s ease; }
.role-opt:hover { box-shadow: inset 0 0 0 1px var(--sap-ink); }
.role-opt.on { box-shadow: inset 0 0 0 2px var(--rc); background: color-mix(in oklab, var(--rc) 8%, var(--sap-cream)); }
.role-opt .ro-top { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--sap-ink); }
.role-opt .ro-top .d { width: 9px; height: 9px; border-radius: 50%; background: var(--rc); }
.role-opt .ro-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-muted-on-light); }

/* status segmented */
.status-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.status-seg button { border: none; background: var(--sap-sand); padding: 8px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.status-seg button .d { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-seg button.on { color: var(--ssc); background: color-mix(in oklab, var(--ssc) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ssc) 42%, transparent); }

/* permisos por espacio */
.perm-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.perm-row + .perm-row { margin-top: 10px; }
.perm-row .pr-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.perm-row .pr-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.perm-row .pr-ic .ic { width: 17px; height: 17px; }
.perm-row .pr-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.permseg { display: inline-flex; background: var(--sap-cream); border-radius: 999px; padding: 3px; gap: 2px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); flex-shrink: 0; }
.permseg button { border: none; background: none; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--text-muted-on-light); cursor: pointer; transition: background .14s ease, color .14s ease; }
.permseg button.on { background: var(--sap-ink); color: var(--sap-cream); }
.permseg button.on.is-edit { background: var(--st-progreso); }
.permseg button.on.is-view { background: var(--sap-ink); }
/* modal "Asignar usuarios" (acceso por espacio) */
.sa-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 420px; overflow-y: auto; }
.sa-list .pr-name { display: flex; flex-direction: column; line-height: 1.25; }
.sa-role { font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); }
.sa-alltag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  color: #845408; background: color-mix(in oklab, var(--st-almuerzo) 16%, var(--sap-cream)); border-radius: 999px;
  padding: 6px 12px; flex-shrink: 0; }
.sa-alltag .ic { width: 13px; height: 13px; }

/* invite: chips de correos */
.inv-emails { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--sap-cream);
  border-radius: 12px; padding: 9px 10px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.inv-emails:focus-within { box-shadow: inset 0 0 0 1.5px var(--sap-ink); }
.inv-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--sap-paper); border-radius: 999px;
  padding: 5px 8px 5px 11px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.inv-chip.bad { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(225,6,0,.4); }
.inv-chip button { border: none; background: none; padding: 2px; border-radius: 50%; color: var(--text-muted-on-light);
  display: inline-flex; cursor: pointer; }
.inv-chip button .ic { width: 13px; height: 13px; }
.inv-chip button:hover { background: var(--accent); color: #fff; }
.inv-emails input { flex: 1; min-width: 160px; border: none; background: none; outline: none; font-family: var(--font-ui);
  font-size: 14px; color: var(--sap-ink); padding: 6px 4px; }
.inv-emails input::placeholder { color: var(--text-muted-on-light); }
.inv-hint { font-size: 12px; color: var(--text-muted-on-light); margin: 8px 2px 0; font-style: italic; font-family: var(--font-serif); }

/* danger zone in detail */
.udanger { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-on-light);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.udanger p { margin: 0; font-size: 12.5px; color: var(--text-muted-on-light); max-width: 30ch; }

/* —— menú de acciones de fila (override del menú verde de asignados) —— */
.menu.umenu { min-width: 232px; }
.menu.umenu button .ic { margin-left: 0; width: 17px; height: 17px; color: var(--text-muted-on-light); }
.menu.umenu button .mn { flex: 1; }
.menu.umenu button.danger { color: var(--accent); }
.menu.umenu button.danger .ic { color: var(--accent); }
.menu.umenu button.danger:hover { background: rgba(225,6,0,.08); }

/* responsive */
@media (max-width: 980px) {
  .users-layout { grid-template-columns: 1fr; gap: 18px; }
  .users-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .users-rail .rail-label { width: 100%; padding-top: 6px; }
  .rail-item { width: auto; }
  .rail-item.on::before { display: none; }
}
@media (max-width: 720px) {
  .modal.umodal { width: calc(100vw - 24px); }
  .role-opts { grid-template-columns: 1fr; }
}