/* Piezas de la demo: marco, pantallas del club y ventanas (DB). La guía y los pasos se suman en DC y DD.
   Ningún color suelto acá: todo sale de tokens.css. */

/* ---------- Barra de arriba ---------- */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--hair); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; }
.marca-sello { width: 28px; height: 28px; border-radius: var(--r-lg); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.club { color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.secciones { display: flex; gap: 2px; flex: 1; min-width: 0; }
.seccion { background: none; border: 0; padding: 8px 12px; border-radius: var(--r-md); font-size: 14px; color: var(--ink2); transition: background var(--d-corta) var(--sale), color var(--d-corta) var(--sale); }
.seccion:hover { background: var(--surface2); }
.seccion.actual { background: var(--accent-soft); color: var(--accent-hi); font-weight: 600; }
.seccion.atenuada { opacity: 0.4; }
.caja-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 36px; border: 1px solid var(--border); background: transparent; border-radius: var(--r-md); font-size: 13px; color: var(--ink2); white-space: nowrap; transition: background 0.6s var(--sale), border-color 0.6s var(--sale); }
.caja-chip[data-estado='cerrada'] .caja-chip-etiqueta { display: none; }
.caja-chip b { color: var(--ink); font-size: 15px; }
.caja-chip[data-estado='cerrada'] b { font-size: 13px; font-weight: 600; color: var(--ink2); }
.caja-chip.cambio { animation: brillo 1.2s var(--sale); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; transition: background 0.3s var(--sale); }
.punto.abierta { background: var(--ok); }
.tema { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; background: none; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; color: var(--ink2); transition: background var(--d-corta) var(--sale); }
.tema:hover { background: var(--surface2); }
.tema-icono { display: inline-flex; }
.tema .icono { width: 18px; height: 18px; }

/* ---------- Cuerpo ---------- */
.cuerpo { display: flex; gap: 40px; padding: 32px 40px 64px; align-items: flex-start; }
.contenido { flex: 1; min-width: 0; max-width: 880px; outline: none; }

/* ---------- Barra de abajo (celular) ---------- */
.barra-abajo { display: none; }

/* ---------- Pantallas: base ---------- */
.pantalla-cab { display: flex; align-items: baseline; gap: 12px 16px; margin: 0 0 18px; flex-wrap: wrap; }
.pantalla-cab h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.bajada { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.pantalla-cab.con-acciones { align-items: flex-end; justify-content: space-between; }
.cab-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tarjeta { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 24px; }
.pantalla > .tarjeta + .tarjeta, .pantalla > .tarjeta + .acciones-pie, .pantalla > .tarjeta + .leyenda { margin-top: 14px; }
.subtitulo { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.nota, .nota-chica { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.nota-chica { margin-bottom: 10px; }
.vacio, .vacio-chico { margin: 0; color: var(--muted); font-size: 14px; padding: 18px 0; }
.vacio-chico { padding: 8px 0; }
.etiqueta-chica { color: var(--muted); font-size: 13px; }
.fila-entra { animation: fundido 0.32s var(--sale) both; }
.aparece { animation: subir 0.34s var(--sale) both; }

/* ---------- Botones ---------- */
.btn { min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px; transition: transform 0.12s var(--sale), opacity var(--d-corta) var(--sale), background var(--d-corta) var(--sale); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-sec { background: none; border: 1px solid var(--border); color: var(--ink); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-chico { min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: none; font-size: 13px; color: var(--ink2); transition: background var(--d-corta) var(--sale); }
.btn-chico:hover:not(:disabled) { background: var(--surface2); }
.btn-chico:disabled, .btn-chico.apagado { opacity: 0.4; cursor: default; }
.btn-icono { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-md); background: none; color: var(--ink2); }
.btn-icono:hover:not(:disabled) { background: var(--surface2); }
.btn-icono:disabled, .btn-icono.apagado { opacity: 0.35; cursor: default; }
.btn-chico.apagado:hover, .btn-icono.apagado:hover { background: none; }
.dia-nav { display: flex; gap: 6px; align-items: center; position: relative; }
.ayuda-dia { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; margin: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink2); font-size: 13px; white-space: nowrap; }
.ayuda-dia[hidden] { display: none; }
.btn-texto { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-hi); font-weight: 600; font-size: 14px; }
.btn-texto:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-texto .icono { width: 16px; height: 16px; }
.acciones-pie { display: flex; justify-content: flex-start; margin-top: 14px; }
.atajos { display: flex; gap: 8px; flex-wrap: wrap; }
.atajo, .atajos button { border: 1px solid var(--border); background: none; border-radius: var(--r-md); padding: 8px 12px; font-size: 13px; color: var(--ink2); min-height: 40px; transition: background var(--d-corta) var(--sale), border-color var(--d-corta) var(--sale); }
.atajo:hover, .atajos button:hover { background: var(--surface2); }

/* ---------- Datos en lista ---------- */
.datos { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.datos dt, .datos dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.datos dt:first-of-type, .datos dt:first-of-type + dd { border-top: 0; }
.datos dt { color: var(--muted); padding-right: 16px; }
.datos dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.datos .total { color: var(--ink); font-weight: 700; }

/* ---------- Panel ---------- */
.hero-titulo { margin: 0; font-size: 38px; line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.hero-sub { margin: 10px 0 0; font-size: 17px; line-height: 1.45; color: var(--ink2); }
.barras { display: flex; align-items: flex-start; gap: 16px; } /* arriba: así la etiqueta «hasta hoy» no empuja ninguna barra */
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.barra-valor { font-size: 14px; font-weight: 700; text-align: center; color: var(--ink2); height: 22px; line-height: 22px; }
.barra-valor.sube { animation: fundido 0.3s var(--sale) calc(0.7s + var(--i) * 0.08s) both; }
.barra-col.actual .barra-valor { color: var(--ink); }
.barra-pista { --h: 160px; height: var(--h); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; border-bottom: 1px solid var(--border); }
.barra-relleno { width: 100%; height: calc((var(--h) - 28px) * var(--alto)); background: var(--series); border-radius: var(--r-sm) var(--r-sm) 0 0; transform-origin: bottom; }
.barra-col.actual .barra-relleno { background: var(--accent); }
.barra-relleno.sube { animation: subirBarra 0.6s var(--sale) calc(0.24s + var(--i) * 0.08s) both; }
.barra-mes { font-size: 13px; text-align: center; color: var(--muted); }
.barra-mes small { display: block; font-size: 11px; }
.barra-col.actual .barra-mes { color: var(--ink2); }
.respuestas { padding: 0; overflow: hidden; }
.respuesta + .respuesta { border-top: 1px solid var(--hair); }
.respuesta-cab { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'q f' 'l f'; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 68px; padding: 12px 24px; background: none; border: 0; text-align: left; transition: background var(--d-corta) var(--sale); }
.respuesta-cab:hover { background: var(--surface2); }
.respuesta-q { grid-area: q; font-size: 15px; font-weight: 600; }
.respuesta-linea { grid-area: l; font-size: 14px; color: var(--ink2); }
.respuesta-flecha { grid-area: f; color: var(--muted); transition: transform var(--d-media) var(--sale); }
.respuesta.abierta .respuesta-flecha { transform: rotate(180deg); }
.respuesta-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-media) var(--sale); }
.respuesta.abierta .respuesta-cuerpo { grid-template-rows: 1fr; }
.respuesta-int { overflow: hidden; min-height: 0; padding: 0 24px; }
.respuesta.abierta .respuesta-int > :last-child { margin-bottom: 14px; }
.respuesta-int p { margin: 0 0 8px; font-size: 14px; color: var(--ink2); line-height: 1.45; }
.respuesta-int h3 { margin: 4px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.dos-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }

/* ---------- Reservas ---------- */
.tarjeta-grilla { padding: 16px; }
.grilla { display: grid; grid-template-columns: 64px repeat(5, 1fr); gap: 6px; }
.g-cab { font-size: 12px; color: var(--muted); padding: 0 4px 4px; font-weight: 600; }
.g-cab small { display: block; font-weight: 400; font-size: 11px; }
.g-hora { font-size: 13px; color: var(--ink2); display: flex; align-items: center; font-weight: 600; }
.turno { height: 56px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--surface); font-size: 12px; text-align: left; padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; transition: transform 0.12s var(--sale), background var(--d-corta) var(--sale), border-color var(--d-corta) var(--sale); }
.turno.ocupado { background: var(--surface2); color: var(--ink2); }
.turno.ocupado:hover { border-color: var(--border); }
.turno.ocupado b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.turno.libre { color: var(--muted); align-items: center; border-style: dashed; background: transparent; }
.turno.libre .icono { width: 18px; height: 18px; }
button.turno.libre:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); }
.turno.libre.pasado { border-color: transparent; background: var(--surface2); opacity: 0.45; }
.turno.nuevo { background: var(--accent-soft); border-color: var(--accent); }
.turno.nuevo b { color: var(--accent-hi); }
.turno.pop { animation: pop 0.4s var(--sale); }
.turno:active { transform: scale(0.98); }
.estado { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.estado .punto { width: 6px; height: 6px; }
.estado.cobrado .punto { background: var(--ok); }
.estado.sin-cobrar .punto { background: var(--accent); }
.estado.por-jugar .punto { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.estado.clase .punto { background: var(--ink2); }
.estado.suspendida .punto { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.leyenda { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 8px 20px; flex-wrap: wrap; }
.leyenda .estado { font-size: 12px; }
.leyenda-nota { font-size: 12px; color: var(--muted); flex-basis: 100%; }

/* ---------- Caja ---------- */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 340px; }
.campo label, .etiqueta { font-size: 14px; font-weight: 600; color: var(--ink2); }
.campo-monto { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); height: 52px; padding: 0 14px; font-size: 22px; }
.campo-monto:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.campo-monto span { color: var(--muted); margin-right: 8px; }
.campo-monto input, .entrada-monto { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; outline: none; }
.campo-fila { margin-top: 6px; }
.caja-abierta { display: flex; align-items: center; gap: 16px; }
.caja-total { font-size: 48px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0; }
.caja-sub { font-size: 14px; color: var(--ink2); }
.punto.abierta { width: 10px; height: 10px; }
.movs { list-style: none; margin: 0; padding: 0; }
.mov { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.mov:first-child { border-top: 0; }
.mov-que small { display: block; color: var(--muted); font-size: 12px; }
.mov-medio { color: var(--muted); font-size: 13px; }
.mov-monto { min-width: 90px; text-align: right; }
.caja-cerrada .cierre-res { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 16px; }
.cierre-res.cuadra, .resultado.cuadra { color: var(--ok); }
.cierre-res.falta, .cierre-res.sobra, .resultado.falta, .resultado.sobra { color: var(--accent-hi); }
.caja-cerrada .nota { margin-top: 12px; }

/* ---------- Clientes ---------- */
.clientes-barra { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: none; font-size: 14px; color: var(--ink2); transition: background var(--d-corta) var(--sale), border-color var(--d-corta) var(--sale), color var(--d-corta) var(--sale); }
.filtro:hover { background: var(--surface2); }
.filtro[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); font-weight: 600; }
.filtro-n { font-size: 12px; opacity: 0.85; }
.buscador { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); color: var(--muted); min-width: 220px; }
.buscador:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.buscador input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; color: var(--ink); }
.clientes { list-style: none; margin: 0; padding: 0; }
.fila-cliente { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.fila-cliente:first-child { border-top: 0; }
.cliente-datos { display: grid; min-width: 0; }
.cliente-nombre { justify-self: start; min-height: 28px; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; text-align: left; color: var(--ink); }
.cliente-nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.cliente-dato { font-size: 13px; color: var(--muted); display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.marca-escrito { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); }
.marca-escrito .icono { width: 14px; height: 14px; }
.btn-fila { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700; transition: transform 0.12s var(--sale); }
.btn-fila.btn-sec, .btn-fila[data-accion='escribir'] { background: none; color: var(--accent-hi); }
.btn-fila.btn-sec { border-color: var(--border); color: var(--ink2); }
.btn-fila:active { transform: scale(0.98); }
.lista-clientes .btn-texto { margin-top: 6px; }
.deuda-total { margin: 4px 0 6px; font-size: 14px; color: var(--muted); }
.deuda-total b { color: var(--ink); font-size: 17px; margin-left: 4px; }

/* ---------- Ocupación ---------- */
.mapa-frase { margin: 0 0 16px; min-height: 3.1em; font-size: 15px; line-height: 1.45; color: var(--muted); }
.mapa-frase.con-dato { color: var(--ink); }
.mapa { position: relative; display: grid; grid-template-columns: 52px repeat(7, 1fr); gap: 4px; }
.mapa-dia { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 4px; }
.mapa-hora { font-size: 12px; color: var(--muted); display: flex; align-items: center; }
.celda { height: 32px; border: 0; border-radius: var(--r-sm); padding: 0; transition: box-shadow 0.12s var(--sale), transform 0.12s var(--sale); }
.celda.t1 { background: var(--mapa-1); }
.celda.t2 { background: var(--mapa-2); }
.celda.t3 { background: var(--mapa-3); }
.celda.t4 { background: var(--mapa-4); }
.celda.t5 { background: var(--mapa-5); }
.celda:hover { transform: scale(1.06); }
.celda[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--accent); position: relative; z-index: 1; }
/* franja más floja (paso 5 de la guía): el marco la señala; al elegirla, el resto del mapa se apaga un poco */
.franja-marco { position: absolute; border-radius: var(--r-lg); pointer-events: none; z-index: 2; }
.celda { transition: box-shadow 0.12s var(--sale), transform 0.12s var(--sale), opacity var(--d-media) var(--sale); }
.mapa.franja-activa .celda:not([data-franja='1']) { opacity: 0.28; }
.mapa.franja-activa .celda[aria-pressed='true'] { box-shadow: none; }
.franja-marco.activa { box-shadow: 0 0 0 2px var(--accent); background: var(--franja-fondo); animation: aparecer var(--d-media) var(--sale) both; }
.franja-marco.resaltar { position: absolute; }
.mapa-frase .n { font-variant-numeric: tabular-nums; }
.pinta { animation: pintarCelda 0.34s var(--sale) calc(0.12s + var(--fila) * 0.035s) backwards; }
.mapa-ley { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--muted); }
.mapa-rampa { display: flex; gap: 2px; }
.mapa-rampa i { width: 22px; height: 10px; border-radius: 2px; }
.mapa-rampa .t1 { background: var(--mapa-1); }
.mapa-rampa .t2 { background: var(--mapa-2); }
.mapa-rampa .t3 { background: var(--mapa-3); }
.mapa-rampa .t4 { background: var(--mapa-4); }
.mapa-rampa .t5 { background: var(--mapa-5); }

