/* estilos del módulo ingreso (solo tokens de app.css). Vencido = tinte + borde completo + pill, nunca barras laterales. */
.in-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.in-seg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.in-seg .btn.on { background: var(--sel-soft); color: var(--sel-ink); border-color: var(--sel); }
.in-gap { margin-top: 10px; }

/* Barra de avance */
/* Barra: .bar (app.css); .in-progress solo aporta el ancho flexible */
.in-progress { flex: 1; min-width: 80px; }
.in-cell-progress { min-width: 160px; }
.in-table tr.in-row-late td { background: var(--bad-soft); }


/* Checklist */
.in-sub { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 16px 0 8px; display: flex; gap: 8px; align-items: center; }
.in-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.in-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.in-task.overdue { background: var(--bad-soft); border-color: var(--bad-line); }
.in-task.done { background: var(--surface); }
.in-task.done .in-task-title { color: var(--text-2); }
.in-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; margin-top: 1px; background: var(--bg); }
.done > .in-check, li.done .in-check { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.in-task-body { min-width: 0; display: grid; gap: 3px; }
.in-task-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; color: var(--text-2); }
.in-task-meta a { font-weight: 500; color: var(--text); }
.in-note { color: var(--text-2); font-style: italic; }
.in-task-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.in-task-act:empty { display: none; }

/* Plantillas */
.in-tpl-head { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.in-tpl-tasks { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.in-tpl-tasks li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.in-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.in-edit-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 2fr) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.in-row-act { padding-bottom: 4px; }

/* Mi bienvenida */
.in-hero { margin-bottom: 14px; display: grid; gap: 16px; background: var(--accent-soft); border-color: var(--border); }
.in-hero-row { align-items: center; }
.in-hero h1 { margin-bottom: 2px; }
.in-hero-progress { display: grid; gap: 6px; }
.in-hero .in-progress { background: var(--bg); }
.in-welcome .in-span { grid-column: 1 / -1; }
.in-team { gap: 10px; }
.in-mini { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.in-mini li { display: flex; gap: 10px; align-items: flex-start; }
.in-mini li.done > span:nth-child(2) { color: var(--text-2); }

@media (max-width: 820px) {
  .in-task { grid-template-columns: auto minmax(0, 1fr); }
  .in-task-act { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; } /* alineadas con el texto, no bajo el círculo */
  .in-edit-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .in-edit-row .in-f-title, .in-edit-row .in-f-desc { grid-column: 1 / -1; }
  .in-table tr.in-row-late { background: var(--bad-soft); border: 1px solid var(--bad-line); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
  .in-table tr.in-row-late td { background: none; }
  .in-cell-progress { min-width: 0; }
}

/* Mi bienvenida (fase visual 2B): recorrido de 90 días */
.in-welcome-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) 190px; gap: 20px; align-items: center; border-radius: var(--r-xl); padding: 22px 24px; margin-bottom: 14px;
  background: linear-gradient(120deg, var(--accent-soft), var(--bg) 75%); border: 1px solid var(--border); }
.in-wh-txt { display: grid; gap: 6px; min-width: 0; }
.in-wh-txt h1 { margin: 0; }
.in-wh-il .il { max-width: 190px; margin-left: auto; }
.in-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.in-timeline div { display: grid; gap: 6px; font-size: 12px; color: var(--text-2); min-width: 0; }
.in-timeline i { height: 6px; border-radius: 8px; background: var(--surface-3); }
.in-timeline .done i { background: var(--accent); }
.in-timeline .on i { background: linear-gradient(90deg, var(--accent) var(--p, 40%), var(--surface-3) var(--p, 40%)); }
.in-timeline .on { color: var(--text); font-weight: 600; }
.in-welcome-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.in-people { margin-top: 2px; }
.in-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.in-person-txt { display: grid; gap: 2px; min-width: 0; }
.in-task.overdue .in-check { border-color: var(--bad-line); background: var(--bg); }
@media (max-width: 980px) { .in-welcome-grid { grid-template-columns: minmax(0, 1fr); } .in-welcome-hero { grid-template-columns: auto minmax(0, 1fr); } .in-wh-il { display: none; } }
@media (max-width: 560px) { .in-welcome-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; } .in-person { grid-template-columns: auto minmax(0, 1fr); } .in-person > .btn { grid-column: 2; justify-self: start; } }

