:root {
  --tinta: #16324f;
  --texto: #1f2933;
  --suave: #5b6b7b;
  --linea: #d5dde5;
  --fondo: #f4f6f8;
  --blanco: #fff;
  --acento: #0a6e68;
  --acento-oscuro: #07544f;
  --acento-claro: #e0f2f0;
  --ocupada: #e3e7ec;
  --mia: #f5b83d;
  --alerta: #fff3d6;
  --alerta-borde: #e0a200;
  --error: #b3261e;
  --error-claro: #fdeceb;
  --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

h1 { margin: .4em 0 .3em; color: var(--tinta); font-size: 1.5rem; line-height: 1.2; }
h2 { margin: 1.4em 0 .5em; color: var(--tinta); font-size: 1.15rem; }
a { color: var(--acento-oscuro); }

/* Barra superior */
.barra {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; background: var(--tinta); color: var(--blanco);
}
.barra-marca { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.barra-marca span { font-size: .8rem; opacity: .8; }
.barra-nav { display: flex; flex-wrap: wrap; gap: .1rem .9rem; align-items: center; }
.barra-nav a, .barra-nav .enlace { color: var(--blanco); padding: .4rem 0; font-size: .95rem; }
.barra-nav form { margin: 0; }
.franja-prueba { margin: 0; padding: .3rem 1rem; background: var(--alerta); font-size: .85rem; text-align: center; }

/* Estructura */
.contenedor { max-width: 720px; margin: 0 auto; padding: .75rem 1rem 3rem; }
.contenedor.ancho { max-width: 1280px; }
.angosto { max-width: 420px; margin: 0 auto; }
.ancho-medio { max-width: 560px; }
.bajada { margin-top: 0; color: var(--suave); }
.nota { color: var(--suave); font-size: .9rem; }
.migas { margin: .3rem 0; font-size: .95rem; }
.columnas { display: grid; gap: 0 2rem; }
.panel-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

/* Formularios y botones */
.formulario { display: grid; gap: .8rem; margin: 1rem 0; }
.formulario label, .campo { display: grid; gap: .25rem; font-weight: 600; font-size: .95rem; }
input, select {
  width: 100%; min-height: 46px; padding: .55rem .7rem;
  border: 1px solid #9fb0c0; border-radius: 8px; background: var(--blanco); color: var(--texto); font: inherit; font-weight: 400;
}
input[type=checkbox], input[type=radio] { width: 22px; min-height: 22px; flex: none; accent-color: var(--acento); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid #5aa9e6; outline-offset: 1px;
}
.campo-codigo { font-size: 1.6rem; letter-spacing: .25em; text-align: center; }
.opcion { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }

.boton {
  display: inline-block; width: 100%; min-height: 48px; padding: .7rem 1.1rem;
  border: 1px solid var(--acento); border-radius: 8px; background: var(--acento); color: var(--blanco);
  font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--acento-oscuro); }
.boton:disabled { border-color: var(--ocupada); background: var(--ocupada); color: var(--suave); cursor: not-allowed; }
.boton.secundario { background: var(--blanco); color: var(--acento-oscuro); }
.boton.secundario:hover { background: var(--acento-claro); }
.boton.secundario:disabled { border-color: var(--linea); background: var(--blanco); color: var(--suave); }
.boton.peligro { border-color: var(--error); background: var(--blanco); color: var(--error); }
.boton.peligro:hover { background: var(--error-claro); }
.enlace {
  padding: .25rem 0; border: 0; background: none; color: var(--acento-oscuro);
  font: inherit; text-decoration: underline; cursor: pointer;
}

/* Avisos */
.aviso { margin: .75rem 0; padding: .65rem .8rem; border-left: 4px solid var(--acento); border-radius: 6px; background: var(--acento-claro); }
.aviso.error { border-color: var(--error); background: var(--error-claro); color: #7f1d1d; }
.aviso.alerta { border-color: var(--alerta-borde); background: var(--alerta); }
.codigo-grande { font-size: 1.6rem; letter-spacing: .15em; }

/* Grilla del asistente */
.leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: .88rem; color: var(--suave); }
.leyenda li { display: flex; align-items: center; gap: .35rem; }
.muestra { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--acento); background: var(--blanco); }
.muestra.ocupada { border-color: #b4bfca; background: var(--ocupada); }
.muestra.mia { border-color: var(--mia); background: var(--mia); }

.turno { margin-bottom: .9rem; padding: .75rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.turno.en_curso { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.turno.pasado { background: transparent; color: var(--suave); }
.turno-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.turno-cabecera h2 { margin: 0; font-size: 1.05rem; }
.turno.pasado h2 { color: var(--suave); }
.turno-hora { color: var(--suave); font-variant-numeric: tabular-nums; }
.chip { margin-left: auto; padding: .05rem .5rem; border-radius: 999px; background: var(--ocupada); color: var(--suave); font-size: .78rem; font-weight: 600; }
.chip.en_curso { background: var(--acento); color: var(--blanco); }
.turno-mia { margin: .45rem 0 0; padding: .4rem .6rem; border-radius: 6px; background: #fdf1d3; font-size: .92rem; }

.mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .45rem; margin-top: .6rem; }
.mesa {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .3rem;
  border: 2px solid var(--acento); border-radius: 8px; background: var(--blanco); color: var(--acento-oscuro);
  font-size: .92rem; font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none; overflow-wrap: anywhere;
}
a.mesa:hover, a.mesa:active { background: var(--acento-claro); }
.mesa.ocupada { border-color: var(--ocupada); background: var(--ocupada); color: var(--suave); font-weight: 400; text-decoration: line-through; }
.mesa.bloqueada { border: 2px dashed var(--linea); background: transparent; color: var(--suave); font-weight: 400; }
.mesa.mia { border-color: var(--mia); background: var(--mia); color: #3d2c00; }

/* Reserva */
.resultados { margin: .4rem 0; padding: 0; list-style: none; }
.resultado {
  display: flex; flex-direction: column; gap: .05rem; width: 100%; min-height: 52px; margin-bottom: .35rem; padding: .5rem .7rem;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco); color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.resultado span { color: var(--suave); font-size: .88rem; }
.resultado:hover:not(:disabled) { border-color: var(--acento); }
.resultado:disabled { background: var(--fondo); color: var(--suave); cursor: not-allowed; }
.elegida { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin: .8rem 0; padding: .6rem .8rem; border-radius: 8px; background: var(--acento-claro); }
.elegida p { margin: 0; }
#confirmar { margin-top: .6rem; }

/* Confirmación y reuniones */
.confirmacion { padding-top: 1rem; text-align: center; }
.sello { display: inline-block; margin: 0 0 .8rem; padding: .2rem .8rem; border-radius: 999px; background: var(--acento); color: var(--blanco); font-weight: 600; }
.ticket { margin: 0; color: var(--tinta); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.ticket-con { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.reuniones { margin: 0; padding: 0; list-style: none; }
.reunion { margin-bottom: .8rem; padding: .85rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.reunion .nota { margin: 0 0 .6rem; }
.reunion form { margin: 0; }

/* Panel */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; background: var(--blanco); font-size: .92rem; }
.tabla th, .tabla td { padding: .45rem .55rem; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla thead th { background: #eaeff4; color: var(--tinta); white-space: nowrap; }
.tabla small { display: block; font-weight: 400; color: var(--suave); }
.tabla tr.inactivo td { color: var(--suave); background: var(--fondo); }
.tabla form { margin: 0; }
.grilla-staff td.celda { min-width: 165px; padding: .2rem; }
.grilla-staff thead th.en_curso { background: var(--acento); color: var(--blanco); }
.grilla-staff thead th.en_curso small { color: var(--blanco); }
.grilla-staff thead th.pasado { color: var(--suave); }
.grilla-staff tbody th { position: sticky; left: 0; z-index: 1; background: #eaeff4; white-space: nowrap; }
.celda.vacia { color: var(--suave); text-align: center; }
.celda-libre, .celda-ocupada {
  display: flex; flex-direction: column; gap: .1rem; width: 100%; min-height: 48px; padding: .3rem .45rem;
  border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
}
.celda-libre { align-items: center; justify-content: center; color: var(--acento-oscuro); }
.celda-libre:hover { background: var(--acento-claro); }
.celda-ocupada { background: #e6eefc; }
.celda-ocupada em { font-size: .78rem; font-style: normal; font-weight: 700; }
.celda-ocupada.realizada { background: #d7f0dc; }
.celda-ocupada.alerta { border-color: var(--alerta-borde); background: var(--alerta); }
.celda-ocupada.baja { border-color: var(--error); }
.lista-simple { margin: 0; padding: 0; list-style: none; }
.lista-simple li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--linea); }
.resumen { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .6rem 0; padding: 0; list-style: none; }
.buscador-linea { display: flex; gap: .5rem; margin: .4rem 0; }
.buscador-linea .boton { width: auto; }
.tabla .buscador-linea input { min-height: 36px; min-width: 130px; }
.filas-edicion { margin: 0 0 .7rem; padding: 0; list-style: none; }
.filas-edicion li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.filas-edicion input:not([type=checkbox]) { flex: 1 1 120px; width: auto; min-height: 40px; }
.filas-edicion .opcion { align-items: center; }
.etiqueta { min-width: 62px; font-size: .9rem; }
.link-largo { overflow-wrap: anywhere; }
form .boton + .boton { margin-top: .4rem; }

.dialogo { width: min(460px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 1rem; border: 0; border-radius: var(--radio); box-shadow: 0 12px 40px rgb(0 0 0 / .3); }
.dialogo::backdrop { background: rgb(15 30 45 / .55); }
.dialogo h2 { margin-top: 0; }
.dialogo p { margin: .2rem 0; }
.dialogo-acciones { display: grid; gap: .45rem; margin-top: .8rem; }
.dialogo-cerrar { display: block; margin: .8rem auto 0; }
.dialogo .boton { margin-top: .5rem; }

/* Pantalla de sala */
body.sala { min-height: 100vh; background: #0e1e2e; color: #eaf1f7; font-size: clamp(14px, 1.45vw, 26px); }
.sala-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 1.2rem .3rem; }
.sala-cabecera h1 { margin: 0; color: var(--blanco); font-size: 1.7em; }
.sala-hora { margin: 0; font-size: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
#sala-grilla { padding: 0 1.2rem 1rem; }
.tabla-sala { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: .25em; }
.tabla-sala th, .tabla-sala td { padding: .3em .55em; border-radius: 6px; vertical-align: middle; }
.tabla-sala thead th { background: #1b3650; text-align: center; }
.tabla-sala thead small { display: block; font-weight: 400; opacity: .85; }
.tabla-sala thead th.en_curso { background: var(--mia); color: #2b2000; }
.tabla-sala thead th.pasado { opacity: .45; }
.tabla-sala tbody tr { height: 7.6vh; }
.tabla-sala tbody th { width: 9em; background: #1b3650; text-align: left; }
.tabla-sala thead th:first-child { width: 9em; }
.tabla-sala td { background: #162b40; line-height: 1.2; }
.tabla-sala td span { display: block; }
.tabla-sala td.libre { color: #7fd1c7; text-align: center; }
.tabla-sala td.ocupada { background: #24476a; color: var(--blanco); }
.tabla-sala td.en_curso.ocupada { background: #fbe2a8; color: #2b2000; font-weight: 600; }
.tabla-sala td.en_curso.libre { outline: 2px solid var(--mia); outline-offset: -2px; }
.tabla-sala td.pasado { opacity: .35; }

@media (min-width: 720px) {
  .boton { width: auto; min-width: 200px; }
  .formulario .boton, .angosto .boton, .dialogo .boton { width: 100%; }
  .columnas { grid-template-columns: 1fr 1fr; }
  .reunion .boton { width: auto; }
  h1 { font-size: 1.7rem; }
}