/* ============================================================
   El Recuerdo · capa de la pieza
   Consume sr.css y tablero.css. Solo los cinco tokens, escala 8.
   El movimiento es para orientar: entra, cuenta, se dibuja.
   ============================================================ */

/* ---- portada ---- */
.er-hero{max-width:600px}
.er-hero .sr-lead{margin-bottom:var(--sr-2)}
.er-home{display:flex;flex-direction:column;gap:var(--sr-3);max-width:1180px;margin:0 auto}
.er-hero .sr-cap{margin-bottom:var(--sr-2)}

/* ---- flujograma ---- */
.er-flow{position:relative;display:grid;grid-template-columns:1fr .8fr 1.1fr 1fr;gap:var(--sr-5);
  border-top:1px solid var(--sr-ink);padding-top:var(--sr-4)}
.er-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.er-wires path{fill:none;stroke:var(--sr-line);stroke-width:1;transition:stroke .2s ease,opacity .2s ease}
.er-wires path.is-hot{stroke:var(--sr-ink);stroke-dasharray:4 4;animation:er-flow 0.9s linear infinite}
.er-wires path.is-dim{opacity:.35}
@keyframes er-flow{to{stroke-dashoffset:-16}}
.er-col{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.er-col-h{position:absolute;top:-32px;left:0;font-size:var(--sr-micro);color:var(--sr-mid)}
.er-n{position:relative;width:100%;text-align:left;background:var(--sr-paper);border:1px solid var(--sr-line);
  font-family:inherit;color:var(--sr-ink);font-size:var(--sr-label);line-height:1.35;padding:6px 12px;
  cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,opacity .2s ease,transform .18s ease}
.er-n span{display:block;font-size:var(--sr-micro);color:var(--sr-mid);transition:color .18s ease}
.er-n:hover,.er-n.is-hot{border-color:var(--sr-ink);background:var(--sr-ink);color:var(--sr-paper)}
.er-n:hover span,.er-n.is-hot span{color:var(--sr-line)}
.er-n.is-dim{opacity:.4}
.er-n-core{font-weight:var(--sr-emph);border-color:var(--sr-ink)}
.er-n-core span{font-weight:var(--sr-text)}
.er-n-hub{font-weight:var(--sr-emph);border-color:var(--sr-ink);background:var(--sr-surface)}
.er-n-in{color:var(--sr-mid)}
.er-flow-cap{font-size:var(--sr-micro);color:var(--sr-mid);margin-top:var(--sr-2)}
/* entrada del flujograma */
.er-flow .er-n{opacity:0;transform:translateY(6px)}
.tb-panel.is-in .er-flow .er-n{opacity:1;transform:none}
.tb-panel.is-in .er-flow .er-n.is-dim{opacity:.4}

/* ---- panel de circuito: texto corto, pantalla grande ---- */
.er-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:var(--sr-4);align-items:start}
.er-in .tb-say h2{margin-bottom:var(--sr-2)}
.er-in .tb-say .sr-lead{max-width:30ch}
.er-say-x{margin-top:var(--sr-3);display:flex;flex-direction:column;gap:var(--sr-1)}

/* ---- pantalla ---- */
.er-mock{border:1px solid var(--sr-ink);background:var(--sr-paper)}
.er-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sr-2);flex-wrap:wrap;
  padding:var(--sr-1) var(--sr-2);border-bottom:1px solid var(--sr-line);background:var(--sr-surface)}
.er-b{padding:var(--sr-2)}
.er-b+.er-b{border-top:1px solid var(--sr-line)}
.er-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.er-tools{display:flex;align-items:center;gap:var(--sr-1);flex-wrap:wrap}

/* KPIs que cuentan */
.er-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--sr-line);
  border-bottom:1px solid var(--sr-line)}
.er-kpi{background:var(--sr-paper);padding:12px var(--sr-2)}
.er-kpi .l{display:block;font-size:var(--sr-micro);color:var(--sr-mid)}
.er-kpi .v{display:block;font-size:var(--sr-lead);font-weight:var(--sr-emph);letter-spacing:-.015em;
  line-height:1.4;font-variant-numeric:tabular-nums}
