/* Terrat Club · sistema visual
   Copia la tarjeta física del programa: anverso noche tropical con dorado,
   reverso crema. El wordmark es el logo real del manual, aislado y teñido. */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root {
  /* --- noche tropical (el anverso) --- */
  --noche: #0E1A13;
  --noche-2: #16271B;
  --selva-honda: #1C3325;
  --selva: #3E6B33;
  --selva-viva: #5B9447;

  /* --- crema (el reverso) --- */
  --crema: #F8E9D5;
  --crema-clara: #FDF5E9;
  --crema-honda: #EBD7BE;

  /* --- acentos --- */
  --naranja: #E8763C;
  --naranja-vivo: #FF9052;
  --oro: #C9A227;
  --oro-claro: #E3C871;
  --coral: #E8623C;

  /* --- texto --- */
  --tinta: #22170F;
  --tinta-media: #6A574A;
  --tinta-suave: #94806F;
  --sobre-noche: #F6EADA;
  --sobre-noche-tenue: rgba(246,234,218,.62);

  --linea: rgba(34,23,15,.10);
  --linea-noche: rgba(246,234,218,.14);

  --sombra-s: 0 1px 2px rgba(8,16,11,.10), 0 2px 8px rgba(8,16,11,.10);
  --sombra: 0 2px 6px rgba(8,16,11,.14), 0 14px 34px rgba(8,16,11,.20);
  --sombra-alta: 0 6px 14px rgba(8,16,11,.20), 0 30px 70px rgba(8,16,11,.42);
  --brillo-oro: 0 6px 22px rgba(201,162,39,.34);
  --brillo-naranja: 0 6px 22px rgba(232,118,60,.36);

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 24px;

  --mono: 'Courier Prime', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--sobre-noche);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background:
    radial-gradient(820px 460px at 8% -6%, rgba(62,107,51,.42), transparent 62%),
    radial-gradient(760px 420px at 96% 2%, rgba(201,162,39,.16), transparent 58%),
    radial-gradient(900px 700px at 50% 108%, rgba(232,118,60,.12), transparent 60%),
    var(--noche);
  background-attachment: fixed;
}

.envoltura { max-width: 480px; margin: 0 auto; padding: 22px 18px 60px; }
.envoltura.ancha { max-width: 1120px; }

/* ---------- el wordmark, teñible ---------- */
.wordmark {
  display: block;
  -webkit-mask: url('/assets/terrat-wordmark.png') center / contain no-repeat;
  mask: url('/assets/terrat-wordmark.png') center / contain no-repeat;
  background: var(--naranja);
  width: 168px; height: 70px;
}
.wordmark--crema { background: var(--crema); }
.wordmark--oro { background: var(--oro-claro); }
.wordmark--verde { background: var(--selva-honda); }
.wordmark--chico { width: 104px; height: 44px; }

/* ---------- tipografía ---------- */
h1, h2, h3 { font-family: var(--mono); font-weight: 700; letter-spacing: -.015em; margin: 0 0 .4em; }
h1 { font-size: 1.5rem; line-height: 1.24; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
.mono { font-family: var(--mono); }
.sup {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oro-claro); font-weight: 700;
}
.tenue { color: var(--sobre-noche-tenue); font-size: .86rem; }
.centro { text-align: center; }
.oro { color: var(--oro-claro); }

/* ---------- cabecera del club ---------- */
.membrete { text-align: center; padding: 8px 0 22px; }
.membrete .wordmark { margin: 0 auto 2px; }
.membrete__bajada {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .42em;
  text-transform: uppercase; color: var(--sobre-noche-tenue); margin-left: .42em;
}
.membrete__club {
  font-family: var(--mono); font-size: 1.02rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--crema); margin-top: 12px; font-weight: 700;
}
.membrete__lema {
  font-size: .82rem; color: var(--sobre-noche-tenue); margin-top: 4px;
}

