/* Panel del negocio: reutiliza casi todo el estilo del panel de administración
   (admin.css) y añade lo que aquí es distinto. */

/* Selector de negocio en la barra lateral */
.bizpick { margin: 0 8px 12px; }
.bizpick select {
  width: 100%;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  border-color: rgba(255, 255, 255, .18);
  font-weight: 700;
}

/* En el móvil, el local también arriba (como «Nails & Co ▾» en la app):
   el logo, el selector y el idioma. En el ordenador va en la barra lateral. */
.topbar .biztop { flex: 1 1 auto; min-width: 0; max-width: 100%; font-weight: 700; font-size: 16px;
  padding: 8px 10px; border-radius: 12px; background: var(--elevated); color: var(--ink); border: 1px solid var(--glass-border); }
.topbar:has(.biztop:not([hidden])) .brand-txt,
.topbar:has(.biztop:not([hidden])) .spacer { display: none; }

/* Acciones grandes de la portada del panel */
.quick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.quick button {
  border: 1px solid var(--glass-border);
  background: var(--elevated);
  color: var(--ink);
  border-radius: 18px;
  padding: 16px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 4px;
}
.quick button:hover { filter: brightness(1.04); }
.quick button .ic { font-size: 26px; color: var(--ink); }
.quick button.primary .ic { color: inherit; }
.quick button small { font-weight: 500; color: var(--ink-2); }
.quick button.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.quick button.primary small { color: rgba(10, 10, 10, .8); }
/* El segundo botón fuerte, en tinta («Validar códigos» junto a «Crear»): un
   solo coral por pantalla. Como `AppTheme.inkFilled` en la app. */
.quick button.tinta { background: var(--ink); color: var(--surface); border-color: transparent; }
.quick button.tinta .ic { color: inherit; }
.quick button.tinta small { color: color-mix(in srgb, var(--surface) 80%, transparent); }
.btn.tinta { background: var(--ink); color: var(--surface); border-color: transparent; }

