*{box-sizing:border-box;}
/* [hidden] pierde contra cualquier display explícito (.firma es flex): sin esto
   el formulario de firma seguía visible al lado del acuse de "ya firmado". */
[hidden]{display:none !important;}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:var(--p-0);line-height:1.65;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
.hoja{
  max-width:var(--ancho);margin:0 auto;
  padding:clamp(1.5rem,5vw,3rem) clamp(1.15rem,4.5vw,2rem) 4rem;
  display:flex;flex-direction:column;gap:clamp(1.75rem,4.5vw,2.5rem);
}
.estado-carga{color:var(--texto-3);font-size:var(--p--1);}
.titulo{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:600;font-size:clamp(2rem,7vw,2.9rem);line-height:1.08;
  letter-spacing:-.012em;margin:0;text-wrap:balance;
}
.membrete{display:flex;flex-direction:column;gap:.9rem;}
.tipo-doc{
  font-size:var(--p--2);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--texto-3);
}
.entrada{margin:0;max-width:36rem;color:var(--texto-2);}
.entrada strong{color:var(--texto);font-weight:600;}
.ayuda{margin:0;font-size:var(--p--1);color:var(--texto-2);}

.bloque{display:flex;flex-direction:column;gap:1rem;min-width:0;}
.rubro{display:flex;align-items:baseline;gap:.75rem;padding-bottom:.65rem;border-bottom:1px solid var(--linea);}
.rubro .orden{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem;font-weight:700;
  line-height:1;color:var(--naranja);font-variant-numeric:tabular-nums;flex:none;
}
.rubro h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.3rem,4vw,1.55rem);font-weight:600;line-height:1.2;margin:0;flex:1;
}

/* zona de subida — objetivo táctil grande, sin depender de arrastrar */
.zona{display:flex;flex-direction:column;gap:.45rem;min-width:0;}
.soltar{
  display:flex;flex-direction:column;gap:.25rem;
  padding:1.15rem 1.1rem;min-height:5.5rem;justify-content:center;
  border:1.5px dashed var(--linea);border-radius:var(--radio);
  background:var(--superficie);cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.soltar:hover,.soltar:focus-within{border-color:var(--naranja);background:var(--superficie-2);}
.soltar:focus-within{outline:2px solid var(--naranja);outline-offset:2px;}
.soltar input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.soltar-titulo{font-weight:600;font-size:var(--p-0);}
.soltar-pie{font-size:var(--p--1);color:var(--texto-2);}

.aviso{margin:0;font-size:var(--p--1);min-height:1.2em;}
.aviso.trabajando{color:var(--texto-2);}
.aviso.bien{color:var(--ok);font-weight:500;}
.aviso.mal{color:var(--alerta);font-weight:500;}

.piezas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.pieza{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding:.6rem 0;border-bottom:1px solid var(--linea-suave);font-size:var(--p--1);min-width:0;
}
.pieza:last-child{border-bottom:none;}
.pieza-tipo{
  flex:none;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.15rem .4rem;border-radius:2px;
  background:rgba(242,145,0,.14);color:var(--naranja);border:1px solid rgba(242,145,0,.32);
}
.pieza-nombre{flex:1;min-width:0;overflow-wrap:anywhere;}
.pieza-meta{flex:none;color:var(--texto-3);font-size:var(--p--2);}

.acuerdo{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(1rem,3.5vw,1.4rem);max-height:19rem;overflow-y:auto;
  font-size:var(--p--1);color:var(--texto-2);
}
.acuerdo h3{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.1rem;font-weight:600;
  color:var(--texto);margin:1.1rem 0 .4rem;
}
.acuerdo h3:first-child{margin-top:0;}
.acuerdo p{margin:0 0 .6rem;}
.acuerdo ul{margin:0 0 .6rem;padding-left:1.1rem;}
.acuerdo li{margin-bottom:.25rem;}

.firma{display:flex;flex-direction:column;gap:.9rem;}
.campo{display:flex;flex-direction:column;gap:.3rem;}
.campo .clave{font-size:var(--p--2);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);}
.campo input{
  font:inherit;padding:.7rem .8rem;color:var(--texto);
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
}
.campo input:focus-visible{outline:2px solid var(--naranja);outline-offset:1px;border-color:var(--naranja);}
.casilla{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--p--1);color:var(--texto-2);cursor:pointer;}
.casilla input{flex:none;width:1.15rem;height:1.15rem;margin:.18rem 0 0;accent-color:var(--naranja);}
.boton{
  font:inherit;font-weight:600;padding:.8rem 1.4rem;width:fit-content;
  color:var(--papel);background:var(--carbon);
  border:none;border-radius:var(--radio);cursor:pointer;
}
:root[data-theme="dark"] .boton{color:var(--carbon);background:var(--texto);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .boton{color:var(--carbon);background:var(--texto);}
}
.boton:hover{background:var(--naranja);color:#2B2A26;}
.boton:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;}

