/* ==========================================================================
   GestionaFitness Clubs — Panel del gestor
   Topbar compartida inyectada por nav.js + contenido por página, igual que
   el dashboard de GestionaFitness.
   ========================================================================== */

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 80;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.topbar-in {
  max-width: var(--maxw); margin: 0 auto; height: 100%;
  padding: 0 20px; display: flex; align-items: center; gap: 8px;
}

/* ── Marca ────────────────────────────────────────────────────────────────
   Mismo formato que GestionaFitness, GestionaPública y GestionaClubs: el
   símbolo suelto y, al lado, «Gestiona» en el color del texto con la segunda
   palabra en el de acento. Mismas medidas y misma tipografía que allí —36 px
   de símbolo y 17 px en peso 800—, para que los cuatro productos se
   reconozcan como la misma familia.

   Sustituye al PNG que se usaba antes: la palabra «gestiona» del logotipo
   venía en verde y sobre la barra clara no se leía; ahora usa `var(--text)` y
   se resuelve sola en los dos temas. */
.tb-brand { display: flex; align-items: center; gap: 10px; margin-right: 14px; flex: 0 0 auto; }
.tb-brand:hover { text-decoration: none; }

/* El símbolo va suelto, sin pastilla de color detrás: el aro ya es una forma
   cerrada y meterlo en un cuadrado le quita aire. */
.tb-logo {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 10px rgba(95, 226, 124, .28));
}
.tb-name {
  font-size: 1.0625rem; font-weight: 800;
  color: var(--text); letter-spacing: -.02em; line-height: 1.1;
  white-space: nowrap;
}
.tb-name-b { color: var(--accent); }

/* El club, entre la navegación y los controles de la derecha */
.tb-club-name {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 auto; min-width: 0; margin: 0 14px 0 10px;
  padding-left: 14px; border-left: 1px solid var(--border);
  font-size: .88rem; font-weight: 650; color: var(--text);
}
.tb-club-name .tcn-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tb-club-name .tcn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tb-nav { display: flex; gap: 2px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.tb-nav::-webkit-scrollbar { display: none; }
.tb-link {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--text-muted); font-size: .85rem; font-weight: 550;
  white-space: nowrap; transition: all .14s; position: relative;
}
.tb-link:hover { background: var(--bg-card-hover); color: var(--text); text-decoration: none; }
.tb-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.tb-link .ic { font-size: 1rem; }
.tb-link .n-badge {
  min-width: 17px; height: 17px; padding: 0 5px;
  background: var(--danger); color: #fff; border-radius: 99px;
  font-size: .62rem; font-weight: 700; display: grid; place-items: center;
}

.tb-right { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.tb-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-soft);
  display: grid; place-items: center; cursor: pointer; font-size: .9rem; transition: all .14s;
}
.tb-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.tb-user {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--bg-card); cursor: pointer; transition: all .14s;
}
.tb-user:hover { background: var(--bg-card-hover); }
.tb-user .u-name { font-size: .8rem; font-weight: 600; }

/* Botón de la derecha que además es un enlace de sección (Ajustes) */
a.tb-btn:hover { text-decoration: none; }
.tb-btn.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* Menú móvil.
   El botón de las tres rayas SOLO tiene sentido cuando la navegación está
   plegada: en escritorio el menú ya se ve entero y pulsarlo no haría nada.
   La doble clase es cinturón y tirantes por si alguien vuelve a redeclarar
   `display` para `.tb-btn` más abajo. */
.tb-btn.tb-burger { display: none; }
@media (max-width: 1080px) {
  .tb-nav { position: fixed; top: var(--topbar-h); left: 0; right: 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--border);
    flex-direction: column; padding: 10px; gap: 2px; overflow: visible;
    box-shadow: var(--shadow-lg); display: none; }
  .tb-nav.open { display: flex; }
  .tb-link { padding: 11px 14px; font-size: .9rem; }
  .tb-btn.tb-burger { display: inline-flex; }
  /* Con el menú plegado, el nombre del club ocupa el hueco que deja */
  .tb-club-name { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  /* En pantalla pequeña manda la navegación: lo accesorio se repliega */
  #tb-qr, #tb-support { display: none; }
  /* La palabra se va y queda el símbolo, que ya identifica la marca: es lo
     que hacen también GestionaFitness, GestionaPública y GestionaClubs en
     esta anchura. */
  .tb-name { display: none; }
  .tb-logo { width: 32px; height: 32px; }
}
@media (max-width: 620px) {
  .tb-user .u-name { display: none; }
}
@media (max-width: 560px) {
  .tb-club-name { border-left: 0; padding-left: 0; margin-left: 6px; font-size: .8rem; }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.page { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 60px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head h1 { font-size: 1.5rem; letter-spacing: -.025em; }
.page-head .ph-sub { font-size: .84rem; color: var(--text-muted); margin-top: 3px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.grid { display: grid; gap: 14px; }
.grid.kpis  { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid.c2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c2-1  { grid-template-columns: 2fr 1fr; }
.grid.c1-2  { grid-template-columns: 1fr 2fr; }
@media (max-width: 1020px) {
  .grid.c2, .grid.c3, .grid.c2-1, .grid.c1-2 { grid-template-columns: 1fr; }
}

.chart-box { height: 260px; position: relative; }
.chart-box.sm { height: 200px; }
.chart-box.lg { height: 320px; }

/* ==========================================================================
   TABLAS EN TARJETA
   ========================================================================== */

.table-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.table-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.table-wrap { overflow-x: auto; max-height: 68vh; }
.table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-muted); flex-wrap: wrap;
}

/* Cabeceras que ordenan la tabla. La flecha es tenue hasta que la columna es
   la activa: si todas gritasen igual, no se vería por cuál está ordenado. */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color .14s; }
th.sortable:hover { color: var(--text); }
th.sortable .s-ind { margin-left: 5px; font-size: .7em; opacity: .35; }
th.sortable:hover .s-ind { opacity: .7; }
th.sortable.sorted { color: var(--accent); }
th.sortable.sorted .s-ind { opacity: 1; }

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.search-box { position: relative; flex: 1 1 240px; max-width: 340px; }
.search-box input { padding-left: 34px; }
.search-box::before {
  content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; opacity: .7; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7c8f' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='m16 16 4.5 4.5'/></svg>") center / contain no-repeat;
}

.pager { display: flex; align-items: center; gap: 5px; }
.pager button {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text-soft);
  font-size: .78rem; font-weight: 600; cursor: pointer;
}
.pager button:hover:not(:disabled) { background: var(--bg-card-hover); color: var(--text); }
.pager button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ==========================================================================
   FEED DE ACTIVIDAD
   ========================================================================== */