/* ---------- superficies ---------- */
/* el reverso de la tarjeta: crema */
.panel {
  position: relative; background: var(--crema-clara); color: var(--tinta);
  border: 1px solid rgba(34,23,15,.07);
  border-radius: var(--r-m); padding: 22px; box-shadow: var(--sombra); margin-bottom: 16px;
}
.panel .sup { color: var(--tinta-suave); }
.panel .tenue { color: var(--tinta-media); }
.panel h1, .panel h2, .panel h3 { color: var(--tinta); }

/* el anverso: noche */
.panel.noche {
  background: linear-gradient(155deg, var(--noche-2) 0%, var(--noche) 100%);
  color: var(--sobre-noche); border: 1px solid var(--linea-noche);
}
.panel.noche .sup { color: var(--oro-claro); }
.panel.noche .tenue { color: var(--sobre-noche-tenue); }
.panel.noche h1, .panel.noche h2, .panel.noche h3 { color: var(--crema); }

.panel.verde {
  background: linear-gradient(150deg, #2A4C33 0%, var(--selva-honda) 100%);
  color: var(--crema); border-color: rgba(201,162,39,.3);
}
.panel.verde .sup { color: var(--oro-claro); }
.panel.verde .tenue { color: rgba(248,233,213,.76); }
.panel.verde h1, .panel.verde h2 { color: var(--crema); }

.panel.oro {
  background: linear-gradient(150deg, #FFF6E3 0%, var(--crema) 100%);
  border-color: rgba(201,162,39,.42); color: var(--tinta);
}

/* ---------- el pase ---------- */
.pase {
  border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sombra-alta);
  margin-bottom: 20px; border: 1px solid rgba(201,162,39,.24);
}
.pase__cuerpo {
  padding: 22px;
  background:
    radial-gradient(420px 260px at 90% 0%, rgba(62,107,51,.5), transparent 70%),
    radial-gradient(360px 240px at 0% 100%, rgba(232,118,60,.18), transparent 70%),
    linear-gradient(158deg, var(--noche-2) 0%, var(--noche) 100%);
  color: var(--sobre-noche);
}
.pase__marca { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.pase__marca .membrete__bajada { display: block; margin-top: -2px; }
.pase__club {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--crema); font-weight: 700; text-align: right; line-height: 1.5;
}
.pase__club small { display: block; font-size: .58rem; letter-spacing: .14em; color: var(--sobre-noche-tenue); }
.pase__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pase__etiqueta {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; font-weight: 700;
  text-transform: uppercase; color: var(--oro-claro); margin-bottom: 3px;
}
.pase__valor { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--crema); }
.pase__pie {
  background: var(--crema-clara); color: var(--tinta); padding: 24px 20px; text-align: center;
}
/* el pie es crema: el dorado de .sup no se lee ahí */
.pase__pie .sup { color: var(--tinta-suave); }
.pase__pie .mono { color: var(--tinta); }
.pase__nota { margin: 16px 0 0; font-size: .8rem; color: var(--sobre-noche-tenue); font-family: var(--mono); }
.pase__nota.premio {
  color: var(--oro-claro); font-weight: 700; letter-spacing: .03em;
  text-shadow: 0 0 20px rgba(201,162,39,.6);
}
.pase__firma {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sobre-noche-tenue); text-align: right; margin: 18px 0 0;
}