.firma-hecha{
  display:flex;gap:.85rem;align-items:center;
  padding:1rem 1.15rem;border-radius:var(--radio);
  background:var(--superficie);border:1px solid var(--linea);border-left:3px solid var(--ok);
}
.firma-hecha .palomita{
  flex:none;width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-content:center;font-size:.85rem;font-weight:700;
  background:var(--ok);color:var(--papel);
}
.firma-hecha b{display:block;font-size:var(--p-0);}
.firma-hecha span:not(.palomita){font-size:var(--p--1);color:var(--texto-2);}

.cierre{padding-top:1.5rem;border-top:1px solid var(--linea);}
.pie{margin:0;font-size:var(--p--2);color:var(--texto-3);}

@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important;}}

/* ═══ marca del tenant ═══ */
.marca-logo{width:118px;height:auto;display:block;margin-bottom:.35rem;}
:root[data-theme="dark"] .marca-logo{filter:brightness(1.28) contrast(1.04);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marca-logo{filter:brightness(1.28) contrast(1.04);}
}
.entrada.evento{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,3.2vw,1.2rem);color:var(--texto);margin-top:-.25rem;
}

/* ═══ avance — el encargo se siente vivo, no un formulario ═══ */
.avance{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem;}
.avance-barra{
  height:.32rem;border-radius:999px;overflow:hidden;
  background:var(--linea-suave);border:1px solid var(--linea);
}
.avance-relleno{
  display:block;height:100%;width:0;background:var(--naranja);
  border-radius:999px;transition:width .45s ease;
}
.avance-texto{
  margin:0;font-size:var(--p--2);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-3);
}

/* ═══ etiquetas de necesario/opcional ═══ */
.soltar-titulo{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.soltar-titulo .req,.soltar-titulo .opc{
  font-size:.58rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.12rem .38rem;border-radius:2px;flex:none;
}
.soltar-titulo .req{background:rgba(242,145,0,.14);color:var(--naranja);border:1px solid rgba(242,145,0,.32);}
.soltar-titulo .opc{color:var(--texto-3);border:1px solid var(--linea);}

.zona-lista{
  font-size:var(--p--2);font-weight:600;color:var(--ok);letter-spacing:.03em;
}

/* ═══ la zona ya cubierta se ve resuelta, no pendiente ═══ */
.zona:has(.zona-lista:not([hidden])) .soltar{
  border-style:solid;border-color:var(--ok);background:var(--superficie-2);
}

.firma-xst{
  margin-top:.5rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-3);opacity:.75;
}
.firma-xst span{font-weight:700;}

/* ═══ el saludo pesa: es un recibimiento, no un encabezado ═══ */
.membrete{text-align:center;align-items:center;}
.membrete .titulo{font-size:clamp(2.2rem,8.5vw,3.2rem);line-height:1.02;}
.membrete .tipo-doc{margin-top:.2rem;}
.entrada.guia,.entrada.evento{text-align:left;}
.membrete .avance{width:100%;}

/* ═══ el propósito: lo que convierte el trámite en un motivo ═══ */
.proposito{
  background:var(--superficie);border:1px solid var(--linea);
  border-left:3px solid var(--naranja);border-radius:var(--radio);
  padding:clamp(1.15rem,3.5vw,1.5rem);display:flex;flex-direction:column;gap:.55rem;
  box-shadow:var(--sombra);
}
.proposito-clave{
  font-size:var(--p--2);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--naranja);
}
.proposito p{margin:0;font-size:var(--p--1);color:var(--texto-2);}
.proposito strong{color:var(--texto);font-weight:600;}

.cierre-nota{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.1rem,3.5vw,1.3rem);font-style:italic;line-height:1.45;
  color:var(--texto);margin:0 0 .9rem;max-width:32rem;
}