.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 11px; padding: 11px 0; }
.feed-item + .feed-item { border-top: 1px solid var(--border-soft); }
.feed-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: .82rem;
  background: var(--bg-card-hover); color: var(--text-soft);
}
.feed-ic.signup  { background: var(--accent-soft); color: var(--accent); }
.feed-ic.cancel  { background: var(--danger-soft); color: var(--danger); }
.feed-ic.payment { background: var(--info-soft);   color: var(--info); }
.feed-ic.booking { background: var(--purple-soft); color: var(--purple); }
.feed-ic.contact { background: var(--warn-soft);   color: var(--warn); }
.feed-ic.vending { background: var(--accent-soft); color: var(--accent); }
.feed-ic.support { background: var(--purple-soft); color: var(--purple); }
.feed-txt  { font-size: .83rem; line-height: 1.4; }
.feed-time { font-size: .71rem; color: var(--text-muted); margin-top: 2px; }

/* ==========================================================================
   HORARIOS — constructor de parrilla
   --------------------------------------------------------------------------
   Mismo formato que la pantalla de horarios de setup.html en GestionaFitness:
   paleta de clases en una columna a la izquierda y cuadrícula a la derecha
   (días en columnas, horas en filas) sobre la que se arrastran las clases.

   Los NOMBRES DE CLASE se mantienen idénticos a los de setup.css a propósito
   (.schedule-builder, .classes-panel, .csg-*): cuando los dos productos se
   unifiquen, el marcado y los estilos ya hablan el mismo idioma y solo hay que
   quedarse con una copia. Lo único que cambia son los valores: aquí salen de
   los tokens de Clubs, así que la parrilla se reviste sola en claro y oscuro.
   ========================================================================== */

.schedule-builder {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1080px) {
  .schedule-builder { grid-template-columns: 1fr; }
  .classes-panel { position: static; }
}

/* --- Columna izquierda: las clases que se arrastran --- */
.classes-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  position: sticky; top: calc(var(--topbar-h) + 14px);
}
.classes-panel-header {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: .9rem; font-weight: 650;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.classes-panel-header > span { display: inline-flex; align-items: center; gap: 7px; }
.classes-panel-body { padding: 12px; max-height: 58vh; overflow-y: auto; }

.class-item-draggable {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: grab; user-select: none;
  transition: all .14s;
}
.class-item-draggable:hover {
  border-color: var(--border-strong); background: var(--bg-card-hover);
  transform: translateX(2px);
}
.class-item-draggable:active   { cursor: grabbing; }
.class-item-draggable.dragging { opacity: .5; transform: scale(.96); }
.class-color-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.class-item-name {
  flex: 1; min-width: 0; font-size: .84rem; font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.class-item-dur { font-size: .66rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.class-item-edit {
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
  padding: 2px; border-radius: 5px; display: inline-flex; line-height: 0;
}
.class-item-edit:hover { color: var(--accent); background: var(--accent-soft); }

/* --- Columna derecha: la cuadrícula --- */
.center-schedule-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.center-schedule-panel-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: .9rem; font-weight: 650;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.schedule-room-subtitle { margin: 0; padding: 8px 16px 0; font-size: .72rem; color: var(--text-muted); }

.center-schedule-grid-wrap { overflow: auto; padding: 8px 16px 16px; max-height: 460px; }
.center-schedule-grid {
  display: grid; width: max-content; min-width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}

.csg-header-cell {
  background: var(--bg-elev); padding: 8px 6px; text-align: center;
  font-size: .72rem; font-weight: 650; color: var(--text-soft);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 3;
}
.csg-header-cell.today { color: var(--accent); }
.csg-header-cell small { display: block; font-size: .62rem; font-weight: 500; color: var(--text-muted); }
.csg-time-cell {
  background: var(--bg-elev); padding: 4px 8px; text-align: right;
  min-width: 52px; font-size: .67rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border-soft);
  position: sticky; left: 0; z-index: 2;
}
.csg-time-cell.oclock { color: var(--text-soft); font-weight: 600; }

.csg-drop-cell {
  min-height: 36px; padding: 2px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  transition: background .12s;
}
.csg-drop-cell:hover       { background: var(--bg-card-hover); }
.csg-drop-cell.closed      { background: repeating-linear-gradient(135deg,
                               transparent 0 5px, var(--border-soft) 5px 6px); }
.csg-drop-cell.drag-over   { background: var(--accent-soft) !important;
                             outline: 1px dashed var(--accent); outline-offset: -1px; }
.csg-drop-cell.cell-selected { background: var(--accent-soft);
                             outline: 2px solid var(--accent); outline-offset: -2px; }

.csg-class-block {
  flex: 0 0 auto; position: relative; min-height: 28px;
  border-radius: 5px; padding: 3px 19px 3px 7px; overflow: hidden;
  color: #fff; font-size: .68rem; font-weight: 650; line-height: 1.25;
  display: flex; flex-direction: column; justify-content: center;
  cursor: grab; box-shadow: var(--shadow-sm);
}
.csg-class-block:active { cursor: grabbing; }
.csg-class-block:hover  { filter: brightness(1.08); }
.csg-class-block-name   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csg-class-block-room {
  display: flex; align-items: center; gap: 4px; font-size: .58rem; opacity: .88;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csg-class-block-room .gc-i { flex: 0 0 auto; }
.csg-class-block.off        { opacity: .42; }
.csg-class-block.room-dimmed { opacity: .16; pointer-events: none; }
.csg-block-del {
  position: absolute; top: 3px; right: 3px; width: 15px; height: 15px;
  padding: 0; border: 0; border-radius: 4px;
  background: rgba(0,0,0,.32); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity .14s;
}
.csg-class-block:hover .csg-block-del { opacity: 1; }

/* --- Filtro por sala --- */
.room-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
}
.room-filter-btn {
  padding: 3px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-soft); font-size: .73rem; font-weight: 550;
  cursor: pointer; transition: all .14s;
}
.room-filter-btn:hover  { border-color: var(--accent); color: var(--accent); }
.room-filter-btn.active { background: var(--accent); border-color: var(--accent);
                          color: var(--accent-text); font-weight: 700; }

/* --- Horario de verano (variante estacional del cuadrante) --- */
.summer-panel {
  margin-top: 14px; padding: 14px 16px;
  border: 1px dashed var(--border-strong); border-radius: var(--r);
  background: color-mix(in srgb, var(--warn) 5%, transparent);
}
.summer-panel.on {
  padding: 16px;
  border: 2px solid color-mix(in srgb, var(--warn) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 8%, transparent), transparent);
}
.summer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.summer-title { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--warn); }
.summer-dates {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: .78rem; color: var(--text-soft);
}
.summer-dates .gc-input { width: 78px; padding: 5px 6px; text-align: center; }

/* ==========================================================================
   VENDING — mostrador de venta
   --------------------------------------------------------------------------
   Catálogo a la izquierda y carrito fijo a la derecha, como una caja: se toca
   el producto y se ve crecer el ticket sin perderlo de vista.
   ========================================================================== */

.vending-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px; align-items: start;
}
@media (max-width: 1020px) { .vending-layout { grid-template-columns: 1fr; } }