/* =====================================================================================================================
   Vistas base (fase visual 2B): Mi expediente (px-) y Mi tiempo (tm-). Viven aquí porque base.js no tiene CSS propio.
   Solo tokens de app.css. Acento únicamente en banda, anillos, selección de rango y botón principal.
   ===================================================================================================================== */
/* Mi expediente · portada */
.px-cover { position: relative; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg); margin-bottom: 18px; }
.px-band { height: 104px; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; background: linear-gradient(110deg, var(--accent-soft), var(--surface-2)); position: relative; }
.px-band svg { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; opacity: .9; }
.px-band svg rect:first-child { fill: transparent !important; }
.px-body { position: relative; padding: 0 20px 20px; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; margin-top: -48px; }
.px-photo { position: relative; display: block; width: max-content; }
.px-photo .avatar.xl { border: 4px solid var(--bg); box-shadow: var(--shadow-1); width: 104px; height: 104px; }
.px-cam { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--text-2); cursor: pointer; list-style: none; padding: 0; }
.px-cam::-webkit-details-marker { display: none; }
.px-cam:hover { background: var(--surface-2); color: var(--text); }
.px-cam:focus-visible, .px-menu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.px-cam-menu { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; }
.px-cam-menu > .px-cam { right: 0; bottom: 0; }
.px-who { display: grid; gap: 6px; min-width: 0; padding: 60px 0 2px; }
.px-who h1 { margin: 0; overflow-wrap: anywhere; }
.px-chips { gap: 6px; }
.px-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.px-note { grid-column: 1 / -1; }
.px-body.many { grid-template-columns: auto minmax(0, 1fr); }
.px-body.many .px-actions { grid-column: 2; justify-content: flex-start; }
.px-body.many .px-note { grid-column: 2; }
.px-menu { position: relative; }
.px-menu > summary { list-style: none; cursor: pointer; }
.px-menu > summary::-webkit-details-marker { display: none; }
.px-menu[open] > summary { background: var(--sel-soft); border-color: var(--sel); }
.px-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 190px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; display: grid; gap: 2px; }
.px-cam-menu .px-pop { top: calc(100% + 6px); left: 0; }
.px-pop-r { left: auto; right: 0; width: min(300px, calc(100vw - 32px)); padding: 14px; gap: 10px; }
.px-pop-r .asof { align-items: end; }
.px-pop-r .asof .field { min-width: 0; flex: 1 1 150px; }
.px-pop-item { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-weight: 500; min-height: 38px; white-space: nowrap; }
.px-pop-item:hover, .px-pop-item:focus-visible { background: var(--surface-2); outline: none; }
.px-pop-item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.px-grid { align-items: start; }
.px-link { display: inline-block; margin-top: 10px; font-weight: 500; }
.px-complete-row { display: flex; gap: 14px; align-items: center; }
.px-complete-txt { display: grid; gap: 8px; justify-items: start; min-width: 0; }
@media (max-width: 860px) {
  .px-body { grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: -44px; padding: 0 16px 16px; }
  .px-band { height: 88px; }
  .px-who { padding-top: 0; }
  .px-body.many { grid-template-columns: minmax(0, 1fr); } .px-body.many .px-actions, .px-body.many .px-note { grid-column: 1; }
  .px-actions { justify-content: flex-start; }
  .px-pop-r { left: 0; right: auto; }
}

