@font-face{font-family:'Nunito';src:url('../fonts/Nunito-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url('../fonts/Nunito-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Nunito';src:url('../fonts/Nunito-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{--verde:#233b25;--negro:#000;--gris-linea:#ccc;--rojo:#a32020}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0 16px 64px;font-family:'Nunito',system-ui,sans-serif;font-size:16px;line-height:1.5;color:var(--negro);background:#fff}
.hoja{max-width:760px;margin:0 auto}
.cabecera{text-align:center;padding:32px 0 24px}
.logo{width:150px;height:auto}

/* Texto legal */
.legal{font-size:14px;text-align:justify}
.legal p{margin:0 0 12px}
.legal a{color:var(--negro)}

/* Tablas de tratamientos, mismo formato que el PDF */
table.trat{width:100%;border-collapse:collapse}
table.trat td{border:1px solid var(--negro);padding:10px 12px;vertical-align:top;font-size:13.5px}
table.trat td.titulo{width:24%;text-align:center;font-weight:700}
table.trat td.cuerpo p{margin:0 0 6px}
table.trat td.cuerpo p:last-child{margin-bottom:0}
.bloque-tablas{margin:0 0 14px}
.bloque-tablas table.trat+table.trat td{border-top:none}

/* Formulario */
form{margin-top:32px}
.bloque{border:none;border-top:1px solid var(--gris-linea);padding:22px 0 8px;margin:0;background:none}
.bloque legend{font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em;padding:0 12px 0 0}
.rejilla{display:flex;flex-wrap:wrap;gap:0 20px}
.rejilla .campo{flex:1 1 calc(50% - 10px);min-width:240px}
.campo{margin-bottom:16px}
.campo label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.campo input{width:100%;font-family:inherit;font-size:16px;padding:13px 12px;border:1px solid var(--negro);border-radius:0;background:#fff;color:var(--negro);-webkit-appearance:none}
.campo input:focus{outline:2px solid var(--verde);outline-offset:-2px}
.campo input.mal{border-color:var(--rojo);border-width:2px}

.opcion{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;cursor:pointer;font-size:15px}
.opcion input{width:24px;height:24px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--verde)}
.lectura{margin:8px 0 4px}
.copia{border-top:1px solid var(--gris-linea);margin-top:24px;padding-top:16px}

/* Firma */
.firma-ayuda{font-size:13px;color:#555;margin:4px 0 12px}
#lienzo{width:100%;height:220px;border:1px solid var(--negro);background:#fff;display:block;touch-action:none;cursor:crosshair}

/* Botones */
.boton-principal,.boton-secundario{font-family:inherit;font-weight:600;border-radius:0;cursor:pointer;-webkit-appearance:none}
.boton-principal{display:block;width:100%;margin-top:32px;padding:20px;font-size:17px;letter-spacing:.04em;background:var(--verde);color:#fff;border:none}
.boton-principal:disabled{opacity:.5}
.boton-secundario{margin-top:10px;padding:12px 20px;font-size:14px;background:#fff;color:var(--negro);border:1px solid var(--negro)}

/* Errores */
.error{color:var(--rojo);font-size:13px;font-weight:600;margin:6px 0 0}
.error:empty{display:none}
.error-general{margin-top:20px;padding:14px;border:2px solid var(--rojo);text-align:center}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Confirmación */
.confirmacion{text-align:center;padding:60px 0}
.marca-ok{width:72px;height:72px;margin:0 auto 24px;border:3px solid var(--verde);border-radius:50%;color:var(--verde);font-size:38px;line-height:66px}
.confirmacion h2{font-size:20px;margin:0 0 12px}
.confirmacion p{color:#444;font-size:15px}
.confirmacion .boton-principal{max-width:320px;margin:32px auto 0}

.pie{margin-top:48px;padding-top:16px;border-top:1px solid var(--gris-linea);text-align:center;font-size:12px;color:#777;letter-spacing:.04em}

@media (max-width:600px){
  table.trat td{display:block;width:100%!important;border-top:none}
  table.trat td.titulo{text-align:left;border-bottom:none;padding-bottom:0}
  .bloque-tablas table.trat:first-child td.titulo{border-top:1px solid var(--negro)}
  .rejilla .campo{flex:1 1 100%}
}

/* --- Ajuste de espaciado de los bloques --- */
.bloque{padding:4px 0 0;margin:36px 0 0}
.bloque legend{padding:0 12px 0 0;margin:0}
.bloque .rejilla{margin-top:16px}
.bloque > .opcion:first-of-type{margin-top:12px}
.firma-ayuda{margin:14px 0 12px}
.lectura{margin:26px 0 0}
.copia{margin-top:28px;padding-top:18px}