/* ═══ el logo manda: grande, sin aro, con su propia luz ═══ */
.marca-zona{
  position:relative;display:flex;justify-content:center;
  padding:.6rem 0 .2rem;isolation:isolate;
}
/* halo suave en el naranja de la marca — da peso sin encerrar el logo */
.marca-zona::before{
  content:"";position:absolute;top:50%;left:50%;
  width:min(340px,86vw);height:190px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgba(242,145,0,.20) 0%, rgba(242,145,0,.09) 38%, transparent 70%);
  z-index:-1;pointer-events:none;
}
.marca-logo{
  width:min(210px,58vw);height:auto;display:block;margin:0;
}
:root[data-theme="dark"] .marca-logo{filter:brightness(1.3) contrast(1.05);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marca-logo{filter:brightness(1.3) contrast(1.05);}
}

/* ═══ el horizonte: la luz que respira, en el naranja de Más Alto ═══ */
.horizonte{
  position:relative;height:3px;width:100%;margin:.9rem 0 .3rem;
  border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,
    transparent 0%, var(--linea) 22%, var(--linea) 78%, transparent 100%);
}
.horizonte span{
  position:absolute;top:0;bottom:0;left:0;width:45%;
  border-radius:999px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(242,145,0,.7) 22%,
    #FFB43A 46%,
    #F29100 54%,
    rgba(242,145,0,.7) 78%,
    transparent 100%);
  box-shadow:0 0 10px rgba(242,145,0,.75), 0 0 22px rgba(242,145,0,.35);
  filter:blur(.2px);
  animation:horizonte-cruza 6.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes horizonte-cruza{
  0%   {transform:translateX(-105%);opacity:0;}
  15%  {opacity:1;}
  85%  {opacity:1;}
  100% {transform:translateX(228%);opacity:0;}
}
/* quieto también se ve intencional: un amanecer detenido, no una barra rota */
@media (prefers-reduced-motion: reduce){
  .horizonte span{
    animation:none;left:50%;transform:translateX(-50%);width:62%;opacity:.9;
  }
}

/* la barra de avance recoge la misma luz cuando ya hay progreso */
.avance-relleno{position:relative;overflow:hidden;}
.avance-relleno::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:avance-brilla 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .avance-relleno::after{animation:none;opacity:0;} }
@keyframes avance-brilla{
  0%{transform:translateX(-100%);} 60%,100%{transform:translateX(300%);}
}

/* ═══ la cita que abre: le da alma antes de pedir nada ═══ */
.cita{
  border-left:3px solid var(--naranja);padding:.3rem 0 .3rem 1.1rem;margin:.4rem 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(1.25rem,4.2vw,1.6rem);line-height:1.32;color:var(--texto);
  text-align:left;align-self:stretch;
}

/* ═══ las cuatro piezas mínimas: quita el peso de "esto es largo" ═══ */
.prioridad{
  background:var(--superficie);border:1px solid var(--linea);
  border-left:3px solid var(--naranja);border-radius:var(--radio);
  padding:clamp(1.1rem,3.5vw,1.45rem);display:flex;flex-direction:column;gap:.75rem;
  box-shadow:var(--sombra);
}
.prioridad-clave{
  font-size:var(--p--2);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--naranja);
}
.prioridad p{margin:0;font-size:var(--p--1);color:var(--texto-2);}
.cuatro{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;}
.cuatro li{
  display:flex;gap:.6rem;align-items:baseline;
  font-size:var(--p--1);color:var(--texto);font-weight:600;
}
.cuatro .n{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;
  color:var(--naranja);flex:none;font-size:1rem;
}

/* rótulo de para qué sirve cada sección */
.rubro .uso{
  font-size:var(--p--2);color:var(--texto-3);letter-spacing:.05em;
  text-transform:uppercase;flex:none;
}

/* ═══ barra de progreso por zona ═══ */
.barra{
  height:.25rem;border-radius:999px;overflow:hidden;
  background:var(--linea-suave);border:1px solid var(--linea);
}
.barra-relleno{
  display:block;height:100%;width:0;background:var(--naranja);
  border-radius:999px;transition:width .3s ease;
}

