/* NIDI · NIDI Web › paso B2 (documentos-web.js): crear, llenar y firmar documentos y consentimientos, y la lectura
   del paciente en la tableta. Tinta y marfil con las variables de nidi.css (claro y oscuro salen solos).
   Columnas con minmax(0, 1fr) para que nada largo ensanche la página (lección 32). */

/* Nuevo documento (pestaña Documentos). */
.db2-nuevo { margin-bottom: 18px; }
.db2-grupo { font-size: 16px; font-weight: 600; margin: 18px 0 8px; }
.db2-crear-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.db2-crear { display: grid; gap: 4px; text-align: left; font: inherit; color: var(--tinta); background: transparent; border: 1px solid var(--borde-fuerte); border-radius: 14px; padding: 14px 16px; cursor: pointer; min-height: 72px; }
.db2-crear strong { font-weight: 550; font-size: 16px; overflow-wrap: anywhere; }
.db2-crear small { color: var(--tenue); font-size: 16px; overflow-wrap: anywhere; }
.db2-crear:hover { background: var(--piedra); }
.db2-crear:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.db2-crear:disabled { opacity: 0.55; cursor: progress; }

/* El documento: pasos. */
.db2-cuerpo { display: grid; gap: 18px; min-width: 0; }
.db2-seccion { scroll-margin-top: 90px; }
.db2-paso { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; scroll-margin-top: 90px; }
.db2-paso h2 { font-size: 18px; font-weight: 500; color: var(--tinta); margin: 4px 0 4px; }
.db2-paso p { margin: 0; font-size: 16px; }
.db2-paso-num { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--borde-fuerte); font-size: 16px; font-weight: 600; color: var(--tinta); }
.db2-paso.hecho .db2-paso-num { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.db2-campo { margin-bottom: 16px; }
.db2-campo input[type='text'], .db2-campo input[type='date'], .db2-campo textarea, .db2-opcion input, .db2-med input { width: 100%; }
.db2-campo textarea { min-height: 64px; resize: vertical; }
.db2-sub { font-size: 16px; font-weight: 600; margin: 18px 0 6px; }
.db2-chico { font-size: 16px; }
.db2-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; margin-top: 10px; }
.db2-clausula { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--borde); background: var(--fondo); margin: 4px 0 16px; }
.db2-clausula strong { font-size: 16px; font-weight: 600; color: var(--tinta); }
.db2-clausula p { margin: 6px 0 0; }
.db2-opcion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.db2-med { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; }
.db2-meds, .db2-opcionales { margin-bottom: 16px; }
.db2-en-linea { display: flex; gap: 8px; flex-wrap: wrap; }
.db2-en-linea input { flex: 1 1 220px; min-width: 0; }
.db2-cerrado h4 { font-size: 16px; font-weight: 600; margin: 16px 0 4px; }
.db2-cerrado p { margin: 0 0 8px; overflow-wrap: anywhere; }
.db2-titulo-doc { font-size: 19px; font-weight: 600; margin: 0 0 4px; overflow-wrap: anywhere; }
.db2-dudas { padding: 14px 16px; border-radius: 14px; background: var(--ambar-suave); margin-bottom: 14px; }
.db2-dudas strong { color: var(--ambar); }
.db2-dudas ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.db2-dudas li { overflow-wrap: anywhere; }
.db2-dudas .boton { margin-left: 8px; }
.db2-identificacion { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--borde); margin-bottom: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; }
.db2-identificacion .db2-sub { margin-top: 0; }
.db2-identificacion .db2-campo { width: 100%; margin: 4px 0 0; }
.db2-dar { width: 100%; max-width: 420px; }
.db2-ok { color: var(--acento); }
.db2-respuestas { margin: 10px 0 0; }
.db2-firma-medico, .db2-firmante, .db2-testigo { margin-bottom: 18px; }
.db2-firma-hecha { max-width: 320px; margin: 4px 0 14px; }
.db2-testigo { padding-top: 14px; border-top: 1px solid var(--borde); }
.db2-indice { display: grid; gap: 4px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--borde); }
.db2-indice a { color: var(--tinta); text-decoration: none; font-size: 16px; padding: 4px 0; }
.db2-indice a:hover { text-decoration: underline; }
.boton.db2-eliminar { color: var(--rojo); justify-self: start; }
.boton.db2-eliminar:hover { background: var(--rojo-suave); color: var(--rojo); }
.db2-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La lectura en la tableta: letra grande, una cosa a la vez. Debajo del lienzo de firma (z-index 100). */
.db2-lectura { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: var(--fondo); color: var(--tinta); padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.db2-lectura-arriba { max-width: 760px; margin: 0 auto 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.db2-lectura-etapa { color: var(--tenue); font-size: 16px; }
.db2-lectura-cuerpo { max-width: 760px; margin: 0 auto; font-size: 20px; line-height: 1.55; display: grid; gap: 14px; }
.db2-lectura-cuerpo h2 { font-size: 30px; line-height: 1.2; margin: 8px 0 0; overflow-wrap: anywhere; }
.db2-lectura-cuerpo h2:focus { outline: none; }
.db2-lectura-cuerpo h3 { font-size: 21px; margin: 12px 0 4px; }
.db2-lectura-cuerpo p { margin: 0 0 8px; overflow-wrap: anywhere; }
.db2-lectura-cuerpo .boton-grande { width: 100%; min-height: 60px; font-size: 19px; }
.db2-lectura-cuerpo .boton-texto { justify-self: center; font-size: 17px; }
.db2-lectura-cuerpo textarea { width: 100%; font-size: 19px; min-height: 120px; }
.db2-hola { color: var(--tenue); font-size: 18px; }
.db2-indicacion { color: var(--tenue); font-size: 18px; }
.db2-apartado { padding: 16px 18px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde); }
.db2-apartado h3 { margin-top: 0; }
.db2-ops { display: grid; gap: 10px; }
.db2-op { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde-fuerte); cursor: pointer; }
.db2-op input { width: 26px; height: 26px; margin: 0; accent-color: var(--tinta); }
.db2-op-estado { font-weight: 600; min-width: 2.2em; text-align: right; }
.db2-op:has(input:checked) { border-color: var(--acento); }
.db2-op:has(input:checked) .db2-op-estado { color: var(--acento); }
.db2-botones { display: grid; gap: 12px; }
.db2-resumen { padding: 14px 18px; border-radius: 16px; background: var(--piedra); font-size: 18px; }
.db2-resumen ul { margin: 6px 0 0; padding-left: 22px; }
.db2-gracias { text-align: center; display: grid; gap: 14px; padding-top: 12vh; }

@media (max-width: 1100px) {
  .db2-med { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .db2-dos { grid-template-columns: minmax(0, 1fr); }
  .db2-med { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .db2-lectura-cuerpo { font-size: 18px; }
  .db2-lectura-cuerpo h2 { font-size: 25px; }
}
@media print { .db2-lectura { display: none; } }

/* Textos largos (botones con fecha, huellas) se parten: nada ensancha la página a 390 px (lecciones 32 y 40). */
.db2-identificacion > * { max-width: 100%; }
.db2-cuerpo .boton, .nb-lateral .boton { white-space: normal; max-width: 100%; height: auto; }
.nb-lateral .a2-faltan p, .nb-lateral .a2-faltan { overflow-wrap: anywhere; min-width: 0; }
.db2-respuestas, .db2-cerrado ul { list-style: none; padding-left: 0; }