.product-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.product-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 13px; min-height: 104px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer; transition: all .14s;
  color: inherit; font: inherit;
}
.product-card:hover:not(:disabled) {
  border-color: var(--accent); background: var(--bg-card-hover);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.product-card:active:not(:disabled) { transform: translateY(0); }
.product-card.sold-out { opacity: .5; cursor: not-allowed; }
.product-card .pc-top   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-card .pc-cat   { font-size: .66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.product-card .pc-stock { font-size: .68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.product-card .pc-name  { font-size: .88rem; font-weight: 600; line-height: 1.3; flex: 1; }
.product-card .pc-foot  { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.product-card .pc-price { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.product-card .pc-incart { font-size: .66rem; color: var(--accent); font-weight: 650; }

.cart-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  position: sticky; top: calc(var(--topbar-h) + 14px);
}
.cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.cart-lines { max-height: 42vh; overflow-y: auto; padding: 6px 14px; }
.cart-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; padding: 9px 0;
}
.cart-line + .cart-line { border-top: 1px solid var(--border-soft); }
.cart-line .cl-name   { font-size: .82rem; font-weight: 600; }
.cart-line .cl-unit   { font-size: .68rem; color: var(--text-muted); }
.cart-line .cl-amount { font-size: .84rem; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }

.qty-box { display: flex; align-items: center; gap: 2px; }
.qty-btn {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-soft);
  font-size: .9rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.qty-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qty-n { min-width: 22px; text-align: center; font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.cart-foot {
  padding: 13px 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px; background: var(--bg-elev);
}

/* --- A quién se le vende: buscador, no desplegable --- */
.buyer { position: relative; }
.buyer-search { position: relative; }

/* Los resultados flotan sobre el carrito: si empujaran el contenido, el total
   y el botón de cobrar bailarían con cada tecla.

   El fondo va con `--bg-elev` y NO con `--bg-card`. Una tarjeta es blanco a muy
   baja opacidad sobre el azul del fondo, y eso está bien mientras tenga detrás
   la página; aquí detrás tiene el carrito, así que las tres «Nurias» se leían
   con los productos y los precios transparentándose por debajo. Todo lo que
   tapa contenido usa el elevado, que sí es opaco, y así lo dice el comentario
   de las superficies en tokens.css. */
.buyer-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 264px; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
}
.buyer-hit {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: none; cursor: pointer;
  color: var(--text); font-family: inherit; text-align: left;
}
.buyer-hit + .buyer-hit { border-top: 1px solid var(--border-soft); }
.buyer-hit:hover, .buyer-hit.active { background: var(--accent-soft); }
.buyer-hit .bh-name { display: block; font-size: .84rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buyer-hit .bh-meta { display: block; font-size: .68rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buyer-hit .bh-pay  { color: var(--accent); display: inline-flex; flex: 0 0 auto; }
.buyer-msg { padding: 10px; line-height: 1.35; }

.buyer-picked {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 9px;
  background: var(--accent-soft); border: 1px solid transparent;
  border-radius: var(--r-sm);
}
.buyer-clear {
  width: 22px; height: 22px; flex: 0 0 auto; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--text-muted);
  font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.buyer-clear:hover { background: var(--bg-card); color: var(--text); }

.buyer-walkin { margin-top: 9px; font-size: .8rem; }
.cart-total {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: .86rem; color: var(--text-soft);
}
.cart-total b { font-size: 1.35rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cart-foot .gc-btn.primary { width: 100%; justify-content: center; }

/* ==========================================================================
   RESERVAS — tarjetas de clase del día
   ========================================================================== */

.session-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px; position: relative;
  border-left: 3px solid var(--act, var(--accent)); transition: all .15s;
}
.session-card:hover { border-color: var(--border-strong); }
.session-card.cancelled { opacity: .55; }
.session-card.cancelled .sc-name { text-decoration: line-through; }
.sc-top { display: flex; align-items: flex-start; gap: 12px; }
.sc-time {
  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
  flex: 0 0 auto; line-height: 1.1;
}
.sc-time small { display: block; font-size: .68rem; color: var(--text-muted); font-weight: 500; }
.sc-name { font-size: .95rem; font-weight: 650; }
.sc-meta { font-size: .74rem; color: var(--text-muted); margin-top: 2px; display: flex; gap: 4px 11px; flex-wrap: wrap; }
.sc-occ  { margin-top: 11px; }
.sc-occ .o-nums { display: flex; justify-content: space-between; font-size: .74rem; margin-bottom: 5px; }
.sc-occ .o-nums b { font-variant-numeric: tabular-nums; }

.attendee {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
}
.attendee + .attendee { border-top: 1px solid var(--border-soft); }
.attendee .a-actions { margin-left: auto; display: flex; gap: 5px; flex: 0 0 auto; }
.att-btn {
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg-card);
  cursor: pointer; font-size: .8rem; transition: all .14s;
}
.att-btn:hover { background: var(--bg-card-hover); }
.att-btn.on-yes { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.att-btn.on-no  { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ==========================================================================
   FICHA DE SOCIO (modal ancho con pestañas)
   ========================================================================== */

.member-head {
  display: flex; align-items: center; gap: 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.member-head .mh-name { font-size: 1.12rem; font-weight: 700; }
.member-head .mh-sub  { font-size: .8rem; color: var(--text-muted); }
.member-head .mh-right { margin-left: auto; text-align: right; }

.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 16px; }
.mini-stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px; text-align: center;
}
.mini-stat .ms-v { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-stat .ms-l { font-size: .66rem; color: var(--text-muted); margin-top: 1px; }
@media (max-width: 620px) { .mini-stats { grid-template-columns: repeat(2, 1fr); } }

.dl { display: grid; grid-template-columns: 132px 1fr; gap: 8px 12px; font-size: .85rem; }
.dl dt { color: var(--text-muted); font-size: .78rem; }
.dl dd { margin: 0; font-weight: 500; }
@media (max-width: 520px) { .dl { grid-template-columns: 1fr; gap: 2px 0; } .dl dd { margin-bottom: 8px; } }

/* ==========================================================================
   AJUSTES
   ========================================================================== */

/* ==========================================================================
   PANTALLA DE CONFIGURACIÓN
   --------------------------------------------------------------------------
   Misma estética que el `setup.html` de GestionaFitness, para que quien salte
   de un producto a otro reconozca la pantalla: cabecera centrada, submenú en
   pastilla horizontal y las secciones en una columna estrecha y centrada.

   Lo estrecho es deliberado: un formulario de ajustes a 1440 px obliga a
   barrer la pantalla con la vista de un extremo a otro para leer una línea.
   ========================================================================== */

/* Esta pantalla se sale del ancho general: manda `.setup-page`. */
.page.page-setup { max-width: none; padding: 0; }

.setup-page {
  max-width: 1060px;
  margin: 0 auto;
  padding: 34px 20px 80px;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.setup-header { text-align: center; margin-bottom: 26px; }
.setup-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 15px; margin-bottom: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; color: var(--accent);
}
.setup-header h1 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
}
/* El degradado del logotipo, que es lo que ata la pantalla a la marca.
   Misma técnica que el `.gradient-text` de GestionaFitness. Sin
   `display:inline-block` a propósito: en un móvil estrecho el título tiene que
   poder partir en dos líneas. */
.setup-header .gradient-text {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.setup-header p {
  font-size: .95rem; color: var(--text-soft);
  max-width: 520px; margin: 9px auto 0;
}

/* ── Submenú horizontal ───────────────────────────────────────────────────
   En GestionaFitness son tres pestañas y caben de sobra. Aquí son once, así
   que la pastilla se desplaza en horizontal y aparecen flechas cuando hace
   falta. Sin ellas, en un portátil las últimas secciones quedarían escondidas
   sin ninguna pista de que están ahí. */
.setup-tabs-wrap {
  position: relative;
  margin: 0 auto 26px;
  display: flex; justify-content: center;
  max-width: 100%;
}
.setup-tabs {
  display: flex; gap: 4px;
  width: fit-content; max-width: 100%;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.setup-tabs::-webkit-scrollbar { display: none; }

.setup-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px;
  border: 0; background: transparent;
  border-radius: var(--r-pill);
  font-family: inherit; font-size: .865rem; font-weight: 550;
  color: var(--text-soft);
  white-space: nowrap; cursor: pointer;
  transition: background .14s, color .14s;
  flex: 0 0 auto;
}
.setup-tab:hover { background: var(--bg-card-hover); color: var(--text); }
.setup-tab.active {
  background: var(--accent); color: var(--accent-text); font-weight: 650;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 32%, transparent);
}
.setup-tab > span:first-child { display: inline-flex; font-size: 0; }

/* Flechas de desplazamiento. Solo se enseñan si la pastilla no cabe entera:
   las pinta y las esconde el JS midiendo el ancho real. */
.tabs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: none; place-items: center;
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text-soft); cursor: pointer; z-index: 2;
  box-shadow: var(--shadow-sm);
  transition: color .14s, border-color .14s, opacity .14s;
}
.tabs-arrow.show { display: grid; }
.tabs-arrow:hover { color: var(--text); border-color: var(--border-strong); }
.tabs-arrow[disabled] { opacity: .3; cursor: default; }
.tabs-arrow.left  { left: -6px; }
.tabs-arrow.right { right: -6px; }

/* Difuminado en los bordes: dice «esto sigue» sin ocupar sitio */
.setup-tabs-wrap.overflowing::before,
.setup-tabs-wrap.overflowing::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 42px;
  pointer-events: none; z-index: 1; border-radius: var(--r-pill);
}
/* El degradado sale del color de la PASTILLA (--bg-elev), no del de la página:
   con el de la página quedaba una mancha más oscura sobre el propio submenú. */
.setup-tabs-wrap.overflowing::before {
  left: 0; background: linear-gradient(90deg, var(--bg-elev) 45%, transparent);
}
.setup-tabs-wrap.overflowing::after {
  right: 0; background: linear-gradient(270deg, var(--bg-elev) 45%, transparent);
}

/* ── Secciones ────────────────────────────────────────────────────────────
   Tarjeta con cabecera teñida y cuerpo con aire, como las de GestionaFitness. */
.setup-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
/* Separación entre tarjetas. Va como margen inferior y no con el selector de
   hermanos porque entre dos secciones puede colarse un aviso. */
.setup-section + .setup-section { margin-top: 0; }
.setup-section { margin-bottom: 18px; }
.setup-section:last-child { margin-bottom: 0; }

.setup-section-header {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 22px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.setup-section-icon {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  display: grid; place-items: center; font-size: 0;
}
.setup-section-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
/* Los botones de la sección van en su cabecera, a la derecha: es donde se
   buscan y así no hay que bajar hasta el final de una tabla larga para
   encontrar el de crear. */
.setup-section-actions {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap;
  justify-content: flex-end;
}
.setup-section-sub { font-size: .8rem; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.setup-section-body { padding: 22px; }

@media (max-width: 760px) {
  .setup-page { padding: 22px 14px 60px; }
  .setup-tabs { border-radius: var(--r-lg); }
  .setup-section-body { padding: 16px; }
  .setup-section-header { padding: 14px 16px; }
}

/* ==========================================================================
   DESPLEGABLE DE FORMULARIO
   --------------------------------------------------------------------------
   Para bloques que casi nunca se usan y ocupan mucho: los descuentos del alta
   son seis colectivos, un código y un aviso, y la mayoría de las altas no
   llevan ninguno. Cerrado ocupa una línea; abierto, lo de siempre.

   Se hace con <details> nativo a propósito: abre y cierra sin JavaScript, el
   teclado ya funciona y los campos de dentro siguen en el formulario aunque
   esté plegado, así que se leen igual al guardar.
   ========================================================================== */
.gc-accordion {
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg-card); overflow: hidden;
}
.gc-accordion > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; user-select: none;
  list-style: none; transition: background .14s;
}
.gc-accordion > summary::-webkit-details-marker { display: none; }
.gc-accordion > summary:hover { background: var(--bg-card-hover); }
.gc-accordion > summary .acc-ic { display: inline-flex; color: var(--accent); font-size: 0; flex: 0 0 auto; }
/* El texto de la cabecera va en dos líneas: qué es y en qué estado está */
.gc-accordion > summary .gc-grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gc-accordion > summary .gc-xs { line-height: 1.35; }
.gc-accordion > summary .acc-chevron {
  display: inline-flex; color: var(--text-muted); font-size: 0; flex: 0 0 auto;
  transition: transform .18s ease;
}
.gc-accordion[open] > summary .acc-chevron { transform: rotate(180deg); }
.gc-accordion[open] > summary { border-bottom: 1px solid var(--border-soft); }
.gc-accordion .acc-body { padding: 14px; }

@media (prefers-reduced-motion: reduce) {
  .gc-accordion > summary .acc-chevron { transition: none; }
}

/* Condiciones de uso de una tarifa, en la tabla. Son etiquetas y no una frase
   porque en una celda estrecha una frase larga no se lee: «07:00–15:00» y «2
   días/semana» se captan de un vistazo. */
.cond-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.cond-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--bg-card-hover); border: 1px solid var(--border-soft);
  font-size: .68rem; font-weight: 600; color: var(--text-soft);
  white-space: nowrap;
}