/* Mi tiempo */
.tm-top { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(170px, 1fr)); align-items: stretch; }
.tm-bal { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tm-bal-txt { display: grid; gap: 4px; flex: 1 1 180px; min-width: 0; }
.tm-bal-txt b { font-size: var(--fs-h3); }
.tm-two { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.tm-types { border: 0; margin: 0; padding: 0; min-width: 0; }
.tm-types legend { padding: 0; margin-bottom: 8px; }
.tm-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-type { position: relative; }
.tm-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tm-type span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background var(--d1), border-color var(--d1); }
.tm-type:hover span { background: var(--surface-2); }
.tm-type input:checked + span { border-color: var(--sel); background: var(--sel-soft); color: var(--sel-ink); box-shadow: inset 0 0 0 1px var(--sel); }
.tm-type input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.tm-dates { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-send { display: flex; justify-content: flex-end; }
#prev:empty { display: none; }
.tm-cal { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.tm-wk { display: grid; place-items: center; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tm-h { font-size: 12px; font-weight: 600; color: var(--text-3); padding-bottom: 2px; }
.tm-d { height: 38px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; position: relative; }
.tm-d:hover { background: var(--surface-2); }
.tm-d:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tm-d.out { cursor: default; }
.tm-d.we { color: var(--text-3); }
.tm-d.today { border-color: var(--border-strong); font-weight: 700; }
.tm-d.fer { background: var(--surface-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.tm-d.own { border-color: var(--accent); border-style: dashed; }
.tm-d.team::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4px; height: 3px; border-radius: 4px; background: var(--warn); }
.tm-d.rng { background: var(--accent-soft); color: var(--accent-ink); }
.tm-d.sel { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.tm-d.sel.team::after { background: var(--on-accent); }
.tm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.tm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tm-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.tm-legend .k-sel { background: var(--accent); } .tm-legend .k-fer { background: var(--surface-2); border: 1px dotted var(--text-3); }
.tm-legend .k-team { height: 3px; border-radius: 4px; background: var(--warn); }
.tm-out { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.tm-out li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.tm-none { margin-top: 10px; }
.tm-calcard .notice { margin-top: 10px; }
.tm-req { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tm-req-txt { display: grid; gap: 2px; min-width: 0; }
.tm-who { color: var(--warn); font-weight: 500; }
.tm-req-act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.tm-hist > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; min-height: 32px; }
.tm-hist > summary::-webkit-details-marker { display: none; }
.tm-hist > summary h2 { margin: 0; }
.tm-hist[open] > summary .t-xs { visibility: hidden; }
@media (max-width: 980px) { .tm-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .tm-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tm-top .tm-main { grid-column: 1 / -1; }
  .tm-req { grid-template-columns: auto minmax(0, 1fr); }
  .tm-req-act { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 420px) { .tm-dates { grid-template-columns: minmax(0, 1fr); } .tm-d { height: 36px; } }

ul.tm-reqs, ul.in-people { list-style: none; margin: 0; padding: 0; }

/* Mi expediente · Resumen: usa todo el ancho, sin huecos, y el correo cabe completo */
.px-sum { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.px-sum.no-team { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.px-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.px-puesto dl.kv { grid-template-columns: 92px minmax(0, 1fr); }
.px-puesto dl.kv dd { word-break: normal; overflow-wrap: anywhere; }
.px-team { display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 1180px) { .px-sum, .px-sum.no-team { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .px-team-card { grid-column: 1 / -1; } }
@media (max-width: 720px) { .px-sum, .px-sum.no-team { grid-template-columns: minmax(0, 1fr); } }
.nm-up { color: var(--ok); font-weight: 500; }
/* Resumen del expediente (v2): columna principal + columna lateral, tarjetas alineadas y datos en rejilla. */
.px-sum2 { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.px-main, .px-aside { display: grid; gap: 16px; align-content: start; min-width: 0; }
.px-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 28px; margin: 0; }
.px-fact { display: grid; gap: 3px; min-width: 0; }
.px-fact dt { font-size: 12px; color: var(--text-2); }
.px-fact dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.px-sep { height: 1px; background: var(--border); margin: 18px 0 14px; }
.px-sum2 .px-team { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 24px; }
.px-aside .px-link { margin-top: 12px; }
@media (max-width: 900px) { .px-sum2 { grid-template-columns: minmax(0, 1fr); } }
/* Portada del expediente (v2): una línea de datos sobria y acciones agrupadas a la derecha. */
.px-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.px-meta-txt { font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.px-pop-list { left: auto; right: 0; min-width: 220px; }
.px-pop-item.danger { color: var(--bad); }
.px-body { align-items: end; }
@media (max-width: 860px) { .px-pop-list { left: 0; right: auto; } }
.px-menu[open] > summary.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); filter: brightness(.92); }
.co-table td.num, .co-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== Color por empresa en la portada del expediente; bienvenida en lavanda (propuesta 2026-09-25) ===== */
.px-band.co-ope, .px-band.co-cia, .px-band.co-zev, .px-band.co-seg { background-image: none; }
.px-band.co-ope { background-color: var(--co-ope); } .px-band.co-cia { background-color: var(--co-cia); } .px-band.co-zev { background-color: var(--co-zev); } .px-band.co-seg { background-color: var(--co-seg); }
.px-band[class*="co-"] svg { display: none; }
.px-band[class*="co-"]::before, .px-band[class*="co-"]::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.28); }
.px-band[class*="co-"]::before { width: 220px; height: 220px; right: 60px; top: -120px; }
.px-band[class*="co-"]::after { width: 140px; height: 140px; right: -40px; bottom: -70px; }
.in-welcome-hero { background: var(--vivid-lav-soft); border-color: transparent; }

/* Capa de vida · Mi tiempo (2026-09-27): portada en sol, saldos en bento, tipos con color y calendario con días tintados. */
.tm-top { grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); }
.tm-top > .bento { grid-auto-rows: 1fr; }
.tm-type[data-tone="sun"] span { background: var(--vivid-sun-soft); border-color: transparent; color: var(--vivid-sun-ink); }
.tm-type[data-tone="lav"] span { background: var(--vivid-lav-soft); border-color: transparent; color: var(--vivid-lav-ink); }
.tm-type[data-tone="seg"] span { background: var(--co-seg-soft); border-color: transparent; color: var(--co-seg-ink); }
.tm-type[data-tone] span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: currentColor; opacity: .8; }
.tm-type[data-tone=""] span::before { display: none; }
.tm-type input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: none; }
/* Días: el equipo fuera se tiñe (antes una raya café), festivo en rojo suave, fin de semana en coral, hoy con anillo. */
.tm-d.team { background: var(--vivid-sun-soft); color: var(--vivid-sun-ink); }
.tm-d.team::after { display: none; }
.tm-d.fer { background: var(--bad-soft); color: var(--bad); text-decoration: none; }
.tm-d.we { color: var(--co-cia); }
.tm-d.today { border: 2px solid var(--text); font-weight: 700; }
.tm-d.own { border: 2px dashed var(--accent); }
.tm-legend .k-team { height: 12px; border-radius: 4px; background: var(--vivid-sun-soft); border: 1px solid var(--vivid-sun); }
.tm-legend .k-fer { background: var(--bad-soft); border: 1px solid var(--bad-line); }
@media (max-width: 820px) { .tm-top { grid-template-columns: minmax(0, 1fr); } .tm-top .tm-main { grid-column: auto; } }

/* ===== Primeros pasos (2026-10-06): recorrido guiado del primer ingreso. Riel de pasos + panel; estado = tinte + borde + check. ===== */
.fs-wrap { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-6); align-items: start; max-width: 1080px; }
.fs-wrap > * { min-width: 0; }
.fs-rail { position: sticky; top: 16px; display: grid; gap: var(--sp-4); }
.fs-rail-top { display: flex; align-items: center; gap: var(--sp-3); }
.fs-rail-top .eyebrow { display: block; }
.fs-rail-t { font-size: var(--fs-h3); }
.fs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; } /* contiene los textos sr-only al desplazarse en móvil */
.fs-step { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: none; color: var(--text-2);
  font: inherit; text-align: left; cursor: pointer; transition: background var(--d1) var(--ease), border-color var(--d1) var(--ease); }
.fs-step:hover { background: var(--surface-2); color: var(--text); }
.fs-step.on { background: var(--bg); border-color: var(--border-strong); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }
.fs-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid var(--border-strong); background: var(--bg); font-variant-numeric: tabular-nums; }
.fs-step.on .fs-num { background: var(--sel); border-color: var(--sel); color: var(--on-sel); }
.fs-step.done .fs-num { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.fs-step.skip .fs-num { border-style: dashed; color: var(--text-3); }
.fs-lbl { display: grid; line-height: 1.25; }
.fs-lbl small { font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.fs-panel { display: grid; gap: var(--sp-4); padding: var(--sp-6); }
.fs-panel-h { display: grid; gap: 4px; }
.fs-panel-h h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.01em; text-wrap: balance; }
.fs-sub { font-size: var(--fs-h3); margin-top: var(--sp-2); }
.fs-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1px solid var(--border); margin-top: var(--sp-2); }
.fs-foot-r { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }
/* Bienvenida */
.fs-hello { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--sp-6); align-items: center; }
.fs-hello p { max-width: 62ch; }
.fs-hello-il svg { width: 100%; height: auto; }
.fs-todo { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 8px; }
.fs-todo li { display: flex; gap: 8px; align-items: center; }
.fs-todo svg { color: var(--accent); flex: none; }
.fs-whos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.fs-who { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.fs-who > div:last-child { display: grid; min-width: 0; }
.fs-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-co { flex: none; }
/* Formularios */
.fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.fs-wide { grid-column: 1 / -1; }
.fs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-span2 { grid-column: span 2; }
.fs-add { padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface); }
.fs-add .fs-sub { margin: 0; }
.fs-add-btn { align-self: end; }
.fs-ro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.fs-ro dt { font-size: 12px; color: var(--text-3); }
.fs-ro dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fs-report summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); }
.fs-report[open] summary { margin-bottom: var(--sp-2); }
.fs-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fs-contacts li { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border: 1px solid var(--ok-line); background: var(--ok-soft); border-radius: var(--r-md); }
.fs-contacts li > div { display: grid; flex: 1; min-width: 0; }
.fs-edu { width: var(--av-sm); height: var(--av-sm); border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--ok-line); color: var(--ok); flex: none; }
/* Foto y firma */
.fs-media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.fs-media p { margin-bottom: var(--sp-3); max-width: 58ch; }
.fs-photo .avatar { width: 120px; height: 120px; font-size: 36px; }
.fs-media .sig-preview { width: 260px; min-height: 120px; align-content: center; }
.fs-media .sig-preview img { max-width: 100%; max-height: 110px; }
/* Recorrido */
.fs-tour { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
.fs-tour li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.fs-tour li > div { display: grid; gap: 2px; min-width: 0; }
.fs-tour-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.fs-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; }
.fs-how > div { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.fs-how dt { font-weight: 600; }
.fs-how dd { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.fs-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.fs-tips > div { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--vivid-lav-soft); border: 1px solid color-mix(in srgb, var(--vivid-lav) 45%, transparent); color: var(--vivid-lav-ink); }
.fs-tips .muted { color: inherit; opacity: .85; }
/* Terminado */
.fs-done { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); align-items: center; padding: var(--sp-8); max-width: 980px; }
.fs-done h1 { font-size: var(--fs-h1); margin: 4px 0 6px; text-wrap: balance; }
.fs-done-il svg { width: 100%; height: auto; }
.fs-done-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--sp-4); }
.fs-done-i { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
/* RRHH: avance del equipo */
.fs-team-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.fs-kpi { display: grid; gap: 2px; text-align: left; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); font: inherit; color: var(--text-2); cursor: pointer; }
.fs-kpi b { font-size: var(--fs-kpi); line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.fs-kpi.on { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel); color: var(--text); }
.fs-prog { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.fs-prog .bar { flex: 1; }
@media (max-width: 860px) {
  .fs-wrap { grid-template-columns: 1fr; gap: var(--sp-4); }
  .fs-rail { position: static; }
  .fs-steps { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; max-width: 100%; scrollbar-width: none; }
  .fs-steps li { flex: none; }
  .fs-step { white-space: nowrap; padding: 6px 10px; }
  .fs-lbl small { display: none; }
  .fs-hello, .fs-done { grid-template-columns: 1fr; }
  .fs-hello-il, .fs-done-il { max-width: 160px; }
  .fs-grid, .fs-grid-3, .fs-how, .fs-tips, .fs-done-list { grid-template-columns: 1fr; }
  .fs-span2 { grid-column: auto; }
  .fs-ro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-media { grid-template-columns: 1fr; justify-items: start; }
  .fs-panel, .fs-done { padding: var(--sp-4); }
  .fs-team-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fs-state { display: grid; gap: 2px; justify-items: start; }
[data-remind] { white-space: nowrap; }