/* ═══ las piezas, con su miniatura ═══ */
.pieza{
  display:flex;align-items:center;gap:.8rem;
  padding:.7rem 0;border-bottom:1px solid var(--linea-suave);min-width:0;
}
.pieza:last-child{border-bottom:none;}
.pieza.quitando{opacity:.4;pointer-events:none;}
.pieza-media{
  flex:none;width:3.1rem;height:3.1rem;border-radius:4px;overflow:hidden;
  background:var(--superficie-2);border:1px solid var(--linea);
  display:grid;place-items:center;
}
.pieza-media img{width:100%;height:100%;object-fit:cover;display:block;}
.pieza-media.doc{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.56rem;font-weight:700;letter-spacing:.06em;color:var(--texto-3);
}
.pieza-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
.pieza-cuerpo b{font-size:var(--p--1);font-weight:600;overflow-wrap:anywhere;}
.pieza-cuerpo span{font-size:var(--p--2);color:var(--texto-3);}
.pieza-quitar{
  flex:none;font:inherit;font-size:var(--p--2);font-weight:600;
  color:var(--texto-3);background:none;border:1px solid var(--linea);
  border-radius:var(--radio);padding:.3rem .6rem;cursor:pointer;
}
.pieza-quitar:hover{color:var(--alerta);border-color:var(--alerta);}
.pieza-quitar:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;}

/* ═══ el acuse: responde «¿ya quedó?» sin que lo pregunte ═══ */
.guardado{
  display:flex;align-items:center;gap:.6rem;
  padding:.75rem .9rem;border-radius:var(--radio);
  background:var(--superficie);border:1px solid var(--linea);
  border-left:3px solid var(--ok);
  font-size:var(--p--1);font-weight:600;color:var(--texto);
}
.guardado-icono{
  flex:none;width:1.3rem;height:1.3rem;border-radius:50%;
  background:var(--ok);color:var(--papel);
  display:grid;place-content:center;font-size:.7rem;font-weight:700;
}

/* ═══ créditos ═══ */
.creditos{
  display:flex;flex-direction:column;gap:.3rem;
  padding-top:1.1rem;margin-top:.4rem;border-top:1px solid var(--linea-suave);
}
.creditos-marca{
  font-size:var(--p--1);font-weight:700;color:var(--texto-2);
  text-decoration:none;letter-spacing:.02em;width:fit-content;
}
.creditos-marca:hover{color:var(--naranja);}
.creditos-linea{margin:0;font-size:var(--p--2);color:var(--texto-3);}
.creditos-linea a{color:var(--texto-2);text-decoration:none;font-weight:600;}
.creditos-linea a:hover{color:var(--naranja);}
.creditos a:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;border-radius:2px;}

/* ── La puerta del ponente ──────────────────────────────────────────────
   Es lo primero que ve. Tiene que sentirse recibimiento, no control de
   acceso: por eso el código es grande, espaciado y fácil de teclear con
   el pulgar — la audiencia real ronda los 60 y entra desde el teléfono. */
.estado-pin{ display:flex; flex-direction:column; gap:1.1rem; }

.pin-form{
  display:flex; flex-direction:column; gap:.85rem;
  margin:.6rem 0 .3rem; max-width:22rem;
}
.pin-label{
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tenue,#8A8375); font-weight:600;
}
.pin-input{
  font-family:inherit; font-size:2.1rem; font-weight:600;
  letter-spacing:.42em; text-indent:.42em;   /* el indent compensa el hueco final */
  text-align:center; padding:.75rem .6rem;
  color:var(--ink,#2B2A26); background:var(--campo,#FFFFFF);
  border:2px solid var(--linea,#DCD5C7); border-radius:12px;
  width:100%; box-sizing:border-box;
}
.pin-input:focus{
  outline:none; border-color:var(--naranja,#F29100);
  box-shadow:0 0 0 4px rgba(242,145,0,.16);
}
.pin-boton{
  font-family:inherit; font-size:1.02rem; font-weight:600;
  padding:.85rem 1.2rem; border:none; border-radius:12px; cursor:pointer;
  color:#FFFFFF; background:var(--naranja,#F29100);
  transition:opacity .15s ease;
}
.pin-boton:hover{ opacity:.9; }
.pin-boton:disabled{ opacity:.6; cursor:default; }
.pin-boton:focus-visible{ outline:3px solid var(--naranja,#F29100); outline-offset:3px; }

.pin-aviso{ font-size:.92rem; color:var(--alarma,#B3261E); min-height:1.35em; margin:0; }
.tenue{ color:var(--tenue,#8A8375); font-size:.92rem; }

@media (prefers-reduced-motion:reduce){ .pin-boton{ transition:none; } }