/* ---------- sellos: los círculos numerados de la tarjeta ---------- */
.sellos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0 4px; }
.sello {
  position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px dashed rgba(248,233,213,.34); background: rgba(248,233,213,.06);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.sello__numero {
  font-family: var(--mono); font-size: 1.05rem; font-weight: 700;
  color: rgba(248,233,213,.4);
}
.sello svg { display: none; width: 54%; height: 54%; }
.sello.lleno {
  background: linear-gradient(150deg, var(--crema-clara) 0%, var(--crema) 100%);
  border: 1.5px solid var(--oro-claro);
  box-shadow: 0 3px 12px rgba(8,16,11,.4), 0 0 0 3px rgba(201,162,39,.16);
}
.sello.lleno .sello__numero { display: none; }
.sello.lleno svg { display: block; color: var(--selva); }
.sello.nuevo { animation: sellar .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes sellar {
  0% { transform: scale(0) rotate(-25deg); }
  60% { transform: scale(1.18) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* sobre crema los sellos se invierten */
.panel:not(.noche):not(.verde) .sello { border-color: rgba(34,23,15,.22); background: rgba(34,23,15,.02); }
.panel:not(.noche):not(.verde) .sello__numero { color: rgba(34,23,15,.3); }
.panel:not(.noche):not(.verde) .sello.lleno {
  background: linear-gradient(150deg, var(--selva-viva) 0%, var(--selva) 100%);
  border-color: var(--oro); box-shadow: var(--brillo-oro);
}
.panel:not(.noche):not(.verde) .sello.lleno svg { color: var(--crema-clara); }

/* ---------- progreso ---------- */
.progreso {
  height: 5px; background: rgba(248,233,213,.16); border-radius: 99px;
  overflow: hidden; margin-top: 16px;
}
.progreso > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--oro), var(--oro-claro));
  box-shadow: 0 0 14px rgba(201,162,39,.6);
  transition: width .7s cubic-bezier(.2,.9,.3,1);
}
.panel:not(.noche):not(.verde) .progreso { background: rgba(34,23,15,.1); }

/* ---------- QR ---------- */
.qr {
  background: #fff; border-radius: var(--r-m); padding: 15px; display: inline-block;
  box-shadow: var(--sombra-s); line-height: 0;
  width: 208px; max-width: 100%;   /* sin ancho propio el SVG desborda */
}
.qr svg, .qr img { width: 100%; height: auto; display: block; }
.qr--grande { width: 300px; padding: 18px; }

/* ---------- formularios ---------- */
label { display: block; margin-bottom: 15px; }
label > span {
  display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: var(--tinta-suave); margin-bottom: 7px;
}
.panel.noche label > span, .panel.verde label > span { color: var(--oro-claro); }
input, select, textarea {
  width: 100%; padding: 13px 15px; font-family: var(--sans); font-size: 1rem; font-weight: 400;
  color: var(--tinta); background: #FFFDFA; border: 1.5px solid rgba(34,23,15,.14);
  border-radius: var(--r-s); outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  border-color: var(--oro); box-shadow: 0 0 0 4px rgba(201,162,39,.2);
}
input.codigo {
  font-family: var(--mono); font-size: 1.6rem; font-weight: 700; letter-spacing: .3em;
  text-align: center; text-transform: uppercase;
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 18px; border: none; border-radius: var(--r-s); cursor: pointer;
  font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  color: #21150C; background: linear-gradient(140deg, var(--oro-claro) 0%, var(--oro) 100%);
  box-shadow: var(--brillo-oro);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .18s, filter .15s;
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 10px 28px rgba(201,162,39,.45); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.987); }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--naranja {
  background: linear-gradient(140deg, var(--naranja-vivo) 0%, var(--naranja) 100%);
  color: #2A1206; box-shadow: var(--brillo-naranja);
}
.btn--verde {
  background: linear-gradient(140deg, var(--selva-viva) 0%, var(--selva) 100%);
  color: var(--crema-clara); box-shadow: 0 6px 22px rgba(62,107,51,.4);
}
.btn--linea {
  background: transparent; color: var(--crema); border: 1.5px solid rgba(248,233,213,.28);
  box-shadow: none;
}
.btn--linea:hover { background: rgba(248,233,213,.07); border-color: var(--oro-claro); filter: none; }
.panel:not(.noche):not(.verde) .btn--linea { color: var(--tinta); border-color: rgba(34,23,15,.18); }
.panel:not(.noche):not(.verde) .btn--linea:hover { background: rgba(34,23,15,.04); border-color: var(--oro); }
.btn--chico { width: auto; padding: 10px 15px; font-size: .68rem; }
.botonera { display: flex; flex-direction: column; gap: 11px; }

