:root {
  --bg: #000;
  --card: rgba(15,21,32,.15);
  --text: #e7f0ff;
  --muted: #a9b6cc;
  --primary: #2d6cdf;
  --primary-2: #184fb0;
  --secondary: #1e293b;
  --ok: #16a34a;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; background: var(--bg); color: var(--text); }

/* Fondo */
.bg {
  position: fixed;
  inset: 0;
  background: url('/imagenes/PuertoBikersWeb.png') center/cover no-repeat;
  z-index: 0; /* <- estaba en -3, ahora al frente del fondo base */
  filter: brightness(1.05) contrast(1.05);
  pointer-events: none; /* opcional: evita que la bg capture clicks */
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.15));
  z-index: 1; /* overlay oscuro encima de la imagen, pero aún por debajo de modales (z-index > 20) */
  pointer-events: none;
}

/* Fila "Recordarme" con checkbox alineado al texto */
.remember-row {
  display: flex;
  align-items: center; /* alinea verticalmente */
  gap: 10px;           /* espacio entre checkbox y texto */
  margin: 12px 0;      /* opcional para separar de otros elementos */
  font-size: 0.95em;   /* tamaño del texto */
  cursor: pointer;     /* hace que toda la fila sea clicable */
}

.remember-row input[type="checkbox"] {
  flex: 0 0 auto;      /* checkbox mantiene su tamaño */
  width: 18px;
  height: 18px;
}


/* Header y Footer */
.masthead {
  position: fixed;
  top: 25px;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
  z-index: 20;
  pointer-events: none;
  text-align: center;
}
.masthead h1 { margin: 0; font-size: clamp(1.4rem, 3.5vw, 2.25rem); text-shadow: 0 4px 20px rgba(0,0,0,.5); }

.footnote {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  padding-top: 8px;
  z-index: 20;
  pointer-events: none;
  text-align: center;
}
.footnote .subtitle { margin: 0; opacity: .9; font-size: clamp(.85rem, 2.6vw, 1rem); }

/* Botones */
.primary, .secondary, .link {
  border: 0; cursor: pointer; border-radius: 12px; padding: 12px 16px; font-weight: 600;
}
.primary { background: var(--primary); color: white; }
.primary:hover { background: var(--primary-2); }
.secondary { background: var(--secondary); color: var(--text); border: 1px solid #32445a; }
.link { background: transparent; color: var(--muted); text-decoration: underline; }

/* Inputs */
input {
  width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #2a3b52;
  background: #0b1220; color: var(--text); outline: none;
}
input::placeholder { color: #7f8ca3; }
input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.25); }

/* Modales genéricos */
.modal {
  position: fixed;
  inset: 0;
  display: none; /* oculto por defecto */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6); /* overlay */
  z-index: 30;
  padding: 20px;
  transition: opacity 0.25s ease;
}
.modal[aria-hidden="false"] {
  display: flex; /* se muestra solo si aria-hidden=false */
  pointer-events: auto;
}

/* Dialogos */
.modal .dialog {
  width: min(420px, 92vw);
  max-height: calc(100dvh - 140px);
  background: var(--card);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 20px;
  overflow: hidden;
  text-align: left;
}
@media (max-height: 740px) {
  .modal { align-items: flex-start; padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
}
@media (max-height: 590px) {
  .modal .dialog { max-height: calc(100dvh - 100px); }
}

/* Scroll interno */
.scroll {
  max-height: 38vh;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #223042;
  border-radius: 12px;
  background: #0b1220;
  margin: 12px 0;
}

/* T&C específico */
#tcModal .dialog { width: min(820px, 92vw); max-height: calc(100dvh - 140px); overflow: hidden; }
#tcModal .scroll { max-height: 50vh; }
#tcModal .accept {
  display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; text-align: left; width: 100%;
}
#tcModal .accept input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; }
#tcModal .actions { display: flex; justify-content: flex-start; gap: 10px; margin-top: 10px; }

/* Ajustes para pantallas pequeñas */
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
@media (max-height: 640px) {
  #tcModal .dialog { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px); }
  #tcModal .scroll { max-height: 45vh; }
}

/* Opcional: disminuir opacidad de header/footer cuando modal activo */
#tcModal[aria-hidden="false"] ~ .masthead,
#tcModal[aria-hidden="false"] ~ .footnote { opacity: 0.2; transition: opacity 0.25s ease; }

/* Auth modal separado */
#authModal { background: transparent !important; }
#authModal .dialog { background: rgba(15,21,32,.22); backdrop-filter: blur(0.5px); }


/* ---------- Ajustes SOLO para el modal de T&C (#tcModal) ---------- */
/* Esto anula cualquier cambio global de .modal sin alterar otros modales. */
#tcModal.modal {
  /* overlay pegado al top y ocupando la pantalla */
  position: fixed;      /* reafirmamos */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;        /* sigue controlado por aria-hidden */
  align-items: flex-start; /* que empiece desde arriba */
  justify-content: center;
  overflow-y: auto;     /* si el cuadro es muy alto, el overlay podrá hacer scroll */
  padding: 16px 20px;   /* espacio visual alrededor del dialogo */
  background: rgba(0,0,0,.6); /* conservamos overlay */
  z-index: 35;          /* un poco por encima del resto */
}

/* mostrar cuando aria-hidden=false */
#tcModal.modal[aria-hidden="false"] {
  display: flex;
  pointer-events: auto;
}

/* El diálogo de T&C: limitar su alto y permitir scroll interno */
#tcModal .dialog {
  width: min(820px, 92vw);
  max-height: calc(100dvh - 48px); /* deja un pequeño margen superior/inferior */
  margin: 12px 0;
  padding: 18px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  overflow: hidden;    /* controlamos scroll en .scroll */
}

/* Contenido de texto (área scrollable dentro del diálogo) */
#tcModal .scroll {
  max-height: calc(100dvh - 320px); /* ajusta si el header/footer son más grandes */
  overflow-y: auto;
  padding: 10px;
  border-radius: 12px;
  background: #0b1220;
  border: 1px solid #223042;
  margin: 12px 0;
}

/* Mantener el area de aceptación visible: sticky bottom dentro del dialogo */
#tcModal .accept,
#tcModal .actions {
  position: sticky;
  z-index: 3;
  background: linear-gradient(transparent, rgba(15,21,32,.02));
  padding-top: 8px;
  bottom: 0; /* pega al final del contenedor scroll */
}

/* Si prefieres que el título quede pegado arriba, descomenta esto */
/*
#tcModal .dialog > h2 {
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(rgba(15,21,32,.02), transparent);
  margin-top: 0;
  padding-top: 6px;
}
*/