:root {
  --azul:#1265c8;
  --texto:#18314d;
  --suave:#6e8094;
  --fondo:#f5f8fc;
}
[hidden] { display:none !important; }
.marca { margin-left:auto; font-size:12px; letter-spacing:1px; color:#6e8094; }
.panel-ingreso { position:relative; margin-top:-25px; border-radius:28px 28px 0 0; background:#fff; padding:28px 24px; }
.etiqueta { font-size:11px; letter-spacing:1.5px; color:#527292; }
.panel-ingreso h2 { font-size:27px; font-weight:400; margin:12px 0; }
.panel-ingreso p { font-size:15px; line-height:1.6; color:#62768a; }
.panel-ingreso fieldset { padding:0; margin:18px 0 0; border:0; min-width:0; }
.panel-ingreso label { display:block; margin:16px 0 7px; font-size:15px; }
.panel-ingreso input { width:100%; min-height:50px; padding:12px; border:1px solid #cad6e3; border-radius:12px; font:inherit; font-size:17px; background:#fff; color:#18314d; }
.boton-principal { width:100%; min-height:49px; margin-top:24px; border:0; border-radius:13px; background:#1265c8; color:#fff; }
button:disabled { opacity:.6; cursor:wait; }
:focus-visible { outline:3px solid #3688dc; outline-offset:3px; }
.mensaje { padding:12px 14px; border-radius:12px; background:#eff5fc; }
.error { color:#a32c2c !important; padding:0 16px; font-size:15px; line-height:1.5; }
.error:empty { display:none; }
.boton-texto { width:100%; min-height:48px; padding:12px 16px; border:1px solid #e4ebf3; border-radius:13px; background:#f5f8fc; color:#1265c8; font-size:15px; font-weight:500; text-decoration:none; }
.acciones-sesion { padding:18px 20px; }
.ayuda { font-size:13px !important; }
.avatar { position:relative; overflow:hidden; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.datos-socio h3 { overflow-wrap:anywhere; }
#detalle-seccion h3 { margin:0 0 12px; font-size:21px; font-weight:400; }
#detalle-seccion p { font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
@media(max-width:360px) { .tarjeta-socio { flex-wrap:wrap; } }
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  font-weight:400;
}
button { font:inherit; cursor:pointer; }
.socio-app {
  max-width:540px;
  margin:auto;
  padding:18px 17px 110px;
}
.encabezado {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.club-logo {
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:15px;
  background:#1055a8;color:white;
  font-size:26px;font-weight:600;
}
.subtitulo {
  font-size:13px;color:var(--suave);
}
.encabezado h1 {
  margin:2px 0 0;
  font-size:clamp(20px,5.8vw,23px);font-weight:500;
}
.notificaciones {
  margin-left:auto;
  width:39px;height:39px;
  border:1px solid #e5ebf2;
  background:white;border-radius:13px;
}
.portada {
  min-height:218px;
  border-radius:23px;
  overflow:hidden;
  display:flex;
  align-items:end;
  background:
    linear-gradient(0deg,rgba(8,31,57,.85),rgba(8,31,57,.05)),
    url('/static/assets/football.jpg') center/cover;
  color:white;
  padding:23px;
}
.portada-contenido span {
  font-size:10px;letter-spacing:2px;
}
.portada h2 {
  font-size:29px;
  line-height:1.13;
  font-weight:400;
  margin:9px 0;
}
.portada p {font-size:13px;margin:0;opacity:.9;}
.tarjeta-socio {
  background:white;
  border-radius:19px;
  padding:16px;
  margin:16px 0;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 5px 22px #1a49700b;
}
.avatar {
  width:53px;height:53px;
  border-radius:50%;
  background:#e3edfa;color:#2461aa;
  display:grid;place-items:center;
  font-size:17px;
  flex-shrink:0;
}
.datos-socio {min-width:0;flex:1;}
.datos-socio>span {
  font-size:10px;color:#8393a4;
  letter-spacing:1px;
}
.datos-socio h3 {
  font-size:18px;font-weight:500;
  margin:4px 0;
}
.datos-socio p {
  font-size:13px;color:var(--suave);margin:0;
}
.estado {
  color:#188653;background:#e8f8ee;
  border-radius:30px;
  padding:6px 10px;font-size:12px;
}
.accesos {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:18px 0;
}
.acceso {
  border:0;border-radius:17px;
  min-height:92px;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:12px;
  box-shadow:0 5px 15px #123e6510;
}
.simbolo {font-size:25px;line-height:1;}
.azul {background:#2075d8;}
.verde {background:#18a879;}
.naranja {background:#f29a36;}
.violeta {background:#8462d4;}
.aviso {
  display:flex;align-items:center;
  gap:12px;
  background:#eff5fc;color:#527292;
  padding:15px;border-radius:17px;
}
.aviso div {flex:1;}
.aviso[data-estado="al-dia"] {background:#e8f8ee;color:#188653;}
.aviso[data-estado="deuda"] {background:#fff0ef;color:#a53d38;}
.aviso strong {font-size:14px;font-weight:600;}
.aviso p {font-size:12px;margin:4px 0 0;}
.contenido {margin-top:25px;}
.titulo-seccion {
  display:flex;align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.titulo-seccion h3 {
  font-size:19px;font-weight:500;margin:0;
}
.titulo-seccion a {
  color:var(--azul);
  font-size:12px;text-decoration:none;
}
.tarjeta-contenido {
  background:white;
  border-radius:19px;
  overflow:hidden;
  box-shadow:0 5px 22px #1a49700b;
}
.foto-reserva {
  height:150px;
  background:url('/static/assets/padel.jpg') center/cover;
}
.foto-novedad {
  height:150px;
  background:url('/static/assets/football.jpg') center/cover;
}
.detalle {padding:15px;}
.detalle h4 {
  font-size:16px;font-weight:500;
  margin:0 0 7px;
}
.detalle p {
  color:var(--suave);
  font-size:13px;margin:0 0 10px;
}
.confirmada {
  color:#178653;background:#e8f8ee;
  border-radius:20px;
  padding:6px 10px;font-size:11px;
}
.navegacion-inferior {
  position:fixed;
  bottom:0;left:0;right:0;
  display:flex;justify-content:space-around;
  background:white;
  border-top:1px solid #e8edf3;
  padding:10px 4px max(12px,env(safe-area-inset-bottom));
  z-index:10;
}
.navegacion-inferior button {
  border:0;background:transparent;
  color:#6e8094;font-size:24px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  min-width:0;min-height:50px;flex:1;
}
.navegacion-inferior button span {font-size:11px;font-weight:500;}
.navegacion-inferior button svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.navegacion-inferior .seleccionado {color:#1265c8;}
@media(min-width:650px) {
  .socio-app {margin:35px auto;}
  .navegacion-inferior {
    max-width:540px;
    left:50%;right:auto;
    width:100%;
    transform:translateX(-50%);
    border-radius:20px 20px 0 0;
  }
}

/* CLUBIA SOCIO - CONTENEDOR BLANCO SUPERPUESTO */

body {
  background: #f3f6fa;
}

.socio-app {
  background: #ffffff;
  padding: 0 0 110px;
  min-height: 100vh;
}

.encabezado {
  padding: 17px 20px;
  margin: 0;
  background: #f7faff;
}

.portada {
  height: 195px;
  min-height: 195px;
  border-radius: 0;
  padding: 22px 22px 38px;
  background-position: center 55%;
}

.portada h2 {
  font-size: 27px;
  line-height: 1.12;
  font-weight: 500;
}

.portada-contenido > span {
  display: none;
}

.portada p {
  font-size: 14px;
}

/* Toda la zona inferior se convierte en una superficie continua */
.tarjeta-socio {
  position: relative;
  z-index: 2;
  margin: -25px 0 0;
  padding: 22px 20px 14px;
  border-radius: 28px 28px 0 0;
  box-shadow: none;
  background: #ffffff;
}

.tarjeta-socio::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 55px;
  border-radius: 28px 28px 0 0;
  background: #ffffff;
}

.avatar {
  width: 58px;
  height: 58px;
}

.datos-socio h3 {
  font-size: 18px;
}

.accesos {
  margin: 0;
  padding: 0 16px 14px;
  gap: 8px;
  background: #ffffff;
}

.acceso {
  min-height: 84px;
  border-radius: 14px;
  font-size: 11px;
}

.aviso {
  margin: 0 16px;
  padding: 14px;
  border-radius: 15px;
}

.contenido {
  margin-top: 0;
  padding: 23px 16px 0;
  background: #ffffff;
}

.titulo-seccion h3 {
  font-size: 19px;
}

.tarjeta-contenido {
  display: flex;
  align-items: stretch;
  min-height: 112px;
  border: 1px solid #edf1f6;
  border-radius: 16px;
  box-shadow: 0 3px 12px #173a6010;
}

.foto-reserva,
.foto-novedad {
  width: 34%;
  height: auto;
  min-height: 112px;
  flex-shrink: 0;
}

.detalle {
  flex: 1;
  padding: 14px 12px;
}

.detalle h4 {
  font-size: 14px;
}

.detalle p {
  font-size: 12px;
}

.navegacion-inferior {
  background: #ffffff;
}

@media (min-width: 650px) {
  .socio-app {
    margin: 25px auto;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 12px 45px #173a6015;
  }
}

/* Iconos profesionales compactos */
.acceso {
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
}

.acceso .simbolo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.acceso .simbolo svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Perfil sin rótulo adicional */
.datos-socio h3 {
  margin-top: 0;
  font-size: 20px;
}

/* Native touch targets and safe-area spacing without limiting text zoom. */
button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.acceso { padding:12px 4px; line-height:1.25; }
.socio-app { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
.navegacion-inferior { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
@media(max-width:360px) {
  .accesos { gap:6px; padding-left:12px; padding-right:12px; }
  .acceso { font-size:13px; }
  .encabezado { padding-left:16px; padding-right:16px; gap:10px; }
  .encabezado .marca { font-size:11px; letter-spacing:.5px; }
}

/* Home: a personal agenda and a calm club news feed. */
button.aviso { width:calc(100% - 32px); border:0; text-align:left; }
.home-section + .home-section { margin-top:25px; }
.home-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
#detalle-seccion .home-heading h3 { margin:0; font-weight:500; line-height:1.25; min-width:0; }
.home-heading button { border:0; background:transparent; color:var(--azul); padding:8px 0 8px 8px; min-height:44px; font-size:13px; white-space:nowrap; }
.home-heading button span { margin-left:4px; font-size:20px; vertical-align:-1px; }
.home-reservation-card { display:flex; align-items:stretch; border:1px solid #e6edf4; border-radius:18px; overflow:hidden; box-shadow:0 4px 18px #173a6008; background:#fff; }
.home-reservation-card + .home-reservation-card { margin-top:12px; }
.home-reservation-image { width:31%; max-width:132px; min-height:164px; object-fit:cover; }
.home-reservation-body { min-width:0; flex:1; padding:17px 14px; }
.home-reservation-body h4 { margin:7px 0 8px; font-size:17px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
#detalle-seccion .home-reservation-body p { margin:4px 0; font-size:13px; line-height:1.5; color:var(--suave); }
.home-eyebrow { display:block; font-size:10px; font-weight:600; letter-spacing:1.2px; line-height:1.5; color:#68829b; }
.home-sport { display:inline-block; border-radius:6px; padding:3px 7px; color:#1265c8; background:#edf5ff; font-size:11px; font-weight:600; }
.home-booking-status { display:inline-block; margin-top:9px; padding:5px 8px; border-radius:20px; background:#e8f8ee; color:#188653; font-size:11px; line-height:1.4; }
.home-booking-status.is-pending { background:#fff4df; color:#8a5a12; }
.home-inline-button { display:block; border:0; background:transparent; color:var(--azul); padding:8px 0; min-height:44px; font-size:13px; }
.home-news-card { border:1px solid #e6edf4; border-radius:19px; overflow:hidden; box-shadow:0 4px 18px #173a6008; background:#fff; }
.home-news-card > img { display:block; width:100%; height:142px; object-fit:cover; object-position:center 48%; }
.home-news-body { padding:17px 17px 18px; }
.home-news-body h4 { margin:6px 0 7px; font-size:19px; font-weight:500; line-height:1.3; }
#detalle-seccion .home-news-body p { margin:0; font-size:14px; color:var(--suave); line-height:1.55; }
.home-empty-news { margin-top:15px; padding-top:13px; border-top:1px solid #edf1f6; color:#6e8094; font-size:12px; line-height:1.55; }
.home-chips { display:flex; flex-wrap:wrap; gap:8px; }
.home-chip { padding:9px 13px; border-radius:12px; background:#f0f5fb; color:#456888; font-size:13px; line-height:1.4; }
.acciones-sesion { margin-top:26px; padding-top:20px; border-top:1px solid #f0f3f7; }
@media(max-width:360px) {
  #detalle-seccion .home-heading h3 { font-size:19px; }
  .home-heading { gap:6px; }
  .home-reservation-body { padding:14px 11px; }
  .home-reservation-body h4 { font-size:16px; }
}