/* ---------- Profesores ---------- */
.profes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.profe { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; }
.profe-nombre { display: grid; gap: 2px; }
.profe-nombre b { font-size: 17px; }
.profe-nombre span { color: var(--muted); font-size: 13px; }
.profe-datos { display: flex; gap: 40px; margin: 0; }
.profe-datos dt { font-size: 12px; color: var(--muted); }
.profe-datos dd { margin: 2px 0 0; font-size: 20px; }
.profe-datos small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }

/* ---------- Ventanas ---------- */
.fondo { position: fixed; inset: 0; z-index: 40; background: var(--velo); display: grid; place-items: center; padding: 16px; animation: aparecer 0.2s var(--sale) both; }
.ventana { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 18px; align-content: start; animation: subir var(--d-ventana) var(--sale) both; }
.ventana-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ventana h2 { margin: 0; font-size: 19px; }
.ventana h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ventana-x { width: 40px; height: 40px; margin: -8px -10px -8px 0; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: none; color: var(--muted); }
.ventana-x:hover { background: var(--surface2); color: var(--ink); }
.ventana .meta { margin: -10px 0 0; color: var(--muted); font-size: 14px; }
.ventana .bloque { display: grid; gap: 10px; }
.opciones { display: grid; gap: 8px; }
.opcion { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); text-align: left; transition: transform 0.12s var(--sale), background var(--d-corta) var(--sale), border-color var(--d-corta) var(--sale); }
.opcion[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.opcion .icono { color: var(--accent); stroke-width: 2.4; }
.opcion small { color: var(--muted); }
.opcion:active { transform: scale(0.98); }
.entrada { height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); color: var(--ink); font-size: 15px; outline: none; }
.entrada:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.ventana-acciones { display: flex; gap: 10px; justify-content: flex-end; }
.resultado { margin: 0; min-height: 1.4em; font-size: 16px; font-weight: 700; }
.wsp { background: var(--surface2); border: 1px solid var(--hair); border-radius: 14px 14px 14px 3px; padding: 14px 16px; }
.burbuja { padding: 6px 8px; }
.burbuja-texto { display: block; width: 100%; box-sizing: border-box; resize: none; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; padding: 8px; border-radius: 8px; }
.burbuja-texto:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.wsp p { margin: 0; font-size: 15px; line-height: 1.5; }

