/* =====================================================================
   BLOQUE 10 — Flujo del negocio (arrastrar entre etapas, «Pasar a…»),
   En notaría (proceso de firma) y Clientes (exportar, llamar/registrar).
   Va tras bloque8.css. Todo color vive en un token; Noche y Día;
   movimiento dentro de prefers-reduced-motion.
   ===================================================================== */
:root{
  --b10-ok:var(--b4-ok); --b10-ok-ink:var(--b4-ok-ink); --b10-ok-bg:var(--b4-ok-bg);
  --b10-am:var(--b4-am); --b10-am-ink:var(--b4-am-ink); --b10-am-bg:var(--b4-am-bg);
  --b10-ro:var(--b4-ro); --b10-ro-ink:var(--b8-ro-txt, var(--b4-ro-ink)); --b10-ro-bg:var(--b4-ro-bg);
  --b10-az:var(--b4-az); --b10-az-ink:var(--b4-az-ink); --b10-az-bg:var(--b4-az-bg);
  --b10-sobre-ok:#000e35;   /* texto sobre verde lleno: en Noche el verde es claro */
  --b10-fantasma-sombra:0 18px 40px -12px rgba(0,0,0,.65);
}
:root[data-theme="light"]{ --b10-fantasma-sombra:0 18px 40px -14px rgba(0,14,53,.35); --b10-sobre-ok:#ffffff; }

/* ---------- 10.1 Arrastrar: táctil con pulsación larga ---------- */
@media (pointer:coarse){
  [data-b10-id]{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
}
.b10-pulsa{box-shadow:0 0 0 2px var(--accent), var(--shadow) !important;}
.b10-arrastrando{opacity:.35;}
.b10-fantasma{
  position:fixed; left:0; top:0; z-index:9000; margin:0; pointer-events:none;
  box-shadow:var(--b10-fantasma-sombra) !important; opacity:.96;
}
body.b10-con-arrastre{cursor:grabbing;}
.pv-nodo.drag-over{outline:2px dashed var(--accent); outline-offset:3px; border-radius:var(--r-card);}
@media (prefers-reduced-motion:no-preference){
  .b10-pulsa{transition:box-shadow .38s ease;}
  .b10-fantasma{transition:none;}
}
/* Durante el arrastre: cada columna enseña su nombre y las vacías tienen sitio para soltar */
body.b10-con-arrastre .board .col[data-b10-etapa] > .col-head{display:flex !important;}
body.b10-con-arrastre .board .col[data-b10-etapa]{min-height:64px; border:1.5px dashed var(--line-strong); border-radius:var(--r-card); padding:6px;}
body.b10-con-arrastre .board .col[data-b10-etapa] .b8-col-vacia{display:none;}
.b4-chev.drag-over{outline:2px dashed var(--accent); outline-offset:2px;}

/* ---------- 10.2 «Pasar a…», propuesta y enlaces entre fichas ---------- */
.b4-acc.b10-pasar{background:var(--b10-az-bg); border-color:var(--b10-az); color:var(--b10-az-ink);}
.b4-acc.b10-pasar[aria-expanded="true"]{background:var(--b10-az); color:#fff;}
.b4-acc.b10-ver{background:transparent; border-style:dashed;}
.b10-propuesta{
  display:flex; align-items:center; gap:8px; margin:8px 0 2px; padding:6px 6px 6px 8px;
  border-radius:var(--r-pill); background:var(--b10-ok-bg); color:var(--b10-ok-ink); font-weight:700; font-size:.8rem; min-width:0;
}
.b10-prop-ico{width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--b10-ok); color:var(--b10-sobre-ok);}
.b10-prop-ico .ico-set{width:15px; height:15px;}
.b10-prop-tx{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.b10-prop-btn{
  flex:none; min-height:36px; padding:0 14px; border-radius:var(--r-pill); border:0; cursor:pointer;
  background:var(--b10-ok); color:var(--b10-sobre-ok); font:inherit; font-weight:800;
}
.b10-prop-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
@media (prefers-reduced-motion:no-preference){
  .b10-resalta{animation:b10Resalta 1.6s ease;}
  @keyframes b10Resalta{0%,60%{box-shadow:0 0 0 3px var(--accent), var(--shadow);} 100%{box-shadow:var(--shadow);}}
}
@media (prefers-reduced-motion:reduce){ .b10-resalta{box-shadow:0 0 0 3px var(--accent), var(--shadow);} }

/* ---------- 10.4 Clientes: llamar (verde lleno) ≠ registrar llamada (contorno, nota con «+») ---------- */
.b4-acc.b10-llamar{background:var(--b10-ok); border-color:var(--b10-ok); color:var(--b10-sobre-ok);}
.b4-acc.b10-llamar .ico-set path{fill:currentColor; stroke:currentColor; stroke-width:1;}
.b4-acc.b10-llamar:hover{background:var(--b10-ok); filter:brightness(1.08);}
.b4-acc.b10-registrar{background:transparent; border:1.5px solid var(--line-strong); color:var(--ink);}
.b4-acc.b10-registrar:hover{border-color:var(--ink); background:transparent;}

/* ---------- 10.5 Cierres → En notaría ---------- */
#sec-notaria .section-head{align-items:center;}
.b10-resumen{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.b10-ops{display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:14px;}
.b10-op{display:flex; flex-direction:column; gap:12px; padding:16px;}
.b10-op-cab{display:grid; grid-template-columns:64px minmax(0, 1fr) 64px; gap:12px; align-items:center;}
.b10-cuenta{
  --t:var(--b10-az); --t-bg:var(--b10-az-bg); --t-ink:var(--b10-az-ink);
  width:64px; height:64px; border-radius:50%; box-sizing:border-box; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:var(--t-bg); box-shadow:inset 0 0 0 2px var(--t); color:var(--t-ink);
  line-height:1.05; text-align:center;
}
.b10-cuenta b{font-size:1.25rem; font-weight:900; letter-spacing:-.02em;}
.b10-cuenta small{font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; max-width:56px;}
.b10-cuenta.t-ro{--t:var(--b10-ro); --t-bg:var(--b10-ro-bg); --t-ink:var(--b10-ro-ink);}
.b10-cuenta.t-am{--t:var(--b10-am); --t-bg:var(--b10-am-bg); --t-ink:var(--b10-am-ink);}
.b10-cuenta.t-gris{--t:var(--line-strong); --t-bg:transparent; --t-ink:var(--ink-soft);}
.b10-op-tit{min-width:0; display:flex; flex-direction:column; gap:6px;}
.b10-op-dir{font-weight:800; font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.b10-op-chips{display:flex; gap:6px; align-items:center; min-width:0;}
.b10-op-cli{font-size:.78rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
/* anillo «x de y» */
.b10-anillo{position:relative; width:64px; height:64px; display:inline-grid; place-items:center;}
.b10-anillo svg{position:absolute; inset:0; width:100%; height:100%;}
.b10-an-bg{fill:none; stroke:var(--b4-track); stroke-width:6;}
.b10-an-fg{fill:none; stroke:var(--b10-az); stroke-width:6; stroke-linecap:round;}
.b10-anillo.completo .b10-an-fg{stroke:var(--b10-ok);}
.b10-an-tx{position:relative; display:flex; flex-direction:column; align-items:center; line-height:1;}
.b10-an-tx b{font-size:1.05rem; font-weight:900;}
.b10-an-tx small{font-size:.6rem; font-weight:700; color:var(--ink-soft); margin-top:2px;}
/* línea de tiempo por fases */
.b10-fases{list-style:none; margin:0; padding:0; display:flex; gap:0;}
.b10-fase{flex:1 1 0; min-width:0; position:relative;}
.b10-fase::before{content:""; position:absolute; top:15px; left:-50%; right:50%; height:3px; background:var(--b4-track); border-radius:3px;}
.b10-fase:first-child::before{display:none;}
.b10-fase.hecha::before, .b10-fase.actual::before{background:var(--b10-ok);}
.b10-fase-btn{
  appearance:none; background:transparent; border:0; padding:0; margin:0; width:100%; cursor:pointer; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:6px; font:inherit; position:relative; min-height:52px;
}
.b10-fase-dot{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; box-sizing:border-box;
  background:var(--surface); border:2px solid var(--line-strong); font-size:.78rem; font-weight:800; color:var(--ink-soft); position:relative;
}
.b10-fase-dot .ico-set{width:16px; height:16px; stroke-width:2.6;}
.b10-fase.hecha .b10-fase-dot{background:var(--b10-ok); border-color:var(--b10-ok); color:var(--b10-sobre-ok);}
.b10-fase.actual .b10-fase-dot{border-color:var(--accent); color:var(--ink);}
.b10-fase.abierta .b10-fase-dot{box-shadow:0 0 0 4px var(--b10-az-bg);}
.b10-fase-l{font-size:.68rem; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px;}
.b10-fase.abierta .b10-fase-l{color:var(--ink);}
.b10-fase-btn:focus-visible{outline:none;}
.b10-fase-btn:focus-visible .b10-fase-dot{outline:2px solid var(--accent); outline-offset:2px;}
/* checklist */
.b10-check{border-radius:14px; background:var(--b4-track); padding:10px 10px 6px;}
.b10-check-cab{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 4px 6px;}
.b10-check-tit{font-weight:800; font-size:.86rem;}
.b10-check-n{font-size:.74rem; font-weight:800; color:var(--ink-soft); white-space:nowrap;}
.b10-items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.b10-item{
  appearance:none; width:100%; display:flex; align-items:center; gap:10px; text-align:left; background:transparent;
  border:0; border-radius:12px; padding:7px 6px; min-height:44px; cursor:pointer; color:var(--ink); font:inherit; font-size:.84rem;
}
.b10-item:hover{background:var(--surface);}
.b10-item:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.b10-item-ck{width:26px; height:26px; flex:none; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center; color:transparent; box-sizing:border-box;}
.b10-item-ck .ico-set{width:15px; height:15px; stroke-width:2.6;}
.b10-item.hecho .b10-item-ck{background:var(--b10-ok); border-color:var(--b10-ok); color:var(--b10-sobre-ok);}
.b10-item.hecho .b10-item-t{color:var(--ink-soft); text-decoration:line-through; text-decoration-thickness:1px;}
/* pie: fecha de firma y acciones */
.b10-op-pie{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;}
.b10-fecha{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 6px 0 12px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong); color:var(--ink); box-sizing:border-box; cursor:pointer;
}
.b10-fecha-l{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
.b10-fecha input{border:0; background:transparent; color:inherit; font:inherit; font-weight:700; font-size:.84rem; min-height:40px; padding:0 4px; color-scheme:inherit;}
.b10-fecha:focus-within{border-color:var(--accent);}
.b10-op-acc{justify-content:flex-end; margin-left:auto;}
.b10-op-acc .contact-actions{display:contents;}
@media (max-width:420px){
  .b10-ops{grid-template-columns:1fr;}
  .b10-op{padding:14px 12px;}
  .b10-op-cab{grid-template-columns:56px minmax(0, 1fr) 56px; gap:10px;}
  .b10-cuenta, .b10-anillo{width:56px; height:56px;}
  .b10-cuenta b{font-size:1.1rem;}
}
@media (prefers-reduced-motion:no-preference){
  .b10-fase.actual .b10-fase-dot{animation:b10Late 2.4s ease-in-out infinite;}
  @keyframes b10Late{0%,100%{box-shadow:0 0 0 0 transparent;} 50%{box-shadow:0 0 0 5px var(--b10-ro-bg);}}
  .b10-an-fg{transition:stroke-dashoffset .5s cubic-bezier(.2,.7,.2,1);}
  .b10-item-ck{transition:background .18s ease, border-color .18s ease;}
}

/* ---------- 10.6 Ajustes → En notaría (editor de plantilla) ---------- */
.b10-ed-barra{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:4px 0 12px;}
.b10-ed-estado{font-size:.76rem; font-weight:700; color:var(--ink-soft);}
.b10-editor{display:flex; flex-direction:column; gap:10px;}
.b10-ed-fase{border:1px solid var(--line); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:8px;}
.b10-ed-cab{display:flex; align-items:center; gap:8px;}
.b10-ed-num{width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--b10-az-bg); color:var(--b10-az-ink); font-weight:800; font-size:.8rem;}
.b10-ed-tit{flex:1 1 auto; min-width:0; font-weight:800;}
.b10-ed-pasos{list-style:none; margin:0; padding:0 0 0 38px; display:flex; flex-direction:column; gap:6px;}
.b10-ed-paso{display:flex; align-items:center; gap:6px;}
.b10-ed-paso input{flex:1 1 auto; min-width:0;}
.b10-ed-cab input, .b10-ed-paso input{border-radius:var(--r-pill); min-height:40px; padding:0 14px; box-sizing:border-box; border:1px solid var(--line-strong); background:transparent; color:var(--ink); font:inherit; font-size:.86rem;}
.b4-acc.b10-ed-px{width:40px; height:40px; min-width:40px;}
.b10-ed-mas{align-self:flex-start; margin-left:38px; min-height:36px;}
.b10-ed-masf{align-self:flex-start; min-height:40px;}
.b10-ed-pie{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
@media (max-width:420px){ .b10-ed-pasos{padding-left:0;} .b10-ed-mas{margin-left:0;} }
.b8-chip.t-mo{background:var(--b4-mo-bg); color:var(--b4-mo-ink); border-color:var(--b4-mo);}

/* ---------- 10.7 Firmado, comisión pendiente y Cobrada ---------- */
.b10-firmado, .b10-cobrada{
  appearance:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px 0 12px;
  border-radius:var(--r-pill); border:0; cursor:pointer; font:inherit; font-weight:800; font-size:.88rem; flex:none;
}
.b10-firmado{background:var(--accent); color:var(--accent-ink);}
.b10-firmado:hover{background:var(--accent-hover);}
.b10-cobrada{background:var(--b10-ok); color:var(--b10-sobre-ok);}
.b10-firmado .ico-set, .b10-cobrada .ico-set{width:20px; height:20px; padding:3px; box-sizing:border-box; border-radius:50%; background:rgba(255,255,255,.22); stroke-width:2.6;}
.b10-firmado:focus-visible, .b10-cobrada:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.b10-cobros{display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:10px; margin-bottom:14px;}
.b10-cobro{display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; cursor:pointer;}
.b10-cobro.tarde{box-shadow:inset 4px 0 0 var(--b10-ro), var(--shadow);}
.b10-cobro-ico{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--b10-am-bg); color:var(--b10-am-ink);}
.b10-cobro.tarde .b10-cobro-ico{background:var(--b10-ro-bg); color:var(--b10-ro-ink);}
.b10-cobro-ico .ico-set{width:20px; height:20px;}
.b10-cobro-tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px;}
.b10-cobro-tx .b10-op-dir{max-width:100%;}
.b10-cobro-f2{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0;}
.b10-cobro-f2 .b8-chip{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.b10-cobro-eur{font-weight:900; font-size:.9rem; white-space:nowrap; flex:none;}
@media (max-width:420px){
  .b10-cobros{grid-template-columns:1fr;}
  .b10-cobrada{width:44px; padding:0; justify-content:center;} /* redondo: el texto queda en aria-label */
  .b10-cobrada span{display:none;}
  .b10-cobro{gap:10px; padding:12px;}
  .b10-cobro-ico{width:36px; height:36px;}
}
@media (prefers-reduced-motion:no-preference){
  .b10-firmado, .b10-cobrada{transition:transform .15s cubic-bezier(.2,.7,.2,1), background .18s ease;}
  .b10-firmado:hover, .b10-cobrada:hover{transform:translateY(-2px);}
  .b10-firmado:active, .b10-cobrada:active{transform:scale(.95);}
}
.b10-aviso-cobro{margin-bottom:12px;}
.b10-aviso-cobro .b4-stepper{flex:none; width:156px;}
.b10-aviso-cobro .b4-stepper input{min-width:48px; text-align:center;}
.b10-enlace-cierres{
  appearance:none; display:inline-flex; align-items:center; gap:6px; margin-top:8px; min-height:32px; padding:0 12px 0 4px;
  border-radius:var(--r-pill); border:1px solid var(--t); background:var(--t-bg); color:var(--t-ink); font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; max-width:100%;
}
.b10-enlace-cierres.t-az{--t:var(--b10-az); --t-bg:var(--b10-az-bg); --t-ink:var(--b10-az-ink);}
.b10-enlace-cierres.t-am{--t:var(--b10-am); --t-bg:var(--b10-am-bg); --t-ink:var(--b10-am-ink);}
.b10-enl-ico{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--t); color:var(--surface);}
.b10-enl-ico .ico-set{width:14px; height:14px;}
.b10-enlace-cierres:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* Campo con icono (lupa, calendario): el texto empieza tras el icono también
   con los estilos de píldora de los bloques 6–9 (en móvil la lupa tapaba la
   primera letra del placeholder). */
html body .inp-icon > input:not([type=checkbox]):not([type=radio]),
html body .panel-pulso .field .inp-icon > input:not([type=checkbox]):not([type=radio]){padding-left:52px;}

/* Recordatorios: el campo se ilumina cuando se pulsa «+ Añadir» sin texto */
@media (prefers-reduced-motion:no-preference){
  .rec-pide{animation:rec-pide .9s ease;}
}
@media (prefers-reduced-motion:reduce){
  .rec-pide{animation:rec-pide-rm 1.2s ease;}
}
@keyframes rec-pide{0%,100%{transform:none; box-shadow:none}25%{transform:translateX(-4px); box-shadow:0 0 0 3px var(--b4-az, #3d6bff)}75%{transform:translateX(4px); box-shadow:0 0 0 3px var(--b4-az, #3d6bff)}}
@keyframes rec-pide-rm{0%,80%{box-shadow:0 0 0 3px var(--b4-az, #3d6bff)}100%{box-shadow:none}}

/* «Pasar a…» en azul RE/MAX (David no quiere morado) */
.b4-acc.b10-pasar{border-color:var(--b4-az); color:var(--b4-az-ink); background:var(--b4-az-bg);}