/* Firmas DSI. Misma familia visual que el panel de Sofia (DSI Finanzas): barra azul, tarjetas blancas sobre gris azulado,
   Segoe UI y chips de estado. Sin recursos externos. Contraste AA: texto #263238 sobre blanco 13:1; azul #14639e con blanco 6.3:1. */

:root {
  /* Misma familia visual que el panel de Sofia (DSI Finanzas): azul DSI, fondo gris azulado, estados en chips. */
  --texto: #263238;
  --apoyo: #546e7a;
  --fondo: #ffffff;
  --papel: #eef1f5;
  --panel: #eceff1;
  --linea: #78909c;
  --suave: #dde3ea;
  --azul: #1a7bc4;
  --primario: #14639e;
  --primario-oscuro: #0f4f7e;
  --primario-claro: #e8f2fa;
  --laton: #1a7bc4;
  --peligro: #b02a2a;
  --peligro-claro: #fbe6e6;
  --ok: #1b7a3f;
  --ok-claro: #e3f5e9;
  --serif: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --radio: 4px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  line-height: 1.55;
}

/* --- cabecera --- */
.cabecera {
  background: var(--azul);
  color: #fff;
  padding: 0.85rem max(1rem, calc((100% - 40rem) / 2 + 1rem)) 0.9rem;
}
.marca { margin: 0; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; display: flex; align-items: center; gap: 0.65rem; }
.marca img { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; background: #fff; }
#progreso-caja { margin-top: 0.7rem; }
.progreso-texto { margin: 0 0 0.35rem; color: #e8f2fa; font-size: 0.88rem; }
progress {
  display: block; width: 100%; height: 0.55rem; border: 0; border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.25); appearance: none; -webkit-appearance: none; overflow: hidden;
}
progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.25); }
progress::-webkit-progress-value { background: #fff; border-radius: 0.3rem; }
progress::-moz-progress-bar { background: #fff; border-radius: 0.3rem; }

main { max-width: 40rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
main:focus { outline: none; }
h1 { font-family: var(--serif); font-size: 1.7rem; line-height: 1.2; margin: 0.4rem 0 0.8rem; color: var(--texto); font-weight: 700; }
h2 { font-family: var(--serif); font-size: 1.2rem; margin: 1.6rem 0 0.5rem; color: var(--texto); }
p { margin: 0 0 1rem; }
.nota { color: var(--apoyo); font-size: 0.9rem; }

/* Cada pantalla es una hoja de papel */
.pantalla {
  background: var(--fondo); border: 1px solid var(--suave); border-radius: 5px;
  padding: 1.25rem 1.1rem 1.4rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pantalla > h1:first-child { margin-top: 0; }
.quien { background: var(--primario-claro); padding: 0.75rem 1rem; border-radius: var(--radio); border-left: 4px solid var(--primario); }

.lista, .lista-pasos { padding-left: 1.25rem; margin: 0 0 1rem; }
.lista li, .lista-pasos li { margin-bottom: 0.45rem; }
.lista-pasos { list-style: none; padding: 0; counter-reset: paso; }
.lista-pasos li { counter-increment: paso; display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.6rem; }
.lista-pasos li::before {
  content: counter(paso); flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--primario); color: #fff; font-weight: 700; font-size: 0.9rem; margin-top: 0.05rem;
}
.lista.docs { list-style: none; padding: 0; }
.lista.docs li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  border: 1px solid var(--suave); border-left: 4px solid var(--primario); border-radius: var(--radio);
  padding: 0.75rem 1rem; background: var(--papel);
}
.estado-doc { font-weight: 700; font-size: 0.9rem; }
.estado-doc.leido { color: var(--ok); }

/* --- botones --- */
.boton {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 3.5rem; margin: 0.75rem 0 0;
  padding: 0.75rem 1rem; border: 2px solid var(--primario); border-radius: var(--radio);
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  background: var(--fondo); color: var(--primario);
}
.boton:hover { background: var(--primario-claro); }
.boton.primario { background: var(--primario); color: #fff; }
.boton.primario:hover { background: var(--primario-oscuro); }
.boton.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.boton.peligro:hover { background: #8c2020; }
.boton:disabled, .boton:disabled:hover { background: #dde3ea; border-color: #dde3ea; color: #455a64; cursor: not-allowed; }
.boton.chico { width: auto; min-height: 3rem; margin: 0; }

.enlace {
  display: block; width: 100%; margin: 0.6rem 0 0; padding: 0.75rem 0; min-height: 3rem;
  background: none; border: 0; font: inherit; color: var(--primario); text-decoration: underline;
  text-underline-offset: 3px; text-align: left; cursor: pointer;
}
.enlace-simple { color: var(--primario); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid #1a7bc4; outline-offset: 2px; }
.boton.primario:focus-visible, .boton.peligro:focus-visible { outline-color: #1a7bc4; box-shadow: 0 0 0 2px #fff; }

/* --- autorizaciones --- */
.casilla {
  display: flex; gap: 0.9rem; align-items: flex-start; background: var(--papel);
  border: 1px solid var(--suave); border-radius: var(--radio); padding: 0.9rem 1rem; margin-bottom: 0.85rem;
}
.casilla input { flex: none; width: 1.75rem; height: 1.75rem; margin-top: 0.2rem; accent-color: var(--primario); }
.casilla label { font-size: 1rem; }

/* --- campos --- */
input[type="text"], textarea {
  width: 100%; font: inherit; padding: 0.75rem; min-height: 3.25rem;
  border: 2px solid var(--linea); border-radius: var(--radio); background: var(--fondo); color: var(--texto);
}
input[type="text"]:focus, textarea:focus { border-color: var(--primario); outline: 3px solid #1a7bc4; outline-offset: 1px; }
#codigo-entrada { font-family: ui-monospace, Consolas, monospace; font-size: 2rem; letter-spacing: 0.4em; text-align: center; min-height: 4.25rem; font-weight: 700; padding-left: 0.4em; }
.etiqueta { display: block; font-weight: 700; margin: 1.25rem 0 0.4rem; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}
#foto-entrada:focus-visible + #btn-tomar { outline: 3px solid #1a7bc4; outline-offset: 2px; }
#btn-tomar { border-style: dashed; }

#foto-vista { display: block; width: 100%; max-height: 60vh; object-fit: contain; border: 1px solid var(--suave); border-radius: var(--radio); margin-top: 1rem; background: var(--panel); }

#doc-paginas img {
  display: block; width: 100%; height: auto; margin: 0 0 1rem;
  border: 1px solid var(--suave); box-shadow: 0 2px 8px rgba(0,0,0,0.15); background: var(--panel); min-height: 12rem;
}

/* --- firma: renglon con linea base, como en el papel --- */
#lienzo {
  display: block; width: 100%; height: 13rem; border: 2px solid var(--linea); border-radius: var(--radio);
  background: linear-gradient(to bottom, transparent calc(100% - 3.2rem), var(--suave) calc(100% - 3.2rem), var(--suave) calc(100% - 3.2rem + 2px), transparent calc(100% - 3.2rem + 2px)), #fff;
  touch-action: none; cursor: crosshair;
}

/* --- avisos --- */
.aviso {
  border: 2px solid var(--peligro); border-left-width: 6px; color: var(--peligro); background: var(--peligro-claro);
  padding: 0.75rem 1rem; border-radius: var(--radio); font-weight: 700;
}
.aviso.info { border-color: var(--ok); color: var(--ok); background: var(--ok-claro); }
main > .aviso { margin-bottom: 1rem; }

@media (min-width: 700px) {
  html { font-size: 19px; }
  main { padding-top: 2rem; }
  .pantalla { padding: 1.75rem 1.9rem 2rem; }
}

/* --- pantalla final: sello de firmado --- */
#s-listo::before {
  content: "\2713"; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.75rem;
  border-radius: 50%; background: var(--ok); color: #fff; font-size: 1.9rem; font-weight: 700;
  box-shadow: 0 0 0 5px var(--ok-claro);
}
#s-listo { padding-top: 1.75rem; }