/* Actualización de Datos de Socios · Centro Social de Encarnación.
   Amarillo del escudo (#F0CC00) con texto oscuro; pensado para el celular. */
:root {
  --amarillo: #F0CC00;
  --amarillo-oscuro: #c9aa00;
  --tinta: #1c1a12;
  --tinta-suave: #4d4a3d;
  --fondo: #fbf7e6;
  --papel: #ffffff;
  --borde: #d9d3b8;
  --error: #b3261e;
  --error-fondo: #fdecea;
  --ok: #2e7d32;
  --radio: 12px;
}
* { box-sizing: border-box; }
/* Sin esto, un display propio (.boton, .fecha…) le gana al atributo hidden. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cabecera {
  display: flex; align-items: center; gap: 14px;
  background: var(--amarillo); color: var(--tinta);
  padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top));
}
.cabecera img { border-radius: 50%; background: var(--papel); padding: 4px; flex: none; }
.cabecera__club { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.cabecera h1 { margin: 2px 0 0; font-size: 20px; line-height: 1.2; }
.contenido { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; }
.caja {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px 18px; margin-bottom: 16px;
}
.caja h2 { margin: 0 0 8px; font-size: 22px; outline: none; }
.caja h3 { margin: 26px 0 6px; font-size: 17px; color: var(--tinta-suave); }
.intro { margin: 0 0 12px; color: var(--tinta-suave); }
.cargando { text-align: center; color: var(--tinta-suave); }

.progreso { margin: 4px 0 14px; }
.progreso p { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--tinta-suave); }
.progreso__barra { height: 8px; background: #ece7cf; border-radius: 4px; overflow: hidden; }
.progreso__barra div { height: 100%; width: 25%; background: var(--amarillo); transition: width .25s; }

.campo { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
fieldset.campo legend { padding: 0; }
.campo label, .campo legend { display: block; font-weight: 700; margin-bottom: 4px; }
.campo__label { display: block; }
.ayuda { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 400; color: var(--tinta-suave); }
.opcional { font-weight: 400; color: var(--tinta-suave); font-size: 14px; }
input:not([type="radio"]), textarea {
  display: block; width: 100%; min-height: 48px;
  font: inherit; color: var(--tinta); background: var(--papel);
  border: 1.5px solid var(--borde); border-radius: 10px; padding: 10px 12px;
}
textarea { resize: vertical; }
select {
  display: block; width: 100%; min-height: 48px; min-width: 0;
  font: inherit; color: var(--tinta); background: var(--papel);
  border: 1.5px solid var(--borde); border-radius: 10px; padding: 10px 6px;
}
select:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; border-color: var(--amarillo-oscuro); }
.fecha { display: grid; grid-template-columns: 1fr 1.7fr 1.3fr; gap: 8px; }
.con-error select { border-color: var(--error); }
input:focus, textarea:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; border-color: var(--amarillo-oscuro); }
.con-error input:not([type="radio"]), .con-error textarea { border-color: var(--error); }
.error { display: none; margin: 6px 0 0; color: var(--error); font-size: 14px; font-weight: 600; }
.con-error > .error { display: block; }

.opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion {
  display: flex; align-items: flex-start; gap: 12px; margin: 0; font-weight: 400;
  padding: 12px 14px; border: 1.5px solid var(--borde); border-radius: 10px; cursor: pointer;
  background: var(--papel);
}
.opcion input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--tinta); }
.opcion:has(input:checked) { border-color: var(--tinta); background: #fff8cc; }
.opcion:has(input:focus-visible) { outline: 3px solid var(--amarillo); }
.con-error .opcion { border-color: var(--error); }

.persona { border: 1.5px dashed var(--borde); border-radius: var(--radio); padding: 14px; margin: 0 0 14px; }
.persona__titulo { font-weight: 700; padding: 0 6px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 12px 18px; margin-top: 8px;
  font: inherit; font-weight: 700; text-decoration: none; text-align: center;
  color: var(--tinta); background: var(--amarillo);
  border: 2px solid var(--amarillo); border-radius: 10px; cursor: pointer;
}
.boton:hover { background: #e2c000; }
.boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.boton:disabled { opacity: .6; cursor: default; }
.boton--secundario { background: var(--papel); border-color: var(--tinta); }
.boton--secundario:hover { background: #f4f0dc; }
.boton--quitar { background: none; border-color: transparent; color: var(--error); min-height: 40px; font-weight: 600; }
.navegacion { display: flex; gap: 10px; }
.navegacion .boton { margin-top: 0; }
.navegacion #atras { flex: 0 0 34%; }

.aviso { background: var(--error-fondo); color: var(--error); padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.trampa { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tpago { border: 2px solid var(--amarillo); border-radius: var(--radio); padding: 14px; margin: 14px 0; background: #fffbe0; }
.tpago h3 { margin: 0 0 8px; color: var(--tinta); }
.tpago__resumen { font-weight: 700; margin: 0 0 8px; }
#listo h2 { color: var(--ok); }

.pie { text-align: center; font-size: 14px; color: var(--tinta-suave); padding: 16px; }
.pie a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .progreso__barra div { transition: none; } }
.banner-prueba { background: var(--tinta); color: var(--amarillo); text-align: center; font-weight: 700; font-size: 14px; padding: 8px 16px; }
.nota-prueba { background: var(--tinta); color: var(--amarillo); padding: 10px 12px; border-radius: 10px; font-weight: 600; }