/* Editor del horario de apertura: las horas no deben estirarse con la columna */
.hours-editor input[type=time] { width: 116px; }
.hours-editor td, .hours-editor th { white-space: nowrap; }
.hours-editor input:disabled { opacity: .4; }

.color-dot {
  width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.14);
}
input[type=color].gc-input { padding: 3px; height: 40px; cursor: pointer; }

/* ==========================================================================
   DOCUMENTOS DEL ALTA Y FIRMA
   ========================================================================== */

/* El texto legal se lee, no se decora: cuerpo monoespaciado ancho fijo, saltos
   de línea respetados y una altura acotada para que el botón de firmar siga a
   la vista en una tableta. */
.doc-preview {
  max-height: 42vh; overflow-y: auto;
  padding: 16px 18px; white-space: pre-wrap;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .8rem; line-height: 1.6; color: var(--text-soft);
  font-family: var(--font-mono);
}
.doc-pdf-frame {
  height: 42vh; border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; background: var(--bg-elev);
}
.doc-pdf-frame embed { width: 100%; height: 100%; }
.doc-editor { min-height: 320px; font-family: var(--font-mono); font-size: .78rem; line-height: 1.55; }
.doc-move { white-space: nowrap; }
.doc-move .gc-btn { padding: 2px 6px; min-width: 0; }

