/* forma.20260716.css — Formulario de prescripción de 5 momentos.
   Escala de espaciado única (nada de números sueltos), mínimo táctil 44px,
   campos a 16px para que iOS no haga zoom al enfocar. */
:root{
  --f-teal:#116767; --f-teal-d:#0E4C4C; --f-teal-l:#eef6f6; --f-bd:#e3ecec;
  --f-tx:#14342f; /* P-147 (01-sep): #7d9494 daba 3,21:1 sobre blanco, 3,08 sobre --f-lz y 2,93 sobre
     --f-teal-l. Los tres fallan WCAG AA, que pide 4,5:1 para texto normal, y el texto
     guia es precisamente el que lee quien no conoce el formulario. #557070 mide
     5,33 / 5,12 / 4,86 en esos mismos fondos: pasa con margen y conserva el tono. */
  --f-mu:#557070; --f-lz:#f7fbfb; --f-ok:#1a7f5a;
  --f1:4px; --f2:8px; --f3:12px; --f4:16px; --f5:24px; --f-tap:44px;
}
/* `overflow-x:clip` y NO `hidden` (04-ago): `.f-pasos` sangra fuera del padding con un
   margen negativo y en 375px se salia 4px (medido en produccion: scrollWidth 379 vs
   clientWidth 375), lo que hacia que la pagina se desplazara de lado en el movil del
   odontologo — que es el dispositivo natural de esta via, se llega por QR.
   `hidden` convertiria a #formulario en scroll container y MATARIA el `position:sticky`
   de la barra de pasos; `clip` recorta sin crear scrollport y el sticky sigue vivo. */
