/* ==========================================================================
   GestionaPública — App del ciudadano
   Móvil primero. Sobre 900px se centra en una columna tipo "teléfono ancho".
   ========================================================================== */

body {
  background: var(--bg);
  overscroll-behavior-y: none;
}

#app {
  max-width: 620px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 700px) {
  body { background: var(--bg-elev); }
  #app { box-shadow: 0 0 0 1px var(--border); background: var(--bg); }
}

/* ==========================================================================
   Pantalla de bienvenida / autenticación
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0px));
}
.auth-hero {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 12px; padding: 30px 0;
}
/* El símbolo va suelto, sin pastilla de color detrás: el aro amarillo ya es
   una forma cerrada y encerrarlo en un cuadrado le quita aire. */
.auth-logo {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  filter: drop-shadow(0 10px 30px rgba(252, 169, 5, .38));
  margin-bottom: 6px;
}
.auth-hero h1 { font-size: 1.7rem; letter-spacing: -.025em; }
.auth-hero p  { color: var(--text-soft); max-width: 330px; margin: 0; }
.auth-actions { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.auth-legal { text-align: center; font-size: .7rem; color: var(--text-muted); margin-top: 16px; line-height: 1.55; }

.auth-form { padding-top: 8px; }
.auth-back {
  background: none; border: 0; color: var(--text-soft); font-size: .88rem; font-weight: 600;
  cursor: pointer; padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.auth-back:hover { color: var(--text); }

/* Pasos del alta */
.steps { display: flex; gap: 6px; margin: 4px 0 20px; }
.steps i {
  flex: 1; height: 4px; border-radius: 99px; background: var(--border);
  transition: background .3s;
}
.steps i.done { background: var(--accent); }
.step-label { font-size: .74rem; color: var(--text-muted); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }

/* Tarjetas de tarifa en el alta */
.plan-pick { display: flex; flex-direction: column; gap: 10px; }
.plan-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--bg-card); cursor: pointer; transition: all .16s; position: relative;
}
.plan-opt:hover { border-color: var(--border-strong); }
.plan-opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.plan-opt input { display: none; }
.plan-opt .p-radio {
  width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--border-strong);
  flex: 0 0 auto; margin-top: 2px; display: grid; place-items: center; transition: all .16s;
}
.plan-opt.sel .p-radio { border-color: var(--accent); }
.plan-opt.sel .p-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.plan-opt .p-name  { font-weight: 650; font-size: .95rem; }
.plan-opt .p-desc  { font-size: .78rem; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.plan-opt .p-price { margin-left: auto; text-align: right; flex: 0 0 auto; }
.plan-opt .p-price b { font-size: 1.05rem; font-weight: 700; display: block; }
.plan-opt .p-price span { font-size: .7rem; color: var(--text-muted); }
.plan-opt .p-tag {
  position: absolute; top: -8px; right: 12px;
  background: var(--accent); color: var(--accent-text);
  font-size: .62rem; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ==========================================================================
   Cabecera de la app
   ========================================================================== */

.app-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--border-soft);
  padding: env(safe-area-inset-top, 0px) 16px 0;
}
.app-header .hd {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
}
.hd-logo {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--accent);
  filter: drop-shadow(0 3px 10px rgba(252, 169, 5, .26));
}
.hd-club { font-size: .93rem; font-weight: 650; line-height: 1.15; }
.hd-sub  { font-size: .7rem; color: var(--text-muted); }
.hd-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-soft);
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
  font-size: .95rem; transition: all .15s; position: relative;
}
.hd-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.hd-btn .dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--bg);
}

.view { padding: 16px; animation: gpFade .18s ease; }
.view-title { font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 3px; }
.view-sub   { font-size: .82rem; color: var(--text-muted); margin-bottom: 16px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 22px 0 10px;
}
.section-head:first-child { margin-top: 0; }
.section-head h2 { font-size: .95rem; font-weight: 650; }
.section-head a  { font-size: .78rem; font-weight: 600; }

/* ==========================================================================
   Barra de pestañas inferior
   ========================================================================== */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  max-width: 620px; margin: 0 auto;
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  border-top: 1px solid var(--border);
  /* Columnas automáticas: la app del ciudadano tiene cuatro pestañas y la del
     personal cinco, y con un repeat fijo la quinta se salía de la barra. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar button {
  background: none; border: 0; cursor: pointer;
  height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-muted); font-size: .64rem; font-weight: 600;
  transition: color .15s; position: relative; padding: 0;
}
.tabbar button .ic { line-height: 0; transition: transform .18s; }
.tabbar button.active { color: var(--accent); }
.tabbar button.active .ic { transform: translateY(-1px); }
/* La pestaña activa se refuerza con un trazo más grueso, no con escala:
   escalar un SVG de línea lo deja borroso en pantallas no retina. */
