/* Panel interno de Jatetxea: libro de reservas para la entrada del restaurante. */
@font-face { font-family: 'Synonym'; src: url('../fonts/synonym-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Synonym'; src: url('../fonts/synonym-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Synonym'; src: url('../fonts/synonym-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gambarino'; src: url('../fonts/gambarino-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --tinta: #16201c;
  --gris: #6a736e;
  --fondo: #eef0ec;
  --panel: #fff;
  --linea: #d9ddd8;
  --verde: #2d4a3b;
  --teja: #a4472c;
  --ambar: #a97f22;
  --azul: #2f5d7c;
  --radio: 6px;
  --sans: 'Synonym', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 15px/1.5 var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
  padding: .55rem .9rem; border-radius: var(--radio); border: 1px solid var(--linea);
  background: var(--panel); font-weight: 500; font-size: .92rem; text-decoration: none; color: inherit;
}
.btn:hover { border-color: #aab2ab; }
.btn--principal { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn--principal:hover { background: #243c30; }
.btn--peligro { color: var(--teja); }
.btn--pequeno { padding: .34rem .6rem; font-size: .84rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---- Acceso ---- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--tinta); }
.acceso__caja { background: var(--panel); border-radius: 10px; padding: 2.2rem; width: min(100%, 380px); box-shadow: 0 20px 60px -30px #000; }
.acceso__caja h1 { font-family: 'Gambarino', Georgia, serif; font-weight: 400; font-size: 1.8rem; margin-bottom: .2rem; }
.acceso__caja p { color: var(--gris); font-size: .92rem; margin: 0 0 1.4rem; }
.acceso__caja label { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: .4rem; }
.acceso__caja input { width: 100%; padding: .7rem .8rem; border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 1rem; }
.acceso__caja .btn { width: 100%; }

/* ---- Estructura ---- */
.barra {
  position: sticky; top: 0; z-index: 20; background: var(--tinta); color: #fff;
  display: flex; align-items: center; gap: 1rem; padding: .7rem 1.1rem; flex-wrap: wrap;
}
.barra__marca { font-family: 'Gambarino', Georgia, serif; font-size: 1.25rem; margin-right: .4rem; }
.barra__marca span { font: 500 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #d9b877; margin-left: .4rem; }
.barra .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.barra .btn:hover { background: rgba(255, 255, 255, .16); }
.barra__dcha { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.barra input[type='search'], .barra input[type='date'] {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  border-radius: var(--radio); padding: .5rem .7rem;
}
.barra input::placeholder { color: rgba(255, 255, 255, .55); }
.reloj { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .65); font-size: .88rem; }

.pestanas { display: flex; gap: .3rem; padding: 0 1.1rem; background: var(--tinta); }
.pestanas button {
  background: none; border: 0; color: rgba(255, 255, 255, .6); padding: .55rem .9rem; cursor: pointer;
  border-bottom: 2px solid transparent; font-weight: 500; font-size: .92rem;
}
.pestanas button[aria-selected='true'] { color: #fff; border-color: #d9b877; }

.disposicion { display: grid; grid-template-columns: 260px 1fr; gap: 1.1rem; padding: 1.1rem; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
.panel__cab { padding: .8rem 1rem; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.panel__cab h2 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.panel__cuerpo { padding: 1rem; }
.lateral { display: grid; gap: 1.1rem; position: sticky; top: 64px; }

/* ---- Resumen ---- */
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cifra { background: #f6f7f5; border: 1px solid var(--linea); border-radius: var(--radio); padding: .7rem .8rem; }
.cifra b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { font-size: .78rem; color: var(--gris); letter-spacing: .04em; text-transform: uppercase; }
.aforo { margin-top: .7rem; font-size: .84rem; color: var(--gris); }
.aforo__barra { height: 6px; background: #e4e7e3; border-radius: 99px; overflow: hidden; margin: .3rem 0 .6rem; }
.aforo__barra i { display: block; height: 100%; background: var(--verde); }
.aforo__barra.lleno i { background: var(--teja); }

/* ---- Agenda lateral ---- */
.agenda { display: grid; gap: 1px; background: var(--linea); border-top: 1px solid var(--linea); }
.agenda button {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; width: 100%;
  background: var(--panel); border: 0; padding: .55rem 1rem; cursor: pointer; text-align: left; font-size: .9rem;
}
.agenda button:hover { background: #f4f6f3; }
.agenda button[aria-current='true'] { background: #eef3ee; font-weight: 600; box-shadow: inset 3px 0 0 var(--verde); }
.agenda .dia { text-transform: capitalize; }
.agenda .cerrado { color: var(--gris); font-size: .8rem; }
.agenda .carga { font-variant-numeric: tabular-nums; font-size: .84rem; color: var(--gris); }

/* ---- Servicios y reservas ---- */
.servicio + .servicio { margin-top: 1.1rem; }
.servicio__cab { display: flex; align-items: baseline; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--linea); background: #f6f7f5; border-radius: var(--radio) var(--radio) 0 0; }
.servicio__cab h3 { font-size: 1rem; }
.servicio__cab span { color: var(--gris); font-size: .88rem; }
.servicio__cab .hueco { margin-left: auto; }

.reserva {
  display: grid; grid-template-columns: 62px 48px minmax(150px, 1.4fr) 128px 74px minmax(120px, 1.6fr) auto;
  gap: .7rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--linea);
}
.reserva:last-child { border-bottom: 0; }
.reserva:hover { background: #fafbf9; }
.reserva[data-estado='cancelada'], .reserva[data-estado='noshow'] { opacity: .5; }
.reserva[data-estado='cancelada'] .r-nombre, .reserva[data-estado='noshow'] .r-nombre { text-decoration: line-through; }
.reserva[data-estado='sentada'] { box-shadow: inset 3px 0 0 var(--verde); background: #f3f8f4; }
.r-hora { font-weight: 600; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.r-pax { font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; background: #f0f2ef; border-radius: var(--radio); padding: .25rem 0; }
.r-nombre { font-weight: 500; }
.r-nombre small { display: block; font-weight: 400; color: var(--gris); font-size: .8rem; }
.r-tel { font-variant-numeric: tabular-nums; text-decoration: none; color: var(--azul); font-size: .92rem; }
.r-mesa { width: 100%; padding: .35rem .4rem; border: 1px dashed var(--linea); border-radius: var(--radio); background: transparent; text-align: center; font-weight: 600; }
.r-mesa:focus { border-style: solid; border-color: var(--verde); outline: none; }
.r-notas { font-size: .88rem; color: var(--gris); }
.r-notas b { color: var(--teja); font-weight: 600; }
.r-acciones { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: wrap; }
.etiqueta-estado { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .45rem; border-radius: 99px; border: 1px solid; }
.e-confirmada { color: var(--azul); border-color: #b4cadb; background: #eef4f8; }
.e-sentada { color: var(--verde); border-color: #b2cbbb; background: #eef4ef; }
.e-cumplida { color: var(--gris); border-color: var(--linea); background: #f3f4f2; }
.e-noshow { color: var(--teja); border-color: #e0b6a8; background: #fbefe9; }
.e-cancelada { color: var(--gris); border-color: var(--linea); background: #f3f4f2; }
.vacio { padding: 1.6rem 1rem; color: var(--gris); text-align: center; font-size: .94rem; }

/* ---- Consultas de grupos ---- */
.consulta { padding: .9rem 1rem; border-bottom: 1px solid var(--linea); display: grid; gap: .3rem; }
.consulta__cab { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.consulta__cab b { font-weight: 600; }
.consulta__cab span { color: var(--gris); font-size: .86rem; }
.consulta p { margin: 0; font-size: .93rem; }

/* ---- Diálogo de alta/edición ---- */
dialog {
  border: 0; border-radius: 10px; padding: 0; width: min(100% - 32px, 560px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5);
}
dialog::backdrop { background: rgba(22, 32, 28, .55); }
.dialogo__cab { padding: 1rem 1.2rem; border-bottom: 1px solid var(--linea); display: flex; align-items: center; }
.dialogo__cab h2 { font-size: 1.05rem; }
.dialogo__cab button { margin-left: auto; background: none; border: 0; font-size: 1.3rem; cursor: pointer; line-height: 1; color: var(--gris); }
.dialogo__cuerpo { padding: 1.2rem; display: grid; gap: .9rem; }
.dialogo__pie { padding: 1rem 1.2rem; border-top: 1px solid var(--linea); display: flex; gap: .6rem; justify-content: flex-end; background: #f6f7f5; border-radius: 0 0 10px 10px; }
.rejilla-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.campo { display: grid; gap: .3rem; }
.campo label { font-size: .78rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.campo input, .campo select, .campo textarea { padding: .55rem .65rem; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; width: 100%; }
.campo textarea { min-height: 70px; resize: vertical; }
.campo--ancho { grid-column: 1 / -1; }
.campo-casilla { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.mensaje { padding: .6rem .8rem; border-radius: var(--radio); font-size: .9rem; }
.mensaje--error { background: #fbeee9; color: #8a3418; border: 1px solid #e3bdae; }
.mensaje--ok { background: #eef4ef; color: #2c4a37; border: 1px solid #b2cbbb; }
.aviso-flotante {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--tinta); color: #fff; padding: .7rem 1.1rem; border-radius: 99px; font-size: .92rem;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}

@media (max-width: 1080px) {
  .disposicion { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .reserva { grid-template-columns: 56px 44px 1fr 110px; grid-template-areas: 'hora pax nombre tel' 'notas notas notas notas' 'acciones acciones acciones acciones'; row-gap: .45rem; }
  .r-hora { grid-area: hora; } .r-pax { grid-area: pax; } .r-nombre { grid-area: nombre; } .r-tel { grid-area: tel; }
  .r-mesa { grid-area: notas; width: 90px; }
  .r-notas { grid-area: notas; justify-self: end; }
  .r-acciones { grid-area: acciones; justify-content: flex-start; }
  .rejilla-campos { grid-template-columns: 1fr; }
}

/* ---- Impresión: la hoja que se lleva el jefe de sala ---- */
@media print {
  body { background: #fff; font-size: 11pt; }
  .barra, .pestanas, .lateral, .r-acciones, .no-imprimir, dialog, .aviso-flotante { display: none !important; }
  .disposicion { display: block; padding: 0; }
  .panel { border: 0; }
  .reserva { break-inside: avoid; border-bottom: 1px solid #ccc; grid-template-columns: 54px 36px 1fr 110px 60px 1fr; }
  .r-mesa { border: 0; }
  .servicio__cab { background: none; border-bottom: 2px solid #000; }
}