/* ---------- avisos ---------- */
.aviso {
  border-radius: var(--r-s); padding: 15px 17px; margin-bottom: 14px; font-size: .92rem;
  border-left: 4px solid var(--oro); background: rgba(201,162,39,.14); color: var(--sobre-noche);
}
.aviso.ok { border-color: var(--selva-viva); background: rgba(91,148,71,.16); }
.aviso.mal { border-color: var(--coral); background: rgba(232,98,60,.16); }
.aviso strong { font-family: var(--mono); }
.panel .aviso, .panel ~ .aviso { color: inherit; }
.panel:not(.noche):not(.verde) .aviso { color: var(--tinta); background: rgba(201,162,39,.16); }
.panel:not(.noche):not(.verde) .aviso.ok { background: rgba(62,107,51,.14); }
.panel:not(.noche):not(.verde) .aviso.mal { background: rgba(232,98,60,.14); }

/* ---------- cómo funciona: las tres reglas de la tarjeta ---------- */
.reglas { display: grid; gap: 16px; }
.regla { display: flex; gap: 14px; align-items: flex-start; }
.regla__icono {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--selva-honda); display: grid; place-items: center;
}
.regla__icono svg { width: 20px; height: 20px; color: var(--crema); }
.regla b { font-family: var(--mono); font-size: .9rem; display: block; }
.regla span { font-size: .86rem; color: var(--tinta-media); }
.panel.noche .regla span { color: var(--sobre-noche-tenue); }
.panel.noche .regla__icono { background: rgba(248,233,213,.1); border: 1px solid rgba(201,162,39,.3); }
.regla em { font-style: normal; color: var(--naranja); font-weight: 600; }

/* ---------- el beneficio ---------- */
.beneficio {
  border: 1.5px solid rgba(201,162,39,.5); border-radius: var(--r-m);
  padding: 16px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
  background: rgba(201,162,39,.06);
}
.beneficio__opcion { text-align: center; font-size: .88rem; line-height: 1.35; }
.beneficio__opcion svg { width: 26px; height: 26px; color: var(--coral); margin-bottom: 4px; }
.beneficio__o {
  font-family: var(--mono); font-size: .78rem; color: var(--oro); font-weight: 700;
}

