/* Firma de actas - Serviagro. Tokens y estilos (mobile-first). El panel admin (Task 9) reutiliza los :root. */
:root {
  --lila-950: #1e1233; --lila-900: #2d1b4e; --lila-700: #5b3fa0; --lila-600: #6d4fbd;
  --lila-500: #8b6fd4; --lila-300: #c4b3ea; --lila-200: #ddd3f4; --lila-100: #efe9fb; --lila-50: #f8f5fe;

  --color-fondo: var(--lila-50);
  --color-superficie: #ffffff;
  --color-superficie-2: var(--lila-100);
  --color-texto: var(--lila-950);
  --color-texto-suave: var(--lila-700);
  --color-borde: var(--lila-200);
  --color-borde-fuerte: var(--lila-500);
  --color-primario: var(--lila-600);
  --color-primario-hover: var(--lila-700);
  --color-primario-texto: #ffffff;
  --color-acento: var(--lila-500);
  --color-foco: var(--lila-600);
  --color-exito: #1b6b2f;
  --color-exito-fondo: #e3f4e7;
  --color-error: #b3261e;
  --color-error-fondo: #fdecea;
  --color-aviso: #7a4b00;
  --color-aviso-fondo: #fdf1dc;
  --sombra: 0 1px 2px rgba(45,27,78,.08), 0 8px 24px rgba(45,27,78,.10);

  --radio: 16px; --radio-sm: 12px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: var(--lila-950);
    --color-superficie: var(--lila-900);
    --color-superficie-2: #3a2562;
    --color-texto: var(--lila-50);
    --color-texto-suave: var(--lila-300);
    --color-borde: #4a3478;
    --color-borde-fuerte: var(--lila-300);
    --color-primario: var(--lila-300);
    --color-primario-hover: var(--lila-200);
    --color-primario-texto: var(--lila-950);
    --color-acento: var(--lila-300);
    --color-foco: var(--lila-200);
    --color-exito: #7fd88f;
    --color-exito-fondo: #17361f;
    --color-error: #ffb4ab;
    --color-error-fondo: #4a1713;
    --color-aviso: #f5c97a;
    --color-aviso-fondo: #3d2a08;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--fuente); font-size: 1rem; line-height: 1.5;
  color: var(--color-texto); background: var(--color-fondo);
  background-image: radial-gradient(120% 60% at 50% -10%, var(--color-superficie-2), transparent 70%);
  background-repeat: no-repeat;
}
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; border-radius: 6px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg { display: block; flex: none; }

.app { max-width: 520px; margin: 0 auto; padding: 16px 16px 40px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .01em; }
.marca-logo { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--lila-50); border: 1px solid var(--lila-200); box-shadow: 0 1px 3px rgba(45,27,78,.18); display: grid; place-items: center; animation: surge .4s var(--ease) both; }
.marca-logo img { display: block; width: 30px; height: 30px; }
@keyframes surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.marca small { display: block; font-weight: 500; color: var(--color-texto-suave); font-size: .8rem; line-height: 1.1; }

/* Indicador de pasos */
.pasos-caja { position: relative; margin: 20px 0 18px; }
.pasos { list-style: none; display: flex; margin: 0; padding: 0; }
.pasos-caja::before, .pasos-caja .barra { content: ""; position: absolute; top: 16px; left: 12.5%; height: 3px; border-radius: 2px; }
.pasos-caja::before { right: 12.5%; background: var(--color-borde); }
.pasos-caja .barra { background: var(--color-acento); width: 0; transition: width .6s var(--ease); }
.pasos li { flex: 1; text-align: center; font-size: .78rem; font-weight: 600; color: var(--color-texto-suave); position: relative; }
.pasos .nodo { width: 33px; height: 33px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-superficie); border: 2px solid var(--color-borde); font-size: .85rem; transition: all .4s var(--ease); position: relative; }
.pasos .nodo svg { width: 16px; height: 16px; display: none; }
.pasos li[aria-current="step"] { color: var(--color-texto); }
.pasos li[aria-current="step"] .nodo { border-color: var(--color-primario); background: var(--color-primario); color: var(--color-primario-texto); transform: scale(1.12); box-shadow: 0 0 0 5px var(--color-borde); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primario) 22%, transparent); }
.pasos li.hecho .nodo { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-primario-texto); }
.pasos li.hecho .nodo b { display: none; }
.pasos li.hecho .nodo svg { display: block; }