#formulario{max-width:820px;margin:0 auto;padding:var(--f4) var(--f4) 108px;overflow-x:clip}
@media(max-width:600px){#formulario{padding:var(--f3) var(--f3) 108px}}

/* pasos */
.f-pasos{display:flex;gap:2px;background:#fff;border-bottom:1px solid var(--f-bd);overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:12;margin:0 calc(var(--f4)*-1) var(--f4);padding:0 var(--f2)}
.f-pasos::-webkit-scrollbar{display:none}
.f-paso{flex:1;min-width:88px;background:none;border:0;font:inherit;cursor:pointer;padding:var(--f2) var(--f1) 10px;border-bottom:3px solid transparent;text-align:center;min-height:var(--f-tap)}
.f-paso.on{border-bottom-color:var(--f-teal)}
.f-paso i{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border:1.5px solid var(--f-bd);border-radius:50%;font-size:.7rem;font-weight:700;color:var(--f-mu);font-style:normal;transition:.16s}
.f-paso.on i{background:var(--f-teal);color:#fff;border-color:var(--f-teal)}
.f-paso.hecho i{background:var(--f-ok);color:#fff;border-color:var(--f-ok)}
.f-paso b{display:block;font-size:.68rem;font-weight:600;color:var(--f-mu);margin-top:3px;white-space:nowrap}
.f-paso.on b,.f-paso.hecho b{color:var(--f-teal-d)}

/* resumen acumulado: encabeza cada paso */
.acum{background:#fff;border:1px solid var(--f-bd);border-radius:var(--f2);margin-bottom:6px;overflow:hidden}
.acums{margin-bottom:var(--f3)}
.acum__h{display:flex;align-items:center;padding:7px 11px;background:oklch(96.5% .012 190);border-bottom:1px solid oklch(92% .015 190)}
.acum__t{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--f-teal-d);font-weight:600}
.acum__e{margin-left:auto;font-size:.72rem;color:var(--f-teal);background:none;border:0;font-family:inherit;cursor:pointer;text-decoration:underline;min-height:32px;padding:0 var(--f1)}
/* UNA SOLA IDENTIDAD (criterio de gerencia): el resumen se lee como tabla -- etiqueta a la
   izquierda, valor a la derecha, una fila por dato. Antes eran chips en rejilla
   arriba Y una tabla al final del paso 3: dos formas de decir lo mismo. Gana la
   tabla, que es la que se leia mejor. Reusa .f-rl/.f-tot, ya definidos abajo. */
.acum__b{padding:6px 11px 9px}
.acum .f-rl{padding:5px 0}
.acum .f-tot{margin-top:4px}

.f-h1{font-size:1.3rem;margin:0 0 var(--f1);color:var(--f-teal-d);letter-spacing:-.02em;line-height:1.25}
@media(max-width:600px){.f-h1{font-size:1.14rem}}
.f-sub{margin:0 0 var(--f4);color:var(--f-mu);font-size:.85rem;line-height:1.5}
.f-card{background:#fff;border:1px solid var(--f-bd);border-radius:var(--f3);padding:var(--f3) var(--f4);margin-bottom:var(--f2)}
@media(max-width:600px){.f-card{padding:var(--f3)}}
.f-card h3{font-size:.92rem;margin:0 0 var(--f1);color:var(--f-teal-d)}
.f-hs{margin:0 0 var(--f3);font-size:.75rem;color:var(--f-mu);line-height:1.45}
.f-g2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--f3)}
@media(max-width:560px){.f-g2{grid-template-columns:1fr}}
/* El ultimo campo de una tarjeta arrastraba 10px de margen contra el borde:
   aire que nadie ve pero que se siente como tarjeta vacia. */
#formulario .f-card>label:last-child,#formulario .f-g2>label:last-child,#formulario .f-g2>label:nth-last-child(2){margin-bottom:0}
#fFac>:last-child{margin-bottom:0}
/* !! CASCADA !! Esta regla lleva un ID: especificidad (1,0,1). Aplastaba en
   silencio a .f-rad{display:flex} y .f-chk{display:flex}, que son (0,1,0):
   el radio caia solo en una linea, el nombre debajo y el documento mas abajo
   = 86px de alto para dos datos. El flex estaba escrito y nunca se aplico.
   Detectado 2026-07-16 midiendo getComputedStyle, no leyendo el CSS. */
#formulario label:not(.f-rad):not(.f-chk){display:block;margin-bottom:10px}
/* Mismo problema que la regla de arriba, un nivel mas abajo: aplastaba a
   .f-rad>span{display:flex} y el documento salia PEGADO al nombre
   ("...Ospina CardonaCC 71234567"). La excepcion va aqui, en la regla
   generica, no con un !important encima: si el componente tiene su propia
   maqueta, la regla base no debe tocarlo. */
#formulario label:not(.f-rad):not(.f-chk)>span{display:block;font-size:.76rem;font-weight:600;color:var(--f-teal-d);margin-bottom:var(--f1)}
.f-op{font-weight:400;color:#a3b5b5;font-size:.72rem;font-style:normal}
#formulario input,#formulario select,#formulario textarea{width:100%;padding:9px 11px;font:inherit;font-size:16px;border:1.5px solid var(--f-bd);border-radius:var(--f2);background:#fbfdfd;color:var(--f-tx);min-height:44px}
#formulario input:focus,#formulario select:focus,#formulario textarea:focus{outline:0;border-color:var(--f-teal);box-shadow:0 0 0 3px rgba(17,103,103,.12)}
#formulario input.mal,#formulario textarea.mal{border-color:#d98b8b;background:#fffafa}
.f-hint{display:block;font-size:14px;color:var(--f-mu);margin-top:var(--f1);font-style:normal;line-height:1.4}
/* El aviso de "no encontramos ese servicio" se pintaba con .f-hint-av, una clase que el JS
   invento y que NO EXISTIA aqui: se veia con el mismo gris y el mismo tamano que la pista
   neutra de al lado, o sea indistinguible. Lo hallo la auditoria adversarial del 01-sep, y es
   el tipo de fallo que una consola limpia JAMAS puede detectar: una clase inexistente no
   produce error. Toma el vocabulario de aviso que el fichero ya tenia. */
.f-hint-av{color:#9a5a12;font-weight:600}
.f-hint-priv{grid-column:1/-1;margin-top:2px;color:var(--f-mu);font-style:normal}



/* == COMPACTACIÓN DEL PASO 1 (criterio de gerencia 2026-07-22: "etiqueta al frente del campo,
   más listado y compacto; en celular la etiqueta vuelve arriba; textos un poco
   más pequeños"). Solo presentación: cero campos, textos legales o requeridos
   tocados. Guía UX (ui-ux-pro-max #8 Forms): etiquetas VISIBLES siempre (nunca
   placeholder-only) y ayuda junto al campo — ambas se conservan.
   Alcance: solo rejillas .f-g2 (identidad, facturación, paciente, cascada);
   textareas, radios, checks y soportes conservan su forma. ============ */
@media(min-width:700px){
  #formulario .f-g2 label:not(.f-rad):not(.f-chk):not(.f-drop){
    display:grid;grid-template-columns:126px minmax(0,1fr);align-items:center;
    column-gap:10px;margin-bottom:7px}
  #formulario .f-g2 label:not(.f-rad):not(.f-chk)>span{margin-bottom:0;line-height:1.3}
  #formulario .f-g2 .f-hint{grid-column:2;margin-top:2px}
  /* En lista, el campo puede ser más esbelto sin perder el mínimo táctil del
     puntero fino (aquí hay mouse; el táctil manda solo en móvil). */
  #formulario .f-g2 input,#formulario .f-g2 select{min-height:44px;padding:8px 10px;font-size:16px}
}
/* Tipografía un punto más serena en todo el asistente (sin tocar contraste). */
.f-h1{font-size:1.18rem}
.f-card h3{font-size:.86rem}
.f-hs{font-size:.72rem}
#formulario label:not(.f-rad):not(.f-chk)>span{font-size:.74rem}
.f-card{margin-bottom:var(--f2)}
@media(max-width:600px){.f-h1{font-size:1.08rem}}
/* Los vacios ("Aun no tienes casos previos") se pintan DENTRO de .f-rep, que es
   una rejilla de minmax(150px,1fr): el mensaje heredaba una columna de 150px y
   salia en tira, con la tarjeta vacia al lado. Ocupa la fila entera. */
.f-load{color:var(--f-mu);font-size:.8rem;padding:var(--f2) 0;display:block;grid-column:1/-1;line-height:1.5}

/* repetir */
.f-rep{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.f-repc{border:1.5px solid var(--f-bd);border-radius:var(--f2);padding:9px 11px;cursor:pointer;background:#fff;text-align:left;font-family:inherit;min-height:var(--f-tap);display:block}
.f-repc:hover{border-color:var(--f-teal);box-shadow:0 6px 16px rgba(17,103,103,.10)}
.f-rept{display:block;font-size:.8rem;font-weight:600;color:var(--f-teal-d);line-height:1.3}
.f-repm{display:block;font-size:.7rem;color:var(--f-mu);margin-top:2px}
.f-repd{display:block;font-size:.65rem;color:#a3b5b5;margin-top:var(--f1)}

/* catalogo */
.f-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--f3)}
/* En celular NO se envuelve: una sola fila que se desliza. Envolviendo, 9
   grupos ocupaban 5 o 6 filas y empujaban los servicios fuera de la pantalla:
   el odontologo tenia que pasar por encima del menu para llegar al menu. */
@media(max-width:600px){
  .f-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:calc(var(--f3)*-1);margin-right:calc(var(--f3)*-1);padding:2px var(--f3);scroll-snap-type:x proximity}
  .f-cats::-webkit-scrollbar{display:none}
  .f-cat{flex:none;scroll-snap-align:start}
}
/* 44px: minimo tactil real. Antes 34px, que en un dedo es un fallo de puntería. */
.f-cat{background:#fff;border:1.5px solid var(--f-bd);border-radius:20px;padding:8px var(--f3);font-size:.75rem;cursor:pointer;font-family:inherit;color:var(--f-teal-d);min-height:44px;white-space:nowrap;display:inline-flex;align-items:center}
.f-cat.on{background:var(--f-teal);color:#fff;border-color:var(--f-teal)}
.f-cat i{opacity:.55;font-style:normal;margin-left:3px}
.f-svs{display:grid;gap:var(--f2);max-height:min(46vh,380px);overflow:auto;-webkit-overflow-scrolling:touch}
.sv{display:flex;align-items:center;gap:10px;border:1.5px solid var(--f-bd);border-radius:var(--f2);padding:9px 11px;cursor:pointer;background:#fff;min-height:var(--f-tap);text-align:left;font-family:inherit;width:100%}
.sv.on{border-color:var(--f-teal);background:var(--f-teal-l)}
.sv__b{min-width:0;flex:1}
.sv__n{display:block;font-size:.83rem;font-weight:500;line-height:1.35;color:var(--f-tx)}
.sv__m{display:block;font-size:.67rem;color:var(--f-mu);margin-top:2px}
.sv__p{font-size:.83rem;font-weight:700;color:var(--f-teal-d);white-space:nowrap;flex:none}
.sv__a{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--f-bd);color:var(--f-mu);display:grid;place-items:center;font-size:.88rem;flex:none}
.sv.on .sv__a{background:var(--f-teal);border-color:var(--f-teal);color:#fff}

/* odontograma */
.f-odo{display:grid;grid-template-columns:1fr 1fr;gap:var(--f3)}
@media(max-width:640px){.f-odo{grid-template-columns:1fr}}
.f-arc{background:#fff;border:1px solid var(--f-bd);border-radius:var(--f3);padding:var(--f2)}
/* El arco es un BOTON cuando el trabajo es de arcada completa: se toca el arco
   en vez de contestar un radio Superior/Inferior/Ambas aparte (criterio de gerencia: "esa
   seleccion es redundante"). Cuando el trabajo va por diente, queda inerte y se
   ve como el rotulo de siempre. */
.f-arct{font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--f-mu);text-align:center;
  margin-bottom:var(--f1);width:100%;background:none;border:0;font-family:inherit;padding:4px;display:block}
.f-arct--sel{cursor:pointer;border:1.5px dashed var(--f-bd);border-radius:var(--f2);min-height:var(--f-tap)}
.f-arct--sel:hover{border-color:var(--f-teal);color:var(--f-teal-d)}
.f-arct--sel.on{background:var(--f-teal);border-color:var(--f-teal);border-style:solid;color:#fff;font-weight:700}
.f-arct--sel.on:after{content:" ✓"}
.f-arct:disabled{cursor:default}

/* El buscador es la SALIDA, no la puerta: la cascada Trabajo->Servicio cubre el
   camino comun. Va plegado para no competir con ella. */
.f-busca{background:#fff;border:1px solid var(--f-bd);border-radius:var(--f3);padding:var(--f3) var(--f4);margin-bottom:var(--f2)}
.f-busca summary{font-size:.78rem;color:var(--f-teal);cursor:pointer;min-height:32px;display:flex;align-items:center}
.f-busca .f-svs{margin-top:var(--f2)}
.f-precio{color:var(--f-teal-d)!important;font-weight:700}
/* "% completo": del formulario anterior. Dice cuanto falta sin que el
   odontologo lo adivine. */
.f-pc{font-size:.72rem;color:var(--f-mu);font-weight:600;white-space:nowrap;margin-right:auto}
@media(max-width:480px){.f-pc{display:none}}
#formulario input[readonly]{background:var(--f-lz);color:var(--f-mu);cursor:default}
.f-arcw{position:relative;width:100%}
.f-arcw img{width:100%;display:block;user-select:none;-webkit-user-drag:none}
.f-ht{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:translate(-50%,-50%);
  border:1.5px solid oklch(88% .012 190 / .9);border-radius:50%;
  background:oklch(99% .003 190 / .82);color:oklch(45% .03 190);
  font-size:clamp(.52rem,1.5vw,.62rem);font-weight:600;cursor:pointer;font-family:inherit;padding:0;
  min-width:20px;min-height:20px;line-height:1;transition:background .12s,color .12s,border-color .12s}
.f-ht:hover{border-color:var(--f-teal);background:oklch(94% .03 190);color:var(--f-teal-d)}
.f-ht.on{background:oklch(45% .09 190);border-color:oklch(38% .08 190);color:oklch(99% .002 190);font-weight:700}

/* controles */
.f-chks{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:6px}
.f-chk{display:flex;align-items:center;gap:var(--f2);border:1.5px solid var(--f-bd);border-radius:var(--f2);padding:8px 10px;cursor:pointer;font-size:.76rem;background:#fff;min-height:44px;margin:0;line-height:1.25}
.f-chk input{width:auto!important;min-height:0!important;flex:none;accent-color:var(--f-teal)}
.f-chk.on{border-color:var(--f-teal);background:var(--f-teal-l)}
.f-rad{display:flex;align-items:center;gap:var(--f2);border:1.5px solid var(--f-bd);border-radius:var(--f2);padding:9px 11px;cursor:pointer;margin-bottom:6px;background:#fff;min-height:44px}
.f-rad.on{border-color:var(--f-teal);background:var(--f-teal-l)}
.f-rad input{width:auto!important;min-height:0!important;flex:none;accent-color:var(--f-teal)}
/* El <span> heredaba margin-bottom y peso 600 de #formulario label>span. Con el
   flex ya vivo, eso solo estorba: aqui el peso lo pone el <b>. */
.f-rad>span{margin-bottom:0;font-weight:400;min-width:0;display:flex;align-items:baseline;gap:var(--f2);flex-wrap:wrap}
.f-rad b{font-size:.82rem;color:var(--f-teal-d);line-height:1.3}
/* El documento va AL LADO del nombre, no debajo: es un dato de apoyo, no un
   segundo renglon. Dos datos no justifican 86px de alto. */
.f-rad i{font-size:.7rem;color:var(--f-mu);font-style:normal;line-height:1.3}

.f-av{border-radius:var(--f3);padding:var(--f3);font-size:.78rem;line-height:1.5;margin-bottom:var(--f3)}
.f-av--i{background:var(--f-teal-l);border:1px solid #d6e7e7;color:var(--f-teal-d)}
.f-av--w{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.f-av .f-mini{display:block;margin:8px 0 0;color:inherit;text-align:left}

.f-rl{display:flex;justify-content:space-between;gap:var(--f3);padding:7px 0;border-bottom:1px dashed var(--f-bd);font-size:.8rem}
.f-rl span{color:var(--f-mu);flex:none}
.f-rl b{color:var(--f-teal-d);text-align:right;word-break:break-word}
.f-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--f3);padding-top:var(--f3);border-top:2px solid var(--f-bd)}
.f-tot span{font-size:.78rem;color:var(--f-mu)}
.f-tot b{font-size:1.3rem;color:var(--f-teal-d)}

.f-firma{width:100%;max-width:min(340px,88vw);aspect-ratio:1/1;margin:0 auto;border:2px dashed var(--f-bd);border-radius:var(--f3);background:#fbfdfd;touch-action:none;display:block;cursor:crosshair}
.f-fbar{display:flex;align-items:center;gap:var(--f3);margin-top:var(--f2)}
.f-mini{margin-left:auto;font:inherit;font-size:.74rem;color:var(--f-teal);background:none;border:0;text-decoration:underline;cursor:pointer;min-height:44px}

.f-pie{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--f-bd);padding:var(--f3) var(--f4);padding-bottom:calc(var(--f3) + env(safe-area-inset-bottom));display:flex;gap:var(--f2);align-items:center;z-index:14;box-shadow:0 -4px 16px rgba(14,76,76,.07)}
.f-prog{position:absolute;top:0;left:0;height:3px;background:var(--f-teal);transition:width .3s}
.f-btn{font:inherit;font-size:.84rem;font-weight:600;padding:0 var(--f5);height:var(--f-tap);border-radius:var(--f2);border:1.5px solid var(--f-bd);background:#fff;color:var(--f-teal-d);cursor:pointer;white-space:nowrap}
.f-btn--p{background:var(--f-teal);color:#fff;border-color:var(--f-teal);margin-left:auto}
.f-btn--p:disabled{opacity:.6}
@media(max-width:520px){.f-btn{flex:1;padding:0 var(--f3)}}

/* ORD-116: un pequeño "carrito clínico" mantiene visibles todos los trabajos
   sin convertir el móvil en una página larga. */
.f-items{margin-bottom:var(--f4)}
.f-items__tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 8px;scroll-snap-type:x proximity}
.f-itemtab{min-width:150px;min-height:56px;padding:8px 10px;border:1.5px solid var(--f-bd);border-radius:12px;background:#fff;color:var(--f-teal-d);font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start}
.f-itemtab.on{border-color:var(--f-teal);box-shadow:0 0 0 3px rgba(17,103,103,.10);background:var(--f-lz)}
.f-itemtab b,.f-itemtab span{display:block}.f-itemtab b{font-size:.78rem}.f-itemtab span{font-size:.7rem;color:var(--f-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.f-items__acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.f-btn--add{color:var(--f-teal);border-color:var(--f-teal);padding-inline:14px}
.f-mini--danger{color:#a33b32}
.f-itemres{border-left:4px solid var(--f-teal)}
.f-itemres__h{display:flex;align-items:center;font-weight:700;color:var(--f-teal-d);margin-bottom:8px}
.f-fechas{display:flex!important;gap:6px;margin-top:7px}
.f-fechas button{min-height:44px;min-width:58px;border:1px solid var(--f-bd);border-radius:9px;background:#fff;color:var(--f-teal-d);font:inherit;font-size:16px;cursor:pointer}
.f-legal{border:1px solid var(--f-bd);border-radius:12px;background:#fbfdfd}
.f-legal summary{min-height:44px;display:flex;align-items:center;padding:8px 12px;color:var(--f-teal-d);font-weight:600;cursor:pointer}
.f-legal__c{padding:0 10px 10px}

@media(max-width:600px){
  #formulario :is(button:not(.f-ht),input,select,textarea,label,span,p,em,summary,dt,dd,b,i){font-size:16px}
  .f-pasos{top:0;margin-bottom:18px}
  .f-paso{min-width:76px;min-height:52px;padding:6px 3px 8px}
  .f-paso b,.f-itemtab b,.f-itemtab span,.f-hs,.f-hint,.f-chk,.f-rad b,.f-rad i,.f-rl,.f-mini,.f-btn{font-size:16px}
  .f-paso i{width:26px;height:26px;font-size:16px}
  .f-sub{font-size:16px}
  .f-items__acciones{display:grid;grid-template-columns:1fr}
  .f-items__acciones .f-mini{min-height:44px;text-align:left;margin:0}
  .f-btn--add{width:100%;height:auto;min-height:52px;white-space:normal}
  .f-card h3{font-size:18px}
  .f-pie{padding-inline:12px}
}

.f-aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;background:#7f1d1d;color:#fff;padding:10px var(--f4);border-radius:var(--f2);font-size:.8rem;z-index:20;display:none;max-width:90vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.f-ok{text-align:center}
.f-okc{width:56px;height:56px;border-radius:50%;background:#e7f5ef;color:var(--f-ok);display:grid;place-items:center;font-size:1.7rem;margin:0 auto var(--f3)}


/* Los numeros del odontograma se leen SIEMPRE: el odontologo tiene que poder
   localizar el 24 antes de tocarlo, no despues. */
.f-arc{padding:6px}
.f-odo{gap:var(--f2)}

/* ── Soportes que exigen lo que prometen ──────────────────────────────────
   Marcar "Escaneo digital" abre la subida del STL. Sin esto, el taller espera
   un archivo que nunca llega y lo descubre tarde. */
.f-sod{margin-top:8px;padding:10px 11px;background:oklch(98.5% .006 190);border:1px solid var(--f-bd);border-radius:var(--f2)}
.f-sod__t{font-size:.78rem;font-weight:600;color:var(--f-teal-d);margin-bottom:2px}
.f-sod__t i{display:block;font-size:.7rem;font-weight:400;font-style:normal;color:var(--f-mu);margin-top:1px}
.f-drop{display:block;border:1.5px dashed oklch(85% .02 190);border-radius:var(--f2);padding:10px;text-align:center;
  font-size:.76rem;color:var(--f-teal);cursor:pointer;background:oklch(99% .004 190);min-height:44px;transition:border-color .14s,background .14s}
.f-drop:hover{border-color:var(--f-teal);background:oklch(96% .02 190)}
/* Un archivo por fila, con su descripcion: "IMG_4821.jpg" no le dice nada al
   tecnico que fabrica. */
.f-arch{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#fff;border:1px solid var(--f-bd);border-radius:6px;margin-bottom:4px}
.f-arch__n{font-size:.7rem;color:var(--f-mu);max-width:32%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.f-arch__d{flex:1;min-height:44px!important;padding:5px 8px!important;font-size:.76rem!important}
.f-arch__x{background:none;border:0;color:oklch(60% .09 25);cursor:pointer;font-size:.8rem;padding:4px 6px;flex:none;min-width:44px;min-height:44px}

/* Firma CUADRADA: en el celular se firma con el dedo y en una franja
   rectangular no cabe el trazo. */
.f-fbar{justify-content:center}

/* ============================== V3 (redesign/19) ==============================
   F2: error EN el campo. F1: primera relación. F3: motion en 3 variantes
   conmutables por clase de body (f-motion-a/b/c) para elección de gerencia. */
.f-err{display:block;margin-top:4px;font-size:14px;line-height:1.35;color:#b3261e;font-style:normal;font-weight:600}
#formulario select.mal{border-color:#d98b8b;background:#fffafa}
#fAnPri.mal{outline:2px solid #d98b8b;outline-offset:6px;border-radius:10px}
/* Capacidad declarada: mismo marcado de error que #fAnPri. Es un grupo de
   radios, no un input: sin esta regla marcaError() ponía la clase y NO SE VEÍA
   NADA (la regla de .mal de arriba solo pinta input/textarea/select). */
#fCap.mal{outline:2px solid #d98b8b;outline-offset:6px;border-radius:10px}
.f-pri{margin-top:12px;padding-top:12px;border-top:1px dashed var(--f-bd)}
.f-rutz{margin-top:8px}
.f-rutz .f-drop{margin:0}
.f-pri__q{display:block;font-size:.85rem;font-weight:700;color:var(--f-teal-d);margin-bottom:8px}
.f-rads{display:grid;gap:8px}
/* El soporte RUT obligatorio en primer caso lo DICE, no lo insinúa */
.f-chk.req::after{content:"obligatorio en tu primer caso";display:block;font-size:14px;color:#9a3412;font-weight:600;margin-top:2px}
/* Asentimiento del campo válido (solo variante B la muestra) */
.f-motion-b input.bien,.f-motion-b textarea.bien{border-color:#1a7f5a;box-shadow:0 0 0 3px rgba(26,127,90,.10);transition:border-color .25s,box-shadow .25s}

@media (prefers-reduced-motion: no-preference){
  /* Entrada del paso: A y B con deslizamiento+stagger; C solo fade. Solo
     transform/opacity (principios de pulido.css / Emil). */
  .f-motion-a #fWrap.f-anim>*,.f-motion-b #fWrap.f-anim>*{animation:fV3in .26s cubic-bezier(.22,1,.36,1) both}
  .f-motion-a #fWrap.f-anim>*:nth-child(2),.f-motion-b #fWrap.f-anim>*:nth-child(2){animation-delay:40ms}
  .f-motion-a #fWrap.f-anim>*:nth-child(3),.f-motion-b #fWrap.f-anim>*:nth-child(3){animation-delay:80ms}
  .f-motion-a #fWrap.f-anim>*:nth-child(4),.f-motion-b #fWrap.f-anim>*:nth-child(4){animation-delay:120ms}
  .f-motion-a #fWrap.f-anim>*:nth-child(5),.f-motion-b #fWrap.f-anim>*:nth-child(5){animation-delay:160ms}
  .f-motion-a #fWrap.f-anim>*:nth-child(n+6),.f-motion-b #fWrap.f-anim>*:nth-child(n+6){animation-delay:200ms}
  .f-motion-c #fWrap.f-anim>*{animation:fV3fade .18s ease-out both}
  /* El error aparece, no se estampa */
  .f-err{animation:fV3in .18s ease-out}
  .f-motion-a #fAviso,.f-motion-b #fAviso{animation:fV3in .2s ease-out}
  /* Press honesto en lo tocable (A y B) */
  .f-motion-a .f-chk,.f-motion-b .f-chk,.f-motion-a .f-rad,.f-motion-b .f-rad,
  .f-motion-a .f-repc,.f-motion-b .f-repc,.f-motion-a .f-arct,.f-motion-b .f-arct{transition:transform .12s cubic-bezier(.22,1,.36,1)}
  .f-motion-a .f-chk:active,.f-motion-b .f-chk:active,.f-motion-a .f-rad:active,.f-motion-b .f-rad:active,
  .f-motion-a .f-repc:active,.f-motion-b .f-repc:active,.f-motion-a .f-arct:active,.f-motion-b .f-arct:active{transform:scale(.97)}
  /* El campo con error sacude UNA vez, corto (A y B) */
  .f-motion-a #formulario .mal,.f-motion-b #formulario .mal{animation:fV3shake .3s ease-out}
  /* B: la barra de progreso se DESLIZA al hito (en A/C salta, más serena) */
  .f-motion-b #fProg{transition:width .35s cubic-bezier(.22,1,.36,1)}
}
@keyframes fV3in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fV3fade{from{opacity:0}to{opacity:1}}
@keyframes fV3shake{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}