/* ═══ Staff V3 — .st-* ═══════════════════════════════════════════════════════ */

.st-mod { display:flex; flex-direction:column; height:100%; overflow:hidden; position:relative; }

/* ── Topbar ──────────────────────────────────────────────────────────────────── */
.st-topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; border-bottom:1px solid var(--border); flex-shrink:0; gap:12px; background:var(--bg-body); }
.st-tb-left   { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.st-tb-center { display:flex; justify-content:center; flex:1; }
.st-tb-right  { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.st-mod-icon   { color:var(--c-brand); display:flex; align-items:center; }
.st-tb-title   { font-size:var(--font-lg); font-weight:700; color:var(--tx-base); white-space:nowrap; }
.st-period-badge { background:var(--bg-surface); color:var(--tx-muted); font-size:10px; font-weight:500; padding:3px 10px; border-radius:999px; border:1px solid var(--border); white-space:nowrap; }

/* Segmented control */
.st-seg        { display:flex; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:3px; gap:2px; }
.st-seg-btn    { display:flex; align-items:center; gap:6px; padding:6px 16px; border:none; background:transparent; color:var(--tx-muted); font-size:var(--font-sm); cursor:pointer; border-radius:6px; transition:all .15s; white-space:nowrap; }
.st-seg-btn svg { flex-shrink:0; }
.st-seg-btn--on { background:var(--c-brand); color:#fff; font-weight:600; }

.st-search  { background:var(--bg-surface); border:1px solid var(--border); color:var(--tx-base); padding:6px 12px; border-radius:var(--radius-md); font-size:var(--font-sm); width:180px; outline:none; transition:border-color .15s; }
.st-search:focus { border-color:var(--c-brand); }

/* View toggle */
.st-vbtns { display:flex; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.st-vb    { background:transparent; border:none; padding:7px 10px; color:var(--tx-muted); cursor:pointer; transition:all .15s; display:flex; align-items:center; }
.st-vb--on { background:var(--c-brand); color:#fff; }
.st-vb:hover:not(.st-vb--on) { background:var(--bg-hover); }

/* Buttons */
.st-btn-primary { background:var(--c-brand); color:#fff; border:none; padding:7px 14px; border-radius:var(--radius-md); font-size:var(--font-sm); cursor:pointer; white-space:nowrap; transition:opacity .15s; }
.st-btn-primary:hover { opacity:.85; }
.st-btn-save    { background:var(--c-brand); color:#fff; border:none; padding:8px 20px; border-radius:var(--radius-md); font-size:var(--font-sm); cursor:pointer; transition:opacity .15s; }
.st-btn-save:hover { opacity:.85; }
.st-btn-save:disabled { opacity:.45; cursor:not-allowed; }
.st-btn-sm      { background:var(--bg-hover); color:var(--tx-base); border:1px solid var(--border); padding:5px 12px; border-radius:var(--radius-sm); font-size:var(--font-xs); cursor:pointer; white-space:nowrap; }
.st-btn-sm:hover { background:var(--bg-active); }
.st-btn-toggle  { border:1px solid; padding:5px 12px; border-radius:var(--radius-md); font-size:var(--font-xs); cursor:pointer; background:transparent; white-space:nowrap; }
.st-btn-danger  { color:var(--tx-red); border-color:var(--tx-red); }
.st-btn-ok      { color:var(--tx-green); border-color:var(--tx-green); }

/* ── Area ────────────────────────────────────────────────────────────────────── */
.st-area { flex:1; position:relative; overflow:hidden; display:flex; }
.st-main { flex:1; overflow-y:auto; padding:20px; }

/* ── Grid ────────────────────────────────────────────────────────────────────── */
.st-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }

.st-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; cursor:pointer; position:relative;
  display:flex; flex-direction:row; align-items:center;
  padding:18px 18px; gap:14px;
  transition:border-color .2s, background .2s;
}
.st-card:hover { border-color:var(--c-brand-soft,#a78bfa); background:var(--bg-hover); }
.st-card--off        { opacity:.55; }
.st-card--dragging   { opacity:.35; transform:scale(.96); }
.st-card--dragover   { border-color:var(--c-brand); box-shadow:0 0 0 2px var(--c-brand); }

/* Avatar en card rectangular */
.st-card-av-wrap  { border-radius:50%; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.2); flex-shrink:0; }
.st-av-img        { display:block; object-fit:cover; border-radius:50%; }
.st-av-txt        { display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; border-radius:50%; user-select:none; }
.st-card-body     { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.st-card-name     { font-weight:700; font-size:var(--font-sm); color:var(--tx-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-card-spec     { font-size:var(--font-xs); color:var(--tx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-card-rnpi     { font-size:10px; color:var(--tx-dim,var(--tx-muted)); font-family:var(--font-mono); }
.st-card-mod      { display:flex; align-items:center; gap:4px; font-size:var(--font-xs); color:var(--tx-muted); }
.st-card-mod svg  { flex-shrink:0; }
.st-card-foot     { display:flex; gap:4px; flex-wrap:wrap; margin-top:2px; }

.st-tag        { font-size:10px; padding:2px 7px; border-radius:999px; font-weight:600; white-space:nowrap; }
.st-tag--ok    { background:rgba(5,150,105,.15); color:var(--tx-green); }
.st-tag--off   { background:var(--bg-hover); color:var(--tx-muted); }
.st-tag--muted { background:var(--bg-surface); color:var(--tx-muted); }
.st-tag--vis   { background:rgba(109,40,217,.15); color:var(--c-brand); }

/* Hover actions — iconos SVG */
.st-card-hover { display:none; gap:4px; flex-direction:column; flex-shrink:0; }
.st-card:hover .st-card-hover { display:flex; }
.st-ha { background:var(--bg-surface); border:1px solid var(--border); color:var(--tx-muted); padding:0; border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; width:30px; height:30px; }
.st-ha:hover { background:var(--c-brand); color:#fff; border-color:var(--c-brand); }

/* ── Lista ───────────────────────────────────────────────────────────────────── */
.st-table-wrap { overflow-x:auto; }
.st-table      { width:100%; border-collapse:collapse; }
.st-table thead th { padding:8px 12px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tx-muted); border-bottom:2px solid var(--border); white-space:nowrap; }
.st-row        { cursor:pointer; transition:background .1s; }
.st-row:hover  { background:var(--bg-hover); }
.st-row--off   { opacity:.6; }
.st-row td     { padding:10px 12px; border-bottom:1px solid var(--border-soft); font-size:var(--font-sm); color:var(--tx-base); vertical-align:middle; }
.st-td-av      { width:44px; }
.st-av         { border-radius:50%; overflow:hidden; flex-shrink:0; display:inline-block; }
.st-muted      { color:var(--tx-muted); font-size:var(--font-xs); }

/* ── Panel lateral (100% ancho) ─────────────────────────────────────────────── */
.st-back       { position:absolute; inset:0; background:rgba(0,0,0,.18); backdrop-filter:blur(1px) saturate(1.1); z-index:20; }
.st-panel      {
  position:absolute; top:0; right:0; bottom:0; width:50%; min-width:480px;
  background:var(--bg-card); border-left:1px solid var(--border);
  z-index:21; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);
}
.st-panel--open { transform:translateX(0); }
.st-panel-hdr   { flex-shrink:0; border-bottom:1px solid var(--border); }
.st-panel-top   { display:flex; align-items:center; gap:10px; padding:14px 20px; }
.st-panel-close { background:transparent; border:none; color:var(--tx-muted); cursor:pointer; padding:4px; border-radius:var(--radius-sm); display:flex; align-items:center; }
.st-panel-close:hover { background:var(--bg-hover); color:var(--tx-base); }
.st-panel-identity { display:flex; align-items:center; gap:10px; flex:1; }
.st-panel-name  { display:block; font-weight:700; font-size:var(--font-md); color:var(--tx-base); }
.st-panel-email { font-size:var(--font-xs); color:var(--tx-muted); }
.st-panel-pane  { flex:1; overflow-y:auto; padding:24px; }

/* Tabs */
.st-tabs    { display:flex; padding:0 20px; }
.st-tab     { background:transparent; border:none; border-bottom:2px solid transparent; padding:10px 14px; font-size:var(--font-sm); color:var(--tx-muted); cursor:pointer; transition:.15s; }
.st-tab--on { color:var(--c-brand); border-bottom-color:var(--c-brand); font-weight:600; }

/* ── Candidatos (promote) ────────────────────────────────────────────────────── */
.st-cand-list { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.st-cand      { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.st-cand-av   { border-radius:50%; overflow:hidden; flex-shrink:0; }
.st-cand-info { flex:1; }
.st-cand-info strong { display:block; font-size:var(--font-sm); color:var(--tx-base); }
.st-cand-info small  { color:var(--tx-muted); font-size:var(--font-xs); }

/* ── Formulario ─────────────────────────────────────────────────────────────── */
.st-form    { }
.st-fgrid   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.st-f       { display:flex; flex-direction:column; gap:5px; }
.st-f--full { grid-column:1/-1; }
.st-f--flags { grid-column:1/-1; flex-direction:row; gap:18px; flex-wrap:wrap; align-items:center; }
.st-f label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tx-muted); }
.st-f small { font-weight:400; text-transform:none; letter-spacing:0; opacity:.7; }
.st-f input, .st-f textarea {
  background:var(--bg-surface); border:1px solid var(--border); color:var(--tx-base);
  padding:7px 10px; border-radius:var(--radius-md); font-size:var(--font-sm);
  outline:none; font-family:inherit; resize:vertical; transition:border-color .15s;
}
.st-f input:focus, .st-f textarea:focus { border-color:var(--c-brand); }
.st-chk { display:flex; align-items:center; gap:7px; font-size:var(--font-sm); color:var(--tx-base); cursor:pointer; }

/* Form footer — CTA a la derecha */
.st-ffoot { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:24px; padding-top:16px; border-top:1px solid var(--border-soft); }
.st-st       { font-size:var(--font-xs); margin-right:auto; }
.st-st--ok   { color:var(--tx-green); }
.st-st--err  { color:var(--tx-red); }

/* ── Dropdown personalizado ─────────────────────────────────────────────────── */
.st-drop          { position:relative; }
.st-drop-trigger  { width:100%; display:flex; align-items:center; justify-content:space-between; background:var(--bg-surface); border:1px solid var(--border); color:var(--tx-base); padding:7px 10px; border-radius:var(--radius-md); font-size:var(--font-sm); cursor:pointer; transition:border-color .15s; gap:6px; }
.st-drop-trigger:hover { border-color:var(--c-brand); }
.st-drop-menu     { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); overflow:hidden; }
.st-drop-item     { padding:8px 12px; font-size:var(--font-sm); color:var(--tx-base); cursor:pointer; }
.st-drop-item:hover { background:var(--bg-hover); }
.st-drop-item--on { color:var(--c-brand); font-weight:600; background:rgba(109,40,217,.08); }

/* ── Dropdown buscable (universidades) ──────────────────────────────────────── */
.st-sdrop         { position:relative; }
.st-sdrop-input   { width:100%; background:var(--bg-surface); border:1px solid var(--border); color:var(--tx-base); padding:7px 10px; border-radius:var(--radius-md); font-size:var(--font-sm); outline:none; transition:border-color .15s; box-sizing:border-box; }
.st-sdrop-input:focus { border-color:var(--c-brand); }
.st-sdrop-menu    { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); max-height:220px; overflow-y:auto; }
.st-sdrop-item    { padding:8px 12px; font-size:var(--font-sm); color:var(--tx-base); cursor:pointer; }
.st-sdrop-item:hover { background:var(--bg-hover); }
.st-sdrop-item--on { color:var(--c-brand); font-weight:600; background:rgba(109,40,217,.08); }

/* Color picker */
.st-cpicker { display:flex; gap:8px; flex-wrap:wrap; }
.st-sw      { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.st-sw--on  { border-color:#fff; box-shadow:0 0 0 2px var(--c-brand); transform:scale(1.15); }

/* Tags */
.st-tags     { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); min-height:38px; }
.st-tag-item { display:flex; align-items:center; gap:4px; background:rgba(109,40,217,.15); color:var(--c-brand); padding:3px 8px; border-radius:999px; font-size:var(--font-xs); }
.st-tag-item button { background:none; border:none; cursor:pointer; color:inherit; padding:0; }
.st-tag-input { border:none; background:transparent; color:var(--tx-base); outline:none; font-size:var(--font-sm); min-width:140px; }

/* ── Schedule ────────────────────────────────────────────────────────────────── */
.st-schedule   { position:relative; }
.st-cal-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.st-cal-mode-btns { display:flex; gap:6px; }
.st-cal-mbtn   { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 12px; min-width:110px; border:1px solid var(--border); border-radius:var(--radius-md); background:transparent; color:var(--tx-muted); font-size:var(--font-xs); cursor:pointer; transition:.15s; }
.st-cal-mbtn--p.st-cal-mbtn--on { border-color:#059669; color:#059669; background:rgba(5,150,105,.1); }
.st-cal-mbtn--t.st-cal-mbtn--on { border-color:#2563eb; color:#2563eb; background:rgba(37,99,235,.1); }
.st-cal-mbtn.st-cal-mbtn--on    { border-color:var(--c-brand); color:var(--c-brand); background:rgba(109,40,217,.1); }
.st-cal-presets { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.st-cal-preset-label { font-size:var(--font-xs); color:var(--tx-muted); }
.st-cal-pbtn   { padding:4px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-surface); color:var(--tx-base); font-size:var(--font-xs); cursor:pointer; }
.st-cal-pbtn:hover { border-color:var(--c-brand); color:var(--c-brand); }
.st-cal-pbtn--clear:hover { border-color:var(--tx-red); color:var(--tx-red); }
.st-cal-stats  { display:flex; gap:16px; padding:5px 10px; background:var(--bg-surface); border-radius:var(--radius-md); font-size:var(--font-xs); color:var(--tx-muted); margin-bottom:8px; flex-wrap:wrap; }
.st-cal-stats strong { color:var(--tx-base); }
.st-cal-grid   { display:grid; grid-template-columns:44px repeat(6,1fr); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; user-select:none; }
.st-cal-corner { background:var(--bg-surface); border-bottom:1px solid var(--border); border-right:1px solid var(--border); height:28px; }
.st-cal-dayhdr { background:var(--bg-surface); border-bottom:1px solid var(--border); border-right:1px solid var(--border-soft); padding:0; text-align:center; font-size:10px; font-weight:700; color:var(--tx-muted); cursor:context-menu; height:28px; display:flex; align-items:center; justify-content:center; }
.st-cal-dayhdr:hover { background:var(--bg-hover); color:var(--tx-base); }
.st-cal-timelabel { background:var(--bg-surface); border-right:1px solid var(--border); border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--tx-muted); font-family:var(--font-mono); padding:0 2px; height:26px; }
.st-cal-cell   { height:26px; border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); cursor:crosshair; transition:background .05s; }
.st-cal-cell:hover:not(.st-cal-cell--presencial):not(.st-cal-cell--teleconsulta) { background:var(--bg-hover); }
.st-cal-cell--presencial   { background:rgba(5,150,105,.25); }
.st-cal-cell--presencial:hover { background:rgba(5,150,105,.45); }
.st-cal-cell--teleconsulta { background:rgba(37,99,235,.25); }
.st-cal-cell--teleconsulta:hover { background:rgba(37,99,235,.45); }
.st-cal-cell-end { border-right:1px solid var(--border-soft); height:3px; background:var(--bg-surface); }
.st-sched-dot  { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.st-sched-dot--presencial   { background:#059669; }
.st-sched-dot--teleconsulta { background:#2563eb; }

/* ── Context menu ────────────────────────────────────────────────────────────── */
.st-ctx        { position:absolute; z-index:100; min-width:190px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:4px; }
.st-ctx-item   { padding:7px 12px; font-size:var(--font-sm); color:var(--tx-base); cursor:pointer; border-radius:var(--radius-sm); }
.st-ctx-item:hover { background:var(--bg-hover); }
.st-ctx-sep    { height:1px; background:var(--border-soft); margin:4px 0; }

/* ── Misc ────────────────────────────────────────────────────────────────────── */
.st-empty-msg  { text-align:center; color:var(--tx-muted); padding:60px 20px; font-size:var(--font-sm); }
.st-error      { color:var(--tx-red); padding:24px; font-size:var(--font-sm); }
.st-loading    { color:var(--tx-muted); padding:20px; font-size:var(--font-sm); }
.st-coming     { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:280px; text-align:center; color:var(--tx-muted); gap:10px; padding:40px; }
.st-coming h4  { color:var(--tx-base); font-size:var(--font-lg); }
.st-coming p   { max-width:320px; line-height:1.5; font-size:var(--font-sm); }

/* ── Viewer (modo lectura) ───────────────────────────────────────────────────── */
.st-viewer         { display:flex; flex-direction:column; height:100%; }
.st-viewer-grid    { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.st-viewer-field   { display:flex; flex-direction:column; gap:3px; }
.st-viewer-field--full { grid-column:1/-1; }
.st-viewer-label   { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tx-muted); }
.st-viewer-val     { font-size:var(--font-sm); color:var(--tx-base); }
.st-viewer-foot    { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; padding-top:16px; border-top:1px solid var(--border-soft); }

@media (max-width:900px) {
  .st-topbar    { flex-wrap:wrap; }
  .st-tb-center { order:-1; width:100%; }
  .st-panel     { width:100%; min-width:unset; }
  .st-grid      { grid-template-columns:repeat(2,1fr); }
  .st-fgrid     { grid-template-columns:1fr; }
  .st-f--full   { grid-column:1; }
  .st-cal-grid  { grid-template-columns:36px repeat(6,1fr); }
  .st-viewer-grid { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════
   PROFILE BLADE — layout + sidebar + campos
════════════════════════════════════════════════════════════ */
.st-profile-layout {
  display: flex; height: 100%; overflow: hidden;
}
.st-prof-sidebar {
  width: 260px; min-width: 260px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 0 0 16px; overflow-y: auto;
  background: var(--bg-card);
}
.st-prof-av-wrap { display:flex; justify-content:center; padding: 24px 0 12px; }
.st-prof-av {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; overflow: hidden;
}
.st-prof-name  { text-align:center; font-size:14px; font-weight:600; color:var(--tx-base); padding:0 16px; margin-bottom:3px; }
.st-prof-role  { text-align:center; font-size:12px; color:var(--tx-muted); padding:0 16px; margin-bottom:10px; }
.st-prof-badges { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin-bottom:14px; padding:0 12px; }
.st-badge      { font-size:10.5px; font-weight:500; padding:2px 9px; border-radius:20px; }
.st-badge--ok  { background:rgba(5,150,105,.12); color:#0F6E56; }
.st-badge--off { background:var(--bg-hover); color:var(--tx-muted); }
.st-badge--vis { background:rgba(109,40,217,.12); color:var(--c-brand); }
.st-badge--ext { background:rgba(37,99,235,.12); color:#185FA5; }
.st-prof-nav   { padding: 0 12px; }
.st-nav-item {
  display:block; width:100%; text-align:left;
  padding: 8px 10px; border-radius: 7px;
  border: none; background: none;
  font-size: 12.5px; color: var(--tx-muted);
  cursor: pointer; margin-bottom: 2px;
  transition: background .12s;
}
.st-nav-item:hover  { background: var(--bg-hover); }
.st-nav-item.active { background: var(--bg-hover); color: var(--tx-base); font-weight: 600; }

/* Main content */
.st-prof-main {
  flex: 1; overflow-y: auto;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg-body);
}
.st-prof-content { display:flex; flex-direction:column; gap:0; }

/* Section headers */
.st-section-hdr {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
  font-size: 12px; font-weight: 500; color: var(--tx-muted);
}
.st-section-hdr svg { flex-shrink: 0; }

/* Field card */
.st-field-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.st-field-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-field       { display: flex; flex-direction: column; }
.st-field label {
  font-size: 10.5px; color: var(--tx-muted);
  margin-bottom: 3px;
  display: flex; align-items: center; gap: 4px;
}
.st-lock-ico    { flex-shrink: 0; opacity: .6; }
.st-field-val {
  font-size: 12.5px; color: var(--tx-base);
  padding: 5px 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.st-field-editable { cursor: pointer; }
.st-field-editable:hover { border-color: var(--c-brand); }
.st-input, .st-select {
  font-size: 12.5px; color: var(--tx-base);
  padding: 5px 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none; font-family: inherit;
  transition: border-color .15s;
  width: 100%; box-sizing: border-box;
}
.st-input:focus, .st-select:focus { border-color: var(--c-brand); }

/* Info badges */
.st-info-badge {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  margin-bottom: 7px;
  font-size: 11.5px; color: var(--tx-muted); line-height: 1.5;
}

/* Actions row */
.st-prof-actions { display:flex; gap:8px; margin-bottom: 14px; }
.st-btn-edit {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-surface); color: var(--tx-base);
  border: 1px solid var(--border);
  padding: 7px 14px; border-radius: var(--radius-md);
  font-size: var(--font-sm); cursor: pointer;
  transition: border-color .15s;
}
.st-btn-edit:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* ═══ Staff Profile Blade — Propuesta A (sp-*) ═══════════════════════════════ */

/* ── Disponibilidad layout ───────────────────────────────────────────────────── */
.sp-disp-layout { display:flex; gap:16px; height:100%; padding:18px 22px; }
.sp-disp-main   { flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.sp-disp-side   { width:180px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }

.sp-d-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sp-d-modes   { display:flex; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.sp-d-mode    { padding:6px 12px; font-size:var(--font-xs); border:none; background:transparent; color:var(--tx-muted); cursor:pointer; display:flex; align-items:center; gap:4px; font-family:inherit; transition:all .12s; }
.sp-d-mode-p.act { background:rgba(5,150,105,.12); color:#059669; font-weight:600; }
.sp-d-mode-t.act { background:rgba(37,99,235,.12); color:#2563eb; font-weight:600; }
.sp-d-sep     { width:1px; height:20px; background:var(--border-soft); }
.sp-d-preset  { padding:5px 10px; font-size:var(--font-xs); border:1px solid var(--border-soft); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--tx-muted); cursor:pointer; font-family:inherit; }
.sp-d-preset:hover { border-color:var(--c-brand); color:var(--c-brand); }
.sp-d-preset-danger:hover { border-color:var(--tx-red); color:var(--tx-red); }
.sp-d-weeks   { display:flex; align-items:center; gap:0; margin-left:auto; }
.sp-d-month   { font-size:var(--font-xs); color:var(--tx-dim); margin-right:6px; text-transform:capitalize; }
.sp-d-week    { padding:5px 10px; font-size:var(--font-xs); border:1px solid var(--border-soft); background:var(--bg-card); color:var(--tx-muted); cursor:pointer; font-family:inherit; }
.sp-d-week:first-of-type { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.sp-d-week:last-child    { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.sp-d-week:not(:first-of-type) { border-left:none; }
.sp-d-week.act { background:var(--c-brand); color:#fff; border-color:var(--c-brand); font-weight:600; }
.sp-d-status  { padding:4px 0; }

/* Calendar grid */
.sp-cal-wrap { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md); overflow:hidden; flex:1; }
.sp-cal-grid { display:grid; grid-template-columns:48px repeat(7,1fr); user-select:none; }
.sp-cal-corner { background:var(--bg-surface); border-bottom:1px solid var(--border-soft); border-right:1px solid var(--border-soft); height:32px; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--tx-dim); }
.sp-cal-dh { background:var(--bg-surface); border-bottom:1px solid var(--border-soft); border-right:1px solid var(--border-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:var(--tx-muted); height:32px; gap:1px; }
.sp-cal-dh small { font-size:8px; font-weight:400; color:var(--tx-dim); }
.sp-cal-dh.sp-cal-dom { background:repeating-linear-gradient(45deg,var(--bg-surface),var(--bg-surface) 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 6px); color:var(--tx-dim); }
.sp-cal-dh.sp-cal-fer { color:var(--tx-red); }
.sp-cal-th { background:var(--bg-surface); border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--tx-dim); font-family:monospace; height:26px; }
.sp-cal-cell { border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); height:26px; cursor:crosshair; transition:background .06s; }
.sp-cal-cell:hover:not(.sp-cal-p):not(.sp-cal-t):not(.sp-cal-dom):not(.sp-cal-fer) { background:var(--bg-hover); }
.sp-cal-p   { background:rgba(5,150,105,.22); }
.sp-cal-p:hover { background:rgba(5,150,105,.38); }
.sp-cal-t   { background:rgba(37,99,235,.22); }
.sp-cal-t:hover { background:rgba(37,99,235,.38); }
.sp-cal-dom { background:repeating-linear-gradient(45deg,var(--bg-card),var(--bg-card) 3px,rgba(0,0,0,.02) 3px,rgba(0,0,0,.02) 6px); cursor:not-allowed; }
.sp-cal-fer { background:repeating-linear-gradient(-45deg,var(--bg-card),var(--bg-card) 3px,rgba(220,38,38,.04) 3px,rgba(220,38,38,.04) 6px); cursor:not-allowed; }

/* KPI cards */
.sp-kpi       { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:10px 12px; }
.sp-kpi-label { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--tx-dim); margin-bottom:3px; }
.sp-kpi-val   { font-size:16px; font-weight:700; color:var(--tx-base); }
.sp-kpi-val small { font-size:var(--font-xs); font-weight:400; color:var(--tx-muted); }
.sp-kpi-brand { color:var(--c-brand); }
.sp-kpi-bar   { height:3px; background:var(--bg-surface); border-radius:2px; margin-top:6px; overflow:hidden; }
.sp-kpi-fill  { height:100%; border-radius:2px; }

/* ── Prestaciones ────────────────────────────────────────────────────────────── */
.sp-prest          { padding:18px 22px; }
.sp-prest-toolbar  { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.sp-prest-search   { background:var(--bg-surface); border:1px solid var(--border); color:var(--tx-base); padding:7px 12px; border-radius:var(--radius-md); font-size:var(--font-sm); width:220px; outline:none; font-family:inherit; }
.sp-prest-search:focus { border-color:var(--c-brand); }
.sp-prest-search::placeholder { color:var(--tx-dim); }
.sp-prest-add      { background:var(--c-brand); color:#fff; border:none; padding:7px 14px; border-radius:var(--radius-md); font-size:var(--font-sm); cursor:pointer; font-family:inherit; }
.sp-prest-add:hover { opacity:.85; }
.sp-prest-count    { font-size:var(--font-xs); color:var(--tx-muted); margin-left:auto; }
.sp-prest-list     { display:flex; flex-direction:column; gap:8px; }
.sp-prest-card     { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:12px 16px; display:flex; align-items:center; gap:14px; transition:border-color .15s; }
.sp-prest-card:hover { border-color:var(--border); }
.sp-prest-off      { opacity:.5; }
.sp-prest-info     { flex:1; min-width:0; }
.sp-prest-name     { font-size:var(--font-md); font-weight:600; color:var(--tx-base); }
.sp-prest-desc     { font-size:var(--font-xs); color:var(--tx-muted); margin-top:2px; }
.sp-prest-price    { display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex-shrink:0; }
.sp-prest-amount   { font-size:var(--font-lg); font-weight:700; color:var(--tx-base); font-family:monospace; }
.sp-prest-label    { font-size:9px; color:var(--tx-dim); text-transform:uppercase; letter-spacing:.03em; }
.sp-prest-actions  { display:flex; gap:6px; flex-shrink:0; }
.sp-prest-toggle   { width:36px; height:20px; border-radius:10px; border:none; cursor:pointer; position:relative; transition:background .2s; background:var(--tx-dim); }
.sp-prest-toggle-on { background:#059669; }
.sp-prest-toggle::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
.sp-prest-toggle-on::after { transform:translateX(16px); }
.sp-prest-btn      { width:28px; height:28px; border-radius:var(--radius-sm); border:1px solid var(--border-soft); background:var(--bg-surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--tx-muted); }
.sp-prest-btn:hover { border-color:var(--c-brand); color:var(--c-brand); }
.sp-prest-btn-danger:hover { border-color:var(--tx-red); color:var(--tx-red); }


/* ── Capacidad (spc-*) ──────────────────────────────────────── */
.spc-wrap { padding:20px 22px; }
.spc-kpis { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.spc-kpi { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:10px 14px; min-width:100px; }
.spc-kpi-val { font-size:18px; font-weight:700; color:var(--tx-base); }
.spc-kpi-brand { color:var(--c-brand); }
.spc-kpi-red { color:var(--tx-red); }
.spc-kpi-label { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--tx-dim); margin-top:2px; }
.spc-kpi-gap { border-color:rgba(220,38,38,.2); background:rgba(220,38,38,.03); }
.spc-matrix { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md); overflow:hidden; }
.spc-hdr { display:grid; grid-template-columns:220px repeat(6,1fr) 60px; border-bottom:1px solid var(--border); background:var(--bg-surface); }
.spc-hdr-prof { padding:8px 12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--tx-muted); display:flex; align-items:center; }
.spc-hdr-day { padding:8px 6px; font-size:10px; font-weight:600; color:var(--tx-muted); text-align:center; display:flex; align-items:center; justify-content:center; }
.spc-hdr-total { font-weight:700; }
.spc-row { display:grid; grid-template-columns:220px repeat(6,1fr) 60px; border-bottom:1px solid var(--border-soft); transition:background .12s; cursor:pointer; }
.spc-row:hover { background:var(--bg-hover); }
.spc-row:last-child { border-bottom:none; }
.spc-row-totals { cursor:default; background:var(--bg-surface); }
.spc-row-totals:hover { background:var(--bg-surface); }
.spc-prof { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.spc-av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; flex-shrink:0; overflow:hidden; }
.spc-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.spc-prof-info { display:flex; flex-direction:column; min-width:0; }
.spc-prof-name { font-size:var(--font-sm); font-weight:500; color:var(--tx-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spc-prof-spec { font-size:10px; color:var(--tx-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spc-cell { padding:10px 6px; text-align:center; font-size:var(--font-sm); color:var(--tx-base); font-variant-numeric:tabular-nums; display:flex; align-items:center; justify-content:center; }
.spc-cell-empty { color:var(--tx-dim); }
.spc-cell-pres { background:rgba(5,150,105,.08); }
.spc-cell-tele { background:rgba(37,99,235,.08); }
.spc-cell-both { background:rgba(109,40,217,.06); }
.spc-cell-total { font-weight:600; background:var(--bg-surface); }
.spc-cell-gap { background:rgba(220,38,38,.06); color:var(--tx-red); font-weight:600; }
.spc-legend { display:flex; gap:14px; margin-top:10px; padding:8px 0; }
.spc-leg-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--tx-muted); }
.spc-leg-dot { width:10px; height:10px; border-radius:3px; }
@media (max-width:900px) {
  .spc-hdr, .spc-row { grid-template-columns:160px repeat(6,1fr) 50px; }
}