/* ============================================================================
   style.css
   Identidad visual del sistema: paleta BLANCO / NARANJA / NEGRO, en un estilo
   de panel de gestión moderno (mucho espacio en blanco, barra lateral oscura,
   y el naranja usado como ACENTO y no como fondo).

   CÓMO CAMBIAR EL COLOR CORPORATIVO
   ---------------------------------
   Todo el color sale de las variables de abajo. Si el naranja del hotel es
   otro tono, cambia SOLO la línea "--naranja" (y opcionalmente
   "--naranja-oscuro", que es el mismo tono un poco más apagado para los
   estados :hover). No hace falta tocar nada más en todo el sistema.

   NOTA IMPORTANTE PARA QUIEN MODIFIQUE ESTE ARCHIVO
   ------------------------------------------------
   Los nombres de las variables y de las clases (.card-hotel, .btn-naranja,
   .table-hotel, .sidebar, .badge-*, etc.) están escritos en las ~40
   plantillas HTML y en los estilos incrustados de algunas de ellas
   (calendario, precuenta, hojas de QR, informe de cumplimiento). Se pueden
   cambiar LOS VALORES libremente, pero si se cambian LOS NOMBRES hay que
   renombrarlos también en las plantillas.
   ============================================================================ */

:root {
  /* --- Color corporativo (lo único que hay que tocar para recolorear) --- */
  --naranja: #f47b20;          /* naranja principal: botones, acentos, activo */
  --naranja-oscuro: #d4650f;   /* variante para :hover y textos sobre claro */
  --naranja-claro: #ffe8d6;    /* fondo tenue para estados destacados */
  --naranja-suave: #fff7f1;    /* fondo muy tenue (filas, encabezados suaves) */

  /* --- Neutros --- */
  --blanco: #ffffff;
  --negro: #16181d;            /* barra lateral y títulos */
  --negro-suave: #1f2229;      /* hover dentro de la barra lateral */
  --gris-fondo: #f5f6f8;       /* fondo general de las páginas */
  --gris-texto: #1f2328;       /* texto principal */
  --gris-medio: #6b7280;       /* texto secundario, encabezados de tabla */
  --gris-borde: #e5e7eb;       /* bordes de tarjetas y separadores */

  /* --- Sombras: neutras y sutiles, no de color --- */
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --sombra-elevada: 0 4px 12px rgba(16, 24, 40, 0.08);

  --radio: 10px;
}

* { box-sizing: border-box; }

body {
  background-color: var(--gris-fondo);
  color: var(--gris-texto);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--naranja-oscuro); text-decoration: none; }
a:hover { color: var(--naranja); text-decoration: underline; }

h1, h2, h3, h4, h5 { color: var(--negro); font-weight: 650; }

/* ============================================================================
   BARRA SUPERIOR — blanca, limpia, con el nombre del hotel a la izquierda
   ============================================================================ */
.navbar-hotel {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-borde);
  min-height: 56px;
}

.navbar-hotel .navbar-brand {
  color: var(--negro) !important;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.navbar-hotel .navbar-brand span {
  font-weight: 400;
  color: var(--naranja);
}

.navbar-hotel .usuario-actual {
  color: var(--gris-medio);
  font-size: 0.875rem;
}

.navbar-hotel .usuario-actual strong { color: var(--negro); font-weight: 600; }
.navbar-hotel .usuario-actual .cargo::before { content: "·"; margin: 0 0.35rem; color: var(--gris-borde); }

/* Botones de la barra superior (cambiar clave y salir) */
.navbar-hotel .btn-salir {
  color: var(--gris-texto);
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  border-radius: 8px;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
}

.navbar-hotel .btn-salir:hover {
  background-color: var(--gris-fondo);
  border-color: #d1d5db;
  color: var(--negro);
}

/* ============================================================================
   LAYOUT: barra lateral oscura + contenido
   ============================================================================ */
.layout {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 244px;
  flex-shrink: 0;
  background-color: var(--negro);
  padding: 0.75rem 0 2rem;
}

.sidebar .nav-link {
  color: #b6bcc6;
  padding: 0.55rem 1.25rem;
  margin: 0 0.5rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.sidebar .nav-link:hover {
  background-color: var(--negro-suave);
  color: var(--blanco);
}

/* El elemento activo se marca con el naranja corporativo */
.sidebar .nav-link.active {
  background-color: rgba(244, 123, 32, 0.14);
  color: var(--naranja);
  font-weight: 600;
}

.sidebar .nav-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: #6b7280;
  padding: 1.1rem 1.75rem 0.35rem;
}

.contenido {
  flex-grow: 1;
  padding: 1.75rem;
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================================================
   TARJETAS Y ENCABEZADOS
   ============================================================================ */
.card-hotel {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.35rem;
  margin-bottom: 1.25rem;
}

.titulo-seccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}

.titulo-seccion h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--negro);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ============================================================================
   BOTONES
   ============================================================================ */