/* Elegir qué documentos se firman ahora, antes de entrar al asistente */
.doc-elegir-lista { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.doc-elegir {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; cursor: pointer;
  border-top: 1px solid var(--border-soft); transition: background .12s;
}
.doc-elegir:first-child { border-top: 0; }
.doc-elegir:hover { background: var(--bg-card-hover); }
.doc-elegir input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; cursor: pointer; }
.doc-elegir:has(input:checked) { background: var(--accent-soft); }

.sign-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 12px; flex-wrap: wrap;
}
.sign-title { font-size: 1rem; font-weight: 650; }
.sign-steps { display: flex; gap: 5px; align-items: center; }
.sign-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong); transition: all .15s;
}
.sign-dot.done { background: var(--accent); }
.sign-dot.now  { background: var(--accent); transform: scale(1.6); }

.sign-read { margin-top: 12px; font-weight: 550; }

.sign-pad-wrap { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.sign-pad-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; background: var(--bg-elev); border-bottom: 1px solid var(--border);
}
/* Fondo blanco siempre, también en tema oscuro: se firma sobre papel, y la
   imagen que se guarda y se imprime es tinta oscura. */
.sign-pad {
  position: relative; height: 190px; background: #fff;
  background-image: linear-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 100% 100%; background-position: 0 152px; background-repeat: no-repeat;
  touch-action: none;                     /* el dedo firma, no hace scroll */
}
.sign-pad::after {
  content: "Firma aquí";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #94a3b8; font-size: .95rem; pointer-events: none; letter-spacing: .03em;
}
.sign-pad.has-ink::after { display: none; }
.sign-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.sign-pad-foot { padding: 7px 11px; background: var(--bg-elev); border-top: 1px solid var(--border); }

.doc-sign-block {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.doc-sign-img {
  max-height: 90px; background: #fff; border-radius: 6px;
  border: 1px solid var(--border); padding: 4px;
}

/* ==========================================================================
   CÓDIGO QR DE LA APP
   ========================================================================== */

/* El QR se pinta SIEMPRE sobre blanco, también en tema oscuro: invertirlo hace
   que muchos lectores no lo cojan. */
.qr-box {
  display: grid; place-items: center; padding: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
}
.qr-box svg { display: block; max-width: 100%; height: auto; }
.qr-url {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-soft);
  word-break: break-all; user-select: all;
}

/* ==========================================================================
   LOGIN
   ========================================================================== */

.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(95,226,124,.13), transparent 65%),
    radial-gradient(800px 500px at 95% 110%, rgba(34,225,207,.10), transparent 65%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-lg);
}
/* La marca de la pantalla de acceso: el mismo símbolo + palabra del resto del
   ecosistema, en grande y centrado. Antes era el PNG estirado a 240 px. */
.login-logo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-logo-icon {
  width: 72px; height: 72px; margin-bottom: 14px; font-size: 0;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 24px rgba(95, 226, 124, .40));
}
.login-logo h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.login-logo h1 span { color: var(--accent); }

/* ==========================================================================
   Varios
   ========================================================================== */

.stat-line { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: .85rem; }
.stat-line + .stat-line { border-top: 1px solid var(--border-soft); }
.stat-line .sl-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.stat-line .sl-val { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }

.month-nav { display: flex; align-items: center; gap: 5px; }
.month-nav .mn-label {
  min-width: 132px; text-align: center; font-size: .88rem; font-weight: 650;
  text-transform: capitalize;
}

@media print {
  .topbar, .page-actions, .toolbar, .tb-nav { display: none !important; }
  .page { padding: 0; }
  .gc-card, .table-card { border: 1px solid #ddd; break-inside: avoid; }
}

/* ==========================================================================
   Ajustes para iconos vectoriales
   Los contenedores estaban dimensionados con font-size para emoji; con SVG
   hay que alinear con flex y quitar el tamaño de fuente.
   ========================================================================== */

.gc-notice .n-ico,
.gc-empty .e-ico,
.info-row .ir-ic,
.row-card .rc-ico,
.recibo .rc-ico,
.inst-card .ic-ico,
.menu-item .mi-ic,
.feed-item .feed-ic,
.stat-line > span:first-child,
.attendee .gc-avatar,
.pay-ok .po-ic {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.gc-notice .n-ico     { font-size: 0; margin-top: 1px; }
.gc-empty .e-ico      { font-size: 0; color: var(--text-muted); opacity: .75; margin-bottom: 12px; }
.info-row .ir-ic      { font-size: 0; margin-top: 2px; }
.pay-ok .po-ic        { font-size: 0; }
.auth-logo            { font-size: 0; }
.hd-logo              { font-size: 0; }
.hd-btn               { font-size: 0; }
.tabbar button .ic    { font-size: 0; }

/* Los badges con icono necesitan alinear el SVG con el texto */
.gc-badge .gc-i, .gc-regimen .gc-i, .gc-chip .gc-i { margin-right: 1px; }
.gc-btn .gc-i { margin-right: -2px; }
.gc-btn.icon .gc-i { margin: 0; }

/* Iconos vectoriales en la topbar y en la navegación de secciones */
.tb-logo, .tb-btn, .tb-link .ic { font-size: 0; }
/* `.tb-btn` NO va aquí: ya se centra arriba con grid + place-items, y volver a
   fijarle `display` desde el final del archivo es lo que hacía reaparecer el
   botón de menú en escritorio pisando su `display: none`. */
.tb-link .ic { display: inline-flex; align-items: center; justify-content: center; }
.setup-tab > span:first-child,
.f360-nav button > span:first-child,
.gp-kpi .k-ico, .gc-kpi .k-ico,
.gp-facility-head .fh-ico, .gp-meter .m-ico,
.gp-doc .d-ico, .inst-row-ico {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0;
}
.gp-doc .d-ico, .gc-doc .d-ico { font-size: .58rem; font-weight: 700; letter-spacing: .02em; }
.gp-timeline .tl-title .gp-i { vertical-align: -0.2em; }

/* ==========================================================================
   FOTO DE LA ACTIVIDAD (modal de actividad · Ajustes → Actividades)
   --------------------------------------------------------------------------
   La vista previa se enseña YA ATENUADA, con la misma capa que pone la app
   encima de la foto. El gestor tiene que elegir mirando lo que va a ver el
   socio, no la foto suelta: una foto preciosa puede ser ilegible de fondo.
   ========================================================================== */

.act-photo { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

.act-photo .ap-prev {
  position: relative; height: 108px;
  background-size: cover; background-position: center;
}
/* La misma capa que la tarjeta de la app en modo oscuro */
.act-photo .ap-prev::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,16,28,.82) 0%, rgba(10,16,28,.74) 58%, rgba(10,16,28,.60) 100%);
  backdrop-filter: saturate(.75) blur(1.5px);
  -webkit-backdrop-filter: saturate(.75) blur(1.5px);
}
html[data-theme="light"] .act-photo .ap-prev::after {
  background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.82) 58%, rgba(255,255,255,.70) 100%);
}
.act-photo .ap-prev-txt { position: relative; z-index: 1; padding: 14px 16px; }
.act-photo .ap-prev-name { font-weight: 700; font-size: .95rem; color: #fff; }
.act-photo .ap-prev-meta { font-size: .74rem; color: rgba(255,255,255,.82); margin-top: 2px; }
html[data-theme="light"] .act-photo .ap-prev-name { color: var(--text); }
html[data-theme="light"] .act-photo .ap-prev-meta { color: var(--text-muted); }

.act-photo .ap-empty {
  height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; color: var(--text-muted); font-size: .78rem; text-align: center; padding: 0 14px;
  background: var(--bg-soft, var(--bg-card));
}
.act-photo .ap-empty .gc-i { opacity: .55; }

.act-photo .ap-actions {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--border);
}
/* El botón de subir es un <label> con el input dentro: se comporta como botón */
.act-photo .ap-actions label.gc-btn { cursor: pointer; }

