/* ==========================================================================
   Silva Medicina Estética — hoja de estilo del circuito de consentimientos
   (consentimientos.html y consentimiento-firma.html).

   POR QUÉ ES UN ARCHIVO Y NO UN <style> EN LA PÁGINA
   La CSP de producción lleva `style-src 'self'` SIN 'unsafe-inline': un
   bloque <style> dentro del HTML no se aplica, y con él se perderían las
   reglas de las que depende el flujo (entre ellas `.oculto`, que es lo que
   mantiene oculto el formulario hasta que toca). Sirviéndolo desde 'self'
   la CSP lo admite sin tocar el .htaccess.

   Se carga DESPUÉS de assets/css/site.css: hereda la paleta y las
   tipografías del sitio (crema #fbf9f5, texto #1b1c1a, bronce #745a27) y
   solo añade lo propio de estas dos páginas.
   ========================================================================== */

/* ── Lista pública de documentos (consentimientos.html) ─────────────────── */

.consent-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgba(214, 211, 209, 0.7);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}

.consent-card + .consent-card { margin-top: 1rem; }

.consent-card h2 {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 1.5rem;
  color: #1b1c1a;
  line-height: 1.2;
}

.consent-card p {
  font-size: 0.8rem;
  color: #57534e;
  font-weight: 300;
  margin-top: 0.35rem;
  max-width: 34rem;
}

.consent-card .btn-firmar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 1px solid #1b1c1a;
  color: #1b1c1a;
  border-radius: 0.25rem;
  padding: 0.6rem 1.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.2s;
}

.consent-card .btn-firmar:hover { background: #1b1c1a; color: #fff; }

/* Simetria del boton "Leer y firmar".
   La tarjeta es flex con flex-wrap y justify-content: space-between, pero el
   bloque de texto (el unico div hijo, creado en assets/js/consentimientos-lista.js)
   no tenia base flexible. En las tarjetas de titulo o resumen largo el boton no
   cabia en la primera linea y saltaba a una segunda, donde space-between —con un
   solo elemento— lo dejaba pegado a la IZQUIERDA, mientras que en las tarjetas
   cortas se quedaba a la DERECHA. De ahi que unos botones se vieran a un lado y
   otros al otro.
   Ahora el texto absorbe el espacio sobrante, asi que el boton solo baja de linea
   cuando de verdad no cabe, y en ese caso ocupa el ancho completo: las dos
   situaciones son deliberadas y consistentes entre tarjetas. */
.consent-card > div {
  flex: 1 1 20rem;
  min-width: 0;
}

.consent-card .btn-firmar {
  flex: 0 0 auto;
}

@media (max-width: 34rem) {
  .consent-card .btn-firmar { width: 100%; }
}

.consent-aviso {
  background: #fbf9f5;
  border: 1px solid rgba(116, 90, 39, 0.25);
  border-left: 3px solid #745a27;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  font-size: 0.875rem;
  color: #44403c;
  font-weight: 300;
  line-height: 1.7;
}

/* ── Lectura y firma (consentimiento-firma.html) ────────────────────────── */

.doc-card {
  background: #fff;
  border: 1px solid rgba(214, 211, 209, 0.7);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .doc-card { padding: 2.5rem; }
}

.doc-card + .doc-card { margin-top: 2rem; }

.doc-card h2 {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 1.75rem;
  color: #1b1c1a;
  margin-bottom: 1rem;
}

.doc-cuerpo h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.35rem;
  color: #1b1c1a;
  margin: 1.5rem 0 0.5rem;
}

.doc-cuerpo p {
  font-size: 0.9rem;
  font-weight: 300;
  color: #44403c;
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.aviso-info {
  background: #fbf9f5;
  border: 1px solid rgba(116, 90, 39, 0.25);
  border-left: 3px solid #745a27;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  font-size: 0.875rem;
  color: #44403c;
  font-weight: 300;
  line-height: 1.7;
}

.campo { display: block; margin-bottom: 1.1rem; }

.campo > span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #57534e;
  margin-bottom: 0.4rem;
}

.campo input,
.campo textarea {
  width: 100%;
  border: 1px solid #d6d3d1;
  border-radius: 0.375rem;
  background: #fff;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: var(--font-body);
  color: #1b1c1a;
}

.campo input:focus,
.campo textarea:focus {
  outline: 2px solid #745a27;
  outline-offset: 1px;
  border-color: #745a27;
}