/* Tarjetas / pasos */
.tarjeta { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 20px 18px; box-shadow: var(--sombra); }
.paso.entra { animation: entra .5s var(--ease) both; }
.paso.entra.atras { animation-name: entraAtras; }
@keyframes entra { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes entraAtras { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
h1, h2 { margin: 0 0 6px; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 1.55rem; } h2 { font-size: 1.3rem; }
.sub { margin: 0 0 18px; color: var(--color-texto-suave); }

/* Pestanas */
.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--color-superficie-2); border-radius: 14px; margin-bottom: 8px; }
.pestana { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--color-texto-suave); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .25s var(--ease); }
.pestana[aria-selected="true"] { background: var(--color-superficie); color: var(--color-texto); box-shadow: 0 1px 4px rgba(45,27,78,.18); }

/* Campos */
label, .etiqueta { display: block; font-weight: 600; font-size: .92rem; margin: 16px 0 6px; }
.ayuda { font-weight: 400; color: var(--color-texto-suave); font-size: .85rem; }
.campo { width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 1.1rem; letter-spacing: .04em; color: var(--color-texto);
  background: var(--color-fondo); border: 2px solid var(--color-borde); border-radius: var(--radio-sm); transition: border-color .2s, box-shadow .2s; }
.campo:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 4px var(--color-borde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primario) 25%, transparent); }
.campo[aria-invalid="true"] { border-color: var(--color-error); }
.pista { min-height: 1.3em; margin: 4px 0 0; font-size: .82rem; color: var(--color-texto-suave); }
.pista.mal { color: var(--color-error); }

/* PIN con puntos */
.pin { display: flex; align-items: center; gap: 8px; }
.pin-zona { position: relative; flex: 1; min-height: 56px; border: 2px solid var(--color-borde); border-radius: var(--radio-sm); background: var(--color-fondo); display: flex; align-items: center; justify-content: center; gap: 12px; transition: border-color .2s, box-shadow .2s; }
.pin-zona:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 4px var(--color-borde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primario) 25%, transparent); }
.pin-zona input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: text; }
.punto { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-borde-fuerte); display: grid; place-items: center; font-weight: 700; font-size: .95rem; line-height: 1; transition: transform .25s var(--ease), background .2s; }
.punto.lleno { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-primario-texto); animation: pop .3s var(--ease); }
.punto.visible { width: 26px; height: 30px; border-radius: 8px; }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.icono-btn { width: 52px; height: 56px; flex: none; display: grid; place-items: center; border-radius: var(--radio-sm); border: 2px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto); cursor: pointer; }
.icono-btn[aria-pressed="true"] { background: var(--color-superficie-2); border-color: var(--color-borde-fuerte); }

/* Botones */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; margin-top: 20px; padding: 12px 18px; font: inherit; font-size: 1.05rem; font-weight: 700;
  color: var(--color-primario-texto); background: var(--color-primario); border: 2px solid transparent; border-radius: var(--radio-sm); cursor: pointer; text-decoration: none;
  transition: transform .15s var(--ease), background .2s, opacity .2s, box-shadow .2s; box-shadow: var(--sombra); box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primario) 35%, transparent); }
.btn:hover:not(:disabled) { background: var(--color-primario-hover); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.sec { background: transparent; color: var(--color-texto); border-color: var(--color-borde-fuerte); box-shadow: none; }
.btn.sec:hover:not(:disabled) { background: var(--color-superficie-2); }
.btn.cargando::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Mensajes */
.mensaje { display: none; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: var(--radio-sm); font-weight: 600; font-size: .95rem; }
.mensaje.visible { display: flex; animation: entra .35s var(--ease) both; }
.mensaje svg { width: 22px; height: 22px; margin-top: 1px; }
.mensaje.error { background: var(--color-error-fondo); color: var(--color-error); }
.mensaje.ok { background: var(--color-exito-fondo); color: var(--color-exito); }
.mensaje.info { background: var(--color-superficie-2); color: var(--color-texto); }
.sacudir { animation: sacudir .4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes sacudir { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); } }