/* Miniatura en la tabla de actividades */
.act-thumb {
  width: 40px; height: 30px; border-radius: 6px; flex: 0 0 auto;
  background-size: cover; background-position: center;
  border: 1px solid var(--border);
}

/* ==========================================================================
   WOD · el entrenamiento del día
   --------------------------------------------------------------------------
   Semana en columnas. En escritorio caben los siete días de un vistazo, que es
   como el entrenador mira su programación; por debajo de 1100 px se apilan.
   ========================================================================== */

.wod-page { max-width: 1400px; margin: 0 auto; }

.wod-weeknav {
  display: flex; align-items: center; gap: 9px;
  margin: 4px 0 14px;
}
.wod-weeknav .wn-label {
  font-weight: 700; font-size: .95rem; min-width: 170px; text-align: center;
}

.wod-week {
  display: grid; gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
}
/* Los siete días aguantan hasta 1200 px: a 190 px de columna el entrenamiento
   se sigue leyendo, y ver la semana entera de una vez es justo el motivo de
   esta pantalla. Por debajo se pliega. */
@media (max-width: 1200px) { .wod-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .wod-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .wod-week { grid-template-columns: 1fr; } }

.wod-day {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
/* El día de hoy, marcado: es el que se mira el 90 % de las veces */
.wod-day.hoy { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.wod-day.pasado { opacity: .62; }

.wd-head {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; border-bottom: 1px solid var(--border-soft);
}
.wd-dow  { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
           color: var(--text-muted); font-weight: 700; }
.wd-date { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.wod-day.hoy .wd-date { color: var(--accent); }

.wd-cov { font-size: .62rem; color: var(--text-muted); margin-top: 2px; }
.wd-cov.falta { color: var(--warn); background: var(--warn-soft); font-weight: 700; }
.wd-cov.vacio { opacity: .55; }

.wd-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }

.wd-empty {
  width: 100%; padding: 16px 10px; border-radius: 9px;
  border: 1.5px dashed var(--border-strong); background: none;
  color: var(--text-muted); font-size: .74rem; cursor: pointer; transition: all .15s;
}
.wd-empty:hover { border-color: var(--accent); color: var(--accent); }

.wod-card {
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 10px; cursor: pointer; transition: all .15s;
  background: var(--bg-elev);
  overflow: hidden;   /* nada se sale de la tarjeta por estrecha que sea */
}
.wod-card:hover { border-color: var(--accent); }
/* El borrador se ve distinto de un vistazo: es lo que aún no ve el socio */
.wod-card.borrador { border-style: dashed; background: none; }

/* Envuelve en vez de recortar: con siete columnas en pantalla la fila se queda
   sin sitio, y dos líneas ordenadas se leen; media palabra cortada, no. */
.wc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.wc-scope {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--text-muted);
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El WOD de una actividad concreta lleva el color de acento: es la excepción */
.wc-scope.act { color: var(--accent); }
.wc-kind {
  font-size: .6rem; font-weight: 700; padding: 1px 6px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent);
  white-space: nowrap; flex: 0 0 auto;
}
/* El estado va en texto pequeño y no en una insignia: en una columna de 190 px
   la insignia se llevaba una línea entera para decir una palabra. */
.wc-state { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.wc-state { flex: 0 0 auto; white-space: nowrap; }
.wc-state { color: var(--text-muted); }

.wc-title { font-size: .86rem; font-weight: 700; margin-bottom: 4px; }
.wc-body {
  font-size: .72rem; color: var(--text-soft); line-height: 1.5;
  white-space: pre-wrap;                 /* el entrenamiento se escribe en líneas */
  max-height: 190px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
          mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.wc-pdf { font-size: .72rem; color: var(--text-soft); display: flex; align-items: center; gap: 6px; }

/* El editor respeta los saltos de línea, así que se escribe en monoespaciada:
   un WOD se lee en columna y con la proporcional se descuadra. */
.wod-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.55;
}

/* Recuento de invitaciones bajo su configuración */
.inv-stats {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.inv-stats .is-item { display: flex; flex-direction: column; }
.inv-stats .is-item b { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.inv-stats .is-item span { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }

/* Secciones que viven como icono a la derecha (WOD, Comunicación).
   Necesitan sitio para su aviso, que en las de texto va en línea. */
.tb-btn { position: relative; }
.tb-btn .tb-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: 99px;
  /* Explícito porque `.tb-btn` se pone a `font-size: 0` para que el SVG mande:
     sin esto el número no se vería. */
  font-size: .6rem; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--bg);
}

/* Etiqueta del grupo en la tabla de socios */
.grp-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 99px;
  background: var(--bg-soft, var(--bg-elev)); color: var(--text-soft);
  font-size: .64rem; font-weight: 600;
}
.grp-tag.titular { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.grp-tag .gc-i { opacity: .8; }

/* La tarjeta del grupo dentro de la ficha del socio */
.grupo-card .menu-item.gc-here {
  background: var(--accent-soft);
  border-radius: 8px;
}
.grupo-card .menu-item.gc-here .mi-label .gc-bold { color: var(--accent); }

/* ==========================================================================
   NOTAS INTERNAS SOBRE UN SOCIO
   ========================================================================== */

/* Las fijadas van arriba de la ficha, en ámbar: son lo que hay que ver antes
   de atender a esa persona, no algo que se busca. */
.notas-fijadas { display: flex; flex-direction: column; gap: 7px; }
.nota-fija {
  display: flex; gap: 10px; padding: 11px 13px;
  background: var(--warn-soft); border-radius: 10px;
}
.nota-fija .nf-ic { color: var(--warn); flex: 0 0 auto; display: inline-flex; margin-top: 1px; }

.notas-lista { display: flex; flex-direction: column; gap: 8px; }
.nota {
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card);
}
.nota.fijada { border-color: var(--warn); background: var(--warn-soft); }
.nota .gc-btn.ghost { opacity: .55; transition: opacity .15s; }
.nota:hover .gc-btn.ghost { opacity: 1; }

/* ==========================================================================
   BI · ENCUESTAS
   ========================================================================== */

/* Segmentado para alternar la misma gráfica entre dos lecturas (socios /
   ingresos). Es un interruptor, no dos botones: solo uno puede estar dado. */
.gc-seg {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--bg-soft);
}
.gc-seg button {
  border: 0; background: transparent; color: var(--text-muted);
  padding: 5px 11px; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.gc-seg button:hover { color: var(--text); }
.gc-seg button.on { background: var(--accent); color: var(--accent-text); }

.enc-lista { display: flex; flex-direction: column; gap: 9px; }
.enc {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-card);
}
.enc:hover { border-color: var(--border-strong); }
.enc-main { flex: 1 1 260px; min-width: 0; }
.enc-tit {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-weight: 650; margin-bottom: 3px;
}
.enc-sub { font-size: .8rem; color: var(--text-muted); }