/* Pista de formato bajo el campo (la lee el lector de pantalla vía
   aria-describedby, no solo la ve quien mira). */
.campo-ayuda {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: #57534e;
  line-height: 1.5;
}

.casilla {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: #44403c;
  line-height: 1.6;
}

.casilla input {
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  accent-color: #745a27;
}

.firma-canvas {
  width: 100%;
  height: 11rem;
  border: 1px dashed #a8a29e;
  border-radius: 0.5rem;
  background: #fff;
  touch-action: none;
  display: block;
}

.btn-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  background: #1b1c1a;
  color: #fff;
  border: 1px solid #1b1c1a;
  border-radius: 0.25rem;
  padding: 0.8rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-principal:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 1px solid #d6d3d1;
  color: #57534e;
  background: transparent;
  border-radius: 0.25rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-secundario:hover { border-color: #1b1c1a; color: #1b1c1a; }

.estado {
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 1rem;
}

.estado--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.estado--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.hp-campo { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.oculto { display: none !important; }

/* ── Paso al móvil por código QR ────────────────────────────────────────── */
/*
   El QR lo dibuja assets/js/qr-svg.js como <svg> en línea: no es una
   imagen de red, así que no toca img-src, y no usa data: (que la CSP de
   hoy tampoco permitiría). Si el generador fallara, queda visible la URL
   en texto seleccionable, justo debajo del hueco del QR.
*/

.doc-acciones { display: block; }

.qr-paso {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.qr-texto { flex: 1 1 18rem; min-width: 0; }

.qr-texto p {
  font-size: 0.9rem;
  font-weight: 300;
  color: #57534e;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.qr-url-etiqueta {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #745a27 !important;
  margin-bottom: 0.35rem !important;
}

.qr-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem !important;
  line-height: 1.6 !important;
  color: #44403c !important;
  background: #fbf9f5;
  border: 1px solid #e7e5e4;
  border-radius: 0.35rem;
  padding: 0.6rem 0.7rem;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.qr-figura {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  max-width: 100%;
}

/* Fondo blanco y borde claro: el QR necesita zona de silencio y contraste.
   14rem = 224 px; el símbolo más grande que produce el sistema es de 53
   módulos, así que salen ~3,6 px por módulo, de sobra para una cámara. */
.qr-lienzo {
  width: 14rem;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  padding: 0.35rem;
}

.qr-lienzo svg { display: block; width: 100%; height: 100%; }

.qr-figura figcaption {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #57534e;
  max-width: 14rem;
  line-height: 1.5;
}

.acciones-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* La raya separadora solo cuando hay algo arriba de lo que separar: en el
   móvil el bloque del QR no se muestra y la tarjeta se queda con el botón
   de imprimir, más compacta. */
.qr-paso:not(.oculto) + .acciones-fila {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eeece8;
}

.doc-acciones:has(> .qr-paso.oculto) { padding: 1rem 1.25rem; }

@media (min-width: 768px) {
  .doc-acciones:has(> .qr-paso.oculto) { padding: 1.25rem 1.75rem; }
}

/* ── Bloque para firmar a mano, solo al imprimir ────────────────────────── */

.firma-papel { display: none; }

/* ── Impresión ──────────────────────────────────────────────────────────── */
/*
   Reutiliza el mismo criterio que el CSS de impresión del documento ya
   firmado (_consent-lib/documento-html.php): A4, sin navegación, sin
   botones, sin QR y sin banner. Todo va colgado de .pagina-consentimiento
   para no cambiar cómo se imprime el resto del sitio.
*/

@media print {
  .pagina-consentimiento { background: #fff !important; padding-bottom: 0 !important; }

  .pagina-consentimiento nav,
  .pagina-consentimiento footer,
  .pagina-consentimiento .skip-link,
  .pagina-consentimiento .sos-fab,
  .pagina-consentimiento .mobile-cta-bar,
  .pagina-consentimiento [data-consent-banner],
  .pagina-consentimiento .doc-acciones,
  .pagina-consentimiento .qr-paso,
  .pagina-consentimiento #form-consentimiento,
  .pagina-consentimiento noscript {
    display: none !important;
  }

  .pagina-consentimiento main section {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: #fff !important;
  }

  .pagina-consentimiento main > section:first-child { margin-bottom: 0.8rem !important; }

  .pagina-consentimiento main .max-w-4xl { max-width: none !important; padding: 0 !important; }

  .pagina-consentimiento h1 { font-size: 15pt !important; margin-bottom: 0.2rem !important; }

  .pagina-consentimiento .doc-card {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  .pagina-consentimiento .doc-card > h2 { display: none !important; }

  .pagina-consentimiento .doc-cuerpo p,
  .pagina-consentimiento .doc-cuerpo h3 { color: #000 !important; }

  .pagina-consentimiento .doc-cuerpo p { font-size: 10pt !important; line-height: 1.5 !important; }

  .pagina-consentimiento .doc-cuerpo h3 {
    font-size: 12pt !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  .pagina-consentimiento .doc-cuerpo p { page-break-inside: avoid; break-inside: avoid; }

  /* Espacio para firmar a mano: solo existe en papel. */
  .pagina-consentimiento .firma-papel {
    display: block !important;
    margin-top: 1.4rem;
    padding-top: 0.8rem;
    border-top: 1px solid #000;
    page-break-inside: avoid;
    break-inside: avoid;
    font-size: 10pt;
    color: #000;
  }

  .firma-papel h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 12pt;
    margin: 0 0 0.6rem;
  }

  .firma-papel ul { list-style: none; margin: 0 0 1rem; padding: 0; }

  .firma-papel li {
    margin: 0 0 0.9rem;
    border-bottom: 1px solid #000;
    padding-bottom: 0.15rem;
  }

  .firma-papel .firma-papel-huecos {
    display: flex;
    gap: 2.5rem;
    margin-top: 1.6rem;
  }

  .firma-papel .firma-papel-hueco { flex: 1 1 0; }

  .firma-papel .firma-papel-linea {
    border-bottom: 1px solid #000;
    height: 3.2rem;
    margin-bottom: 0.3rem;
  }

  .firma-papel .firma-papel-pie { font-size: 8.5pt; line-height: 1.4; }

  @page { size: A4; margin: 16mm 15mm; }
}

/* --------------------------------------------------------------------
   Campo con problema: mismo criterio visual para TODO el formulario.

   Ningún campo se valida ya con reportValidity(): el globo nativo del
   navegador no llega a verse en las casillas (queda fuera de pantalla o
   el estilo propio de la casilla impide colocarlo), desaparece al
   desplazarse y no se puede releer. El paciente se quedaba sin saber
   por qué no avanzaba el envío.

   En su lugar, assets/js/consentimiento-firma.js marca el contenedor
   con .campo--error o .casilla--error, escribe el mensaje concreto en
   el <small class="campo-error"> que cada campo lleva al lado, y lleva
   el foco al primero. El error se borra en cuanto el campo se corrige.

   El rojo es el mismo #b42318 del resto del sitio (ratio 6,5:1 sobre
   blanco); el #7a1912 de los rótulos sube a 8,4:1.
   -------------------------------------------------------------------- */

.campo-error {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #b42318;
  line-height: 1.5;
}

.campo--error > span:first-child { color: #7a1912; }

.campo--error input,
.campo--error textarea {
  border-color: #b42318;
  background: rgba(180, 35, 24, 0.03);
}

.campo--error input:focus,
.campo--error textarea:focus {
  outline-color: #b42318;
  border-color: #b42318;
}

/* La ayuda de formato pierde protagonismo cuando hay un error concreto
   que leer justo debajo. */
.campo--error .campo-ayuda { color: #78716c; }

.campo--error .firma-canvas {
  border-style: solid;
  border-color: #b42318;
  background: rgba(180, 35, 24, 0.02);
}

.firma-canvas:focus-visible {
  outline: 2px solid #745a27;
  outline-offset: 2px;
}

.casilla--error {
  border-left: 3px solid #b42318;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
  background: rgba(180, 35, 24, 0.04);
  border-radius: 0 4px 4px 0;
}

.casilla--error > span {
  color: #7a1912;
}

/* ── Modo consulta (?k=1): pantalla final antes de devolver el dispositivo ──
   La pinta assets/js/consentimiento-firma.js al guardar con éxito, en el
   dispositivo de la propia doctora. El botón es un <a> con la clase del
   botón principal: hace falta quitarle el subrayado. */

.kiosco-final { text-align: center; }

.kiosco-final h2 { margin-bottom: 0.75rem; }

.kiosco-final p {
  font-size: 1rem;
  line-height: 1.7;
  color: #1b1c1a;
  margin-bottom: 1.5rem;
}

.kiosco-final .btn-principal { text-decoration: none; }