/* Ficha del socio (autoservicio) — sin estilos en línea: la página tiene CSP estricta. */
:root{
  --vino:#722426; --vino2:#8f3133; --oro:#CC9900; --crema:#FAF7EF; --tinta:#2A2521; --gris:#6B6259; --linea:#E5DED0;
  --ok:#1F7A4D; --bad:#B3261E; --warn:#8A5A00; --fondo:#F3EFE6; --blanco:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--tinta); background:var(--fondo); min-height:100vh}
[hidden]{display:none !important}
.cab{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--vino); color:#fff; position:sticky; top:0; z-index:5}
.cab-logo{width:40px; height:40px; border-radius:50%; background:#fff; padding:3px}
.cab-t{font-weight:700; font-size:15px}
.cab-s{font-size:12px; opacity:.85}
.candado{margin-left:auto; font-size:18px}
.progreso{padding:10px 16px 0; max-width:640px; margin:0 auto}
.barra{height:8px; background:var(--linea); border-radius:8px; overflow:hidden}
.relleno{height:100%; width:0; background:var(--oro); transition:width .3s}
.paso-t{font-size:13px; color:var(--gris); margin-top:6px}
main{max-width:640px; margin:0 auto; padding:12px 16px 24px}
.tarjeta{background:var(--blanco); border:1px solid var(--linea); border-radius:16px; padding:18px 16px; margin-bottom:14px; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.centro{text-align:center}
h1{font-size:22px; margin:0 0 8px; color:var(--vino)}
h2{font-size:18px; margin:0 0 12px; color:var(--vino); display:flex; align-items:center; gap:8px}
h2 .ico{font-size:24px}
h3{font-size:15px; margin:18px 0 6px; color:var(--tinta)}
p{margin:6px 0}
.muted{color:var(--gris); font-size:14px}
.lista-ico{list-style:none; padding:0; margin:12px 0}
.lista-ico li{display:flex; gap:12px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--linea)}
.lista-ico li:last-child{border-bottom:none}
.lista-ico .i{font-size:26px; width:36px; text-align:center}
label.f{display:block; font-weight:600; font-size:14px; margin:12px 0 4px}
.req{color:var(--bad)}
.in{width:100%; font:inherit; font-size:17px; padding:12px; border:1.5px solid var(--linea); border-radius:12px; background:#fff; color:var(--tinta); min-height:48px}
.in:focus{outline:none; border-color:var(--oro); box-shadow:0 0 0 3px rgba(204,153,0,.2)}
.in.invalido{border-color:var(--bad); background:#FFF6F5}
.in.grande{font-size:24px; letter-spacing:3px; text-align:center}
.fila2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:420px){ .fila2{grid-template-columns:1fr} }
.ayuda{font-size:13px; color:var(--gris); margin-top:4px}
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; font:inherit; font-weight:700; font-size:17px; padding:14px; border-radius:14px; border:none; cursor:pointer; min-height:52px}
.btn-p{background:var(--vino); color:#fff}
.btn-p:active{background:var(--vino2)}
.btn-s{background:#fff; color:var(--vino); border:1.5px solid var(--vino)}
.btn:disabled{opacity:.55; cursor:default}
.acciones{display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:6px}
.acciones.una{grid-template-columns:1fr}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px}
.seg button{font:inherit; font-size:15px; padding:12px 8px; border-radius:12px; border:1.5px solid var(--linea); background:#fff; color:var(--tinta); min-height:48px; cursor:pointer}
.seg button.activo{border-color:var(--vino); background:#FBEFEF; color:var(--vino); font-weight:700}
.preg{padding:12px 0; border-bottom:1px dashed var(--linea)}
.preg:last-child{border-bottom:none}
.preg-t{font-size:15px}
.aviso{border-radius:12px; padding:10px 12px; font-size:14px; margin:10px 0}
.aviso.bad{background:#FDECEA; color:var(--bad)}
.aviso.warn{background:#FFF4DB; color:var(--warn)}
.aviso.ok{background:#E8F5EE; color:var(--ok)}
.aviso.info{background:#F4EFE2; color:var(--tinta)}
.aviso ul{margin:6px 0 0; padding-left:18px}
.totales{display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin-top:12px; padding:12px; background:var(--crema); border-radius:12px; font-size:14px}
.totales .v{text-align:right; font-weight:700}
.totales .neg{color:var(--bad)}
.grupo-t{font-weight:700; margin-top:14px; color:var(--vino); font-size:14px; text-transform:uppercase; letter-spacing:.3px}
.fotos{display:grid; gap:12px}
.foto{border:1.5px dashed var(--linea); border-radius:14px; padding:12px; display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; cursor:pointer; background:#fff}
.foto.lista{border-style:solid; border-color:var(--ok)}
.foto .mini{width:72px; height:72px; border-radius:10px; background:var(--crema); display:flex; align-items:center; justify-content:center; font-size:30px; overflow:hidden}
.foto .mini img{width:100%; height:100%; object-fit:cover}
.foto .t{font-weight:700}
.foto input{display:none}
.decl{background:var(--crema); border-radius:12px; padding:10px 12px; font-size:13px; max-height:220px; overflow:auto; margin-top:8px}
.check{display:flex; gap:10px; align-items:flex-start; padding:12px; border:1.5px solid var(--linea); border-radius:12px; margin-top:10px; cursor:pointer}
.check input{width:24px; height:24px; flex:none; margin-top:1px; accent-color:var(--vino)}
.firma-caja{position:relative; border:1.5px solid var(--linea); border-radius:12px; background:#fff; margin-top:8px; touch-action:none}
.firma-caja canvas{display:block; width:100%; height:180px; touch-action:none}
.firma-linea{position:absolute; left:16px; right:16px; bottom:40px; border-bottom:1px solid #bbb; pointer-events:none}
.firma-hint{position:absolute; left:0; right:0; bottom:14px; text-align:center; color:#aaa; font-size:13px; pointer-events:none}
.giro{width:36px; height:36px; border-radius:50%; border:4px solid var(--linea); border-top-color:var(--vino); margin:10px auto; animation:g 1s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
.grande-ico{font-size:56px; margin:6px 0}
.recibo{font-family:ui-monospace,Menlo,monospace; font-size:20px; letter-spacing:2px; background:var(--crema); padding:8px 12px; border-radius:10px; display:inline-block}
.pie{max-width:640px; margin:0 auto; padding:0 16px 30px; font-size:12px; color:var(--gris); text-align:center}
details summary{cursor:pointer; color:var(--vino); font-weight:600; font-size:14px; margin-top:8px}
.seg.una-col{grid-template-columns:1fr}
.seg.una-col button{text-align:left; padding:14px}
.tarjeta .btn{margin-top:14px}