.tabbar button.active .ic .gp-i { stroke-width: 2.1; }
.tabbar button .badge {
  position: absolute; top: 9px; left: 50%; margin-left: 5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: 99px;
  font-size: .6rem; font-weight: 700; display: grid; place-items: center;
  border: 2px solid var(--bg-elev);
}

/* ==========================================================================
   INICIO
   ========================================================================== */

.greet { margin-bottom: 16px; }
.greet h1 { font-size: 1.45rem; letter-spacing: -.025em; }
.greet p  { color: var(--text-muted); font-size: .84rem; margin: 2px 0 0; }

/* Tarjeta destacada: próxima clase */
.next-card {
  border-radius: var(--r-lg); padding: 16px;
  /* Superficie de marca a todo color. Sobre amarillo el texto va en tinta
     oscura, no en blanco: blanco sobre #FCA905 se queda en 1,9:1. */
  background: linear-gradient(150deg, #F59000 0%, #FCA905 55%, #FFC233 100%);
  color: #1c1305; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px rgba(252, 169, 5, .28);
}
.next-card::after {
  content: ""; position: absolute; right: -34px; top: -34px;
  width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.1);
}
.next-card .nc-tag {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  opacity: .82; margin-bottom: 7px;
}
.next-card h3 { font-size: 1.28rem; margin-bottom: 3px; }
.next-card .nc-meta { font-size: .84rem; opacity: .9; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.next-card .nc-count {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(28,19,5,.20);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .8rem; position: relative;
}
.next-card .nc-btn {
  background: rgba(255,255,255,.38); border: 1px solid rgba(28,19,5,.16); color: #1c1305;
  padding: 6px 12px; border-radius: 99px; font-size: .76rem; font-weight: 650; cursor: pointer;
}
.next-card .nc-btn:hover { background: rgba(255,255,255,.58); }

/* Aviso de cuota pendiente */
.alert-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px; border-radius: var(--r);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
}
.alert-card.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 34%, transparent); }
.alert-card .a-ico { font-size: 1.15rem; flex: 0 0 auto; }
.alert-card .a-title { font-weight: 650; font-size: .88rem; margin-bottom: 2px; }
.alert-card .a-text  { font-size: .78rem; color: var(--text-soft); line-height: 1.45; }

/* Accesos rápidos */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.quick button {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 13px 6px 11px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 600; color: var(--text-soft); transition: all .15s;
}
.quick button:hover { background: var(--bg-card-hover); border-color: var(--border-strong); color: var(--text); }
.quick button .q-ic { font-size: 1.3rem; }

/* Avisos del club */
.news {
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg-card); padding: 14px; cursor: pointer; transition: all .15s;
}
.news:hover { background: var(--bg-card-hover); }
.news + .news { margin-top: 9px; }
.news .n-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.news h4 { font-size: .9rem; font-weight: 650; }
.news p  { font-size: .8rem; color: var(--text-soft); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news .n-date { font-size: .7rem; color: var(--text-muted); margin-top: 7px; }

/* ==========================================================================
   CLASES
   ========================================================================== */

.week-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 12px;
}
.week-nav .wn-label { font-size: .86rem; font-weight: 650; text-transform: capitalize; }

.day-strip {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px;
  scrollbar-width: none;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-pill {
  flex: 0 0 auto; width: 50px; padding: 9px 0;
  border-radius: var(--r); border: 1px solid var(--border); background: var(--bg-card);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; transition: all .15s;
}
.day-pill .dp-day { font-size: .64rem; font-weight: 650; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em; }
.day-pill .dp-num { font-size: 1.05rem; font-weight: 700; }
.day-pill .dp-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.day-pill.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.day-pill.active .dp-day { color: var(--accent-text); opacity: .85; }
.day-pill.active .dp-dot { background: var(--accent-text); }
.day-pill.today:not(.active) { border-color: var(--accent); }
.day-pill.past { opacity: .45; }

.filters { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }

/* Tarjeta de clase */
.slot-card {
  display: flex; gap: 12px; padding: 13px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  position: relative; overflow: hidden; transition: all .15s;
}
.slot-card + .slot-card { margin-top: 9px; }
.slot-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--act, var(--accent));
}
.slot-card.mine { border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: var(--accent-soft); }
.slot-card.blocked { opacity: .58; }
.slot-card.cancelled { opacity: .6; }
.slot-card.cancelled .sc-name { text-decoration: line-through; }