/* La nota manda: es el único dato por el que se entra a mirar una encuesta. */
.enc-nota { text-align: center; flex: 0 0 auto; min-width: 62px; }
.enc-nota .en-val { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.enc-nota .en-lab { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.enc-acc { display: flex; gap: 6px; flex: 0 0 auto; }

.enc-aviso {
  padding: 11px 13px; border-radius: 10px;
  background: var(--warn-soft); color: var(--warn); font-size: .84rem;
}

.enc-item { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.enc-item .ei-text { flex: 1 1 auto; }

/* ---------- Resultados ---------- */

.res-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.res-big {
  flex: 0 0 auto; text-align: center; padding: 14px 20px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent);
}
.res-big.info   { background: var(--info-soft);   color: var(--info); }
.res-big.danger { background: var(--danger-soft); color: var(--danger); }
.res-big .rb-val { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.res-big .rb-lab { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.res-meta { flex: 1 1 220px; min-width: 0; }

.res-item { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.res-item .ri-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.res-item .ri-text { font-weight: 600; }
.res-item .ri-val { font-weight: 700; white-space: nowrap; }

/* Histograma del reparto de notas. Las barras se dibujan con altura relativa
   a la nota más votada, no al total: con 96 respuestas repartidas en diez
   valores, sobre el total no se vería ninguna. */
.ri-barras { display: flex; align-items: flex-end; gap: 4px; height: 74px; margin-top: 10px; }
.ri-barras .rb { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ri-barras .rb-col {
  background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px;
  transition: height .25s;
}
/* En un NPS el color dice de qué lado cae cada nota, que es justo lo que hay
   que ver de un vistazo: verde promotores, ámbar pasivos, rojo detractores. */
.ri-barras .rb-col.prom { background: var(--accent); }
.ri-barras .rb-col.pas  { background: var(--warn); }
.ri-barras .rb-col.det  { background: var(--danger); }
.ri-barras .rb-n { text-align: center; font-size: .66rem; color: var(--text-muted); margin-top: 3px; }

.ri-coms { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.ri-com { display: flex; gap: 10px; font-size: .86rem; }
.ri-com .rc-nota {
  flex: 0 0 auto; min-width: 30px; height: 24px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: .76rem;
}
.ri-com.malo .rc-nota { background: var(--danger-soft); color: var(--danger); }

/* ==========================================================================
   AVISOS · ESTADO DE UN VISTAZO

   El borde izquierdo dice si el aviso está vivo en la app sin tener que
   abrirlo: verde lo están viendo los socios, rojo ya no, ámbar todavía no.
   Es lo que evita el aviso zombi — la gente leyendo un mes que la piscina
   cierra tres días.
   ========================================================================== */
.aviso-card { border-left: 3px solid var(--border-strong); }
.aviso-card.activo     { border-left-color: var(--accent); }
.aviso-card.caducado   { border-left-color: var(--danger); }
.aviso-card.programado { border-left-color: var(--warn); }
/* El caducado se apaga: sigue ahí para consultarlo, pero ya no compite con
   los que sí están saliendo en la app. */
.aviso-card.caducado .gc-bold,
.aviso-card.caducado .gc-soft { opacity: .6; }

.av-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 650; color: var(--text-muted);
}
.av-estado i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong); flex: 0 0 auto;
}
.av-estado.ok       { color: var(--accent); }
.av-estado.ok i     { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.av-estado.danger   { color: var(--danger); }
.av-estado.danger i { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.av-estado.warn     { color: var(--warn); }
.av-estado.warn i   { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }

/* ==========================================================================
   PRÓXIMA CUOTA Y AJUSTES

   La ficha solo enseñaba lo ya cobrado. Esto es lo contrario —lo que se le va
   a pasar y por qué—, que es la pregunta que hacen en el mostrador.
   ========================================================================== */
/* --- Lo pendiente de cobro ---
   Va arriba del todo de la pestaña de Facturación porque es lo único de esa
   pantalla sobre lo que hay que ACTUAR: el resto es histórico. Se marca en
   rojo suave solo el borde, no el fondo entero: con cinco recibos dentro, un
   bloque rojo macizo tapa lo que hay que leer. */
.pend-box { padding: 14px 15px; border-color: var(--danger); }
/* Es la MISMA tabla que la del histórico de abajo, y a propósito: son las dos
   mitades de lo mismo —lo que se debe y lo que ya se pagó— y el gestor no
   tiene que aprender dos formas de leer sus recibos. Cambia lo que hace falta
   que cambie: aquí hay casillas y allí no. */
.pend-tabla input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.pend-tabla .pf-lock { color: var(--text-muted); display: inline-flex; }
/* La fila marcada, para ver de un vistazo cuáles entran en el cobro */
.pend-tabla tbody tr:has(input:checked) { background: var(--accent-soft); }
.pend-tabla tbody tr:has(input:checked) td { border-color: transparent; }
.pend-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--border);
}

/* El resumen del cobro, dentro de su modal */
.cobro-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 11px 13px; border-radius: 10px; background: var(--accent-soft);
}
.cobro-total b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.cobro-lista { max-height: 190px; overflow-y: auto; }
.cobro-linea {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--border-soft);
}
.cobro-linea:first-child { border-top: 0; }

.prox-cuota {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 15px; background: var(--bg-elev);
}
.prox-cuota .pc-linea {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--border-soft);
}
.prox-cuota .pc-linea:first-of-type { border-top: 0; }
/* El ajuste se separa de las líneas de tarifa: no es lo que cuesta, es lo que
   se le perdona o se le suma este mes. */
.prox-cuota .pc-linea.ajuste { background: var(--bg-soft); border-radius: 8px; padding: 8px 10px; }
.prox-cuota .pc-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: .9rem;
}
.prox-cuota .pc-total b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.ajuste-fila {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 7px;
  border: 1px solid var(--border); border-radius: 10px;
}
.ajuste-fila .af-imp {
  flex: 0 0 auto; min-width: 76px; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.ajuste-fila .af-imp.ok  { color: var(--accent); }
.ajuste-fila .af-imp.err { color: var(--danger); }
.ajuste-fila .gc-btn.ghost { opacity: .55; transition: opacity .15s; }
.ajuste-fila:hover .gc-btn.ghost { opacity: 1; }

/* Los dos bloques del editor de cuota de grupo. Separarlos no es estética:
   «personas incluidas» es dinero y «adultos como mucho» es composición, y
   puestos en fila los seis campos parecían lo mismo. */
.pg-bloque {
  border-top: 1px solid var(--border-soft);
  padding-top: 11px; margin-top: 11px;
}
.pg-bloque:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.pg-bloque .pg-tit {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 9px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA BOTONERA DE TORNOS
   ──────────────────────────────────────────────────────────────────────────
   Flota por encima de TODO, modales incluidos (z-index 1200 contra los 1100
   del modal). No es un capricho de capas: su razón de ser es abrir la puerta
   mientras se está haciendo otra cosa, y una botonera que desaparece en cuanto
   abres el alta de un socio no sirve para lo que se pidió.

   Por eso arranca abajo a la izquierda: los avisos del programa salen abajo a
   la derecha y taparlos sería esconder justo el mensaje que dice si el torno
   se abrió.

   Discreta: translúcida en reposo, opaca al acercarse o al llevar el foco
   dentro. Está encima de la gestión, no delante de ella.
   ══════════════════════════════════════════════════════════════════════════ */
.gc-botonera {
  position: fixed; z-index: 1200;
  width: 232px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
  font-size: .8rem;
  opacity: .62;
  transition: opacity .16s ease, box-shadow .16s ease;
  overflow: hidden;
  /* Que no se seleccione texto al arrastrarla */
  user-select: none; -webkit-user-select: none;
}
.gc-botonera:hover,
.gc-botonera:focus-within,
.gc-botonera.dragging { opacity: 1; box-shadow: 0 14px 40px rgba(0, 0, 0, .44); }

.gc-botonera .bt-head {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 8px 7px 10px;
  background: var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  cursor: grab;
  touch-action: none;            /* el arrastre lo lleva el puntero, no el scroll */
}
.gc-botonera.dragging .bt-head { cursor: grabbing; }
.gc-botonera .bt-grip  { display: inline-flex; opacity: .5; }
.gc-botonera .bt-title { flex: 1; font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

.gc-botonera .bt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: none; border: 0; border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
}
.gc-botonera .bt-ico:hover { background: var(--border-soft); color: var(--text); }

/* Plegada: solo la barra de título, del tamaño de una pestaña */
.gc-botonera.min .bt-body { display: none; }
.gc-botonera.min #bt-min  { transform: rotate(180deg); }

.gc-botonera .bt-body { padding: 4px; max-height: 62vh; overflow-y: auto; }
.gc-botonera .bt-load { padding: 12px 10px; color: var(--text-muted); font-size: .76rem; }

.gc-botonera .bt-r { padding: 7px 6px; border-radius: 8px; }
.gc-botonera .bt-r + .bt-r { border-top: 1px solid var(--border-soft); }

.gc-botonera .bt-r-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gc-botonera .bt-r-name {
  flex: 1; min-width: 0;
  font-size: .74rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-botonera .bt-state {
  flex: 0 0 auto;
  font-size: .64rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.gc-botonera .bt-state.free { background: var(--warn-soft);   color: var(--warn); }
.gc-botonera .bt-state.lock { background: var(--danger-soft); color: var(--danger); }

.gc-botonera .bt-r-btns { display: flex; gap: 5px; }
.gc-botonera .bt-open {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 6px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font-size: .74rem; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.gc-botonera .bt-open:hover:not(:disabled) {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
}
.gc-botonera .bt-open:disabled { opacity: .4; cursor: not-allowed; }
.gc-botonera .bt-open.ok {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text); opacity: 1;
}

/* El desplegable de estados, dentro de la propia botonera: un menú flotante
   aparte se saldría de la ventanita justo cuando está pegada a un borde. */
.gc-botonera .bt-modes {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border-soft);
  display: flex; flex-direction: column; gap: 3px;
}
.gc-botonera .bt-mode {
  text-align: left; padding: 6px 8px;
  background: none; border: 0; border-radius: 6px;
  color: var(--text); font-size: .73rem; cursor: pointer;
}
.gc-botonera .bt-mode:hover  { background: var(--border-soft); }
.gc-botonera .bt-mode.volver { color: var(--accent); font-weight: 600; }

.gc-botonera .bt-dur {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin-top: 4px; padding: 6px 8px 2px;
  font-size: .68rem; color: var(--text-muted);
}
.gc-botonera .bt-dur-op { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.gc-botonera .bt-dur-op input { margin: 0; }

/* En un móvil no se arrastra nada: ocupa el ancho y se pega abajo */
@media (max-width: 560px) {
  .gc-botonera {
    left: 8px !important; right: 8px;
    top: auto !important; bottom: 8px;
    width: auto; opacity: 1;
  }
}

/* La fila de un torno en Ajustes → Tornos. Mismo esqueleto que el resto de
   listas de ajustes; lo propio es el icono teñido, que dice de un vistazo cuál
   se ha quedado suelto sin tener que leer las etiquetas. */
.torno-fila {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-elev);
}
.torno-fila + .torno-fila { margin-top: 7px; }
.torno-fila.off { opacity: .55; }
.torno-fila .tf-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--border-soft); color: var(--text-muted);
}
.torno-fila .tf-ico.free { background: var(--warn-soft);   color: var(--warn); }
.torno-fila .tf-ico.lock { background: var(--danger-soft); color: var(--danger); }
.torno-fila .tf-estado { flex: 0 0 auto; text-align: right; min-width: 108px; }
.torno-fila code {
  font-size: .68rem; padding: 1px 5px; border-radius: 4px;
  background: var(--border-soft);
}
@media (max-width: 620px) {
  .torno-fila { flex-wrap: wrap; }
  .torno-fila .tf-estado { min-width: 0; text-align: left; }
}