/* ---------- Aviso con «Deshacer» ---------- */
.aviso { pointer-events: none; width: max-content; position: fixed; z-index: 60; left: 50%; bottom: 24px; translate: -50% 0; display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 12px; background: var(--guia); color: var(--guia-ink); font-size: 14px; font-weight: 600; animation: fundido 0.2s var(--sale) both; }
.aviso-deshacer { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--guia-acento); font-weight: 700; font-size: 14px; white-space: nowrap; }
.aviso-deshacer .icono { width: 16px; height: 16px; }

/* ---------- Celular ---------- */
@media (max-width: 859px) {
  /* 16 px en lo que se escribe: el iPhone no hace zoom al tocar */
  .burbuja-texto, .buscador input { font-size: 16px; }
  html, body { overflow-x: clip; } /* clip, no hidden: con hidden el body se vuelve contenedor de scroll y las barras de arriba dejan de quedar fijas */
  .barra { height: 52px; padding: 0 14px; gap: 10px; }
  .club, .secciones { display: none; }
  .marca { flex: 1; min-width: 0; }
  .caja-chip { padding: 4px 10px; }
  .tema { padding: 6px 10px; gap: 6px; }
  .cuerpo { display: block; padding: 20px 16px calc(var(--tabs-h) + 28px); }
  :root { --tabs-h: 62px; }
  .barra-abajo { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--hair); }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; transition: color var(--d-corta) var(--sale); }
  .tab.actual { color: var(--accent-hi); font-weight: 600; }
  .tab .icono { width: 22px; height: 22px; }
  .pantalla-cab h1 { font-size: 20px; }
  .tarjeta { padding: 16px; }
  .hero-titulo { font-size: 27px; }
  .hero-sub { font-size: 15px; }
  .barras { gap: 8px; }
  .barra-pista { --h: 124px; }
  .barra-valor { font-size: 12px; }
  .barra-mes { font-size: 12px; }
  .respuesta-cab { padding: 12px 16px; }
  .respuesta-int { padding: 0 16px; }
  .dos-listas { grid-template-columns: 1fr; }
  .tarjeta-grilla { padding: 10px; }
  .grilla { grid-template-columns: 38px repeat(5, 1fr); gap: 4px; }
  .g-cab { font-size: 11px; padding: 0 0 4px; }
  .g-cab small { display: none; }
  .g-hora { font-size: 11px; }
  .turno { height: 50px; padding: 4px 5px; font-size: 10px; gap: 4px; }
  .turno.ocupado b { font-size: 11px; }
  .btn-chico, .caja-chip, .tema { min-height: 40px; }
  .g-hora, .g-cab, .mapa-hora, .tab { font-size: 12px; }
  .turno .estado-texto { display: none; }
  .turno .estado .punto { width: 7px; height: 7px; }
  .caja-total { font-size: 38px; }
  .mov { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .mov-medio { grid-column: 1; grid-row: 2; }
  .mov-monto { grid-column: 2; grid-row: 1 / 3; }
  .clientes-barra { display: grid; }
  .buscador { min-width: 0; }
  .fila-cliente { align-items: center; }
  .mapa { grid-template-columns: 40px repeat(7, 1fr); gap: 3px; }
  .celda { height: 28px; }
  .mapa-hora { font-size: 11px; }
  .profe-datos { gap: 24px; }
  .fondo { place-items: end center; padding: 0; }
  .ventana { width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .ventana-acciones .btn { flex: 1; }
  .aviso { left: 12px; right: 12px; translate: none; width: auto; max-width: none; bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Zona de toque de 44 px sin agrandar lo que se ve (DE) ---------- */
.deshacer, .para-que, .guia-links button, .btn-icono, .caja-chip, .tema, .chip, .aviso-deshacer { position: relative; }
.deshacer::after, .para-que::after, .guia-links button::after, .btn-icono::after, .caja-chip::after, .tema::after, .chip::after, .aviso-deshacer::after { content: ''; position: absolute; inset: -6px 0; }
.chip::after { inset: -8px -4px; } /* los círculos de 28 px del celular llegan a 36 x 44 */
.caja-chip:disabled { cursor: default; color: var(--ink2); opacity: 1; }
/* En pantallas de 360 px o menos, «Profesores» (en negrita, la sección actual) no entra en su sexto de ancho */
@media (max-width: 380px) { .tab { font-size: 11px; } }
@media (max-width: 340px) { .tab { font-size: 10px; letter-spacing: -0.02em; } }

.campo-error { margin: 8px 0 0; font-size: 13px; color: var(--ink2); }
.campo-error[hidden] { display: none; }
/* en el celular el lugar del aviso queda reservado: al aparecer no empuja «Abrir caja» abajo de la guía */
@media (max-width: 859px) { .ayuda-dia { left: 0; right: auto; white-space: normal; width: max-content; max-width: calc(100vw - 32px); } .campo-error { min-height: 20px; margin: 0; } .campo-error[hidden] { display: block; visibility: hidden; } }