/* Formulario de publicación */
.form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pills button {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.pills button.on { background: var(--ink); color: var(--surface); border-color: transparent; }
.hint { color: var(--ink-2); font-size: 13px; margin: 2px 0 0; }

/* Fotos de la publicación */
.photos { display: flex; gap: 10px; flex-wrap: wrap; }
.photos .ph-item { position: relative; }
.photos img { width: 104px; height: 104px; object-fit: cover; border-radius: 14px; }
.photos .rm {
  position: absolute; top: -6px; right: -6px;
  border: 0; border-radius: 999px; width: 26px; height: 26px;
  background: #b3261e; color: #fff; font-weight: 800; cursor: pointer;
}
.photos label.add {
  width: 104px; height: 104px; border-radius: 14px;
  border: 1px dashed var(--glass-border);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  font-size: 13px; text-align: center; padding: 8px;
}
.photos label.add input { display: none; }

/* Validación de códigos */
.scan-box { display: grid; gap: 12px; max-width: 460px; }
/* Los botones ocupan el ancho de la caja: el texto, centrado. */
.scan-box > .btn { justify-content: center; }
/* «Escanear con la cámara» y «Dar en el momento»: dos iguales, lado a lado. */
.validar-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.validar-dos > .btn { justify-content: center; text-align: center; min-height: 48px; white-space: normal; }
/* Sin cámara (el botón se esconde), «Dar en el momento» a lo ancho. */
.validar-dos:has(> [hidden]) { grid-template-columns: 1fr; }
#listoEntrada:empty { display: none; }
.scan-box input { font-size: 18px; letter-spacing: 2px; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; }
.scan-result { border-radius: 18px; padding: 16px 18px; font-weight: 700; }
.scan-result.ok { background: rgba(46, 204, 113, .18); color: #146c3a; }
.scan-result.bad { background: rgba(255, 92, 92, .18); color: #b3261e; }
@media (prefers-color-scheme: dark) {
  .scan-result.ok { color: #8AE8B0; }
  .scan-result.bad { color: #FF9B9B; }
}
.scan-result small { display: block; font-weight: 500; margin-top: 4px; opacity: .85; }
/* Movimiento (como la app): el resultado de validar entra creciendo; el
   icono de «Validado» crece con un pequeño rebote y uno que no vale tiembla
   un instante. */
#result > .scan-result { animation: mov-crece var(--mov-base) var(--mov-entra); }
#result > .scan-result.ok > .ms:first-child { display: inline-block; animation: mov-pop var(--mov-lento) var(--mov-rebote); }
#result > .scan-result.bad { animation: mov-crece var(--mov-base) var(--mov-entra), mov-tiembla 300ms var(--mov-mueve) 120ms; }
@media (prefers-reduced-motion: reduce) { #result > .scan-result, #result > .scan-result .ms { animation: none; } }

/* Orden y vídeos en la galería del formulario */
.photos .ph-video {
  width: 104px; height: 104px; border-radius: 14px; overflow: hidden; position: relative;
  background: #0A0A0A; color: #fff; display: grid; place-items: center; font-size: 22px;
}
/* El primer fotograma, para reconocer cada vídeo; el ▶ encima dice que lo es. */
.photos .ph-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photos .ph-video span { position: relative; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.photos .ph-cover {
  position: absolute; left: 6px; bottom: 30px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.photos .ph-move { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.photos .ph-move button {
  border: 1px solid var(--glass-border); background: var(--elevated); color: var(--ink);
  border-radius: 8px; width: 46px; cursor: pointer; font: inherit; font-size: 13px;
}
.photos .ph-move button:disabled { opacity: .4; cursor: default; }

/* Día a día del informe: una barra por día, con la parte de canjes marcada.
   No es un gráfico de verdad y no lo pretende: es para ver la forma. */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 4px 0; }
.spark i { flex: 1 1 0; min-width: 2px; background: var(--glass-border); border-radius: 3px 3px 0 0;
  display: flex; align-items: flex-end; min-height: 2px; }
.spark i u { display: block; width: 100%; background: var(--ink); border-radius: 3px 3px 0 0; }

/* Selector de idioma: en la barra de arriba y en la caja de acceso. */
.topbar .spacer { flex: 1; }
.topbar .lang, .login .lang { display: inline-flex; border: 1px solid var(--glass-border);
  border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 700; align-self: center; }
.topbar .lang a, .login .lang a { padding: 5px 10px; color: var(--ink-2); text-decoration: none; }
.topbar .lang a.on, .login .lang a.on { background: var(--ink); color: var(--surface); }
.login .lang { margin: 0 auto; }
.me .lang { display: inline-flex; border: 1px solid var(--glass-border); border-radius: 999px;
  overflow: hidden; font-size: 11px; font-weight: 700; margin-top: 8px; width: fit-content; }
.me .lang a { padding: 4px 9px; color: var(--ink-2); text-decoration: none; }
.me .lang a.on { background: #fff; color: #0A0A0A; }

/* Barras horizontales: de dónde viene la gente. */
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 10px; font-size: 14px; }
.bar .bl { color: var(--ink-2); }
.bar .bt { background: rgba(127,127,127,.22); border-radius: 999px; height: 12px; overflow: hidden; }
.bar .bt i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.bar .bn { text-align: right; font-weight: 700; }
@media (max-width: 560px) { .bar { grid-template-columns: 96px 1fr 38px; font-size: 13px; } }

/* La línea que el negocio se lleva a su web. */
.code { margin: 0; padding: 10px 12px; border-radius: 12px; overflow-x: auto;
  background: rgba(127,127,127,.12); border: 1px solid var(--line, rgba(127,127,127,.25));
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }

/* Las fotos de la carta. */
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumbs .thumb { width: 140px; display: grid; gap: 6px; }
.thumbs .thumb img { width: 140px; height: 180px; object-fit: cover; border-radius: 12px; }

/* El cartel para la puerta. En pantalla es una tarjeta; al imprimir, el
   folio entero y sin el panel alrededor. */
.cartel { background: #fff; color: #0A0A0A; border-radius: 18px; padding: 32px;
  text-align: center; max-width: 520px; margin: 0 auto; }
.cartel-top { font-weight: 800; letter-spacing: .18em; font-size: 13px; color: #C81E42; }
.cartel h2 { font-size: 30px; line-height: 1.15; margin: 14px 0 6px; }
.cartel-precio { display: inline-block; background: #FF4D6D; color: #0A0A0A;
  font-weight: 800; font-size: 22px; padding: 6px 16px; border-radius: 999px; margin: 0 0 18px; }
.cartel-qr { width: 260px; margin: 0 auto; }
.cartel-qr svg { width: 100%; height: auto; display: block; }
.cartel-pie { margin: 18px 0 0; font-size: 16px; }
.cartel-url { margin: 6px 0 0; font-size: 12px; color: #636363; word-break: break-all; }

/* El cartel del local: el QR (sobre blanco, que es lo que lee cualquier
   cámara) y al lado qué da y cómo imprimirlo. En el móvil, uno encima de otro. */
.cartel-local { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.cl-qr { background: #fff; border-radius: 16px; padding: 14px; }
.cl-qr svg { width: 100%; height: auto; display: block; }
.cl-txt p { margin: 0 0 10px; }
.cl-txt .acciones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .cartel-local { grid-template-columns: 1fr; }
  .cl-qr { max-width: 220px; }
}

/* Poner en la tele: cada tele en una fila (icono, nombre y estado, y sus dos
   botones iguales); en el móvil, los botones debajo y a lo ancho. */
.teles { list-style: none; margin: 0; padding: 0; }
.tele { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--glass-border); }
.tele:first-child { border-top: 0; padding-top: 0; }
.tele-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--soft); color: var(--ink); }
.tele-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tele-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tele-on { color: var(--ink); font-weight: 700; }
.tele-on::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-right: 6px; vertical-align: 1px; }
.tele .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) {
  .tele { flex-wrap: wrap; }
  .tele .actions { flex-basis: 100%; }
}

@media print {
  body * { visibility: hidden; }
  .cartel, .cartel * { visibility: visible; }
  .cartel { position: absolute; inset: 0; margin: 0; width: 100%; max-width: none;
    border-radius: 0; padding: 48px; }
}

/* Mapa del alta y de la ficha. */
.mapa { height: 340px; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border); background: var(--glass); }
.mapa.sin-mapa { height: auto; padding: 14px; }
.mapa .mapboxgl-ctrl-logo, .mapa .mapboxgl-ctrl-attrib { opacity: .7; }
.bizpick-mas { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); }

/* Cámara para validar: el vídeo con una mira en medio. */
.camara { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.camara video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camara .mira { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.scan-result .plazas { display: block; font-size: 22px; margin-top: 6px; }

/* ═══ Formularios: el mismo sistema que la app y «Tu cuenta» ════════════════
   Etiqueta encima, campo de cristal con esquinas de 16 y el acento al
   escribir. En escritorio, dos columnas y un ancho máximo (un campo de
   1.100 px no se lee); en móvil, una columna a lo ancho. */
.form { display: grid; gap: 16px 18px; grid-template-columns: 1fr 1fr; max-width: 820px; margin: 0 0 18px; }
.form .full, .form > .help, .form > details { grid-column: 1 / -1; }
@media (max-width: 760px) { .form { grid-template-columns: 1fr; } }
.card .form { margin-bottom: 0; }
label.f { font-size: 14px; color: var(--ink); gap: 6px; }
label.f > span small, label.f small { color: var(--ink-2); font-weight: 500; }
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .form select, .form textarea,
.scan-box input, .toolbar input, .toolbar select, dialog.modal input:not([type=checkbox]):not([type=file]), dialog.modal select, dialog.modal textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 16px; font-size: 15px;
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus, .scan-box input:focus,
dialog.modal input:focus, dialog.modal select:focus, dialog.modal textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.form .btn.primary { padding: 12px 22px; font-size: 15px; }

/* Que ninguna columna crezca por una tabla ancha: las tablas se desplazan
   dentro de su caja (.tbl-wrap) y la página nunca en horizontal. */
.layout > *, #view, #view > div { min-width: 0; }
input[type=file] { max-width: 100%; }

.btn .ms { font-size: 18px; }
.nav .ms { font-size: 20px; }
.ph .ms { font-size: 22px; }
.scan-result .ms { font-size: 22px; vertical-align: -5px; margin-right: 6px; }
.scan-result small .ms { font-size: 16px; vertical-align: -3px; margin-right: 4px; }
.card h2 .ms { font-size: 22px; vertical-align: -4px; color: var(--ink); }

/* Botones de una fila de la tabla: si no caben en una línea, cada línea se
   rellena entera (nada escalonado). */
table.tbl .actions > * { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
/* Todos a su altura: «Más» (un <details>) estiraba al de al lado. */
table.tbl .actions { align-items: flex-start; }

/* ── Móvil: tablas como tarjetas y botones en columnas iguales ─────────────
   Una tabla de cinco columnas no cabe en 375 px: se salía por la derecha y
   los botones de cada fila se amontonaban en una columna estrecha. */
@media (max-width: 640px) {
  .tbl-wrap { overflow: visible; }
  table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; width: auto; }
  table.tbl thead { display: none; }
  table.tbl tr { padding: 14px 14px 12px; border-bottom: 1px solid var(--glass-border); }
  table.tbl tr:last-child { border-bottom: 0; }
  table.tbl td { border: 0; padding: 3px 0; text-align: left; }
  /* Cada dato con su etiqueta, en una línea: «Vistas ········ 12». */
  table.tbl td[data-label]:not(:first-child) { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
  table.tbl td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--ink-2); font-size: 13px; }
  /* La publicación: icono a la izquierda, título y fecha al lado. */
  table.tbl td:first-child { position: relative; min-height: 40px; padding: 0 0 10px 52px; text-align: left; }
  table.tbl td:first-child > .ph, table.tbl td:first-child > .thumb { position: absolute; left: 0; top: 0; transform: none; margin: 0; }
  table.tbl td:first-child > .title, table.tbl td:first-child > .sub { display: block; margin: 0; overflow-wrap: anywhere; }
  /* Sin foto (días cerrados, equipo…), el texto empieza en el borde. */
  table.tbl td:first-child:not(:has(> .ph, > .thumb)) { padding-left: 0; min-height: 0; }
  table.tbl td:not([data-label]), table.tbl td[data-label=""] { padding-top: 10px; }
  table.tbl td:not([data-label])::before { content: none; }
  /* Botones de la fila: dos por línea, el que sobra centrado (como en la app). */
  table.tbl .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  table.tbl .actions > * { flex: 1 1 calc(50% - 4px); justify-content: center; white-space: normal; text-align: center; }
  table.tbl .actions > :last-child:nth-child(odd) { flex-grow: 0; }
  /* «Más» es un <details>: su botón ocupa la caja entera, como los demás
     (si no, se quedaba pegado a la izquierda de una caja centrada). */
  table.tbl .actions > details.mas > summary { display: flex; width: 100%; justify-content: center; }
  /* Cifras de dos en dos, como en la app; si sobra una, a lo ancho. */
  .kpis > * { flex-basis: calc(50% - 5px); }
  /* Cabecera: el título en su línea y los botones repartidos debajo. */
  .page-head { flex-wrap: wrap; }
  .page-head > h1, .page-head > h2 { flex-basis: 100%; }
  .page-head > .spacer { display: none; }
  .page-head { column-gap: 8px; row-gap: 10px; justify-content: center; }
  .page-head > .btn { flex: 1 1 calc(50% - 4px); justify-content: center; white-space: normal; text-align: center; }
  /* Tres o más: uno debajo de otro, todos a lo ancho (nunca una fila con
     botones de distinto tamaño; «Publicaciones»). */
  .page-head:has(> .btn ~ .btn ~ .btn) > .btn { flex-basis: 100%; }
}

/* Primeros pasos (negocio recién aprobado, sin nada publicado) */
.primeros .paso { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--glass-border);
  color: var(--ink); text-decoration: none; }
.primeros .paso:hover { text-decoration: none; background: var(--glass); }
.primeros .paso > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.primeros .paso small { color: var(--ink-2); font-weight: 500; }
.primeros .paso .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--soft); font-weight: 800; }
.primeros .paso.hecho { cursor: default; }
.primeros .paso.hecho .n { background: var(--ink); color: var(--surface); }
.primeros .paso.hecho b { text-decoration: line-through; color: var(--ink-2); }

/* Plantillas del formulario de publicación */
.plantillas h2 { margin-bottom: 8px; }

/* Reseñas */
.resumen-resenas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.resenas-panel { display: grid; gap: 12px; }
.resenas-panel article { margin: 0; }
.resenas-panel header { display: flex; align-items: center; gap: 10px; }
.resenas-panel header > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.resenas-panel .av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--soft); font-weight: 800; flex: none; }
.resenas-panel .av img { width: 100%; height: 100%; object-fit: cover; }
.resenas-panel article > p { margin: 10px 0 0; }
.resenas-panel img.foto { width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; display: block; margin-top: 8px; }
.resenas-panel .respuesta { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.resenas-panel .respuesta p { margin: 6px 0 0; }
.resenas-panel .pie { display: flex; justify-content: flex-end; margin-top: 10px; }
.stars span { color: var(--ink-2); opacity: .6; }

/* Enlace con aspecto de texto (borrar plantillas…). */
.linkbtn { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline;
  text-underline-offset: 2px; font: inherit; font-size: 14px; cursor: pointer; }

/* «Más» en cada publicación: las acciones de uso menos frecuente. Se abre
   dentro de la fila (flotando, la tabla lo recortaría). */
details.mas { display: inline-block; margin: 0; } /* sin el margen de los «¿Cómo funciona?» */
details.mas > summary { list-style: none; cursor: pointer; }
details.mas > summary::-webkit-details-marker { display: none; }
details.mas[open] { flex-basis: 100%; }
details.mas .mas-menu { display: grid; gap: 2px; margin-top: 6px; padding: 6px; border-radius: 14px;
  background: var(--elevated); border: 1px solid var(--glass-border); min-width: 220px; }
details.mas .mas-menu a, details.mas .mas-menu button { display: block; text-align: left; padding: 9px 12px;
  border-radius: 10px; color: var(--ink); background: none; border: 0; font: inherit; font-size: 14px;
  cursor: pointer; white-space: nowrap; }
details.mas .mas-menu a:hover, details.mas .mas-menu button:hover { background: var(--soft); text-decoration: none; }
/* Rojo con contraste suficiente sobre el menú (claro: 5,6:1; oscuro: rosa claro). */
details.mas .mas-menu .bad { color: #C62828; }
@media (prefers-color-scheme: dark) { details.mas .mas-menu .bad { color: #FF9B9B; } }

/* «Cerrado por hoy» en el resumen */
.card.pausa { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Diseño del anuncio: plantillas y color (la vista previa es la tarjeta de
   verdad, en `.pub-prev`). */
.estilo { margin-top: 10px; }
.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.colores .color { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(128,128,128,.4); }
.colores .color.on { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--surface); }
.colores .marca-btn { display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: conic-gradient(#E5484D, #F5B041, #34D399, #0EA5E9, #6D28D9, #E5484D); }
.colores .marca-btn .ms { font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.marca { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass); }
.marca-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.marca-fila input[type=color] { width: 44px; height: 36px; padding: 2px; border-radius: 10px; border: 1px solid var(--glass-border); background: none; cursor: pointer; }
.marca-fila #marcaHex { width: 110px; font-family: ui-monospace, monospace; text-transform: uppercase; }
/* «Dónde»: en el local o en otro sitio. */
.lugar #lugarCampos { margin-top: 8px; }
.lugar #lugarCampos[hidden] { display: none !important; }

/* Sin conexión o por comprobar: ni válido ni no válido, en tinta (el verde y
   el rojo son solo para el resultado). */
.scan-result.warn { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-border); }
.scan-result .btn { margin-top: 8px; }

/* Tarjetas de sellos */
a.card.tarjeta-sellos { display: block; color: inherit; text-decoration: none; }
a.card.tarjeta-sellos:hover { border-color: var(--ink-2); }
.tarjeta-sellos p { margin: 4px 0 0; }
/* Título arriba, su estado debajo y la flecha a la derecha: con un estado
 * largo («Abierto · termina el 14 de octubre, 11:28») en 360 px el título
 * se quedaba en una letra por línea. */
.ts-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.ts-top h2 { margin: 0; font-size: 18px; min-width: 0; overflow-wrap: anywhere; grid-column: 1; }
.ts-top .tag { grid-column: 1; justify-self: start; }
.ts-top .ms { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-2); }
.filtro-sellos { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.filtro-sellos legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.opcion { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.opcion input { width: auto; margin: 0; }
.huecos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.huecos span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--glass-border); }
.huecos span.lleno { background: var(--ink); border-color: var(--ink); }
.persona-form { margin-top: 6px; }
.dos-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos-botones .btn, .persona-form .btn.primary { width: 100%; justify-content: center; }
.linkbtn.peligro { color: #b3261e; }
@media (prefers-color-scheme: dark) { .linkbtn.peligro { color: #FF9B9B; } }
.linkbtn:disabled { opacity: .45; cursor: default; text-decoration: none; }
.cambios { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.nuevos { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
#buscaNuevos { margin-bottom: 14px; }
#qNuevos, #qGente { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 16px; font-size: 15px; background: var(--glass); }

/* «Avisar a mis clientes»: la vista previa, con el aspecto de la notificación
   que llegará al móvil, y el historial de lo enviado. */
.noti-prev { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; margin: 6px 0 4px;
  background: var(--elevated); border: 1px solid var(--glass-border); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.noti-prev img { border-radius: 9px; flex: none; }
.noti-prev p { margin: 0; }
.noti-prev .noti-app { font-size: 12px; color: var(--ink-2); }
.noti-prev .noti-t { font-weight: 700; color: var(--ink); font-size: 15px; }
.noti-prev .noti-b { color: var(--ink); font-size: 14px; white-space: pre-line; }
.mensaje-hist { padding: 12px 0; border-top: 1px solid var(--glass-border); }
.mensaje-hist:first-of-type { border-top: 0; padding-top: 0; }
.mensaje-hist p { margin: 4px 0 0; color: var(--ink); }
.mensaje-hist p:first-child { margin: 0; }

/* Validar: qué código es, de un vistazo (como la app). La publicación en
   grande con su foto; lo que hay que dar en coral, solo si vale; el resto en
   neutros. */
.codigo-card { margin-top: 12px; padding: 18px; border-radius: 22px; background: var(--elevated); border: 1px solid var(--glass-border); }
.codigo-card p { margin: 0; }
.cod-top { display: flex; gap: 14px; align-items: flex-start; }
.cod-top img, .cod-ic { width: 72px; height: 72px; border-radius: 16px; flex: none; object-fit: cover; }
.cod-ic { display: grid; place-items: center; background: rgba(128,128,128,.14); color: var(--ink-2); }
.cod-ic .ms { font-size: 30px; }
.cod-cab { min-width: 0; }
.cod-tipo { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cod-titulo { margin: 4px 0 0; font-size: 26px; line-height: 1.12; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.cod-label { margin-top: 16px !important; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cod-dar { display: inline-block; margin-top: 6px !important; padding: 8px 16px; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-size: 24px; font-weight: 800; line-height: 1.2; }
.codigo-card.bad .cod-dar { background: none; color: var(--ink); padding: 0; font-size: 20px; }
.cod-antes { margin-top: 6px !important; color: var(--ink-2); font-size: 17px; }
.cod-plazas { margin-top: 12px !important; font-size: 22px; font-weight: 800; color: var(--ink); }
.cod-cond { margin-top: 12px !important; color: var(--ink-2); font-size: 14px; }
.cod-linea { margin-top: 8px !important; color: var(--ink-2); font-size: 15px; }
.cod-linea b { color: var(--ink); }
.cod-linea .ms { font-size: 18px; vertical-align: -4px; margin-right: 6px; }
/* Quién canjea: la foto redonda si la tiene, el nombre, cuántas veces ha
   venido y, en una entrada nominativa, «Nominativa» (sobria, sin coral). */
.cod-quien { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cod-av { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; }
.cod-av.ph { display: grid; place-items: center; background: rgba(128,128,128,.14); color: var(--ink-2); }
.cod-av.ph .ms { font-size: 26px; }
.cod-quien-t { display: flex; flex-direction: column; min-width: 0; }
.cod-quien-t b { font-size: 19px; color: var(--ink); overflow-wrap: anywhere; }
.cod-quien-t small { color: var(--ink-2); font-size: 14px; }
.tag.cod-nominativa { margin-left: auto; flex: none; background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-border); }
.bono-quien { margin: 0 0 6px; }
.bono-quien h2 { margin: 0; }
.btn.grande { width: 100%; justify-content: center; margin-top: 12px; padding: 16px; font-size: 20px; }
.btn.grande .ms { font-size: 26px; }
@media (max-width: 520px) { .cod-titulo { font-size: 22px; } .cod-dar { font-size: 20px; } }

/* ══ Organizado como «Mi negocio» en la app (2026-10-02) ══════════════════ */
/* Saltar al contenido: solo se ve al llegar con el teclado. */
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--surface); font-weight: 700; }
.saltar:focus { top: 12px; text-decoration: none; }
main.content:focus { outline: none; }
.page-head h1:focus { outline: none; }

/* Iconos en SVG (los que no están en la fuente recortada). */
.ms.svg { width: 20px; height: 20px; flex: none; font-size: inherit; }
.btn .ms.svg { width: 18px; height: 18px; }

/* El menú lateral: grupos con su título, como las secciones de la app. */
.side-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-cab .brand { margin-bottom: 18px; }
.menu-cerrar { display: none; color: inherit; border-color: rgba(255,255,255,.2); margin: 0 4px 18px 0; }
.nav-grupo { display: grid; gap: 2px; }
.nav-grupo + .nav-grupo { margin-top: 6px; }
/* Más contraste que el del admin (el 45 % no llegaba a 4,5:1 sobre negro). */
.side .group { opacity: .7; }
.side a.nav { min-height: 40px; }
.side a.nav:focus-visible, .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* Barra de abajo en el móvil: lo de todos los días y «Más» (el menú). */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    padding: 0 4px env(safe-area-inset-bottom); background: var(--elevated); border-top: 1px solid var(--glass-border);
    box-shadow: 0 -8px 24px -18px rgba(0,0,0,.4); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
    border: 0; background: none; border-radius: 14px; color: var(--ink-2); font: inherit; font-size: 10.5px; letter-spacing: -.01em; font-weight: 700; cursor: pointer;
    text-decoration: none; padding: 4px 2px; min-width: 0; }
  /* «Publicaciones» roza el ancho de su hueco en 360 px: se deja salir un
     poco (centrado) antes que cortarlo. */
  .tabbar span:not(.ms) { white-space: nowrap; }
  .tabbar .ms { font-size: 24px; width: 24px; height: 24px; }
  .tabbar .on { color: var(--ink); }
  /* Compacta como la de la app: sin la píldora detrás del icono elegido; el
     icono de la recién elegida crece un instante (Movimiento, site.css). */
  .tabbar .on { font-weight: 800; }
  .tabbar .on .ms { animation: mov-pop var(--mov-lento) var(--mov-rebote); }
  main.content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .menu-cerrar { display: inline-flex; }
  /* `.open` de site.css (la página de «abrir en la app») centraba el cajón. */
  .side.open { text-align: left; align-items: stretch; justify-items: stretch; padding: 18px 14px; }
  /* Cerrado, el cajón no se alcanza con el tabulador (está fuera de la
     pantalla); se esconde al terminar de salir. */
  .side { visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .side.open { visibility: visible; transition: transform .2s ease, visibility 0s; }
  body.con-menu { overflow: hidden; }
  .topbar #menuBtn { display: none; }
}

/* ── Tus publicaciones: la tarjeta que verá la gente ───────────────────── */
.pubs-barra { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 16px; }
.pubs-barra:empty, .pubs-barra:has(> :empty:first-child + :empty) { display: none; }
.pills .n { opacity: .72; font-weight: 600; margin-left: 2px; }
.pubs-barra > div { min-width: 0; max-width: 100%; }
/* En el móvil, los filtros en una línea que se desliza de lado (como en
   Explorar), sin mover la página. */
@media (max-width: 640px) {
  .pubs-barra { flex-direction: column; align-items: stretch; }
  #filtroArch .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; scroll-padding: 0 16px; }
  #filtroArch .pills::-webkit-scrollbar { display: none; }
  #filtroArch .pills button { flex: none; white-space: nowrap; }
}
.vista-sw button { display: inline-flex; align-items: center; gap: 6px; }
/* Cada publicación ocupa dos filas de la rejilla (tarjeta y datos) con
   `subgrid`: en una fila, las tarjetas miden lo mismo (como en Explorar) y
   los datos empiezan a la misma altura. */
.pubs { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-bottom: 18px; }
@media (max-width: 600px) { .pubs { grid-template-columns: minmax(0, 1fr); } }
.pub-item { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; margin-bottom: 28px; }
.pub-item .tjv { display: flex; }
.pub-item .tj { flex: 1; }
.pub-meta { padding: 12px 4px 0; display: grid; gap: 8px; align-content: start; }
.pub-estado { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pub-cifras { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.pub-meta .actions { gap: 6px; }
/* Lo que ya no se ve: la foto en gris (el texto sigue igual de legible). */
.pub-archivada .tj-media, .pub-terminada .tj-media, .pub-cancelada .tj-media { filter: grayscale(.85); }
.tag.st-scheduled { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-border); }
.sin-pubs h2 { margin: 0 0 6px; }
.sin-pubs p { margin: 0; }

/* ── Calendario del negocio (el de Explorar, con lo suyo) ─────────────── */
.calendario .cal-mes { top: 20px; }
button.cal-nav { border: 0; background: none; cursor: pointer; padding: 0; }
button.cal-nav:hover { background: var(--soft); }
.cal-nav:focus-visible, .cal-dia:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a.cal-dia { text-decoration: none; }
/* Los días pasados también se abren (para ver lo que hubo): en gris, sin
   transparencia, que el número se siga leyendo (AA). */
.calendario .cal-dia.pasado { opacity: 1; color: var(--ink-2); }
.calendario .cal-dia.pasado.sel { color: var(--surface); }
.cal-item { display: grid; gap: 4px; }
.cal-item-estado { margin: 0 0 0 12px; }
.cal-item-estado:empty { display: none; }
.cal-nada { margin: 0; }
.cal-nada a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cal-crear { margin-top: 16px; }

/* ── Formulario con la vista previa en vivo ────────────────────────────── */
.pub-editor { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.pub-editor > form { margin-bottom: 0; }
.pub-prev { display: grid; gap: 8px; align-content: start; }
.pub-prev h2 { font-size: 17px; margin: 0; }
.pub-prev h2:focus { outline: none; }
.pub-prev > .hint { margin: 0; }
.prev-sw { margin: 2px 0 4px; }
.prev-tarjeta { max-width: 380px; width: 100%; }
.prev-tarjeta .tj-enlace { cursor: default; }
.prev-boton { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; max-width: 380px;
  padding: 6px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 15px; box-sizing: border-box; }
.prev-boton small { font-weight: 600; font-size: 12px; opacity: .85; }
@media (min-width: 1180px) {
  .pub-editor { grid-template-columns: minmax(0, 1fr) 340px; }
  .pub-prev { position: sticky; top: 20px; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 0 2px 8px; }
  .solo-movil { display: none; }
}
/* Solo para el lector de pantalla (lo usa la tarjeta: «Oferta flash», «Vídeo»). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* «Cómo es tu local» (Tu ficha): píldoras con icono que se marcan, como las
   de «El sitio» en los filtros de la web y la app. */
.sitio-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.sitio-op { position: relative; display: inline-flex; }
.sitio-op input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sitio-op > span { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.sitio-op .ms { font-size: 20px; }
.sitio-op input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sitio-op input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.sitio-op input:disabled + span { cursor: default; opacity: .75; }

/* ── RRPP (panel/rrpp.js) ──────────────────────────────────────────────────
   Neutros (el coral es solo de la oferta y del botón principal): la lista de
   un RRPP va en tinta, para verla de un vistazo en la puerta. */
.rrpp-av { border-radius: 50% !important; }
.ph.rrpp-av { font-weight: 800; font-size: 16px; color: var(--ink); }
.tag.rrpp-tag { background: var(--ink); color: var(--surface); }
/* El sello de una entidad (ayuntamiento, asociación, ONG): sobrio, en tinta. */
.tag.badge-entidad { display: inline-flex; align-items: center; gap: 4px; background: var(--soft); color: var(--ink); }
.tag.badge-entidad .svg { width: 14px; height: 14px; }
.rrpp-cab-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rrpp-cab-card h2 { margin: 0; }
.rrpp-cab-card .spacer { flex: 1; }
.rrpp-cab-card select { width: auto; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); font: inherit; font-size: 14px; }
.rrpp-ficha-cab { display: flex; gap: 14px; align-items: center; }
.rrpp-ficha-cab > .thumb, .rrpp-ficha-cab > .ph { width: 56px; height: 56px; flex: none; display: grid; place-items: center; background: var(--soft); object-fit: cover; font-size: 22px; }
.rrpp-ficha-t { min-width: 0; flex: 1; }
.rrpp-enlaces { display: grid; gap: 12px; }
.rrpp-enlace { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 18px; background: var(--elevated); border: 1px solid var(--glass-border); }
.rrpp-qr { width: 104px; flex: none; background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box; }
.rrpp-qr svg { width: 100%; height: auto; display: block; }
.rrpp-enlace-t { min-width: 0; flex: 1; }
.rrpp-url { margin: 4px 0 2px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .rrpp-enlace { flex-direction: column; align-items: stretch; }
  .rrpp-qr { width: 140px; margin: 0 auto; }
}
/* «Solo con el enlace de un RRPP» en el formulario. */
.rrpp-opc { display: grid; gap: 8px; margin: 6px 0 0 28px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--glass-border); }
.rrpp-preg { margin: 8px 0 0; font-weight: 600; font-size: 14px; }
.rrpp-algunos { display: grid; gap: 6px; margin-left: 28px; }
.rrpp-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rrpp-fila input[type=number], .rrpp-fila input[type=time] { width: 120px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); font: inherit; }
.rrpp-fila input:disabled { opacity: .5; }
@media (max-width: 520px) { .rrpp-opc { margin-left: 0; } }
/* «Lista de Marta» en el resultado del escáner: bien a la vista. */
.cod-rrpp { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; padding: 10px 14px; border-radius: 16px;
  background: var(--ink); color: var(--surface); font-size: 18px; font-weight: 800; }
.cod-rrpp .ms { font-size: 22px; }
.cod-rrpp small { display: block; font-size: 14px; font-weight: 600; opacity: .85; }
/* Con carné: «Pide el carné de estudiante» en el escáner, bien visible (con
   borde en tinta, como la app; sin ámbar). */
.cod-carne { display: flex; align-items: center; gap: 10px; margin-top: 14px !important; padding: 12px 14px; border-radius: 16px;
  border: 2px solid var(--ink); background: var(--soft); font-size: 18px; }
.cod-carne .ms { font-size: 26px; }
/* «Cómo es tu local»: el título del rango de precio. */
.f-tit { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.hint.err-txt, small.err-txt { color: #b3261e; }
@media (prefers-color-scheme: dark) { .hint.err-txt, small.err-txt { color: #FF9B9B; } }
/* «¿Hay sitio ahora?» en el resumen: tres botones iguales; el marcado, en tinta. */
.card.aforo { margin-top: 14px; }
.aforo-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aforo-cab h2 { margin: 0; }
.aforo-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.aforo-botones .btn { justify-content: center; min-height: 44px; }
.aforo-botones .btn.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ── «Tu ficha» por apartados y el alta en tres pasos (ficha.js) ───────── */
.form.ficha-form { max-width: 680px; }
label.f.casilla { grid-template-columns: auto 1fr; align-items: start; }
label.f.casilla small { display: block; font-weight: 500; margin-top: 2px; }
.ficha-cab { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; max-width: 680px; }
.ficha-cab > img, .ficha-cab > .ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--soft); font-size: 26px; }
.ficha-cab > div { display: grid; gap: 2px; min-width: 0; }
.ficha-cab b { font-size: 20px; }
.card.indice { padding: 4px 0; max-width: 680px; }
.card.indice h2 { margin: 10px 18px 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.indice-fila { display: flex; align-items: center; gap: 12px; padding: 13px 18px; color: var(--ink); text-decoration: none; min-height: 48px; }
.indice-fila + .indice-fila { border-top: 1px solid var(--glass-border); }
.indice-fila:hover { background: var(--soft); text-decoration: none; }
.indice-fila:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.indice-fila > span:first-child { flex: 1; display: grid; gap: 2px; min-width: 0; }
.indice-fila small { color: var(--ink-2); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.indice-fila small.mal { color: #b3261e; }
.indice-fila.peligro b { color: #b3261e; }
.indice-fila .ms { color: var(--ink-2); flex: none; }
.aviso-falta { display: flex; align-items: center; gap: 10px; max-width: 680px; padding: 12px 16px; margin: 0 0 14px; border-radius: 16px;
  border: 1px solid rgba(211,47,47,.55); color: var(--ink); font-weight: 600; text-decoration: none; }
.aviso-falta > span:nth-child(2) { flex: 1; }
.aviso-falta > .ms:first-child { color: #b3261e; }
@media (prefers-color-scheme: dark) {
  .indice-fila small.mal, .indice-fila.peligro b, .aviso-falta > .ms:first-child { color: #FF9B9B; }
}
/* El horario: una tarjeta por día. */
.hdias { display: grid; gap: 8px; }
.hdia { border: 1px solid var(--glass-border); border-radius: 16px; padding: 8px 14px 10px; background: var(--glass); }
.hdia.mal { border-color: rgba(211,47,47,.75); }
.hdia-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.hdia-cab .spacer { flex: 1; }
.hdia-abierto { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; min-height: 40px; }
.hdia-abierto input { width: 18px; height: 18px; accent-color: var(--ink); }
.htramos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center; }
.htramo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--elevated); }
.htramo input[type=time] { padding: 6px 8px; border-radius: 10px; min-width: 0; width: 7.2em; }
.htramo-quitar { padding: 4px 6px; min-height: 32px; }
.htramo small { white-space: nowrap; }
.htramo-quitar .ms { font-size: 18px; }
.hcopia-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
/* El alta: progreso y botones. */
.alta-progreso { max-width: 680px; margin: 0 0 16px; }
.alta-progreso p { margin: 0 0 8px; }
.alta-barra { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.alta-barra > span { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.alta-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alta-botones.uno { grid-template-columns: 1fr; }
.alta-botones .btn { width: 100%; justify-content: center; }
.alta-sub { font-size: 18px; margin: 14px 0 4px; }
.mapa-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
/* Las fotos del negocio: portada ancha y logo redondo. */
.fotos-ficha { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.foto-hueco { display: grid; gap: 8px; }
.foto-tit { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.foto-portada { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--glass-border); }
.foto-logo { width: 112px; height: 112px; object-fit: cover; border-radius: 50%; border: 1px solid var(--glass-border); }
.foto-portada.vacia, .foto-logo.vacia { display: grid; place-items: center; background: var(--glass); color: var(--ink-2); font-size: 28px; }
.foto-acc { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .fotos-ficha { grid-template-columns: 1fr; } }
/* ── Formulario de publicación (rediseño 2026-10): lo esencial arriba, tres
   bloques plegables con su resumen y la barra fija con «Guardar borrador» y
   «Publicar ▾». El mismo orden y los mismos nombres que la app. */
.tipo-linea { margin: -6px 0 14px; color: var(--ink-2); font-size: 14px; }
.tipo-linea .linkbtn { font-weight: 700; }
.pub-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 0; min-width: 0; }
.pub-form > *, .pub-editor > * { min-width: 0; }
/* Editando una publicación, la barra del formulario sustituye a la de abajo
   del móvil (como en la app, que la abre a pantalla completa). */
@media (max-width: 900px) {
  body.con-barra-pub .tabbar { display: none; }
  body.con-barra-pub main.content { padding-bottom: 24px; }
  body.con-barra-pub .toasts { bottom: calc(110px + env(safe-area-inset-bottom)); }
}
.pub-form .etq { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pub-form fieldset.plano { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.pub-form fieldset.plano > legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pub-form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pub-form .dos[hidden], .pub-form [hidden] { display: none !important; }
.pub-form .bl-fila { margin: 0; }
.pub-form .help { margin: 0; }
.ideas .ideas-fila { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ideas .ideas-fila::-webkit-scrollbar { display: none; }
.ideas .ideas-fila .btn { flex: none; white-space: nowrap; }
/* Una elección en píldoras (radio): la marcada en tinta. */
.elige { display: flex; flex-wrap: wrap; gap: 8px; }
.elige label { position: relative; display: inline-flex; }
.elige input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.elige span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; box-sizing: border-box;
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.elige input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 700; }
.elige input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Bloques plegables: cerrados dicen lo que llevan dentro. */
details.bloque { border: 1px solid var(--glass-border); border-radius: 18px; margin: 0; }
details.bloque > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 14px 16px; }
details.bloque > summary::-webkit-details-marker { display: none; }
/* La flecha, dibujada (el icono no está en la fuente recortada del panel). */
details.bloque > summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: -4px 6px 0; transition: transform .2s; }
details.bloque[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { details.bloque > summary::after { transition: none; } }
details.bloque > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 18px; }
details.bloque .b-tit { font-weight: 800; font-size: 16px; color: var(--ink); }
details.bloque .b-res { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
details.bloque[open] .b-res { display: none; }
details.bloque .b-cuerpo { display: grid; gap: 14px; padding: 0 16px 16px; }
/* La barra fija de abajo. */
.barra-pub { position: sticky; bottom: 0; z-index: 5; margin: 4px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--elevated); border-top: 1px solid var(--glass-border); border-radius: 0 0 20px 20px; }
.barra-pub .err:empty { display: none; }
.barra-pub .err { margin: 0 0 8px; }
.barra-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.barra-botones .btn { width: 100%; justify-content: center; min-height: 48px; }
.pub-grupo { position: relative; }
.menu-pub { position: absolute; right: 0; bottom: calc(100% + 6px); display: grid; gap: 2px; padding: 6px; min-width: 220px;
  border-radius: 14px; background: var(--elevated); border: 1px solid var(--glass-border); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.menu-pub button { text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.menu-pub button:hover, .menu-pub button:focus-visible { background: var(--soft, rgba(127,127,127,.12)); outline: none; }
.programada { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.pub-form .err-campo { margin: 4px 0 0; color: #b3261e; font-size: 13px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .pub-form .err-campo { color: #FF9B9B; } }
.pub-form [aria-invalid="true"] { border-color: #b3261e; }
.tpl-menu .mas-menu { position: absolute; right: 0; z-index: 6; }
.tpl-menu { position: relative; }

/* «Cuánto te ha traído Klendar» (Informe) e «Importe del ticket» (Validar). */
.trajo .trajo-min { margin: 0; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.trajo .trajo-cifra { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.ticket-caja { margin-top: 14px; }
.ticket-caja .f { margin: 0; }
.ticket-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-fila .ticket-in { flex: 1 1 120px; max-width: 180px; }
.ticket-msg.err { color: #b3261e; font-weight: 600; }
@media (prefers-color-scheme: dark) { .ticket-msg.err { color: #FF9B9B; } }
.ticket-celda { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ticket-celda .ticket-caja { margin: 0; }

/* «Antes de cerrar»: lo de la última vez, las bolsas y la hora. */
.antes-ultima { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.antes-ultima img, .antes-ultima .antes-ic { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.antes-ultima .antes-ic { display: grid; place-items: center; background: var(--glass, rgba(127,127,127,.12)); }
.antes-ultima b, .antes-ultima small, .antes-ultima .antes-trato { display: block; }
.antes-trato { color: var(--accent-text, #D6264A); font-weight: 700; }
.antes-fila { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.antes-fila .etq { flex: 1; margin: 0; }
.antes-fila .btn { min-width: 44px; min-height: 44px; justify-content: center; }
.antes-fila output { min-width: 80px; text-align: center; font-weight: 800; }
/* El importe no es un código: letra normal, a la izquierda. */
.scan-box .ticket-in, .ticket-celda .ticket-in { font-size: 16px; letter-spacing: normal; text-align: left; font-family: inherit; }
.antes .f { max-width: 220px; }

/* Bonos pagados en el local (panel/bonos.js): «Quedan 7 de 10» con su barra
   neutra, el cliente delante en «Validar códigos» y el historial de usos. */
.bono-quedan { display: block; font-weight: 800; margin: 2px 0; }
.bono-quedan.grande { font-size: 22px; }
.bono-barra { display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--ink-2) 22%, transparent); overflow: hidden; margin: 6px 0; max-width: 360px; }
.bono-barra > span { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.bono-cliente { margin-top: 14px; }
.bono-cliente h2 { margin: 0 0 4px; }
.bono-pase { border-top: 1px solid var(--line, rgba(127,127,127,.25)); padding: 12px 0; display: grid; gap: 6px; }
.bono-pase h3 { margin: 0; font-size: 16px; }
.bono-pase p { margin: 0; }
.bono-cliente .btn.grande { width: 100%; justify-content: center; }
.bono-usos { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.bono-usos li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bono-usos li.deshecho span { text-decoration: line-through; color: var(--ink-2); }
.bono-quedan { color: var(--ink); white-space: nowrap; }

/* ── Tanda C: Grupos y empresas (panel/grupos.js) y Sorteos (panel/sorteos.js) ── */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.grupo-h { margin: 22px 0 10px; font-size: 20px; }
.grupo-para-que, .sorteo-organiza { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.grupo-para-que legend, .sorteo-organiza legend { font-weight: 700; font-size: 14px; margin: 0 0 4px; padding: 0; }
.grupo-peticiones { display: grid; gap: 10px; }
.grupo-pet h3 { margin: 0 0 4px; font-size: 16px; overflow-wrap: anywhere; }
.grupo-pet p { margin: 4px 0; overflow-wrap: anywhere; }
.grupo-nota { color: var(--ink-2); }
/* «Denunciar», discreto al pie de la petición (en la app, en ⋮). */
.grupo-pet .grupo-denunciar { margin: 10px 0 0; text-align: end; font-size: 13px; }
.grupo-tu-propuesta { padding: 10px 12px; border-radius: 14px; background: var(--soft); margin: 6px 0; }
/* «Enviar propuesta» / «No podemos» (y «Escribir» / «Llamar»): uno debajo de otro, del mismo ancho. */
.grupo-botones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; max-width: 360px; }
.grupo-plegable { margin-top: 18px; max-width: 720px; }
.grupo-plegable > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.grupo-plegable[open] > summary { margin-bottom: 14px; }
.grupo-plegable .form { margin: 0; }
.grupo-botones .btn { justify-content: center; }
.sorteo-item h2 { overflow-wrap: anywhere; }
.sorteo-ganadores { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 10px; }
.sorteo-ganador { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sorteo-ganador img, .sorteo-ganador .ph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--soft); flex: none; }
.sorteo-ganador > span { display: grid; flex: 1 1 200px; min-width: 0; }
.sorteo-ganador small { font-size: 13px; }
.sorteo-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 12px 0; }
.sorteo-acciones .btn { justify-content: center; text-align: center; }
.sorteo-irpf { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--soft); font-weight: 600; font-size: 14px; }
.sorteo-obligaciones { align-items: flex-start; }
.sorteo-obligaciones input { margin-top: 3px; }
.form.grupo-ajustes, .form.sorteo-form { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.seg .btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: transparent; }
/* El periodo de «Cifras» (y el de RRPP): el elegido en tinta, como en la app. */
.periodo { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.periodo .btn[aria-current="true"], .periodo .btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: transparent; }
.sorteo-form .opcion, .grupo-ajustes .opcion { align-items: flex-start; }
.sorteo-form .opcion input, .grupo-ajustes .opcion input { width: 18px; height: 18px; flex: none; margin-top: 3px; }
/* Cola virtual (panel/cola.js). */
.cola-cifras { text-align: center; }
.cola-cifras .cola-n { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin: 0 0 4px; }
.cola-cifras p { margin: 0 0 6px; }
.btn.cola-avisar { width: 100%; justify-content: center; padding: 16px 20px; font-size: 17px; margin-top: 10px; white-space: normal; }
.cola-pausa { margin-bottom: 14px; }
.cola-h2 { font-size: 15px; margin: 18px 0 8px; }
.cola-lista { padding: 4px 16px; }
.cola-fila { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 0; }
.cola-fila + .cola-fila { border-top: 1px solid var(--glass-border); }
.cola-fila-t { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.cola-fila-t b { overflow-wrap: anywhere; }
.cola-fila-t .muted { font-size: 13px; }
.cola-queda { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.cola-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1 1 100%; }
.cola-dos .btn, .cola-acciones .btn { justify-content: center; }
.cola-mas .mas-menu { position: absolute; right: 0; z-index: 6; }
.cola-mas { position: relative; }
.cola-hechos { margin-top: 14px; }
.cola-hechos .cola-lista { padding: 0; }
.cola-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
/* «Pedidos de hoy» (panel/listo.js): el número grande, «Listo» y «Más». */
.listo-cifras { text-align: center; }
.listo-cifras .cola-n { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin: 0 0 4px; }
.listo-cifras p { margin: 0; }
.listo-fila { display: flex; align-items: center; gap: 10px 12px; padding: 12px 0; }
.listo-fila + .listo-fila { border-top: 1px solid var(--glass-border); }
.listo-num { font-family: var(--display); font-weight: 800; font-size: 28px; min-width: 2.4ch; text-align: center; font-variant-numeric: tabular-nums; }
.listo-t { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.listo-t b { overflow-wrap: anywhere; }
.listo-t .muted, .listo-ya { font-size: 13px; }
.listo-ya { font-weight: 800; }
.listo-hecho { margin: 6px 0; color: var(--ink-2); }
.listo-apagado h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.listo-apagado .btn.primary { margin-top: 12px; }
.listo-apagado .listo-pronto { margin: 12px 0 0; }
.cola-acciones .btn { white-space: normal; text-align: center; }
.cola-cartel h2 { margin-top: 0; }
.filas-inicio { display: grid; gap: 8px; margin: 0 0 14px; }
.fila-inicio { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink); font-weight: 700; }
.fila-inicio:hover { text-decoration: none; border-color: var(--ink-2); }
.fila-inicio > span:not(.ms) { flex: 1; min-width: 0; }
.fila-inicio > .ms, .fila-inicio > svg { flex: none; }
.fila-inicio > .ms:last-child { color: var(--ink-2); }
.cola-mas[open] { flex-basis: auto; }
.cola-cartel .cola-acciones { margin-top: 12px; }

/* «Quién actúa» (panel/artistas.js): los elegidos en chips (× para quitar),
   el buscador y sus sugerencias debajo. Neutros. */
.quien-actua .art-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.art-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--soft);
  border: 1px solid var(--glass-border); font-weight: 600; font-size: 14px; max-width: 100%; overflow-wrap: anywhere; }
.art-chip button { border: 0; background: transparent; color: var(--ink-2); font-size: 18px; line-height: 1; width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer; flex: none; }
.art-chip button:hover, .art-chip button:focus-visible { background: var(--glass-border); color: var(--ink); }
.art-buscar { position: relative; }
.art-buscar input { width: 100%; box-sizing: border-box; }
.art-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--elevated); border: 1px solid var(--glass-border);
  border-radius: 14px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.35); padding: 6px; max-height: 280px; overflow-y: auto; }
.art-sug [role=option] { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font: inherit;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; overflow-wrap: anywhere; }
.art-sug [role=option]:hover, .art-sug [role=option][aria-selected=true] { background: var(--soft); }
.art-sug [role=option].nuevo { font-weight: 700; }
.art-sug-t, .art-sug-nada { margin: 4px 10px 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.art-sug-nada { font-weight: 500; font-size: 14px; }
/* Alta y «Dónde está» sin local fijo: el título de la zona sobre el mapa. */
.zona-t { margin: 0 0 8px; }
.conlocal { display: contents; }
/* «Reservar y pedir» (Contacto y redes) y «Archivos de la carta» (Carta): una
   fila por elemento con su icono o miniatura, el nombre y la dirección o el
   tamaño, y los mismos tres botones (↑, ↓, Quitar). */
.enlaces-lista, .archivos-carta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.enlaces-lista li, .archivos-carta li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: var(--soft); min-width: 0; }
.enlaces-lista .ic { flex: none; color: var(--ink); }
.enl-txt, .arch-txt { flex: 1; min-width: 0; display: grid; }
.enl-txt b, .arch-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enl-txt small, .arch-txt small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enl-acc, .arch-acc { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.enl-acc .btn, .arch-acc .btn { justify-content: center; }
.arch-mini { flex: none; width: 48px; height: 60px; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
  background: var(--elevated); color: var(--ink); }
.arch-mini img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) {
  .enlaces-lista li, .archivos-carta li { flex-wrap: wrap; }
  .enl-acc, .arch-acc { margin-left: auto; }
}
/* Informe: «Toques en tus enlaces». */
.toques-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.toques-enlaces li { display: flex; gap: 6px; align-items: baseline; }

/* ── «Mi negocio» ordenado (panel/herramientas.js) ─────────────────────── */
/* «Crear» y «Validar códigos»: los dos iguales, uno al lado del otro. */
.quick.quick-2 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* En el móvil, «Crear» y «Validar códigos» como en la app: icono y nombre en
   una fila, sin la frase (así las publicaciones se ven antes). */
@media (max-width: 640px) {
  .quick.quick-2 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .quick.quick-2 button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; min-height: 52px; text-align: center; }
  .quick.quick-2 button .ic { font-size: 22px; }
  .quick.quick-2 button small { display: none; }
}
/* «Lo esencial»: una fila de cuatro accesos iguales, con su icono y su
   nombre (como la app, 2026-10-22). La línea de estado («Completa al 80 %»)
   la lee el lector de pantalla y se ve dentro. */
.esencial { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0; }
.esencial-tile { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 10px 6px;
  border-radius: 18px; text-align: center; background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink); }
.esencial-tile:hover { text-decoration: none; border-color: var(--ink-2); }
.esencial-tile > .ms, .esencial-tile > svg { font-size: 24px; }
.esencial-tile b { font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.esencial-tile small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* El resumen: en el escritorio, dos columnas (lo de ahora a la izquierda y
   las publicaciones a la derecha); en el móvil, una debajo de otra. */
.resumen-cols { display: grid; gap: 0 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .resumen-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.resumen-izq, .resumen-der { min-width: 0; }
.resumen-der > .card:first-child { margin-top: 14px; }
/* «Por contestar: 2 preguntas · 1 reseña»: una fila; cada trozo, un enlace. */
.por-contestar { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 4px 16px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--glass-border); }
.por-contestar > .ms { color: var(--ink-2); flex: none; }
.por-contestar a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: underline; }
#pendienteCaja:empty, #aforoCaja:empty { display: none; }
/* «Ahora»: las filas de las tres cajas, juntas, y «Ver N más». */
#ahoraCaja { display: grid; gap: 8px; margin: 0 0 14px; }
#ahoraCaja > div:empty { display: none; }
#ahoraCaja .filas-inicio { margin: 0; }
#ahoraCaja .fila-inicio[hidden] { display: none; }
.ahora-mas { justify-self: start; min-height: 44px; font-weight: 700; }
/* Las publicaciones del resumen: en el móvil, una línea cada una (como la
   app); en el escritorio, la tabla. */
.pub-lineas { display: none; list-style: none; margin: 0; padding: 0; }
.pub-lineas a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; color: var(--ink);
  border-bottom: 1px solid var(--glass-border); }
.pub-lineas li:last-child a { border-bottom: 0; }
.pub-lineas a:hover { text-decoration: none; }
.pub-lineas .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-lineas .tag { flex: none; }
.pub-lineas .ms { flex: none; color: var(--ink-2); }
@media (max-width: 640px) {
  .resumen-pubs .pub-lineas { display: block; }
  .resumen-pubs .tbl-wrap { display: none; }
}
/* «Más herramientas»: una fila grande. */
.mas-herr { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 4px 0 18px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink); }
.mas-herr:hover { text-decoration: none; border-color: var(--ink-2); }
.mas-herr > span:not(.ms) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mas-herr b { font-size: 16px; }
.mas-herr small { color: var(--ink-2); font-weight: 500; }
.mas-herr > .ms:last-child { color: var(--ink-2); }
/* «Tu negocio»: botones iguales. */
.grupo-titulo { font-size: 17px; margin: 6px 0 10px; }
.herr-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: 14px; }
.herr-btn { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 12px; border-radius: 18px;
  text-align: center; background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink); font-weight: 600; }
.herr-btn:hover { text-decoration: none; border-color: var(--ink-2); }
/* La línea de estado de cada herramienta y sus botones (dos, iguales). */
.herr-estado { margin: 10px 0 0; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.herr-estado .ms { color: var(--ink); font-size: 18px; }
.herr-off { width: 12px; height: 12px; margin: 0 3px; border-radius: 50%; border: 2px solid var(--ink-2); flex: none; }
.herr-botones { display: grid; gap: 8px; margin-top: 12px; grid-template-columns: 1fr; }
.herr-botones.n2 { grid-template-columns: 1fr 1fr; }
.herr-botones .btn { justify-content: center; text-align: center; white-space: normal; }
.fiel-card .code { white-space: pre-wrap; word-break: break-all; }
/* «Crear»: qué publicar. */
.crear-ops { display: grid; gap: 8px; margin: 12px 0 4px; }
.crear-op { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--glass-border); color: var(--ink); }
.crear-op:hover { text-decoration: none; border-color: var(--ink-2); }
.crear-op > span:not(.ms) { flex: 1; display: grid; gap: 2px; }
.crear-op small { color: var(--ink-2); font-weight: 500; }
button.crear-op { width: 100%; background: none; font: inherit; text-align: start; cursor: pointer; }
/* «Días cerrados» sin nada por delante (como la app: centrado). */
.cierres-vacio { padding: 12px 0; margin: 0; }
/* «Cifras»: lo importante arriba y el detalle en bloques plegables. */
.kpis.kpis-top { margin: 0 0 14px; }
details.plegable > summary { list-style: none; cursor: pointer; display: grid; gap: 2px; padding-right: 28px; position: relative; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: ''; position: absolute; right: 4px; top: 6px; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
details.plegable[open] > summary::after { transform: rotate(-135deg); top: 10px; }
details.plegable > summary .pl-tit { font-size: 17px; font-weight: 800; }
details.plegable > summary .pl-res { color: var(--ink-2); }
details.plegable[open] > summary .pl-res { display: none; }
details.plegable[open] > summary { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { details.plegable > summary::after { transition: none; } }
/* Los ocho idiomas en un desplegable (arriba y en el menú). */
.lang .lang-sel { appearance: auto; border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-weight: 700; padding: 4px 8px; cursor: pointer; max-width: 9.5em; }
.me .lang .lang-sel { color: inherit; }
.lang .lang-sel option { color: #111; background: #fff; }
/* Un botón suelto con una frase larga (en alemán no cabía en 360 px y
 * empujaba la página): que parta la línea en vez de salirse. */
.btn.envuelve { white-space: normal; max-width: 100%; text-align: left; }

/* Cambian las condiciones para negocios: «Dar de baja el negocio» y
   «Entendido», iguales y uno al lado del otro. */
.aviso-condiciones .botones-iguales { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aviso-condiciones .botones-iguales > .btn { justify-content: center; text-align: center; width: 100%; margin: 0; justify-self: stretch; box-sizing: border-box; }

/* «Tu plan» (panel/plan.js): datos en dos columnas, los dos botones iguales,
 * y el formulario de pagar con sus opciones a lo ancho. */
.plan-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.plan-datos dt { color: var(--ink-2); font-weight: 600; }
.plan-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.plan-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.plan-botones .btn { justify-content: center; text-align: center; white-space: normal; }
.plan-form { display: grid; gap: 14px; }
.plan-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-form legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.plan-form .opc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: var(--glass); cursor: pointer; }
.plan-form .opc:has(input:checked) { border-color: var(--ink); }
.plan-form .opc:has(input:disabled:not(:checked)) { opacity: .5; cursor: default; }
.plan-total { margin: 0; font-weight: 700; font-size: 17px; }
.plan-form > .btn { justify-self: start; }
.plan-mas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.plan-mas .btn { justify-content: center; text-align: center; white-space: normal; }
@media (max-width: 640px) {
  .plan-datos { grid-template-columns: 1fr; gap: 2px; }
  .plan-datos dd { margin-bottom: 8px; }
  .plan-botones { grid-template-columns: 1fr; }
  .plan-form > .btn { justify-self: stretch; justify-content: center; }
}

/* Negocio parado (bloqueado sin pagar o en pausa por cierre): el aviso con
   su botón (coral solo «Pagar» o «Volver a abrir») y «Validar códigos». */
.aviso-parado h2 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.aviso-parado .btn.primary { min-width: 180px; justify-content: center; }
.parado-validar { margin: 0 0 16px; }
.aviso-cobro .btn { margin: 0; }

/* «Dar en el momento» (panel/momento.js) */
.momento-form [data-para] { margin-top: 6px; }
.momento-recientes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.momento-qr { text-align: center; }
.momento-que { margin: 2px 0 10px; font-size: 1.6rem; }
.momento-caja { width: min(300px, 100%); margin: 8px auto; padding: 14px; background: #fff; border-radius: 24px; }
.momento-caja svg { display: block; width: 100%; height: auto; }
.momento-fin { color: #0a0a0a; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 40px 0; font-weight: 700; }
.momento-cuantos { font-weight: 700; margin: 16px 0 6px; }
.momento-lista { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 360px; text-align: left; }
.momento-lista li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.momento-lista li span:not(.ms) { flex: 1; }
.momento-lista .ms { color: var(--ink); }

/* «Estaba cerrado» (panel/cerrado.js). */
.cerr-dos { display: grid; grid-template-columns: fit-content(100%); gap: 10px; margin-top: 14px; }
@media (max-width: 600px) { .cerr-dos { grid-template-columns: minmax(0, 1fr); } }
.cerr-dos .btn { justify-content: center; text-align: center; }
.cerr-lista { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.cerr-aviso { margin-bottom: 4px; }

/* «Qué pedir aquí» y festivos (pedir.js). */
.ped-cosa { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 12px; }
.ped-n { margin: 0; font-weight: 700; color: var(--ink-2); }
.ped-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ped-foto img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.ped-foto .spacer { flex: 1; }
.ped-festivo h2 { display: flex; align-items: center; gap: 8px; }
/* Las tres respuestas, iguales: una debajo de otra en el móvil, en fila en el ordenador. */
.ped-tres { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ped-tres .btn { justify-content: center; text-align: center; }
@media (min-width: 720px) { .ped-tres { grid-template-columns: repeat(3, 1fr); } }
.ped-otro { margin-top: 12px; }
/* Listas por partes: «Ver más» al pie (docs/RUNBOOK.md §3g). */
.ver-mas { display: flex; justify-content: center; margin: 14px 0 0; }

/* El «no hay nada» dentro de una tarjeta, una lista o una sección va
   alineado con lo demás, no centrado (docs/GLOSARIO.md de la app, «Aspecto»;
   centrado, solo `.vacio`, la pantalla vacía). Lo de admin.css lo centraba. */
.empty { text-align: left; padding: 16px 18px; }

/* Formularios (GLOSARIO «Aspecto»: campos a lo ancho de la columna, etiqueta
   encima y ayuda debajo). «Menú del día» usaba los campos estrechos de
   «Antes de cerrar» y sin aire entre ellos. */
.menu-hoy { display: grid; gap: 12px; }
.menu-hoy .f { max-width: 640px; }
.menu-hoy .hint { margin: -6px 0 0; }
/* «Elegir archivo» del navegador, con el aspecto de un botón del panel. */
input[type=file] { padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 14px; }
input[type=file]::file-selector-button { font: inherit; font-weight: 700; color: var(--ink); background: var(--elevated);
  border: 1px solid var(--glass-border); border-radius: 999px; padding: 8px 14px; margin-right: 10px; cursor: pointer; }
/* «Dar en el momento»: «¿Qué das?» sin el marco gris del navegador. */
.momento-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.momento-form legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* En el móvil estrecho, «Empieza» y «Termina» uno debajo de otro: lado a
   lado no cabía la hora (salía «13/10/2026 11…»). */
@media (max-width: 480px) { .pub-form #cuando .dos { grid-template-columns: minmax(0, 1fr); } }
/* La insignia del plan (PRUEBA, PAGO PENDIENTE, BLOQUEADO…) es de estado, no
   de oferta: en tinta, como en la app (`SelectedPill`), no en ámbar ni verde. */
.tag.plan-tag { background: var(--ink); color: var(--surface); }

/* ── Formularios y botones como la app (repaso 2026-10-28) ──────────────── */
/* El formulario de publicar, sin tarjeta alrededor (GLOSARIO, «Aspecto»):
   los campos sobre el fondo y la barra de «Guardar borrador» / «Publicar»
   pegada abajo (en el móvil, de lado a lado, como la de la app). */
.pub-form .barra-pub { margin: 4px 0 0; padding: 12px 16px; border: 1px solid var(--glass-border); border-radius: 18px; }
@media (max-width: 900px) {
  .pub-form .barra-pub { margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 0; }
}
/* Un botón no corta su texto (letra grande, idiomas largos): pasa a dos
   líneas: los grupos de botones iguales y los botones principales. */
/* Las columnas, iguales y sin crecer con el texto: si no cabe, dos líneas
   (y, en una palabra larga como «Veröffentlichen», con guion). */
.barra-botones, .alta-botones, .dos-botones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alta-botones.uno { grid-template-columns: minmax(0, 1fr); }
.aforo-botones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.barra-botones .btn, .alta-botones .btn, .dos-botones .btn, .cerr-dos .btn, .vacio-botones .btn, .aforo-botones .btn,
#view form :is(.full, .foot) > .btn, #view .btn.principal { white-space: normal; text-align: center; line-height: 1.2;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; min-width: 0; }
.quick.quick-2 button b { min-width: 0; overflow-wrap: break-word; }
/* El botón principal de un formulario, a lo ancho en el móvil (como en la
   app): Sellos › Nueva, Cumpleaños, Cupón, Wifi, Grupos, Días cerrados… */
@media (max-width: 600px) {
  #view form .full > .btn.primary:first-child,
  #view form .foot > .btn.primary:only-child,
  #view .btn.primary.principal {
    display: flex; width: 100%; justify-content: center; min-height: 48px; box-sizing: border-box; }
  #view form .full > .btn.primary:first-child + :is(span, small) { display: block; margin-top: 6px; }
}
/* «Tus plantillas»: el menú a su ancho, sin salirse de la pantalla. */
.tpl-menu .mas-menu { width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; }
.tpl-menu .mas-menu button { white-space: normal; }
/* Estados sin semáforo (Iván, 2026-10-28; GLOSARIO › Aspecto): «Activo», «A la
   venta», «Abierta», «Enviado», «Rechazada»… en tinta; «En pausa», «En
   revisión», «Pendiente»… en gris. Lo dice el texto. admin.css los pinta en
   verde, ámbar y rojo (el admin sigue igual); aquí se pisan. */
.tag.ok, .tag.bad, .tag.st-verified, .tag.st-resolved, .tag.st-approved, .tag.st-active, .tag.st-validated, .tag.st-sent,
.tag.st-rejected, .tag.st-failed, .tag.st-banned { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.tag.warn, .tag.st-pending, .tag.st-trial, .tag.st-reviewing, .tag.st-draft, .tag.st-past_due, .tag.st-open, .tag.st-cancelled,
.tag.st-inactive { background: var(--soft); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--glass-border); }

/* La cabecera de toda la web encima del panel (Iván, 2026-11-02: la misma
   barra en todas las páginas). El menú del panel va debajo: en el escritorio,
   la columna de la izquierda empieza tras ella; en el móvil, la fila del
   negocio y «Menú» se pega bajo ella. Abajo, la barra del panel (lo
   principal del negocio), no la de las pestañas de la web. */
/* El envoltorio del idioma no es una caja: si no, la cabecera (sticky) se
   iría con él al bajar (como en «Tu cuenta», app.css). */
[data-only]:not([hidden]) { display: contents; }
body[data-cabecera] .layout { min-height: calc(100dvh - 65px); }
@media (min-width: 901px) { body[data-cabecera] .side { top: 65px; height: calc(100dvh - 65px); } }
@media (max-width: 900px) { body[data-cabecera] .topbar { top: 65px; } }
body[data-cabecera] nav.tabbar:not(#tabbar) { display: none; }