.btn { border-radius: 8px; font-weight: 500; }

.btn-naranja {
  background-color: var(--naranja);
  border-color: var(--naranja);
  color: var(--blanco);
  font-weight: 600;
}

.btn-naranja:hover, .btn-naranja:focus {
  background-color: var(--naranja-oscuro);
  border-color: var(--naranja-oscuro);
  color: var(--blanco);
}

.btn-outline-naranja {
  border: 1px solid var(--gris-borde);
  color: var(--gris-texto);
  background: var(--blanco);
  font-weight: 500;
}

.btn-outline-naranja:hover, .btn-outline-naranja:focus {
  background-color: var(--naranja-suave);
  border-color: var(--naranja);
  color: var(--naranja-oscuro);
}

/* Foco visible con el color corporativo (importante para accesibilidad y
   para quien navega con teclado). */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.18);
  outline: none;
}

.form-control, .form-select {
  border-radius: 8px;
  border-color: var(--gris-borde);
  font-size: 0.92rem;
}

.form-label { font-weight: 500; font-size: 0.875rem; color: var(--gris-texto); }
.form-text { color: var(--gris-medio); font-size: 0.8rem; }

/* ============================================================================
   TABLAS — encabezado sobrio, filas separadas por líneas finas
   ============================================================================ */
.table-hotel { margin-bottom: 0; }

.table-hotel thead th {
  background-color: transparent;
  color: var(--gris-medio);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--gris-borde);
  padding: 0.7rem 0.75rem;
  white-space: nowrap;
}

.table-hotel td {
  vertical-align: middle;
  border-bottom: 1px solid #f1f2f4;
  padding: 0.8rem 0.75rem;
}

.table-hotel tbody tr:last-child td { border-bottom: none; }
.table-hotel tbody tr:hover { background-color: var(--naranja-suave); }

/* Bootstrap usa estas clases para resaltar filas; se suavizan para que
   convivan con la paleta. */