/* Lectura */
.acta-ficha { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radio-sm); background: var(--color-superficie-2); margin: 14px 0; }
.acta-ficha .ico { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--color-primario); color: var(--color-primario-texto); display: grid; place-items: center; }
.acta-ficha strong { display: block; line-height: 1.25; }
.acta-ficha span { font-size: .85rem; color: var(--color-texto-suave); }
.visor { width: 100%; height: 55vh; min-height: 320px; margin-top: 14px; border: 2px solid var(--color-borde); border-radius: var(--radio-sm); background: #fff; animation: entra .5s var(--ease) both; }
.leido-estado { font-size: .85rem; color: var(--color-texto-suave); text-align: center; margin: 12px 0 0; }

/* Mantener para firmar */
.sostener { position: relative; display: block; width: 168px; height: 168px; margin: 8px auto; border: 0; padding: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sostener svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sostener .pista-anillo { fill: none; stroke: var(--color-borde); stroke-width: 8; }
.sostener .anillo { fill: none; stroke: var(--color-primario); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 465; stroke-dashoffset: 465; }
.sostener .nucleo { position: absolute; inset: 16px; border-radius: 50%; background: var(--color-primario); color: var(--color-primario-texto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-weight: 700; font-size: .95rem; line-height: 1.15; text-align: center; transition: transform .2s var(--ease); box-shadow: var(--sombra); box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primario) 40%, transparent); }
.sostener.activo .nucleo { transform: scale(.92); }
.sostener:disabled { opacity: .55; cursor: not-allowed; }
.consejo { text-align: center; color: var(--color-texto-suave); font-size: .9rem; margin: 6px 0 0; }

/* Listo */
.sello { width: 88px; height: 88px; margin: 4px auto 14px; border-radius: 50%; background: var(--color-exito-fondo); color: var(--color-exito); display: grid; place-items: center; animation: pop .6s var(--ease) both; }
.sello svg { width: 46px; height: 46px; }
.sello path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: trazo .6s .3s var(--ease) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.centrado { text-align: center; }
.comprobante { margin-top: 16px; border: 2px dashed var(--color-borde-fuerte); border-radius: var(--radio-sm); padding: 14px; background: var(--color-superficie-2); }
.comprobante dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .92rem; }
.comprobante dt { color: var(--color-texto-suave); } .comprobante dd { margin: 0; font-weight: 600; text-align: right; }
.firma-img { display: block; max-width: 100%; max-height: 120px; margin: 0 auto 12px; padding: 8px; border-radius: 10px; background: #fff; clip-path: inset(0 100% 0 0); animation: revela 1.4s .5s var(--ease) forwards; }
@keyframes revela { to { clip-path: inset(0 0 0 0); } }

/* Avance de la reunion */
.avance { margin-top: 20px; }
.avance h3 { margin: 0 0 8px; font-size: 1rem; }
.avance-barra { height: 12px; border-radius: 99px; background: var(--color-borde); overflow: hidden; }
.avance-barra i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--color-acento), var(--color-primario)); transition: width 1s .2s var(--ease); }
.avance-texto { margin: 8px 0 10px; font-weight: 600; }
.citados { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.citados li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 10px; background: var(--color-superficie-2); }
.citados .nom { flex: 1; font-weight: 600; line-height: 1.2; } .citados .nom small { display: block; font-weight: 400; color: var(--color-texto-suave); font-size: .8rem; }
.marca-fir { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--color-borde-fuerte); display: grid; place-items: center; color: transparent; }
.marca-fir svg { width: 14px; height: 14px; }
.marca-fir.si { background: var(--color-exito); border-color: var(--color-exito); color: #fff; animation: pop .5s var(--ease) both; animation-delay: var(--d, 0s); }
.marca-fir.si path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: trazo .4s calc(var(--d, 0s) + .15s) ease-out forwards; }
.etq { font-size: .78rem; font-weight: 600; color: var(--color-texto-suave); }
.etq.si { color: var(--color-exito); }
@media (prefers-color-scheme: dark) { .marca-fir.si { color: var(--lila-950); } }

/* Estados especiales */
.estado { text-align: center; }
.estado .ico-grande { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; animation: pop .5s var(--ease) both; }
.estado .ico-grande svg { width: 42px; height: 42px; }
.estado.exito .ico-grande { background: var(--color-exito-fondo); color: var(--color-exito); }
.estado.aviso .ico-grande { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.estado.malo .ico-grande { background: var(--color-error-fondo); color: var(--color-error); }

.pie { margin-top: 22px; text-align: center; font-size: .8rem; color: var(--color-texto-suave); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .firma-img { clip-path: none; }
  .marca-logo { animation: none; }
  .sello path, .marca-fir.si path { stroke-dashoffset: 0; }
}