/* ---------- cupón ---------- */
.cupon {
  position: relative; background: var(--crema-clara); color: var(--tinta);
  border-radius: var(--r-m); padding: 19px;
  border: 2px dashed rgba(201,162,39,.6); margin-bottom: 12px; box-shadow: var(--sombra-s);
}
.cupon.canjeado, .cupon.vencido { border-style: solid; border-color: var(--linea); opacity: .6; }
.cupon .tenue { color: var(--tinta-media); }
.cupon__codigo {
  font-family: var(--mono); font-size: 1.55rem; font-weight: 700; letter-spacing: .22em;
  color: var(--naranja); margin: 6px 0;
}
.etiqueta {
  display: inline-block; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; padding: 4px 11px; border-radius: 99px;
  background: rgba(34,23,15,.08); color: var(--tinta-suave);
}
.etiqueta.activo { background: rgba(62,107,51,.16); color: #2C5325; }
.etiqueta.canjeado { background: rgba(34,23,15,.09); color: var(--tinta-suave); }
.etiqueta.vencido { background: rgba(232,98,60,.16); color: #A93C22; }
.panel.verde .etiqueta, .panel.noche .etiqueta { background: rgba(201,162,39,.24); color: var(--oro-claro); }

/* ---------- métricas ---------- */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 13px; margin-bottom: 20px; }
.metrica {
  background: linear-gradient(155deg, var(--noche-2) 0%, var(--noche) 100%);
  border: 1px solid var(--linea-noche); border-radius: var(--r-m);
  padding: 16px 18px; box-shadow: var(--sombra-s);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.metrica:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: rgba(201,162,39,.34); }
.metrica b {
  display: block; font-family: var(--mono); font-size: 1.8rem; font-weight: 700; line-height: 1.1;
  color: var(--oro-claro);
}
.metrica .sup { color: var(--sobre-noche-tenue); }

/* ---------- tabla ---------- */
.tabla-envoltura {
  overflow-x: auto; border-radius: var(--r-m); border: 1px solid var(--linea);
  background: var(--crema-clara); box-shadow: var(--sombra-s); color: var(--tinta);
}
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-suave); text-align: left; padding: 13px 15px; white-space: nowrap;
  border-bottom: 1px solid var(--linea); background: #FFFBF2;
}
td { padding: 12px 15px; border-bottom: 1px solid rgba(34,23,15,.06); white-space: nowrap; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #FFFAEF; }
tr:last-child td { border-bottom: none; }
td.mono { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; }
td .tenue, .tabla-envoltura .tenue { color: var(--tinta-media); }

/* ---------- pestañas ---------- */
.pestanas { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--linea-noche); overflow-x: auto; }
.pestana {
  background: none; border: none; cursor: pointer; padding: 11px 15px; white-space: nowrap;
  font-family: var(--mono); font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--sobre-noche-tenue); border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.pestana:hover { color: var(--crema); }
.pestana.activa { color: var(--oro-claro); border-bottom-color: var(--oro); }

/* ---------- pie ---------- */
.pie { text-align: center; margin-top: 30px; font-size: .76rem; color: var(--sobre-noche-tenue); }
.pie a { color: var(--oro-claro); text-decoration-color: rgba(201,162,39,.45); }
.pie .mono { letter-spacing: .12em; }

.oculto { display: none !important; }