.er-kpi.is-key{background:var(--sr-surface)}

/* tablas */
.er-t{width:100%;border-collapse:collapse;font-size:var(--sr-label)}
.er-t th{text-align:left;font-size:var(--sr-micro);font-weight:var(--sr-emph);color:var(--sr-mid);
  padding:0 0 var(--sr-1);border-bottom:1px solid var(--sr-ink);white-space:nowrap}
.er-t td{padding:10px 0;border-bottom:1px solid var(--sr-line);vertical-align:middle}
.er-t tr:last-child td{border-bottom:0}
.er-t th+th,.er-t td+td{padding-left:var(--sr-2)}
.er-t .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.er-t .k{font-weight:var(--sr-emph)}
.er-t .g{color:var(--sr-mid)}
.er-t .w{white-space:nowrap}
.er-t .act{text-align:right;white-space:nowrap}
.er-t tbody tr{transition:background .16s ease}
.er-t tbody tr:hover{background:var(--sr-surface)}
.er-t tr.er-tot td{border-top:1px solid var(--sr-ink);font-weight:var(--sr-emph)}
.er-t tr.is-new td{animation:er-new 1.4s ease}
@keyframes er-new{from{background:var(--sr-surface)}to{background:transparent}}

/* estados: forma, no color */
.er-st{display:inline-block;font-size:var(--sr-micro);font-weight:var(--sr-emph);padding:3px 8px;
  border:1px solid var(--sr-line);color:var(--sr-mid);white-space:nowrap;line-height:1.5}
.er-st-ok{border-color:var(--sr-ink);color:var(--sr-ink)}
.er-st-dif{border-color:var(--sr-ink);color:var(--sr-ink);border-style:dashed}
.er-st-att{border-color:var(--sr-ink);background:var(--sr-ink);color:var(--sr-paper)}
.er-st-cal{background:var(--sr-paper);border-color:var(--sr-line);color:var(--sr-ink)}

/* botones chicos: se pintan al pasar */
.er-btn{font-family:inherit;font-size:var(--sr-micro);font-weight:var(--sr-emph);line-height:1.5;
  padding:4px 10px;border:1px solid var(--sr-ink);background:var(--sr-paper);color:var(--sr-ink);
  cursor:pointer;white-space:nowrap;transition:background .16s ease,color .16s ease,border-color .16s ease}
.er-btn:hover{background:var(--sr-ink);color:var(--sr-paper)}
.er-btn-k{background:var(--sr-ink);color:var(--sr-paper)}
.er-btn-k:hover{background:var(--sr-paper);color:var(--sr-ink)}
.er-btn-g{border-color:var(--sr-line);color:var(--sr-mid)}
.er-btn-g:hover{border-color:var(--sr-ink);background:var(--sr-paper);color:var(--sr-ink)}
.er-btn[disabled]{border-color:var(--sr-line);background:var(--sr-paper);color:var(--sr-line);cursor:default}

/* filtros */
.er-chip{font-family:inherit;font-size:var(--sr-micro);line-height:1.5;padding:4px 10px;cursor:pointer;
  border:1px solid var(--sr-line);background:var(--sr-paper);color:var(--sr-mid);
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.er-chip:hover{border-color:var(--sr-ink);color:var(--sr-ink)}
.er-chip[aria-pressed="true"]{border-color:var(--sr-ink);color:var(--sr-ink);background:var(--sr-surface);font-weight:var(--sr-emph)}

/* solapas de pantalla */
.er-tabs{display:flex;border-bottom:1px solid var(--sr-line)}
.er-tabs button{font-family:inherit;font-size:var(--sr-micro);font-weight:var(--sr-emph);color:var(--sr-mid);
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px var(--sr-2);
  cursor:pointer;transition:color .16s ease,border-color .16s ease}
.er-tabs button:hover{color:var(--sr-ink)}
.er-tabs button[aria-selected="true"]{color:var(--sr-ink);border-bottom-color:var(--sr-ink)}
.er-pane[hidden]{display:none}

/* ---- calendario ---- */
.er-cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 232px}
.er-cal-wrap>.er-b+.er-b{border-top:0;border-left:1px solid var(--sr-line)}
.er-cal{min-width:600px}
.er-cal th.num{padding-left:var(--sr-1)}
.er-cal td.c{text-align:right;padding:6px 0 6px var(--sr-1)}
.er-cell{font-family:inherit;display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px;
  background:none;border:1px solid transparent;padding:4px 6px;cursor:pointer;color:var(--sr-ink);
  transition:border-color .16s ease,background .16s ease}
