/* Hoja de estilos unica: publico y panel. Sin dependencias externas. */ /* --- Los dos temas ------------------------------------------------------ */ /* Cada color se escribe UNA vez, con prefijo --c- (claro) u --o- (oscuro). Debajo, tres bloques deciden cual de las dos paletas alimenta a las variables que usa el resto de la hoja. Antes la paleta oscura estaba repetida dentro de una media query; con el interruptor manual habrian hecho falta dos copias y se habrian ido separando con el tiempo. Quien manda: data-tema="claro" lo eligio la persona -> claro, pase lo que pase data-tema="oscuro" lo eligio la persona -> oscuro, pase lo que pase sin atributo nadie ha elegido nada -> lo que diga el sistema El atributo lo pone `tema.js` en antes de que se pinte nada. Sin JavaScript no hay atributo y se sigue al sistema, que es como funcionaba hasta ahora. */ :root { --c-fondo: #f6f5f3; --c-superficie: #ffffff; --c-texto: #1c1b19; --c-texto-suave: #6b6862; --c-borde: #e2ded8; --c-acento: #8c2f24; --c-acento-suave: #f4e9e7; --c-verde: #2f6b46; --c-ambar: #9a6a12; --c-rojo: #a32b22; --c-sombra: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05); --o-fondo: #17161a; --o-superficie: #201f24; --o-texto: #ece9e4; --o-texto-suave: #9b968e; --o-borde: #33313a; --o-acento: #e0705f; --o-acento-suave: #33221f; --o-verde: #63b184; --o-ambar: #d7a441; --o-rojo: #e0705f; --o-sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3); --radio: 10px; } /* Claro: lo de partida, y tambien lo que se aplica si alguien lo pide a mano teniendo el sistema en oscuro. */ :root, :root[data-tema="claro"] { --fondo: var(--c-fondo); --superficie: var(--c-superficie); --texto: var(--c-texto); --texto-suave: var(--c-texto-suave); --borde: var(--c-borde); --acento: var(--c-acento); --acento-suave: var(--c-acento-suave); --verde: var(--c-verde); --ambar: var(--c-ambar); --rojo: var(--c-rojo); --sombra: var(--c-sombra); color-scheme: light; } /* Oscuro por decision de la persona. */ :root[data-tema="oscuro"] { --fondo: var(--o-fondo); --superficie: var(--o-superficie); --texto: var(--o-texto); --texto-suave: var(--o-texto-suave); --borde: var(--o-borde); --acento: var(--o-acento); --acento-suave: var(--o-acento-suave); --verde: var(--o-verde); --ambar: var(--o-ambar); --rojo: var(--o-rojo); --sombra: var(--o-sombra); color-scheme: dark; } /* Oscuro porque lo dice el sistema y nadie ha elegido lo contrario. El :not() es lo que hace que la eleccion manual gane a la del sistema. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fondo: var(--o-fondo); --superficie: var(--o-superficie); --texto: var(--o-texto); --texto-suave: var(--o-texto-suave); --borde: var(--o-borde); --acento: var(--o-acento); --acento-suave: var(--o-acento-suave); --verde: var(--o-verde); --ambar: var(--o-ambar); --rojo: var(--o-rojo); --sombra: var(--o-sombra); color-scheme: dark; } } * { box-sizing: border-box; } /* No habia ninguna regla para los enlaces de texto corrido, asi que salian con el azul subrayado del navegador, que no pega con nada del resto. Los que van con clase propia (.boton, .marca, la navegacion) ganan por especificidad y no se ven afectados. */ a { color: var(--acento); } a:hover { text-decoration: none; } body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* --- Estructura --------------------------------------------------------- */ .cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.5rem; background: var(--superficie); border-bottom: 1px solid var(--borde); } .marca { font-weight: 650; font-size: 1.05rem; letter-spacing: -.01em; color: var(--texto); text-decoration: none; } .marca small { color: var(--texto-suave); font-weight: 400; } .cabecera nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } .cabecera nav a { color: var(--texto-suave); text-decoration: none; font-size: .93rem; } .cabecera nav a:hover { color: var(--acento); } .cabecera nav a.salir { color: var(--rojo); } /* --- Interruptor de tema ------------------------------------------------ */ /* Lo inserta tema.js; en el HTML no hay nada. Si no hay JavaScript no aparece, que es lo correcto: un boton que no hace nada es peor que ninguno. */ .tema { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto-suave); font-size: .95rem; line-height: 1; cursor: pointer; } .tema:hover { color: var(--acento); border-color: var(--acento); } .tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* Cuando la pagina no tiene cabecera -las de entrar, por ejemplo- el boton se queda flotando en la esquina. Ahi tambien hace falta: alguien puede querer cambiar el tema antes de escribir su contrasena. */ .tema-suelto { position: fixed; top: .9rem; right: .9rem; z-index: 20; box-shadow: var(--sombra); } @media print { .tema { display: none; } } /* --- Logotipo del restaurante ------------------------------------------- */ /* Alto fijo y ancho libre: un logo puede ser cuadrado o una tira muy larga, y acotar el alto es lo unico que deja que los dos convivan sin descuadrar la cabecera. `object-fit: contain` evita que se deforme. */ .logo-restaurante { display: block; height: 34px; width: auto; max-width: 220px; object-fit: contain; } .logo-widget { margin: 0 0 1.25rem; text-align: center; } .logo-widget img { height: auto; max-height: 72px; max-width: 100%; object-fit: contain; } .contenido { max-width: 640px; margin: 2rem auto; padding: 0 1.25rem; } .contenido.ancho { max-width: 1180px; } .pie { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; padding: 2rem 1rem; color: var(--texto-suave); font-size: .85rem; } .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.75rem; } .tarjeta.centrada { text-align: center; } .tarjeta.estrecha { max-width: 380px; margin: 0 auto; } h1 { font-size: 1.5rem; margin: 0 0 .5rem; letter-spacing: -.02em; } h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin: 0 0 .6rem; font-weight: 600; } .parrafo { color: var(--texto-suave); margin: 0 0 1.5rem; } .apunte { color: var(--texto-suave); font-size: .87rem; } /* --- Formularios -------------------------------------------------------- */ label { display: block; margin-bottom: 1rem; } label > span { display: block; font-size: .87rem; font-weight: 550; margin-bottom: .35rem; } label > span em { font-weight: 400; color: var(--texto-suave); font-style: normal; } input[type=text], input[type=tel], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea { width: 100%; padding: .6rem .7rem; font: inherit; font-size: .95rem; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; } textarea { resize: vertical; } fieldset { border: none; padding: 0; margin: 0 0 1rem; } fieldset.bloque { border-top: 1px solid var(--borde); padding-top: 1.25rem; margin-top: 1.5rem; } legend { font-size: .87rem; font-weight: 600; padding: 0; } .rejilla-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .rejilla-formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1rem; align-items: end; margin-top: 1rem; } .rejilla-formulario .ancho-total { grid-column: 1 / -1; } .linea { display: inline; margin: 0; } .casilla { display: flex; align-items: center; gap: .45rem; } .casilla input { width: auto; } .casilla span { margin: 0; font-weight: 400; font-size: .9rem; } .casillas-linea { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .4rem; } @media (max-width: 560px) { .rejilla-dos { grid-template-columns: 1fr; } } /* --- Botones ------------------------------------------------------------ */ .boton { display: inline-block; padding: .65rem 1.3rem; font: inherit; font-size: .93rem; font-weight: 550; color: #fff; background: var(--acento); border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-decoration: none; text-align: center; } .boton:hover { filter: brightness(1.08); } .boton.grande { width: 100%; padding: .8rem; font-size: 1rem; margin-top: .5rem; } .boton.pequeno { padding: .35rem .75rem; font-size: .82rem; } .boton.secundario { background: transparent; color: var(--texto-suave); border-color: var(--borde); } .boton.peligro { background: var(--rojo); } /* --- Huecos horarios ---------------------------------------------------- */ .turno { margin-bottom: 1.25rem; } .huecos { display: flex; flex-wrap: wrap; gap: .45rem; } .hueco { padding: .5rem .85rem; font: inherit; font-size: .92rem; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 7px; cursor: pointer; } .hueco:hover { border-color: var(--acento); color: var(--acento); } .hueco.elegido { background: var(--acento); border-color: var(--acento); color: #fff; } .aviso { padding: .8rem 1rem; border-radius: 8px; font-size: .9rem; background: var(--acento-suave); color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 25%, transparent); } /* --- Detalle de reserva ------------------------------------------------- */ .etiqueta { display: inline-block; margin: 0 0 .75rem; padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .etiqueta.confirmada { background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); } .etiqueta.pendiente { background: color-mix(in srgb, var(--ambar) 15%, transparent); color: var(--ambar); } .etiqueta.cancelada { background: color-mix(in srgb, var(--rojo) 15%, transparent); color: var(--rojo); } .detalle { margin: 1.5rem 0; padding: 0; } .detalle > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--borde); } .detalle dt { color: var(--texto-suave); font-size: .9rem; } .detalle dd { margin: 0; font-weight: 550; text-align: right; } .codigo { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 1.1rem; letter-spacing: .12em; } /* --- Panel -------------------------------------------------------------- */ .barra-dia { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .barra-dia input[type=date] { width: auto; } .cifras { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 1.75rem; } .cifra { flex: 1 1 120px; padding: .85rem 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); } .cifra strong { display: block; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; } .cifra span { font-size: .82rem; color: var(--texto-suave); } .cifra.alerta { border-color: var(--ambar); color: var(--ambar); } .tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; font-size: .92rem; } .tabla th { text-align: left; padding: .6rem .75rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); border-bottom: 1px solid var(--borde); font-weight: 600; } .tabla td { padding: .6rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: top; } .tabla tr:last-child td { border-bottom: none; } .tabla .centro { text-align: center; } .tabla .hora { font-weight: 650; white-space: nowrap; } .tabla .menudo { font-size: .84rem; color: var(--texto-suave); } .tabla select { padding: .3rem .4rem; font-size: .85rem; } .selector-mesas { min-width: 110px; } .codigo-pequeno { display: block; font-family: ui-monospace, Consolas, monospace; font-size: .75rem; color: var(--texto-suave); letter-spacing: .06em; } .enlace-menudo { font-size: .84rem; color: var(--acento); } tr.estado-cancelada td, tr.estado-no_show td, tr.inactiva td { opacity: .45; } tr.estado-cancelada .hora { text-decoration: line-through; } /* --- Listas editables en linea (mesas y turnos) -------------------------- No se usa : un
con display:flex deja de ser celda y el navegador ignora su colspan. Con flex puro las cabeceras y las filas comparten los mismos anchos y todo queda alineado. Los controles van FUERA del
y lo referencian con el atributo form=, asi cada fila puede tener varios formularios (guardar, activar, borrar). */ .lista-editable { --anchoTexto: 7rem; --anchoNumero: 3.6rem; --anchoHora: 6.2rem; --anchoDia: 4.8rem; --anchoExtra: 6.8rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; } .cabecera-lista, .fila-editable { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .55rem .75rem; } .cabecera-lista { border-bottom: 1px solid var(--borde); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 600; } .fila-editable { border-bottom: 1px solid var(--borde); } .fila-editable:last-child { border-bottom: none; } .fila-editable.inactiva > *:not(.acciones-fila) { opacity: .5; } .lista-editable form[hidden] { display: none; } .lista-editable input, .lista-editable select { padding: .35rem .45rem; font-size: .87rem; } /* Los mismos anchos en la cabecera y en la fila: por eso quedan alineadas. Van anidados bajo .lista-editable a proposito: la regla global input[type=text] {width:100%} tiene mas especificidad que una clase suelta y apilaria los campos uno debajo de otro. */ .lista-editable .c-texto { width: var(--anchoTexto); flex: none; } .lista-editable .c-numero { width: var(--anchoNumero); flex: none; text-align: center; } .lista-editable .c-hora { width: var(--anchoHora); flex: none; } .lista-editable .c-dia { width: var(--anchoDia); flex: none; font-size: .86rem; } .lista-editable .c-extra { width: var(--anchoExtra); flex: none; } .lista-editable .c-extra.casilla span { font-size: .82rem; } .lista-editable .casilla input[type=checkbox] { width: auto; flex: none; } .lista-editable .c-ancho { width: 14rem; flex: none; } .acciones-fila { display: flex; gap: .4rem; align-items: center; margin-left: auto; } .acciones-fila form { margin: 0; } .acciones-fila input { padding: .35rem .45rem; font-size: .85rem; } @media (max-width: 820px) { .cabecera-lista { display: none; } /* sin espacio para alinear: estorba mas que ayuda */ .fila-editable { border-bottom-width: 2px; } } /* --- Plano de sala -------------------------------------------------------- Las piezas se posicionan en PORCENTAJE sobre un lienzo con proporcion fija. Asi el mismo plano vale en el movil del encargado y en la pantalla de la barra sin recalcular coordenadas ni guardar pixeles. */ .plano-marco { overflow-x: auto; margin: .5rem 0 1rem; } .plano { position: relative; width: 100%; min-width: 620px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); /* Rejilla de fondo: sin una referencia visual es imposible alinear nada. */ background-image: linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px); background-size: 5% 7.5%; touch-action: none; /* el arrastre no debe hacer scroll en tablet */ overflow: hidden; } .plano.solo-lectura { touch-action: auto; } .pieza { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; user-select: none; } .plano:not(.solo-lectura) .pieza { cursor: grab; } /* El tamano del rotulo lo elige quien monta la sala, pieza a pieza, y viaja como un numero suelto en --texto-tam (100 = el de siempre). Va en calc y no en una clase por cada tamano porque es un continuo, no cuatro opciones. */ .pieza-texto { font-size: calc(.74rem * var(--texto-tam, 100) / 100); line-height: 1.15; text-align: center; padding: 2px; overflow: hidden; } /* En em y no en rem: asi la capacidad crece con el nombre de la mesa en vez de quedarse clavada cuando se agranda el rotulo. */ .pieza-texto small { display: block; opacity: .75; font-size: .9em; } .pieza-texto strong { display: block; } .mesa { background: color-mix(in srgb, var(--acento) 12%, var(--superficie)); border: 2px solid var(--acento); color: var(--texto); } .mesa.forma-redonda { border-radius: 50%; } .mesa.forma-cuadrada { border-radius: 8px; } .mesa.forma-rectangular { border-radius: 8px; } .mesa.inactiva { opacity: .4; border-style: dashed; } .pieza.elegida { outline: 3px solid var(--ambar); outline-offset: 2px; z-index: 5; } /* Estados en la vista del servicio */ .mesa.estado-libre { background: color-mix(in srgb, var(--verde) 10%, var(--superficie)); border-color: var(--verde); } .mesa.estado-ocupada { background: color-mix(in srgb, var(--acento) 22%, var(--superficie)); border-color: var(--acento); font-weight: 600; } .mesa.estado-inactiva { background: var(--fondo); border-color: var(--borde); border-style: dashed; opacity: .5; } .elemento { background: var(--texto-suave); color: var(--superficie); border-radius: 3px; } .elemento.rotulo { background: transparent; color: var(--texto-suave); border: 1px dashed var(--borde); font-weight: 600; } .elemento.barra { background: var(--texto); border-radius: 6px; } .elemento.puerta { background: transparent; border: 3px dashed var(--acento); color: var(--acento); } .tirador { position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; border-radius: 3px; background: var(--ambar); border: 2px solid var(--superficie); cursor: nwse-resize; } .plano.solo-lectura .tirador { display: none; } .plano-herramientas { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; } .plano-seleccion { display: flex; gap: .35rem; align-items: center; padding: .25rem .6rem; border-left: 1px solid var(--borde); font-size: .84rem; } /* Sin esto la barra de la pieza elegida se ve SIEMPRE, aunque no haya nada elegido: `display: flex` de arriba empata en especificidad con el `[hidden] { display: none }` del navegador y, al ser nuestra, gana. Se veian los botones de forma y de tamano sin nada a lo que aplicarselos. */ .plano-seleccion[hidden] { display: none; } .leyenda { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; vertical-align: -2px; margin: 0 .2rem 0 .8rem; border: 2px solid var(--borde); } .leyenda.libre { background: color-mix(in srgb, var(--verde) 10%, transparent); border-color: var(--verde); } .leyenda.ocupada { background: color-mix(in srgb, var(--acento) 22%, transparent); border-color: var(--acento); } .leyenda.inactiva { background: var(--fondo); border-style: dashed; } /* --- Campos adicionales del formulario ------------------------------------ Van agrupados y algo apagados: son opcionales y no deben competir con el nombre y el telefono, que son lo que de verdad hace falta. */ .extras { margin: .25rem 0 1rem; padding: .85rem 1rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; display: flex; flex-direction: column; gap: .6rem; } .extra-campo { margin: 0; } .extra-campo > span { font-size: .84rem; } .extra-campo input[type=number] { width: 5rem; } .casilla.extra span { display: block; } .casilla.extra small { display: block; color: var(--texto-suave); font-size: .78rem; } .extras .casilla span em, .extra-campo span em { color: var(--texto-suave); font-style: normal; font-weight: 400; } /* En el panel: lo operativo se ve, lo critico se ve mas. */ .extra-marca { display: inline-block; margin: 0 .3rem .2rem 0; padding: .1rem .4rem; border-radius: 4px; background: var(--fondo); border: 1px solid var(--borde); font-size: .76rem; } .extra-marca.destacada { background: color-mix(in srgb, var(--ambar) 16%, transparent); border-color: color-mix(in srgb, var(--ambar) 40%, transparent); color: var(--ambar); font-weight: 600; } /* --- Graficos de barras -------------------------------------------------- En CSS, sin libreria de graficos: una dependencia de JavaScript solo para pintar barras horizontales no se justifica, y ademas imprime bien. */ .rejilla-graficos { display: grid; gap: 1rem; margin-top: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .tarjeta-grafico { padding: 1rem 1.25rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); } .barras { display: flex; flex-direction: column; gap: .35rem; } .barras.dias { max-height: 22rem; overflow-y: auto; } .barra-fila { display: flex; align-items: center; gap: .5rem; font-size: .84rem; } .barra-nombre { width: 8.5rem; flex: none; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra-canal { flex: 1; min-width: 2rem; height: .6rem; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); overflow: hidden; } .barra-relleno { display: block; height: 100%; background: var(--acento); } .barra-valor { width: 2.5rem; flex: none; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .barra-pct { width: 3.6rem; flex: none; text-align: right; color: var(--texto-suave); font-size: .78rem; font-variant-numeric: tabular-nums; } /* --- Ocupacion por franja horaria ---------------------------------------- De un vistazo: donde se esta llenando el servicio. Sin esto, el limite de plazas por hora existe pero nadie ve como va. */ .ocupacion { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.5rem; } .ocupacion-turno { flex: 1 1 260px; padding: .85rem 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); } .ocupacion-turno h3 { margin: 0 0 .6rem; display: flex; justify-content: space-between; gap: .5rem; } .ocupacion-turno h3 small { font-weight: 400; text-transform: none; letter-spacing: 0; } .franjas { display: flex; flex-direction: column; gap: .25rem; } .franja { display: flex; align-items: center; gap: .5rem; font-size: .82rem; } .franja-hora { width: 3rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .franja-barra { flex: 1; height: .5rem; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); overflow: hidden; } .franja-relleno { display: block; height: 100%; background: var(--verde); } .franja-pax { width: 3.4rem; text-align: right; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .franja.llena .franja-relleno { background: var(--ambar); } .franja.llena .franja-pax { color: var(--ambar); font-weight: 600; } /* Cobrar o liberar la tarjeta, dentro de la fila de la reserva. */ .acciones-cobro { display: flex; flex-direction: column; gap: .3rem; margin-top: .35rem; } .acciones-cobro form { display: flex; gap: .25rem; margin: 0; } .acciones-cobro input { padding: .25rem .35rem; font-size: .8rem; } .desplegable { margin-top: 1.75rem; padding: 1rem 1.25rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); } .desplegable summary { cursor: pointer; font-weight: 550; font-size: .93rem; } /* El de "anadir reserva" va arriba del todo y es una accion, no un apartado que se consulta. Se le da color de accion y un "+" delante para que se encuentre de un vistazo con el telefono en la oreja. El margen superior se reduce porque ahi arriba no separa nada, solo aleja. */ .desplegable-accion { margin-top: 1rem; } /* list-style quita el triangulito del navegador; la regla de -webkit hace lo mismo en Safari, que lo ignora en un . */ .desplegable-accion summary { display: flex; align-items: center; gap: .5rem; color: var(--acento); font-weight: 650; list-style: none; } .desplegable-accion summary::-webkit-details-marker { display: none; } .desplegable-accion summary::before { content: "+"; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--acento) 15%, transparent); font-weight: 700; line-height: 1; } .desplegable-accion[open] summary::before { content: "−"; } /* --- Widget incrustado --------------------------------------------------- Dentro del iframe no hay cabecera ni pie: solo la tarjeta, sin margenes propios, para que se funda con la web del restaurante. */ body.incrustado { background: transparent; } body.incrustado .contenido { margin: 0; padding: 0; max-width: none; } body.incrustado .tarjeta { border-radius: 0; border: none; box-shadow: none; } /* --- Codigo para copiar --------------------------------------------------- */ .codigo-bloque { margin: .75rem 0; padding: .8rem 1rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } .aviso.correcto { background: color-mix(in srgb, var(--verde) 12%, transparent); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 30%, transparent); } .cabecera nav .quien { color: var(--texto); font-weight: 550; padding-left: .75rem; border-left: 1px solid var(--borde); } /* --- La agenda dentro del TPV Agora -------------------------------------- Se ve en una pantalla tactil, muchas veces pequena y con el camarero de pie. Todo mas grande de lo normal: los botones se pulsan con el dedo y a veces con guantes. */ body.tpv { background: var(--fondo); margin: 0; } .tpv-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; } .tpv-cabecera strong { display: block; font-size: 1rem; } .tpv-cabecera small { color: var(--texto-suave); font-size: .82rem; } .tpv-acciones { display: flex; gap: .5rem; } .tpv-lista { padding: .6rem; display: flex; flex-direction: column; gap: .5rem; } .tpv-ficha { display: flex; align-items: center; gap: .9rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem .9rem; } /* Lo que ya ha terminado se ve, pero apagado: sigue haciendo falta para saber quien ha pasado por esa mesa, y no debe competir con lo que viene. */ .tpv-ficha.pasada { opacity: .55; } .tpv-ficha.estado-cancelada, .tpv-ficha.estado-no_show { opacity: .45; } .tpv-hora { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.6rem; } .tpv-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .tpv-datos strong { font-size: 1.05rem; } .tpv-menudo { font-size: .85rem; color: var(--texto-suave); } .tpv-peticiones { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; } .tpv-etiqueta { font-size: .85rem; color: var(--texto-suave); } /* Botones de dedo: 48px es el minimo para acertar sin mirar. */ .tpv-boton .boton { min-height: 48px; min-width: 7rem; font-size: 1rem; } .tpv-acciones .boton { min-height: 40px; } .tpv-mesa-estado { font-size: .82rem; font-weight: 600; margin-top: .2rem; } .tpv-mesa-estado.ocupada { color: var(--acento); } .tpv-mesa-estado.libre { color: var(--verde); } /* La casilla de ofertas. Va separada del resto del formulario y algo apagada: es opcional, y no debe parecer un requisito para reservar. */ .casilla.ofertas { align-items: flex-start; margin: .9rem 0 .2rem; padding: .6rem .7rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; } .casilla.ofertas small { display: block; color: var(--texto-suave); font-size: .8rem; font-weight: 400; } /* Una cifra que conviene mirar, sin llegar a alarma roja. */ .alerta-celda { color: var(--ambar); font-weight: 700; } /* Etiqueta de festivo. Tres ambitos, tres colores, para distinguir de un vistazo lo que se calcula solo de lo que ha puesto el restaurante. */ .ambito { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; vertical-align: middle; border: 1px solid currentColor; } .ambito-nacional { color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); } .ambito-autonomico { color: var(--ambar); background: color-mix(in srgb, var(--ambar) 12%, transparent); } .ambito-local { color: var(--verde); background: color-mix(in srgb, var(--verde) 12%, transparent); } /* Instrucciones paso a paso, como las de configurar la ficha de Google. */ .pasos { margin: .5rem 0 0; padding-left: 1.3rem; font-size: .9rem; } .pasos li { margin-bottom: .35rem; } /* --- Pantalla del servicio: la sala a la izquierda, las reservas a la derecha, y se senalan entre si al pincharlas. ---------------------------- */ .servicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; } /* El plano se queda fijo mientras se recorre la lista: si al bajar por las reservas desaparece la sala, pinchar una reserva no ensena nada. */ .servicio-sala { position: sticky; top: .75rem; } .servicio-lista { display: flex; flex-direction: column; gap: .6rem; } @media (max-width: 1100px) { .servicio { grid-template-columns: 1fr; } .servicio-sala { position: static; } /* En pantalla estrecha manda la lista: el plano se mira, la lista se usa. */ .servicio-lista { order: -1; } } /* El plano cabe en media pantalla; sin esto se iria a barra de desplazamiento siempre, porque el general pide 620px de ancho minimo. */ .servicio-sala .plano { min-width: 380px; } @media (max-width: 620px) { /* En el movil el plano se encoge hasta caber. Con un ancho minimo, el contenido entero se iria de lado y habria que arrastrar la pagina para leer las reservas, que es justo lo que se viene a hacer. Va DESPUES de la regla de arriba: misma especificidad, gana la ultima. */ .servicio-sala .plano { min-width: 0; } } .controles-sala { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; } .linea-control { margin: 0; } .linea-control > span { font-size: .8rem; } .cifras.compactas { margin: .6rem 0 .4rem; gap: .5rem; } .cifras.compactas .cifra { flex-basis: 80px; padding: .5rem .7rem; } .cifras.compactas .cifra strong { font-size: 1.2rem; } /* Las mesas del plano son botones para poder pincharlas con el teclado. Hay que devolverles el aspecto que tenian como
. */ .plano button.pieza { font: inherit; color: inherit; padding: 0; cursor: pointer; } .pieza.mesa.resaltada { outline: 3px solid var(--ambar); outline-offset: 2px; z-index: 6; } .ficha-reserva { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem .85rem; cursor: pointer; scroll-margin: 1rem; } .ficha-reserva:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); } .ficha-reserva:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .ficha-reserva.resaltada { border-color: var(--ambar); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ambar) 35%, transparent); } /* Igual que en la tabla de antes: lo anulado se ve, pero apagado. */ .ficha-reserva.estado-cancelada, .ficha-reserva.estado-no_show { opacity: .5; } .ficha-reserva.estado-cancelada .ficha-hora { text-decoration: line-through; } .ficha-cabecera { display: flex; align-items: baseline; gap: .6rem; } .ficha-hora { font-weight: 700; font-variant-numeric: tabular-nums; } .ficha-nombre { flex: 1; min-width: 0; } .ficha-nombre strong { display: block; } .ficha-pax { font-size: .82rem; color: var(--texto-suave); white-space: nowrap; } .ficha-cuerpo { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .55rem; } .ficha-dato { flex: 1 1 45%; min-width: 8rem; } .ficha-dato form { margin: 0; } .ficha-etiqueta { display: block; font-size: .74rem; color: var(--texto-suave); margin-bottom: .2rem; } .ficha-contacto, .ficha-peticiones { margin: .55rem 0 0; } .ficha-pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .55rem; } /* Hora partida en dos desplegables, dentro de la rejilla del formulario. Imita a un