/* ===================================================
   CLUB MANUAL — Dibuja (lienzo a pantalla completa + galería)
   Usa los tokens, el nav, el modal, los botones "pill" y el
   footer de style.css. Aquí solo va lo específico de esta página.
   =================================================== */

body.page-draw{ background: var(--stone); }

/* ---- modo dibujo: todo el viewport es lienzo ---- */

body.is-drawing{
  overflow: hidden;
  overscroll-behavior: none;   /* evita "tirar para refrescar" mientras se dibuja */
}
body.is-drawing .site-footer{ display: none; }

.draw-view{
  position: fixed;
  inset: 0;
  height: 100dvh;
  background: var(--cream);
}

.draw-view canvas{
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;   /* evita que el dedo haga scroll mientras se dibuja */
}

.draw-hint{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  color: var(--brown);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.draw-hint.is-hidden{ opacity: 0; }

.draw-demo-note{
  position: absolute;
  top: 1rem;
  left: var(--gutter);
  max-width: 20rem;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.7;
  pointer-events: none;
}
.draw-demo-note code{ font-family: var(--font-mono); }

/* ---- barra de herramientas flotante ---- */

.draw-dock{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + 0.25rem);   /* por encima de la nav fija inferior */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 0.75rem;
  pointer-events: none;   /* el hueco entre barra y bordes sigue siendo lienzo */
}
.draw-dock > *{ pointer-events: auto; }

.draw-toolbar{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.5rem;
  max-width: 100%;
  padding: 0.7rem 1.1rem;
  background: var(--stone);
  border: 2px solid var(--brown);
  border-radius: 22px;
}

.draw-tools,
.draw-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.1rem;
}

.draw-group{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.swatch{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid var(--brown);
  cursor: pointer;
  padding: 0;
}
.swatch.is-active{ outline: 3px solid var(--brown); outline-offset: 2px; }

.size-btn{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--brown);
  border-radius: 50%;
  background: var(--cream);
  cursor: pointer;
  padding: 0;
}
.size-btn span{
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--brown);
}
.size-btn.is-active{ background: var(--brown); }
.size-btn.is-active span{ background: var(--cream); }

.draw-tool{
  padding: 0.45rem 0.95rem;
  border: 2px solid var(--brown);
  border-radius: 999px;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.draw-tool[aria-pressed="true"]{ background: var(--brown); color: var(--cream); }
.draw-tool:disabled{ opacity: 0.4; cursor: default; }

.draw-actions .pill{ border: none; cursor: pointer; }

.draw-status{
  margin: 0;
  padding: 0.45rem 1rem;
  background: var(--cream);
  border: 2px solid var(--brown);
  border-radius: 999px;
  font-size: 0.9rem;
  text-align: center;
}
.draw-status:empty{ display: none; }

/* ---- galería: pantalla completa, se explora arrastrando ---- */

body.is-gallery{ overflow: hidden; overscroll-behavior: none; }
body.is-gallery .site-footer{ display: none; }

.gallery-view{
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--stone);
  cursor: grab;
  touch-action: none;   /* el dedo arrastra la galería, no la página */
  user-select: none;
  -webkit-user-select: none;
}
.gallery-view.is-grabbing{ cursor: grabbing; }

.gallery-world{
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  will-change: transform;
}

.gallery-head{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter);
  pointer-events: none;   /* deja arrastrar por debajo; solo el botón es clicable */
}
.gallery-head .pill{ pointer-events: auto; border: none; cursor: pointer; }
.gallery-title{
  margin: 0;
  font-family: var(--font-round);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--brown);
}

.gallery-hint,
.gallery-status{
  position: absolute;
  left: var(--gutter);
  z-index: 2;
  margin: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--brown);
  pointer-events: none;
}
.gallery-hint{ bottom: clamp(1rem, 2vw, 1.5rem); }
.gallery-status{
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1rem;
  text-transform: none;
  font-family: var(--font-round);
}
.gallery-status:empty{ display: none; }

/* cada tarjeta se adapta a la proporción del dibujo; la posición la calcula dibuja.js */
.drawing-card{
  position: absolute;
  margin: 0;
  background: var(--cream);
  border-radius: 14px;
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: transform .25s ease;
}
.drawing-card:hover{ transform: translate(-50%, -50%) rotate(0deg) scale(1.04); }
.drawing-card img{
  display: block;
  width: auto;
  height: auto;
  max-width: var(--cw);
  max-height: var(--ch);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .drawing-card{ transition: none; }
}

/* ---- modal de compartir (reutiliza .booking-modal de style.css) ---- */

.share-panel{
  max-width: 400px;
  text-align: center;
}
.share-text{
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 1.5rem 0.5rem 1.75rem;
}
.share-error{
  color: var(--coral);
  font-weight: 700;
  margin: -0.75rem 0.5rem 1.25rem;
}
.share-panel .pill{ border: none; cursor: pointer; }
.share-panel .pill:disabled{ opacity: 0.6; cursor: default; }

@media (max-width: 720px){
  .draw-demo-note{ display: none; }

  /* barra más compacta: colores + grosores en una fila y menos altura total */
  .draw-toolbar{ padding: 0.55rem 0.7rem; gap: 0.45rem 0.9rem; }
  .draw-tools,
  .draw-actions{ gap: 0.45rem 0.9rem; }
  .draw-group{ gap: 0.35rem; }
  .swatch{ width: 26px; height: 26px; }
  .size-btn{ width: 30px; height: 30px; }
  .draw-tool{ padding: 0.35rem 0.7rem; font-size: 0.8rem; }
  .draw-actions .pill{ padding: 0.5rem 1.2rem; }
}