/* ---------- promociones ---------- */
.promo-taller { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
@media (max-width: 820px) { .promo-taller { grid-template-columns: 1fr; } }

.contador { font-family: var(--mono); font-size: .7rem; color: var(--tinta-suave); text-align: right; margin-top: -8px; }
.contador.pasado { color: var(--coral); font-weight: 700; }

.telefono {
  border-radius: 30px; padding: 26px 16px 30px;
  background: linear-gradient(165deg, #1E1512 0%, #0B0806 100%);
  box-shadow: var(--sombra-alta); position: sticky; top: 18px;
  border: 1px solid rgba(201,162,39,.18);
}
.telefono__hora {
  text-align: center; color: rgba(255,255,255,.92); font-family: var(--sans);
  font-size: 2.4rem; font-weight: 300; line-height: 1; margin-bottom: 2px;
}
.telefono__fecha { text-align: center; color: rgba(255,255,255,.5); font-size: .76rem; margin-bottom: 22px; }
.notificacion {
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-radius: var(--r-m); padding: 12px 14px; display: flex; gap: 11px; align-items: flex-start;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.notificacion__icono {
  width: 34px; height: 34px; border-radius: 9px; flex: none; overflow: hidden;
  background: var(--selva-honda); display: grid; place-items: center;
}
.notificacion__icono img { width: 100%; height: 100%; object-fit: cover; }
.notificacion__texto { min-width: 0; }
.notificacion__app {
  font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(0,0,0,.5); font-weight: 600; margin-bottom: 1px;
}
.notificacion__titulo { font-size: .86rem; font-weight: 700; color: #111; line-height: 1.25; }
.notificacion__cuerpo { font-size: .84rem; color: #222; line-height: 1.35; overflow-wrap: anywhere; }

.segmento-lista { display: grid; gap: 8px; }
.segmento {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 15px; border: 1.5px solid var(--linea); border-radius: var(--r-s);
  background: #FFFCF5; cursor: pointer; text-align: left; width: 100%;
  font-family: var(--sans); font-size: .9rem; color: var(--tinta);
  transition: border-color .15s, background .15s, transform .12s;
}
.segmento:hover { border-color: rgba(201,162,39,.5); transform: translateX(2px); }
.segmento.activo { border-color: var(--oro); background: rgba(201,162,39,.1); }
.segmento small { display: block; color: var(--tinta-suave); font-size: .78rem; margin-top: 2px; }
.segmento b { font-family: var(--mono); font-size: 1.15rem; white-space: nowrap; }

/* Dar de baja a un socio: discreto, porque es irreversible y no debe invitar
   al clic distraído. Solo se enciende en rojo cuando el cursor está encima. */
.baja {
  font: inherit;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--tinta-suave);
  background: transparent;
  border: 1px solid rgba(34, 23, 15, .16);
  transition: color .15s, border-color .15s, background .15s;
}
.baja:hover:not([disabled]) {
  color: #A3301F;
  border-color: rgba(163, 48, 31, .45);
  background: rgba(163, 48, 31, .06);
}
.baja[disabled] { opacity: .5; cursor: progress; }

/* Huecos del mensaje: se pulsan para insertarlos donde está el cursor. */
.hueco {
  font: inherit;
  font-size: .76rem;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--terrat-cota, #A3521F);
  background: rgba(232, 118, 60, .1);
  border: 1px solid rgba(232, 118, 60, .28);
}
.hueco:hover { background: rgba(232, 118, 60, .2); }

/* Confirmación propia. No usamos confirm() del navegador porque Chrome deja
   silenciarlo, y una baja o un envío cancelados sin avisar son peores que
   cualquier molestia. */
.dialogo {
  border: 0;
  border-radius: 18px;
  padding: 26px 26px 22px;
  max-width: 420px;
  width: calc(100% - 40px);
  color: var(--tinta);
  background: var(--crema, #F8E9D5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.dialogo::backdrop { background: rgba(14, 26, 19, .62); backdrop-filter: blur(2px); }
.dialogo h2 { margin: 0 0 10px; font-size: 1.15rem; }
.dialogo p { margin: 0 0 12px; font-size: .92rem; line-height: 1.5; }
.dialogo__alerta {
  padding: 10px 12px;
  border-radius: 10px;
  color: #8C2A1B;
  background: rgba(163, 48, 31, .1);
  border: 1px solid rgba(163, 48, 31, .25);
}
.dialogo__botones { display: flex; gap: 10px; margin-top: 18px; }
.dialogo__botones .btn { flex: 1; width: auto; margin: 0; }
.btn--peligro { background: #A3301F; color: #fff; }
.btn--peligro:hover { filter: brightness(1.08); box-shadow: 0 10px 28px rgba(163, 48, 31, .4); }

/* Mensajes listos. Se tocan, no se leen: el personal de barra elige por el
   nombre, no por el texto completo. */
.plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.plantilla {
  font: inherit;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(34, 23, 15, .035);
  border: 1px solid rgba(34, 23, 15, .1);
  transition: border-color .15s, background .15s;
}
.plantilla b {
  display: block;
  font-size: .84rem;
  line-height: 1.25;
  color: var(--tinta);
}
.plantilla span {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--tinta-suave);
}
.plantilla:hover { border-color: rgba(201, 162, 39, .55); background: rgba(201, 162, 39, .07); }
.plantilla.activa {
  border-color: var(--oro, #C9A227);
  background: rgba(201, 162, 39, .14);
  box-shadow: 0 0 0 1px var(--oro, #C9A227) inset;
}

/* Socios en silencio: el freno de mensajes. Se muestra en ámbar, no en rojo —
   no es un error, es el sistema haciendo su trabajo. */
.silencio {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .84rem;
  line-height: 1.45;
  color: #7A5A12;
  background: rgba(201, 162, 39, .12);
  border: 1px solid rgba(201, 162, 39, .32);
}