.er-cell:hover{border-color:var(--sr-ink)}
.er-cell.is-sel{border-color:var(--sr-ink);background:var(--sr-surface)}
.er-cell b{font-weight:var(--sr-emph);font-size:var(--sr-label);font-variant-numeric:tabular-nums;white-space:nowrap}
.er-cal tr.is-hidden{display:none}
.er-grp td{font-size:var(--sr-micro);color:var(--sr-mid);padding-top:var(--sr-2)}
.er-det-h{font-size:var(--sr-label);font-weight:var(--sr-emph);margin-bottom:4px}
.er-det-l{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--sr-2);font-size:var(--sr-micro);
  margin-top:var(--sr-2);padding-top:var(--sr-1);border-top:1px solid var(--sr-line)}
.er-det-l .g{color:var(--sr-mid)}
.er-det-l .n{text-align:right;font-weight:var(--sr-emph);font-variant-numeric:tabular-nums;white-space:nowrap}
.er-det-l .t{border-top:1px solid var(--sr-ink);padding-top:4px}
.er-det-acts{display:flex;gap:var(--sr-1);flex-wrap:wrap;margin-top:var(--sr-2)}

/* ---- carga ---- */
.er-drop{border:1px dashed var(--sr-ink);padding:var(--sr-3) var(--sr-2);text-align:center;
  transition:background .2s ease}
.er-drop:hover{background:var(--sr-surface)}
.er-drop .sr-lbl{display:block;margin-bottom:4px}
.er-files{display:grid}
.er-file{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sr-2);align-items:center;
  padding:10px 0;border-bottom:1px solid var(--sr-line);font-size:var(--sr-label)}
.er-file:last-child{border-bottom:0}
.er-file .s{display:block;font-size:var(--sr-micro);color:var(--sr-mid)}
.er-file .er-st{transition:background .3s ease,color .3s ease,border-color .3s ease}
.er-prog{height:2px;background:var(--sr-line);margin-top:6px;overflow:hidden}
.er-prog i{display:block;height:100%;width:0;background:var(--sr-ink);transition:width .9s ease}

/* ---- barras ---- */
.er-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sr-2);align-items:end;height:120px;
  padding-top:var(--sr-2)}
.er-bar-v{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px}
.er-bar-v i{display:block;width:40px;margin:0 auto;background:var(--sr-ink);height:0;transition:height .8s ease}
.er-bar-v.is-low i{background:var(--sr-mid)}
.er-bar-v span{font-size:var(--sr-micro);color:var(--sr-mid);text-align:center;white-space:nowrap}
.er-hbar{display:grid;grid-template-columns:120px minmax(0,1fr) 72px;gap:var(--sr-2);align-items:center;
  font-size:var(--sr-label);padding:8px 0;border-bottom:1px solid var(--sr-line)}
.er-hbar:last-child{border-bottom:0}
.er-hbar .track{position:relative;height:10px;background:var(--sr-surface)}
.er-hbar .track i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sr-ink);transition:width .8s ease}
.er-hbar .track b{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--sr-mid)}
.er-hbar .n{text-align:right;font-weight:var(--sr-emph);font-variant-numeric:tabular-nums}