.table-hotel tbody tr.table-warning { background-color: #fff8e6; }
.table-hotel tbody tr.table-warning:hover { background-color: #fff3d6; }
.table-hotel tbody tr.table-danger { background-color: #fdecec; }
.table-hotel tbody tr.table-danger:hover { background-color: #fbdcdc; }

/* ============================================================================
   INSIGNIAS DE ESTADO
   Estilo "píldora": fondo tenue + texto del color, que se lee mejor y es más
   sobrio que un bloque de color saturado.
   Los nombres vienen del ESTADO guardado en la base de datos
   (badge-{{ r.estado }}), así que no se pueden renombrar.
   ============================================================================ */
.badge {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.badge-disponible, .badge-confirmada, .badge-listo, .badge-pagado {
  background-color: #e7f6ec !important; color: #1b7a3d !important;
}
.badge-ocupada, .badge-check_in, .badge-preparando, .badge-en_preparacion {
  background-color: var(--naranja-claro) !important; color: var(--naranja-oscuro) !important;
}
.badge-mantenimiento, .badge-cancelada, .badge-rechazada {
  background-color: #fdeaea !important; color: #b42318 !important;
}
.badge-pendiente, .badge-limpieza, .badge-abierto {
  background-color: #f2f3f5 !important; color: #4b5563 !important;
}
.badge-check_out, .badge-entregado {
  background-color: #e8f1fd !important; color: #175cd3 !important;
}
/* Consumo cargado a una habitación (se cobra en el check-out) y cuenta que se
   fusionó con otra mesa. */
.badge-cargado_habitacion {
  background-color: var(--naranja-claro) !important; color: var(--naranja-oscuro) !important;
}
.badge-trasladado { background-color: #f2f3f5 !important; color: #4b5563 !important; }

/* Insignias de contexto de Bootstrap (bg-success, bg-danger, ...): se pasan
   al mismo estilo "píldora" para que todo el sistema se vea parejo. En las
   plantillas suelen venir con "text-dark", por eso el color lleva !important. */
.badge.bg-success   { background-color: #e7f6ec !important; color: #1b7a3d !important; }
.badge.bg-danger    { background-color: #fdeaea !important; color: #b42318 !important; }
.badge.bg-warning   { background-color: #fff4d6 !important; color: #8a5a06 !important; }
.badge.bg-info      { background-color: #e8f1fd !important; color: #175cd3 !important; }
.badge.bg-primary   { background-color: var(--naranja-claro) !important; color: var(--naranja-oscuro) !important; }
.badge.bg-secondary { background-color: #f2f3f5 !important; color: #4b5563 !important; }
.badge.bg-dark      { background-color: #e9eaec !important; color: var(--negro) !important; }
.badge.bg-light     { background-color: #f2f3f5 !important; color: #4b5563 !important; }

/* ============================================================================
   LOGIN
   ============================================================================ */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--negro);
  padding: 1rem;
}

.login-card {
  background: var(--blanco);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-card .logo-marca { width: 46px; height: 46px; color: var(--naranja); margin-bottom: 0.6rem; }
.login-card .logo-hotel { max-height: 56px; max-width: 70%; margin-bottom: 0.8rem; }
.login-sub { color: var(--gris-medio); font-size: 0.85rem; margin: -1.4rem 0 1.6rem; }

.login-card h1 {
  font-size: 1.25rem;
  color: var(--negro);
  font-weight: 700;
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
}

/* ============================================================================
   TARJETAS DEL DASHBOARD
   ============================================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
}

.dashboard-card {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--gris-texto);
  font-size: 0.875rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

a.dashboard-card:hover {
  box-shadow: var(--sombra-elevada);
  transform: translateY(-2px);
  border-color: var(--naranja);
  color: var(--negro);
  text-decoration: none;
}

.dashboard-card .ico { width: 20px; height: 20px; color: var(--naranja); flex-shrink: 0; }
.dashboard-card span { font-weight: 500; }
.dashboard-card .fs-4 { color: var(--negro); font-weight: 700; }

/* ============================================================================
   AVISOS (mensajes flash)
   ============================================================================ */
.alert { border-radius: var(--radio); border: 1px solid transparent; font-size: 0.9rem; }
.alert-success { background-color: #e7f6ec; border-color: #b7e4c7; color: #14562c; }
.alert-danger  { background-color: #fdeaea; border-color: #f5c2c0; color: #8f231b; }
.alert-warning { background-color: #fff8e6; border-color: #f5dfa8; color: #7a5b12; }
.alert-info    { background-color: #eaf2fd; border-color: #bcd6f5; color: #14508f; }
.alert-secondary { background-color: #f2f3f5; border-color: var(--gris-borde); color: #444; }

/* Pestañas (módulo de usuarios) */
.nav-tabs { border-bottom: 1px solid var(--gris-borde); }
.nav-tabs .nav-link { color: var(--gris-medio); border: none; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--negro); border-bottom-color: var(--gris-borde); }
.nav-tabs .nav-link.active { color: var(--naranja-oscuro); background: transparent; border-bottom-color: var(--naranja); font-weight: 600; }

/* Modales y acordeones alineados con el resto */
.modal-content { border-radius: 12px; border: none; box-shadow: 0 16px 48px rgba(16, 24, 40, 0.18); }
.modal-header, .modal-footer { border-color: var(--gris-borde); }
.modal-title { font-size: 1.05rem; }
.accordion-button:not(.collapsed) { background-color: var(--naranja-suave); color: var(--naranja-oscuro); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.18); border-color: var(--naranja); }

/* Botón hamburguesa (solo visible en móvil) */
.navbar-hotel .btn-menu-movil { display: none; }

/* ============================================================================
   RESPONSIVE: en pantallas angostas el menú lateral se oculta y se despliega
   como panel deslizante con el botón hamburguesa (ver static/js/main.js).
   ============================================================================ */
@media (max-width: 768px) {
  .navbar-hotel .btn-menu-movil { display: inline-flex; }
  .buscador-global { display: none; }

  .sidebar {
    position: fixed;
    top: 56px;
    left: -260px;
    height: calc(100vh - 56px);
    z-index: 1050;
    transition: left 0.25s ease;
    overflow-y: auto;
  }

  .sidebar.abierto { left: 0; }

  .overlay-menu {
    display: none;
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
  }

  .overlay-menu.visible { display: block; }

  .contenido { padding: 1rem; }
  .titulo-seccion h1 { font-size: 1.2rem; }
  .login-card { padding: 2rem 1.25rem; }
}

/* ============================================================================
   ÍCONOS
   Dibujados con SVG incrustado (ver templates/_iconos.html). Toman el color
   del texto que los rodea, así que sirven igual sobre el menú oscuro, sobre
   un botón naranja o dentro de un párrafo gris.
   ============================================================================ */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico-sm { width: 1em; height: 1em; }
.ico-lg { width: 1.5em; height: 1.5em; }

/* Botón que es solo un ícono (barra superior, acciones de tabla) */
.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--gris-medio);
  padding: 0;
}

.btn-icono:hover {
  background-color: var(--gris-fondo);
  border-color: var(--gris-borde);
  color: var(--negro);
}

.btn-icono .ico { width: 19px; height: 19px; }

/* ============================================================================
   BARRA SUPERIOR: fecha de operación y buscador global
   ============================================================================ */
/* La primera letra va en mayúscula solo acá; en medio de una frase
   ("...pasando hoy, domingo 30 de agosto") se lee mejor en minúscula. */
.contexto-fecha::first-letter { text-transform: uppercase; }

.contexto-fecha {
  margin-left: 1.25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--gris-borde);
  color: var(--gris-medio);
  font-size: 0.85rem;
}

.buscador-global {
  position: relative;
  width: min(420px, 34vw);
  margin-left: auto;
  margin-right: auto;
}

.buscador-global .form-control {
  padding-left: 2.2rem;
  background-color: var(--gris-fondo);
  border-color: transparent;
  font-size: 0.88rem;
  height: 36px;
}

.buscador-global .form-control:focus { background-color: var(--blanco); }

.buscador-lupa {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gris-medio);
  pointer-events: none;
  line-height: 0;
}

.resultados-global {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-elevada);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 1080;
  padding: 0.3rem;
}

.resultado-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--gris-texto);
  text-decoration: none;
}

.resultado-item:hover { background-color: var(--naranja-suave); color: var(--negro); text-decoration: none; }
.resultado-item .ico { color: var(--naranja); width: 18px; height: 18px; }
.resultado-item .titulo { font-weight: 600; font-size: 0.88rem; display: block; }
.resultado-item .detalle { font-size: 0.78rem; color: var(--gris-medio); }
.resultado-item .tipo {
  margin-left: auto;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris-medio);
}
.resultados-global .sin-resultados { padding: 0.8rem; color: var(--gris-medio); font-size: 0.86rem; }

/* ============================================================================
   MENÚ LATERAL CONTRAÍDO
   El usuario puede contraerlo con el botón de la barra superior; queda solo
   con los íconos y el navegador gana ancho para las tablas. La preferencia
   se recuerda en el navegador (ver static/js/main.js).
   ============================================================================ */
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar .nav-link .ico { width: 18px; height: 18px; }

@media (min-width: 769px) {
  body.menu-contraido .sidebar { width: 62px; }
  body.menu-contraido .sidebar .nav-link { justify-content: center; padding: 0.55rem 0; margin: 0 0.45rem; }
  body.menu-contraido .sidebar .nav-link span { display: none; }
  body.menu-contraido .sidebar .nav-section-title {
    font-size: 0;
    padding: 0.9rem 0 0.25rem;
    margin: 0 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }
}

/* ============================================================================
   PANEL DE INICIO (tarjetas de indicadores y listas del día)
   ============================================================================ */
.subtitulo-seccion { color: var(--gris-medio); font-size: 0.9rem; }

.titulo-bloque {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gris-medio);
  font-weight: 700;
  margin: 1.75rem 0 0.75rem;
}

.kpi-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.2rem 1.2rem;
  text-decoration: none;
  color: inherit;
  display: block;
}

a.kpi:hover { border-color: var(--naranja); box-shadow: var(--sombra-elevada); text-decoration: none; }

.kpi-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 0.6rem;
}

.kpi-icono .ico { width: 19px; height: 19px; }
.kpi-naranja { background: var(--naranja-claro); color: var(--naranja-oscuro); }
.kpi-azul   { background: #e8f1fd; color: #175cd3; }
.kpi-verde  { background: #e7f6ec; color: #1b7a3d; }
.kpi-gris   { background: #f2f3f5; color: #4b5563; }
.kpi-ambar  { background: #fff4d6; color: #8a5a06; }
.kpi-rojo   { background: #fdeaea; color: #b42318; }

.kpi-numero {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--negro);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.kpi-etiqueta { display: block; font-size: 0.82rem; color: var(--gris-medio); margin-top: 0.15rem; }

.kpi-barra {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--gris-borde);
  margin-top: 0.7rem;
  overflow: hidden;
}

.kpi-barra span { display: block; height: 100%; background: var(--naranja); }

/* Variante sin tarjeta, para usar dentro de otra tarjeta */
.kpi-fila-interna { margin-bottom: 0; }
.kpi-plano { border: none; box-shadow: none; background: transparent; padding: 0.2rem 0; }
.kpi-plano .kpi-numero { font-size: 1.4rem; }

.card-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.card-encabezado h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.enlace-mas { font-size: 0.82rem; font-weight: 500; }

.celda-hab {
  font-weight: 700;
  color: var(--negro);
  width: 3.5rem;
}

.texto-menor { font-size: 0.8rem; color: var(--gris-medio); }
.texto-alerta { color: #b42318; font-weight: 600; }
.vacio { color: var(--gris-medio); font-size: 0.88rem; margin: 0; }

.estado-habitaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}

.estado-item {
  border: 1px solid var(--gris-borde);
  border-radius: 9px;
  padding: 0.7rem 0.85rem;
}

.estado-numero {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--negro);
  margin-top: 0.3rem;
}

/* Tabla compacta: más filas a la vista, como en los sistemas de gestión */
.table-compacta td, .table-compacta th { padding: 0.5rem 0.6rem; }
.table-compacta thead th { font-size: 0.7rem; }

/* ============================================================================
   SALÓN: mesas con su estado y color
   Verde = disponible · naranja = ocupada · ámbar = cuenta pedida ·
   azul = reservada · gris = fuera de servicio.
   ============================================================================ */
.leyenda-salon {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-size: 0.82rem;
  color: var(--gris-medio);
  margin-bottom: 0.5rem;
}

.leyenda-salon .punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.35rem;
}

.grilla-mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.mesa-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-left: 5px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mesa-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.mesa-numero { font-size: 1.25rem; font-weight: 700; color: var(--negro); }

.mesa-estado {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15em 0.55em;
  border-radius: 999px;
}

.mesa-monto { font-size: 1.05rem; font-weight: 700; color: var(--negro); margin-top: 0.2rem; }
.mesa-cuerpo { flex-grow: 1; }

.mesa-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.mesa-acciones form { display: inline; }
.mesa-acciones .btn { padding: 0.2rem 0.55rem; font-size: 0.8rem; }

/* --- Colores por estado (el mismo nombre se usa en el punto de la leyenda) */
.punto.estado-disponible { background: #16a34a; }
.punto.estado-ocupada { background: var(--naranja); }
.punto.estado-cuenta_pedida { background: #d97706; }
.punto.estado-reservada { background: #2563eb; }
.punto.estado-fuera_servicio { background: #9ca3af; }

.mesa-tarjeta.estado-disponible { border-left-color: #16a34a; }
.mesa-tarjeta.estado-disponible .mesa-estado { background: #e7f6ec; color: #15803d; }

.mesa-tarjeta.estado-ocupada { border-left-color: var(--naranja); background: var(--naranja-suave); }
.mesa-tarjeta.estado-ocupada .mesa-estado { background: var(--naranja-claro); color: var(--naranja-oscuro); }

.mesa-tarjeta.estado-cuenta_pedida { border-left-color: #d97706; background: #fffaf0; }
.mesa-tarjeta.estado-cuenta_pedida .mesa-estado { background: #fff4d6; color: #92400e; }

.mesa-tarjeta.estado-reservada { border-left-color: #2563eb; background: #f5f9ff; }
.mesa-tarjeta.estado-reservada .mesa-estado { background: #e8f1fd; color: #1d4ed8; }

.mesa-tarjeta.estado-fuera_servicio { border-left-color: #9ca3af; background: #fafafa; opacity: 0.75; }
.mesa-tarjeta.estado-fuera_servicio .mesa-estado { background: #f2f3f5; color: #4b5563; }

/* ============================================================================
   IMPRESIÓN
   Regla común a todas las páginas que se imprimen (precuenta, hojas de QR,
   informe de cumplimiento, documentos legales): fondo blanco y sin sombras,
   para no gastar tinta ni dejar bandas grises en el papel. Cada plantilla
   agrega además su propio @media print para ocultar botones.
   ============================================================================ */
@media print {
  body, .contenido, .layout { background: #fff !important; }
  .card-hotel { box-shadow: none !important; }
  .navbar-hotel, .sidebar, .overlay-menu, .btn-menu-movil { display: none !important; }
  .contenido { padding: 0 !important; }
}