.sc-time { flex: 0 0 52px; padding-left: 6px; }
.sc-time .t1 { font-size: .96rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-time .t2 { font-size: .7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sc-body { flex: 1 1 auto; min-width: 0; }
.sc-name { font-size: .95rem; font-weight: 650; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sc-meta { font-size: .74rem; color: var(--text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 10px; }
.sc-occ  { margin-top: 9px; display: flex; align-items: center; gap: 9px; }
.sc-occ .gp-bar { flex: 1 1 auto; }
.sc-occ .o-txt { font-size: .7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-action { flex: 0 0 auto; display: flex; align-items: center; }
.sc-btn {
  min-width: 82px; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-text);
  font-size: .78rem; font-weight: 650; cursor: pointer; transition: all .15s;
}
.sc-btn:hover:not(:disabled) { background: var(--accent-hover); }
.sc-btn.out { background: transparent; color: var(--accent); }
.sc-btn.wl  { background: var(--warn); border-color: var(--warn); color: #3a2500; }
.sc-btn:disabled { opacity: .5; cursor: not-allowed; background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }

/* ==========================================================================
   RESERVAS / PAGOS — filas
   ========================================================================== */

.row-card {
  display: flex; align-items: center; gap: 12px; padding: 13px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  transition: all .15s;
}
.row-card + .row-card { margin-top: 9px; }
.row-card .rc-ico {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--accent-soft); color: var(--accent);
}
.row-card .rc-title { font-size: .89rem; font-weight: 620; }
.row-card .rc-sub   { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
.row-card .rc-right { margin-left: auto; text-align: right; flex: 0 0 auto; }
.row-card .rc-amount { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tarjeta de cuota (pagos) */
.cuota-card {
  border-radius: var(--r-lg); padding: 18px;
  background: linear-gradient(150deg, #1e293b, #0f172a);
  border: 1px solid var(--border-strong); color: #f1f5f9;
  position: relative; overflow: hidden;
}
html[data-theme="light"] .cuota-card { background: linear-gradient(150deg, #1e293b, #334155); }
.cuota-card::after {
  content: ""; position: absolute; right: -50px; bottom: -60px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(252,169,5,.30), transparent 70%);
}
.cuota-card .cc2-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; font-weight: 700; }
.cuota-card .cc2-name  { font-size: 1.32rem; font-weight: 700; margin: 4px 0 2px; }
.cuota-card .cc2-price { font-size: .88rem; opacity: .82; }
.cuota-card .cc2-foot  {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.15);
  display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; position: relative;
}
.cuota-card .cc2-foot .pf-label { opacity: .68; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.cuota-card .cc2-foot b { display: block; margin-top: 2px; font-size: .88rem; }

/* Método de pago */
.pay-method {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
}
.pay-method .pm-brand {
  width: 46px; height: 30px; border-radius: 6px; flex: 0 0 auto;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  display: grid; place-items: center; color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .04em;
}
.pay-method .pm-brand.sepa { background: linear-gradient(135deg, #065f46, #10b981); }
.pay-method .pm-brand.cash { background: linear-gradient(135deg, #78350f, #f59e0b); }

/* ==========================================================================
   PERFIL
   ========================================================================== */

.profile-head {
  display: flex; align-items: center; gap: 14px; padding: 4px 0 18px;
}
.profile-head .ph-name { font-size: 1.15rem; font-weight: 700; }
.profile-head .ph-mail { font-size: .8rem; color: var(--text-muted); }

.menu-list {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.menu-list + .menu-list { margin-top: 14px; }
.menu-item {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 14px; background: none; border: 0; cursor: pointer;
  color: var(--text); font-size: .89rem; text-align: left; transition: background .14s;
}
.menu-item + .menu-item { border-top: 1px solid var(--border-soft); }
.menu-item:hover { background: var(--bg-card-hover); }
.menu-item .mi-ic { font-size: 1.05rem; width: 24px; text-align: center; flex: 0 0 auto; }
.menu-item .mi-label { flex: 1 1 auto; font-weight: 550; }
.menu-item .mi-value { font-size: .8rem; color: var(--text-muted); }
.menu-item .mi-arrow { color: var(--text-muted); font-size: .85rem; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .mi-arrow { color: var(--danger); opacity: .6; }

.menu-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: 20px 0 8px;
}

/* Info del centro */
.info-row { display: flex; gap: 12px; padding: 12px 0; }
.info-row + .info-row { border-top: 1px solid var(--border-soft); }
.info-row .ir-ic { width: 22px; flex: 0 0 auto; text-align: center; color: var(--text-muted); }
.info-row .ir-label { font-size: .72rem; color: var(--text-muted); }
.info-row .ir-value { font-size: .87rem; font-weight: 550; }

.hours-table { width: 100%; font-size: .84rem; }
.hours-table td { padding: 6px 0; }
.hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.hours-table tr.today td { color: var(--accent); font-weight: 650; }

/* Checkout simulado */
.checkout-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 16px;
}
.checkout-total .ct-label { font-size: .8rem; color: var(--text-muted); }
.checkout-total .ct-amount { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-visual {
  border-radius: var(--r); padding: 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid var(--border-strong); color: #e2e8f0;
}
.card-visual .cv-num { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: .12em; margin: 18px 0 12px; }
.pay-ok {
  text-align: center; padding: 14px 0;
}
.pay-ok .po-ic {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 1.9rem;
  animation: gpPop .34s cubic-bezier(.2,.9,.3,1.4);
}

/* Utilidad de sección compacta */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.stat-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px; text-align: center;
}
.stat-box .sb-val { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-box .sb-lab { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 380px) {
  .quick { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ESPECÍFICO DE LA APP MUNICIPAL
   ========================================================================== */

/* --- Tarjeta de instalación --------------------------------------------- */
.inst-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  transition: all .15s;
}
.inst-card + .inst-card { margin-top: 10px; }
.inst-card:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
.inst-card .ic-body { padding: 13px; display: flex; gap: 12px; }
.inst-card .ic-ico {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--accent-soft); color: var(--accent);
}
.inst-card .ic-name { font-size: .95rem; font-weight: 650; }
.inst-card .ic-meta { font-size: .74rem; color: var(--text-muted); margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 3px 10px; }
.inst-card .ic-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.inst-card .ic-foot {
  padding: 9px 13px; border-top: 1px solid var(--border-soft);
  background: var(--bg-elev); font-size: .74rem; color: var(--text-muted);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.inst-card.cerrada { opacity: .62; }

/* --- Selector de franjas horarias --------------------------------------- */
.slot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;
}
.slot-btn {
  padding: 11px 6px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--bg-card);
  cursor: pointer; text-align: center; transition: all .14s;
}
.slot-btn .sb-hora { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.slot-btn .sb-precio { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
.slot-btn:hover:not(:disabled) { border-color: var(--accent); }
.slot-btn.sel { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.slot-btn.sel .sb-precio { color: var(--accent-text); opacity: .85; }
.slot-btn:disabled { opacity: .38; cursor: not-allowed; }
.slot-btn.ocupada { background: var(--bg-elev); border-style: dashed; }
.slot-btn.mia { border-color: var(--ok); background: var(--ok-soft); }

/* --- Cursillo ------------------------------------------------------------ */
.curso-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 13px 13px 13px 17px;
  position: relative; overflow: hidden;
}
.curso-card + .curso-card { margin-top: 10px; }
/* Franja del color de la actividad: más gruesa que el borde, es lo que
   identifica de un vistazo qué tipo de cursillo es. */
.curso-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--act, var(--accent)); z-index: 3;
}
/* `background-color` y no `background`: el atajo borraría la imagen de fondo */
.curso-card.inscrito { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background-color: var(--ok-soft); }
.curso-card.completo { opacity: .72; }

/* --------------------------------------------------------------------------
   Imagen de fondo de la actividad
   --------------------------------------------------------------------------
   La imagen se intuye; lo que manda es la información. Por eso va debajo de
   una capa que la atenúa —oscura en modo oscuro, clara en modo claro— más
   densa a la izquierda, que es donde está el texto, y más abierta a la
   derecha, donde solo hay un botón de color sólido.
   -------------------------------------------------------------------------- */
.curso-card.con-foto {
  background-image: var(--foto);
  background-size: cover;
  background-position: center;
  /* La imagen se corta en el borde y no por debajo: si la deja pasar, el
     borde coge el color de la foto y cada tarjeta acaba con uno distinto. */
  background-clip: padding-box;
}
.curso-card.con-foto > * { position: relative; z-index: 1; }
.curso-card.con-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(10, 16, 28, .84) 0%,
    rgba(10, 16, 28, .76) 58%,
    rgba(10, 16, 28, .62) 100%);
  /* Desenfocar y bajar el color hace más por la lectura que subir la
     opacidad, y deja que la imagen se vea. Donde no haya `backdrop-filter`,
     la capa sola ya basta. */
  backdrop-filter: saturate(.75) blur(1.5px);
  -webkit-backdrop-filter: saturate(.75) blur(1.5px);
}

/* Con imagen, el texto apagado deja de leerse: pasa a blanco con sombra */
.curso-card.con-foto,
.curso-card.con-foto .cu-name,
.curso-card.con-foto .cu-precio { color: #fff; }
.curso-card.con-foto .cu-meta,
.curso-card.con-foto .cu-precio small,
.curso-card.con-foto .gp-xs { color: rgba(255, 255, 255, .9); }
.curso-card.con-foto .cu-name,
.curso-card.con-foto .cu-meta,
.curso-card.con-foto .cu-precio,
.curso-card.con-foto .gp-xs { text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.curso-card.con-foto .gp-bar { background: rgba(255, 255, 255, .24); }

/* Modo claro: la capa aclara en vez de oscurecer y el texto se queda oscuro */
html[data-theme="light"] .curso-card.con-foto::after {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .9) 0%,
    rgba(255, 255, 255, .84) 58%,
    rgba(255, 255, 255, .72) 100%);
}
html[data-theme="light"] .curso-card.con-foto,
html[data-theme="light"] .curso-card.con-foto .cu-name,
html[data-theme="light"] .curso-card.con-foto .cu-precio { color: var(--text); }
html[data-theme="light"] .curso-card.con-foto .cu-meta,
html[data-theme="light"] .curso-card.con-foto .cu-precio small,
html[data-theme="light"] .curso-card.con-foto .gp-xs { color: var(--text-soft); }
html[data-theme="light"] .curso-card.con-foto .cu-name,
html[data-theme="light"] .curso-card.con-foto .cu-meta,
html[data-theme="light"] .curso-card.con-foto .cu-precio,
html[data-theme="light"] .curso-card.con-foto .gp-xs { text-shadow: 0 1px 3px rgba(255, 255, 255, .95); }
html[data-theme="light"] .curso-card.con-foto .gp-bar { background: rgba(15, 23, 42, .16); }
.curso-card .cu-name { font-size: .93rem; font-weight: 650; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.curso-card .cu-meta { font-size: .74rem; color: var(--text-muted); margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 3px 10px; }
.curso-card .cu-foot { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.curso-card .cu-precio { font-size: 1.05rem; font-weight: 700; }
.curso-card .cu-precio small { font-size: .68rem; color: var(--text-muted); font-weight: 500; }
.curso-card .cu-tachado { text-decoration: line-through; color: var(--text-muted);
  font-size: .78rem; font-weight: 500; margin-right: 4px; }

/* --- Evento ------------------------------------------------------------- */
.evento-card {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-card);
}
.evento-card + .evento-card { margin-top: 12px; }
.evento-card { border-left: 4px solid var(--act, var(--accent)); }
.evento-card .ev-top {
  padding: 16px; background: linear-gradient(135deg, #E08600, #FFBE2E); color: #1c1305;
  position: relative; overflow: hidden;
}
/* Con imagen, la cabecera del evento la usa de fondo bajo una capa del color
   de la prueba: así se reconoce la foto y el texto se sigue leyendo. */
.evento-card.con-foto .ev-top {
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--act, #E08600) 88%, transparent) 0%,
      color-mix(in srgb, var(--act, #E08600) 66%, transparent) 100%),
    var(--foto);
  background-size: cover, cover;
  background-position: center, center;
  color: #fff;
}
.evento-card.con-foto .ev-name,
.evento-card.con-foto .ev-lugar { text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.evento-card.con-foto .ev-fecha { background: rgba(0, 0, 0, .28); }
.evento-card.con-foto .ev-top::after { display: none; }
.evento-card .ev-top::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.1);
}
/* El evento pasado se apaga a gris; ahí la tinta vuelve a ser blanca */
.evento-card.pasado .ev-top { background: linear-gradient(135deg, #334155, #475569); color: #fff; }
.evento-card.pasado .ev-fecha { background: rgba(255,255,255,.18); }
.evento-card .ev-fecha {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.42); padding: 3px 10px; border-radius: 99px;
  font-size: .7rem; font-weight: 650; margin-bottom: 9px;
}
.evento-card .ev-name { font-size: 1.15rem; font-weight: 700; position: relative; }
.evento-card .ev-lugar { font-size: .78rem; opacity: .88; margin-top: 3px; position: relative; }
.evento-card .ev-body { padding: 14px; }
.evento-card .ev-desc { font-size: .82rem; color: var(--text-soft); line-height: 1.55; }
.evento-card .ev-stats { display: flex; gap: 16px; margin-top: 12px; font-size: .76rem; }
.evento-card .ev-stats b { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* --- Bonificación aplicada --------------------------------------------- */
.bonif-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--ok-soft); color: var(--ok);
  font-size: .7rem; font-weight: 650;
}

/* --- Recibo ------------------------------------------------------------- */
.recibo {
  display: flex; align-items: center; gap: 12px; padding: 13px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
}
.recibo + .recibo { margin-top: 9px; }
.recibo .rc-ico {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1rem;
}
.recibo .rc-ico.pagado    { background: var(--ok-soft);     color: var(--ok); }
.recibo .rc-ico.pendiente { background: var(--warn-soft);   color: var(--warn); }
.recibo .rc-ico.devuelto  { background: var(--info-soft);   color: var(--info); }
.recibo .rc-ico.anulado   { background: var(--bg-card-hover); color: var(--text-muted); }

/* --- Mapa simple de instalaciones (sin dependencias externas) ----------- */
/* Filtros del mapa: en un móvil estrecho van a dos por fila, y el de
   instalación —que es el de nombres largos— ocupa la fila entera. */
.map-filtros {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.map-filtros .mf-campo { min-width: 0; }
.map-filtros .mf-campo:last-of-type { grid-column: 1 / -1; }
.map-filtros .gp-select { width: 100%; }
.map-filtros .gp-btn { grid-column: 1 / -1; justify-content: center; }

/* Mapa. La cuadrícula del fondo es lo que se ve mientras cargan las teselas y
   lo que queda si no hay conexión: nunca un rectángulo vacío. */
.mini-map {
  position: relative; width: 100%; height: 290px;
  border-radius: var(--r); overflow: hidden;
  background:
    repeating-linear-gradient(0deg, var(--border-soft) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--border-soft) 0 1px, transparent 1px 34px),
    var(--bg-elev);
  border: 1px solid var(--border);
}
.mini-map .mm-tile {
  position: absolute; width: 256px; height: 256px;
  /* Las teselas de OSM son claras; en tema oscuro se apagan un poco para que
     las chinchetas de color sigan destacando. */
  filter: saturate(.85);
}
html[data-theme="dark"] .mini-map .mm-tile,
html:not([data-theme="light"]) .mini-map .mm-tile { filter: saturate(.62) brightness(.62) contrast(1.12); }

.mini-map .mm-capa { position: absolute; inset: 0; }
.mini-map .mm-pin {
  position: absolute; transform: translate(-50%, -100%) rotate(-45deg);
  width: 22px; height: 22px; padding: 0;
  border-radius: 50% 50% 50% 0;
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35);
  cursor: pointer; transition: transform .14s;
}
.mini-map .mm-pin:hover,
.mini-map .mm-pin:focus-visible {
  transform: translate(-50%, -100%) rotate(-45deg) scale(1.25); z-index: 4;
}
.mini-map .mm-me {
  position: absolute; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.mini-map .mm-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .72rem; color: var(--text-muted); text-align: center; padding: 16px;
}
.mini-map .mm-pie {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 9px; font-size: .64rem; color: var(--text-soft);
  background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
  backdrop-filter: blur(6px);
}
.mini-map .mm-attr { opacity: .75; flex: 0 0 auto; }

/* ── Mapa interactivo (MapLibre) ──────────────────────────────────────────
   La chincheta es la misma que en el estático, pero aquí la coloca la
   librería con un transform propio: por eso el pico se hace con un
   pseudoelemento en vez de rotar el botón, que pisaría ese transform. */
.mini-map.mm-gl { background: var(--bg-elev); }
/* El estilo vectorial es claro. En tema oscuro se apaga el lienzo —solo el
   lienzo— para que no deslumbre: las chinchetas y los controles son nodos
   HTML por encima y conservan su color. */
html[data-theme="dark"] .mini-map.mm-gl .maplibregl-canvas,
html:not([data-theme="light"]) .mini-map.mm-gl .maplibregl-canvas {
  filter: brightness(.72) saturate(.8) contrast(1.06);
}
.mini-map.mm-gl .mm-pin {
  position: relative; transform: none;
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4);
  cursor: pointer; transition: transform .14s;
}
.mini-map.mm-gl .mm-pin::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #fff;
}
.mini-map.mm-gl .mm-pin:hover,
.mini-map.mm-gl .mm-pin:focus-visible { transform: scale(1.22); z-index: 4; }

/* Botón 2D/3D, con la misma caja que los controles de la librería */
.mm-btn3d {
  width: 29px; height: 29px; background: none; border: 0; cursor: pointer;
  font: 700 .68rem/1 inherit; color: #333;
}

/* Los controles de MapLibre son claros de fábrica. En tema oscuro se les da
   el fondo de la app para que no parezcan pegotes blancos sobre el mapa. */
html[data-theme="dark"] .maplibregl-ctrl-group,
html:not([data-theme="light"]) .maplibregl-ctrl-group {
  background: var(--bg-elev);
  box-shadow: 0 0 0 1px var(--border), 0 2px 8px rgba(0,0,0,.35);
}
html[data-theme="dark"] .maplibregl-ctrl-group button,
html:not([data-theme="light"]) .maplibregl-ctrl-group button { color: var(--text); }
html[data-theme="dark"] .maplibregl-ctrl-group button + button,
html:not([data-theme="light"]) .maplibregl-ctrl-group button + button { border-top-color: var(--border); }
html[data-theme="dark"] .maplibregl-ctrl-icon,
html:not([data-theme="light"]) .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] .mm-btn3d,
html:not([data-theme="light"]) .mm-btn3d { color: var(--text); }

/* Atribución y aviso de gestos: legibles pero sin robar sitio al mapa */
.maplibregl-ctrl-attrib { font-size: .62rem; }
html[data-theme="dark"] .maplibregl-ctrl-attrib,
html:not([data-theme="light"]) .maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
}
html[data-theme="dark"] .maplibregl-ctrl-attrib a,
html:not([data-theme="light"]) .maplibregl-ctrl-attrib a { color: var(--text-soft); }

/* ==========================================================================
   MENÚ LATERAL (drawer)
   --------------------------------------------------------------------------
   Sustituye a la pestaña "Perfil": se abre con el botón de tres líneas de la
   cabecera y se cierra pulsando fuera, con Escape o arrastrando hacia la
   izquierda. El arrastre sigue el dedo en tiempo real, que es lo que hace que
   se sienta nativo y no como una web.
   ========================================================================== */

.gp-drawer-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(9, 14, 26, .55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .24s ease;
}
.gp-drawer-overlay.open { opacity: 1; }

.gp-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
  width: min(310px, 84vw);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  box-shadow: 6px 0 28px rgba(0, 0, 0, .34);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.2, .8, .25, 1);
  overscroll-behavior: contain;
}
.gp-drawer.open { transform: translateX(0); }
/* Durante el arrastre manda el dedo, no la transición */
.gp-drawer.dragging { transition: none; }

.gp-drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex: 0 0 auto;
}
.gp-drawer-head .dh-name { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.gp-drawer-head .dh-sub  { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }

.gp-drawer-body {
  flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 20px;
  -webkit-overflow-scrolling: touch;
}
.gp-drawer-foot {
  flex: 0 0 auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft);
  font-size: .68rem; color: var(--text-muted); text-align: center; line-height: 1.6;
}

/* Asa visual: indica que el panel se puede arrastrar */
.gp-drawer::after {
  content: ""; position: absolute; right: 3px; top: 50%;
  width: 3px; height: 46px; margin-top: -23px; border-radius: 99px;
  background: var(--border-strong); opacity: .5;
}

/* Secciones y entradas del menú lateral */
.gp-dsection {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
  padding: 14px 10px 6px;
}
.gp-ditem {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 10px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text); font-size: .89rem; font-weight: 550;
  text-align: left; cursor: pointer; transition: background .13s;
  text-decoration: none;
}
.gp-ditem:hover { background: var(--bg-card-hover); text-decoration: none; }
.gp-ditem:active { background: var(--accent-soft); }
.gp-ditem .di-ico { color: var(--text-muted); flex: 0 0 auto; }
.gp-ditem:hover .di-ico { color: var(--accent); }
.gp-ditem .di-label { flex: 1 1 auto; min-width: 0; }
.gp-ditem .di-value { font-size: .78rem; color: var(--text-muted); flex: 0 0 auto; }
.gp-ditem .di-arrow { color: var(--text-muted); opacity: .6; flex: 0 0 auto; }
.gp-ditem.danger { color: var(--danger); }
.gp-ditem.danger .di-ico { color: var(--danger); }
.gp-ditem .di-badge {
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 99px;
  background: var(--danger); color: #fff; font-size: .64rem; font-weight: 700;
  display: grid; place-items: center; flex: 0 0 auto;
}

/* Interruptores dentro del menú */
.gp-dtoggle {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; font-size: .89rem; font-weight: 550;
}
.gp-dtoggle .di-ico { color: var(--text-muted); }
.gp-dtoggle .di-label { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .gp-drawer { transition: none; }
  .gp-drawer-overlay { transition: none; }
}

/* ==========================================================================
   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.
   ========================================================================== */

.quick button .q-ic,
.gp-notice .n-ico,
.gp-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 .gp-avatar,
.pay-ok .po-ic {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.quick button .q-ic   { font-size: 0; color: var(--accent); }
.gp-notice .n-ico     { font-size: 0; margin-top: 1px; }
.gp-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 */
.gp-badge .gp-i, .gp-regimen .gp-i, .gp-chip .gp-i { margin-right: 1px; }
.gp-btn .gp-i { margin-right: -2px; }
.gp-btn.icon .gp-i { margin: 0; }

/* Base del propio SVG: suelto dentro de un texto necesita bajar un poco
   respecto a la línea base, y nunca debe encogerse dentro de un flex. */
.gp-i { vertical-align: -0.18em; flex: 0 0 auto; }
.gp-i * { vector-effect: non-scaling-stroke; }
.gp-ditem .di-ico, .gp-dtoggle .di-ico {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0; width: 22px;
}

/* ==========================================================================
   FILTROS DE ACTIVIDADES
   Con el catálogo de una ciudad, una lista sin filtrar no sirve de nada.
   ========================================================================== */

.filtros-act {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px; margin-bottom: 14px;
}
.filtros-act .fa-buscar { margin-bottom: 8px; }
.filtros-act .fa-selects { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.filtros-act .fa-selects .fa-campo:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fa-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fa-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); padding-left: 2px;
}
.filtros-act .gp-select.sm,
.filtros-act .gp-input.sm { width: 100%; font-size: .82rem; padding: 8px 10px; }
.filtros-act .gp-select.sm { padding-right: 26px; }

.filtros-act .fa-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border);
}
.fa-count { font-size: .78rem; font-weight: 600; color: var(--text-soft); }

@media (max-width: 400px) {
  .filtros-act .fa-selects { grid-template-columns: 1fr; }
  .filtros-act .fa-selects .fa-campo:last-child:nth-child(odd) { grid-column: auto; }
}

/* Un día puede tener dos tramos: cada uno en su línea se lee mejor en móvil */
.hours-table .ht-tramo { display: block; }
.hours-table .ht-tramo + .ht-tramo { margin-top: 2px; }
.hours-table .ht-cerrado { color: var(--text-muted); }

/* ==========================================================================
   ENCUESTAS DE SATISFACCIÓN
   El ayuntamiento pregunta desde el panel y se contesta aquí. Los objetivos
   son grandes a propósito: esto se responde con el pulgar, de pie y con
   prisa, y una estrella pequeña se falla.
   ========================================================================== */
.enc-preg {
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.enc-preg:last-of-type { border-bottom: 0; margin-bottom: 10px; }
.enc-preg-t {
  margin: 0 0 12px; text-align: center;
  font-size: .95rem; font-weight: 600; color: var(--text); line-height: 1.4;
}

/* Estrellas */
.est-fila { display: flex; justify-content: center; gap: 6px; }
.est-b {
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--border-strong); line-height: 0;
  transition: transform .12s, color .12s;
}
.est-b:active { transform: scale(.88); }
.est-b.on { color: #f5b301; }
.est-b.on svg { fill: #f5b301; }

/* NPS 0-10. En un móvil, once botones en una fila salen a 32 px: por debajo
   del mínimo con el que se acierta con el pulgar, así que se parten en dos
   filas de seis y cinco. La fila única se reserva a pantallas anchas, donde
   los once caben sin encogerse. */
.nps-fila {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
@media (min-width: 600px) { .nps-fila { grid-template-columns: repeat(11, 1fr); } }
.nps-b {
  aspect-ratio: 1; min-height: 38px; max-height: 62px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-soft);
  font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: all .12s;
}
.nps-b:active { transform: scale(.92); }
.nps-b.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
}
.nps-pies {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: .68rem; color: var(--text-muted);
}

/* Aviso que afecta a un centro que usa quien está dentro. No se le esconde
   nada al resto —la información municipal es pública— pero a quien le toca
   se le pone delante y con su etiqueta. */
.aviso-mio .am-tag {
  display: inline-block; margin-bottom: 4px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.aviso-mio b { display: block; }