/* ---- modal ---- */
.er-modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:var(--sr-2)}
.er-modal[hidden]{display:none}
.er-veil{position:absolute;inset:0;background:var(--sr-ink);opacity:.32}
.er-dlg{position:relative;width:100%;max-width:440px;background:var(--sr-paper);border:1px solid var(--sr-ink);
  animation:er-in .22s ease}
@keyframes er-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.er-dlg-h{display:flex;justify-content:space-between;align-items:center;padding:var(--sr-2);
  border-bottom:1px solid var(--sr-line)}
.er-form{display:grid;gap:var(--sr-2);padding:var(--sr-2)}
.er-f{display:grid;gap:4px}
.er-f label,.er-f .lbl{font-size:var(--sr-micro);color:var(--sr-mid)}
.er-f input,.er-f select{font-family:inherit;font-size:var(--sr-label);color:var(--sr-ink);background:var(--sr-paper);
  border:1px solid var(--sr-line);padding:8px 10px;outline:0;transition:border-color .16s ease}
.er-f input:focus,.er-f select:focus{border-color:var(--sr-ink)}
.er-seg{display:flex}
.er-seg button{flex:1;font-family:inherit;font-size:var(--sr-label);padding:8px 10px;cursor:pointer;
  border:1px solid var(--sr-line);background:var(--sr-paper);color:var(--sr-mid)}
.er-seg button+button{border-left:0}
.er-seg button[aria-pressed="true"]{background:var(--sr-ink);border-color:var(--sr-ink);color:var(--sr-paper)}
.er-f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sr-2)}
.er-dlg-f{display:flex;justify-content:flex-end;gap:var(--sr-1);padding:var(--sr-2);border-top:1px solid var(--sr-line)}

/* ---- aviso de confirmación ---- */
.er-toast{position:fixed;left:50%;bottom:64px;z-index:30;transform:translate(-50%,12px);opacity:0;
  background:var(--sr-ink);color:var(--sr-paper);font-size:var(--sr-label);padding:10px var(--sr-2);
  transition:opacity .2s ease,transform .2s ease;pointer-events:none;max-width:calc(100vw - 32px)}
.er-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---- próximo paso ---- */
.er-next{max-width:680px;margin:0 auto}
.er-next .sr-etapas{margin-top:var(--sr-3)}
.er-next .sr-etapa{grid-template-columns:40px minmax(0,1fr)}
.er-next .er-price{margin-top:var(--sr-5)}

/* ---- ficha ---- */
.er-people{display:grid;grid-template-columns:200px minmax(0,1fr)}
.er-people>.er-b+.er-b{border-top:0;border-left:1px solid var(--sr-line)}
.er-person{display:block;width:100%;text-align:left;font-family:inherit;background:none;border:0;
  border-bottom:1px solid var(--sr-line);padding:8px 0;font-size:var(--sr-label);color:var(--sr-ink)}
.er-person:last-child{border-bottom:0}
.er-person span{display:block;font-size:var(--sr-micro);color:var(--sr-mid)}
.er-person.is-sel{font-weight:var(--sr-emph)}
.er-person.is-sel span{font-weight:var(--sr-text)}

@media(max-width:900px){
  .er-col-h{position:static;margin-bottom:var(--sr-1)}
  .er-flow{padding-top:var(--sr-3)}
  .er-in{grid-template-columns:minmax(0,1fr);gap:var(--sr-3)}
  .er-flow{grid-template-columns:minmax(0,1fr);gap:var(--sr-3)}
  .er-wires{display:none}
  .er-flow .er-n{opacity:1;transform:none}
  .er-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .er-cal-wrap,.er-people{grid-template-columns:minmax(0,1fr)}
  .er-cal-wrap>.er-b+.er-b,.er-people>.er-b+.er-b{border-left:0;border-top:1px solid var(--sr-line)}
  .er-hbar{grid-template-columns:90px minmax(0,1fr) 64px}
}

@media(prefers-reduced-motion:reduce){
  .er-wires path.is-hot{animation:none}
  .er-flow .er-n{opacity:1;transform:none;transition:none}
  .er-bar-v i,.er-hbar .track i,.er-prog i{transition:none}
}