/* ---------- Formulario: Nueva reserva ---------- */
.new-res-form {
  display: grid;
  gap: 0.7rem;
}

.new-res-section {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  background: rgba(var(--surface-rgb), 0.45);
  padding: 0.65rem 0.7rem;
  display: grid;
  gap: 0.55rem;
}

.new-res-section h3 {
  font-size: 0.82rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.new-res-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem;
  min-width: 0;
}

.new-res-field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.new-res-field label {
  font-size: 0.72rem;
  color: var(--muted);
}

.new-res-field input,
.new-res-field select,
.new-res-field textarea {
  width: 100%;
  min-width: 0;
}

.new-res-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.new-res-stepper button {
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--text);
  cursor: pointer;
}

.new-res-stepper button:hover {
  border-color: var(--primary);
}

.new-res-stepper strong {
  min-width: 30px;
  text-align: center;
  font-size: 1rem;
}

.new-res-time-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.new-res-time-chips button {
  min-height: 34px;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--border-rgb), 0.9);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
}

.new-res-time-chips button:hover {
  border-color: var(--primary);
}

.new-res-time-chips button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

.new-res-time-chips button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  text-decoration: line-through;
}

.new-res-hint {
  font-size: 0.74rem;
  color: var(--muted);
}

.new-res-hint.error {
  color: var(--danger);
}

.new-res-hint.ok {
  color: var(--ok);
}

.new-res-summary {
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.08);
  padding: 0.6rem 0.7rem;
  display: grid;
  gap: 0.3rem;
}

.new-res-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.new-res-summary-row span {
  color: var(--muted);
}

.new-res-summary-row strong {
  color: var(--text);
  text-align: right;
}

.new-res-actions {
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
}

.new-res-actions .btn {
  flex: 0 1 auto;
}

#detail-drawer.new-res-drawer {
  width: min(560px, 96vw);
}

@media (max-width: 640px) {
  #detail-drawer.new-res-drawer {
    width: 100vw;
    border-left: none;
  }
  .new-res-row {
    grid-template-columns: 1fr;
  }
  .new-res-actions {
    flex-direction: column-reverse;
  }
  .new-res-actions .btn {
    width: 100%;
    min-height: 46px;
  }
}

.priority-list,
.activity-feed {
  display: grid;
  gap: 0.55rem;
}

.operator-performance {
  display: grid;
  gap: 0.55rem;
}

.operator-row {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: rgba(var(--surface-rgb), 0.55);
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
}

.operator-row p {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

.operator-metrics {
  display: grid;
  gap: 0.35rem;
}

.priority-item {
  width: 100%;
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: rgba(var(--surface-rgb), 0.55);
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  color: var(--text);
  text-align: left;
}

.priority-item p {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.activity-item {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: rgba(var(--surface-rgb), 0.55);
  border-radius: 12px;
  padding: 0.6rem;
  display: grid;
  gap: 0.35rem;
}

.activity-item p {
  font-size: 0.82rem;
}

.activity-item small {
  color: var(--muted);
  font-size: 0.72rem;
}

.chat-filter-bar {
  margin-bottom: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--muted);
  border-radius: 999px;
  min-height: 34px;
  padding: 0 0.7rem;
  font-size: 0.76rem;
  cursor: pointer;
}

.chip.active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 0.7rem 0.75rem;
}

.panel h2 {
  font-size: 0.92rem;
  margin-bottom: 0.55rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.7rem;
}

.stat {
  background: var(--bg-soft);
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 14px;
  padding: 0.56rem;
}

.stat .value {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.stat .label {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-stack { display: grid; gap: 0.55rem; }

.status-item {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: rgba(var(--surface-rgb), 0.45);
  border-radius: 12px;
  padding: 0.7rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.status-item span { color: var(--muted); }

.quick-actions {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}

.btn {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--text);
  padding: 0 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.btn:hover { border-color: var(--primary); }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb), 0.85);
  outline-offset: 2px;
}

.btn-accent {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

.btn-accent:hover {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

.btn-sm {
  min-height: 30px;
  padding: 0 0.6rem;
  font-size: 0.74rem;
  border-radius: 8px;
}

/* Quien controla la conversacion — nunca los dos activos a la vez (c.mode es
   la unica fuente de verdad, ver setMode() en chat.js): el que manda se ve en
   verde, el otro queda gris/neutro. Mismo criterio para IA y Humano, y mismo
   criterio en escritorio y movil (ver responsive.css). */
.btn-mode-ai,
.btn-mode-human {
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
}
.btn-mode-ai.active,
.btn-mode-human.active {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(16, 185, 129, 0.16);
  font-weight: 600;
}

.chats-layout {
  display: grid;
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr) minmax(300px, 320px);
  height: calc(100vh - 130px);
  min-height: 560px;
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.chats-layout.insight-collapsed {
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr) 0;
}

.chats-layout.insight-collapsed .chat-insight {
  display: none;
}

.chat-list-pane {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  border-right: 1px solid rgba(var(--border-rgb), 0.8);
  background: var(--panel);
  min-width: 0;
  min-height: 0;
}

.chat-list-header {
  padding: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.chat-list-header h2 {
  font-size: 1rem;
}

.chat-list-header .hint {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
}

.chat-list-search {
  padding: 0 0.85rem 0.7rem;
}

.chat-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.85rem 0.8rem;
}

.chat-filter-row.compact {
  padding: 0;
}

/* Los chips viven dentro del menu "Filtros": ahi no llevan el padding de cabecera. */
.chat-more-filters .chat-filter-row {
  padding: 0;
}

.chat-filter-group {
  display: grid;
  gap: 0.4rem;
}

.chat-filter-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* El boton "Filtros" carga el nombre del filtro puesto, porque los chips ya no
   se ven desde la cabecera. */
.chat-filter-active-label {
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(var(--primary-rgb), 0.22);
  color: var(--primary);
}

#chat-more-filters.has-active-filter {
  border-color: rgba(var(--primary-rgb), 0.55);
  color: var(--primary);
}

.chat-more-filters {
  margin: 0 0.85rem 0.75rem;
  border: 1px solid rgba(var(--border-rgb), 0.7);
  border-radius: 12px;
  padding: 0.7rem;
  display: grid;
  gap: 0.65rem;
  background: var(--bg-soft);
}

.field-row {
  display: grid;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.chat-critical-block {
  padding: 0 0.85rem 0.6rem;
}

.chat-critical-toggle {
  width: 100%;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(120, 53, 15, 0.2);
  color: #fcd34d;
  border-radius: 11px;
  min-height: 38px;
  padding: 0 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.chat-critical-open {
  display: grid;
  gap: 0.4rem;
}

.chat-critical-list {
  display: grid;
  gap: 0.35rem;
}

.critical-item {
  border: 1px solid rgba(var(--border-rgb), 0.7);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  text-align: left;
  display: grid;
  gap: 0.18rem;
  cursor: pointer;
}

.critical-item span {
  color: var(--muted);
  font-size: 0.73rem;
}

.chat-list {
  overflow-y: auto;
  min-height: 0;
}

.chat-section-title {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.45rem 0.7rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.7);
  backdrop-filter: blur(6px);
}

.chat-section.is-collapsible .chat-section-body {
  display: none;
}

.chat-section.is-collapsible.is-open .chat-section-body {
  display: block;
}

.chat-section-title.is-toggle {
  width: 100%;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.chat-section-title.is-toggle span {
  color: #fda4af;
  font-size: 0.66rem;
}

.chat-section-title.critical {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.35);
}

.chat-section-title.normal {
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.45);
}

.chat-item {
  margin: 0.25rem 0.6rem;
  border: 1px solid rgba(var(--border-rgb), 0.55);
  border-radius: 12px;
  padding: 0.68rem 0.72rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.chat-item:hover {
  background: var(--surface-item);
  border-color: rgba(var(--primary-rgb), 0.35);
}

.chat-item.selected {
  background: rgba(var(--primary-rgb), 0.14);
  border-color: rgba(var(--primary-rgb), 0.72);
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.2);
}

.chat-item .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.chat-item .name {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item .time {
  font-size: 0.73rem;
  color: var(--muted);
  white-space: nowrap;
}

.chat-item .last {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item .meta {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chat-detail {
  display: grid;
  /* Sin esta columna explicita, la pista implicita se ajusta al contenido
     (nombres de cliente largos, mensajes largos) en vez de al ancho real del
     panel — el encabezado y los mensajes terminaban mas anchos que la
     pantalla aunque min-width:0 estuviera puesto aqui arriba. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
}

/* Estado vacio (sin chat seleccionado): un solo hijo, se centra en todo el panel en
   vez de quedar pegado en la primera fila del grid de 4 filas de arriba. */
.chat-detail:has(> .empty-state-hero),
.chat-insight:has(> .empty-state-hero) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-insight {
  border-left: 1px solid var(--border);
  background: var(--panel);
  overflow-y: auto;
  padding: 0.8rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-height: 0;
}

.insight-block {
  border: 1px solid rgba(var(--border-rgb), 0.72);
  border-radius: 12px;
  padding: 0.7rem;
  background: rgba(var(--surface-rgb), 0.45);
}

.insight-block h3 {
  font-size: 0.85rem;
  margin-bottom: 0.55rem;
}

.insight-grid {
  display: grid;
  gap: 0.45rem;
}

.insight-grid div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.5);
  padding-bottom: 0.32rem;
}

.insight-grid div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.insight-grid span { color: var(--muted); }

/* Marca de nombre sin confirmar: el que llego del perfil de WhatsApp y puede ser alias. */
.name-unverified {
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--warn);
  background: rgba(255, 178, 77, 0.16);
  vertical-align: middle;
  cursor: help;
}

.insight-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--warn);
  text-align: right;
}

/* Filas del perfil que se pueden editar en el sitio (numero de WhatsApp, origen). */
.insight-grid .insight-row {
  flex-wrap: wrap;
}

.insight-edit {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.35rem;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.insight-edit:hover,
.insight-edit:focus-visible {
  opacity: 1;
}

.insight-inline-editor {
  flex: 0 0 100%;
  display: grid;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.insight-inline-input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
}

.insight-inline-actions {
  display: flex;
  gap: 0.35rem;
}

.insight-inline-error {
  margin: 0;
  font-size: 0.72rem;
  color: var(--danger);
}

.insight-list {
  list-style: none;
  display: grid;
  gap: 0.35rem;
  font-size: 0.8rem;
}

.insight-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.field-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.field-inline select {
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  padding: 0 0.4rem;
  font-size: 0.76rem;
}

.insight-actions {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.module-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.chat-toolbar {
  grid-template-columns: 220px 1fr;
  align-items: center;
}

.goals-progress {
  display: grid;
  gap: 0.55rem;
}

.goal-item {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: rgba(var(--surface-rgb), 0.5);
}

.goal-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}

.goal-bar {
  height: 8px;
  background: rgba(var(--border-rgb), 0.7);
  border-radius: 999px;
  overflow: hidden;
}

.goal-bar div {
  height: 100%;
  /* El degradado se queda dentro del acento: mezclarlo con --info metía azul. */
  background: linear-gradient(90deg, var(--primary), var(--primary-warm));
}

.status-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.operations-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.ops-card {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.65rem;
  background: rgba(var(--surface-rgb), 0.55);
}

.ops-card h4 {
  font-size: 0.84rem;
  margin-bottom: 0.45rem;
}

.ops-metrics {
  display: grid;
  gap: 0.2rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.ops-capacity {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--border-rgb), 0.75);
}

.ops-capacity div {
  height: 100%;
  background: linear-gradient(90deg, var(--ok), var(--warn), var(--danger));
}

.board-card {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.6rem;
  display: grid;
  gap: 0.15rem;
  background: rgba(var(--surface-rgb), 0.5);
}

.board-card span { color: var(--muted); font-size: 0.74rem; }
.board-card strong { font-size: 1.05rem; }
.board-card small { color: var(--muted); font-size: 0.72rem; }

.board-card.status-pending_payment { border-color: rgba(245, 158, 11, 0.45); }
.board-card.status-paid,
.board-card.status-confirmed { border-color: rgba(16, 185, 129, 0.45); }
.board-card.status-cancelled { border-color: rgba(239, 68, 68, 0.45); }

.search-input {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--text);
  padding: 0 0.75rem;
}

.module-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.reservations-filter-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(120px, 0.55fr) repeat(3, minmax(140px, 0.95fr)) auto auto;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

/* En escritorio esto es invisible al layout: sus hijos (fecha, los 4 selects,
   eliminar, limpiar filtros) vuelven a ser items directos del grid de arriba,
   en el mismo orden de siempre — cero cambio visual. Solo en movil se
   convierte en un panel real que se abre con el boton "Filtros" (ver
   @media(max-width:980px) en responsive.css). */
.reservations-more-filters {
  display: contents;
}

.reservations-filters-toggle {
  display: none;
}

.reservations-date-wrap {
  position: relative;
}

.reservations-date-popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 18;
  min-width: 230px;
  border: 1px solid rgba(var(--border-rgb), 0.85);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.55);
  padding: 0.6rem;
  display: grid;
  gap: 0.38rem;
}

.reservations-date-popover label {
  font-size: 0.74rem;
  color: var(--muted);
}

.reservations-date-popover .search-input {
  min-height: 36px;
}

.reservations-date-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-danger {
  border-color: rgba(239, 68, 68, 0.6);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.22);
}

.btn-danger:hover {
  border-color: rgba(239, 68, 68, 0.85);
}

.reservations-bulk-actions {
  margin-bottom: 0.65rem;
  border: 1px dashed rgba(239, 68, 68, 0.45);
  border-radius: 12px;
  padding: 0.52rem 0.6rem;
  background: rgba(127, 29, 29, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.bulk-count {
  font-size: 0.8rem;
  color: #fecaca;
  font-weight: 600;
}

.reservations-select-col {
  width: 42px;
  text-align: center;
}

.reservations-select-col input {
  width: 16px;
  height: 16px;
}

.metric-card {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  background: rgba(var(--surface-rgb), 0.55);
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0.55rem;
  align-items: center;
}

.metric-card .metric-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  background: var(--bg-soft);
}

.metric-card p {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.1rem;
}

.metric-card strong {
  font-size: 1.02rem;
}

.metric-card-cyan { border-color: rgba(var(--primary-rgb), 0.55); }
.metric-card-sky { border-color: rgba(var(--primary-rgb), 0.35); }
.metric-card-amber { border-color: rgba(255, 178, 77, 0.55); }
.metric-card-green { border-color: rgba(52, 211, 153, 0.5); }

.reservation-module-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.reservation-status-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.15rem 0.48rem;
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
}

.status-res-pending_payment {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.status-res-new {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.status-res-paid {
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.12);
}

.status-res-confirmed {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.12);
}

.status-res-assigned {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.12);
}

.status-res-processing {
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.12);
}

.status-res-en_route {
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.12);
}

.status-res-completed {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.58);
  background: rgba(34, 197, 94, 0.14);
}

.status-res-delivered {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.58);
  background: rgba(34, 197, 94, 0.14);
}

.status-res-cancelled {
  color: #fda4af;
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
}

.status-inv-disponible {
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.12);
}

.status-inv-stock_bajo {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.status-inv-agotado {
  color: #fda4af;
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
}

.inventory-row {
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.18));
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.55rem;
}

.inventory-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.inventory-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.inventory-movements-list {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  max-height: 180px;
  overflow-y: auto;
}

.inventory-movements-list div {
  padding: 0.2rem 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
}

.catalog-card-stock-badge {
  font-size: 0.7rem;
}

.insight-list-note {
  border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
  padding: 0.4rem 0;
}

.insight-list-note p {
  margin: 0 0 0.2rem;
}

.status-com-estimated {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.12);
}

.status-com-receivable {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.status-com-earned {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.status-com-waiting_response {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.status-com-confirmed_delivered {
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.58);
  background: rgba(34, 197, 94, 0.14);
}

.status-com-needs_human {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
}

.status-com-no_response {
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.12);
}

.status-com-stopped {
  color: var(--muted);
  border-color: rgba(var(--border-rgb), 0.45);
  background: rgba(var(--border-rgb), 0.12);
}

.status-com-pending {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.status-com-paid {
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.58);
  background: rgba(34, 197, 94, 0.14);
}

.status-com-void {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
}

.status-alert-normal {
  color: var(--muted);
  border-color: rgba(var(--border-rgb), 0.45);
  background: rgba(var(--border-rgb), 0.12);
}

.status-alert-attention {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}

.status-alert-requires_human {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
}

.cell-primary {
  font-weight: 600;
  line-height: 1.2;
}

.cell-secondary {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 0.08rem;
}

.col-commission {
  color: var(--primary);
  font-weight: 600;
}

.reservations-pagination {
  margin-top: 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.78rem;
  flex-wrap: wrap;
}

.pager-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.pager-current {
  min-width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.2);
  color: #cffafe;
  display: grid;
  place-items: center;
  font-weight: 600;
}

.pager-size {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pager-size select {
  min-height: 30px;
}

/* 12 columnas explicitas en vez de auto-fit: con auto-fit, cada tarjeta sin
   contenido pesado (Identidad visual, Operacion, Sonidos...) reclamaba su
   propio ancho minimo y todas terminaban apretadas en una sola fila en
   pantallas anchas, mientras que Usuarios de la empresa (con tabla) quedaba
   igual de angosta que las demas y su tabla se cortaba. Con columnas fijas,
   cada tarjeta pide el ancho que su contenido realmente necesita via
   grid-column (span-6/wide-block), y las que no lo piden caen 3 por fila. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
}
.settings-grid > .insight-block { grid-column: span 4; }
.settings-grid > .insight-block.span-6 { grid-column: span 6; }
/* Mayor especificidad que la regla de arriba (3 clases vs 2), para que
   wide-block/templates-block sigan ganando el ancho completo dentro de
   settings-grid — sin esto, "span 4" les ganaba por venir despues en cascada
   con la misma especificidad de .wide-block sola. */
.settings-grid > .insight-block.wide-block,
.settings-grid > .insight-block.templates-block { grid-column: 1 / -1; }

/* Estado del sistema se oculta por completo para cualquier negocio que no
   sea Bazar A&R (ver session.js) — con un span fijo, Tu agente y Sonidos se
   quedaban repartiendo mal las 12 columnas cuando esa tercera tarjeta falta.
   Este subgrid propio (mismo patron auto-fit que ya usaba todo el panel
   antes) se acomoda solo sin importar si hay 2 o 3 tarjetas adentro. */
.settings-grid > .settings-subgrid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
}

.field-label {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0.55rem 0 0.25rem;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  font-size: 0.82rem;
}

/* Fila de un evento de notificacion: checkbox activar/desactivar + escuchar
   + subir sonido propio + restaurar (ver index.html #sound-event-list). */
.sound-event-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.sound-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--border-rgb), 0.6);
  background: rgba(var(--surface-rgb), 0.4);
}
.sound-event-row .switch-row { margin: 0; }
.sound-event-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.sound-event-actions .btn {
  min-height: 30px;
  padding: 0 0.55rem;
  font-size: 0.76rem;
  position: relative;
}
.sound-event-actions label.btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.sound-preview-btn.playing {
  color: var(--primary);
  border-color: var(--primary);
}
.sound-event-row.has-custom-sound .sound-reset-btn { display: inline-flex; }
.sound-event-row.has-custom-sound { border-color: rgba(255, 122, 69, 0.5); }

.color-input {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.55);
  padding: 0.25rem;
}

.mini-kpi {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.45rem 0.55rem;
  background: rgba(var(--surface-rgb), 0.5);
  display: grid;
  gap: 0.2rem;
}

.mini-kpi span {
  color: var(--muted);
  font-size: 0.68rem;
}

.mini-kpi strong {
  font-size: 0.88rem;
}

.dashboard-sendbox {
  display: grid;
  gap: 0.55rem;
}

.empty-state {
  margin: auto;
  color: var(--muted);
  text-align: center;
  padding: 2rem;
}

.empty-state-hero {
  margin: auto;
  text-align: center;
  padding: 2rem;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-state-hero-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  color: var(--primary);
}

.empty-state-hero-icon svg {
  width: 40px;
  height: 40px;
}

.empty-state-hero h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.4rem;
}

.empty-state-hero p {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Cabecera del chat, version escritorio — igual que siempre (nombre + telefono,
   etapa, modo, asignar operador, eliminar). La version compacta de movil (solo
   nombre + IA/Humano/Resumen) es un marcado aparte, ver renderChatDetail() y
   el bloque @media(max-width:980px) mas abajo — nunca coexisten, se elige uno
   segun isMobileViewport() al renderizar. */
.chat-header {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.75);
  background: var(--bg-soft);
}

.chat-title-wrap {
  display: grid;
  min-width: 0;
}

.chat-back-btn {
  display: none;
}

.chat-title-wrap strong {
  font-size: 0.96rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-title-wrap span {
  color: var(--muted);
  font-size: 0.74rem;
}

.chat-header-tags {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.chat-header .actions {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chat-header .actions .btn,
.chat-header .actions select {
  min-height: 32px;
}

/* Nombre del cliente en la version compacta de movil — flex-basis:0 (no
   "auto") es lo que de verdad fuerza el encogimiento con nombres largos: con
   "auto" el navegador ancla el ancho al contenido y nunca cede, sin importar
   min-width:0 (mismo caso que summary-kpi-value). */
.chat-header-name {
  flex: 1 1 0%;
  min-width: 0;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.chat-summary-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

select,
.chat-header select,
td select {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--text);
  padding: 0 0.55rem;
}

.messages {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 0.8rem 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.msg-row {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  position: relative;
  align-items: flex-end;
  box-sizing: border-box;
}

.msg-row-client {
  justify-content: flex-start;
}

.msg-row-outbound {
  justify-content: flex-end;
}

.msg-row-system {
  justify-content: center;
}

.msg {
  width: fit-content;
  max-width: min(72%, 680px);
  border: 1px solid rgba(var(--border-rgb), 0.72);
  border-radius: 15px;
  padding: 0.5rem 0.8rem;
  line-height: 1.4;
  font-size: 0.9rem;
  font-weight: 400;
  position: relative;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
}

.msg .who {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.05rem 0.3rem;
  font-size: 0.62rem;
  color: var(--ai);
  background: rgba(34, 197, 94, 0.15);
  margin-bottom: 0.1rem;
}

.msg .who-human {
  color: var(--human);
  background: rgba(249, 115, 22, 0.2);
}

.msg-content {
  color: var(--text);
  /* pre-wrap va aqui, no en .msg: en .msg hacia que la indentacion del HTML
     generado se dibujara como lineas en blanco y inflaba cada burbuja. */
  white-space: pre-wrap;
  margin: 0;
}

.msg-time {
  display: inline-block;
  font-size: 0.66rem;
  color: var(--muted);
}

.msg-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.22rem;
}

.msg-client {
  align-self: flex-start;
  background: var(--bg-soft);
}

.msg-agent {
  align-self: flex-end;
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.45);
}

.msg-human {
  align-self: flex-end;
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.45);
}

/* Adjuntos dentro de la burbuja */
.msg-attachment-image {
  display: block;
  margin-bottom: 0.35rem;
  border-radius: 10px;
  overflow: hidden;
  max-width: 260px;
}

.msg-attachment-image img {
  display: block;
  width: 100%;
  height: auto;
}

.msg-attachment-audio {
  display: block;
  width: 240px;
  max-width: 100%;
  margin-bottom: 0.35rem;
}

.msg-attachment-video {
  display: block;
  max-width: 260px;
  max-height: 260px;
  border-radius: 10px;
  margin-bottom: 0.35rem;
}

.msg-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--border-rgb), 0.7);
  background: rgba(var(--border-rgb), 0.16);
  color: var(--text);
  text-decoration: none;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.msg-attachment-file:hover {
  border-color: rgba(var(--primary-rgb), 0.55);
}

/* Franja de vista previa, entre los mensajes y la barra de escritura */
.attachment-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0.85rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.08);
}

.attachment-preview img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}

.attachment-preview-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(var(--border-rgb), 0.25);
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.attachment-preview-info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.attachment-preview-info strong {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-info span {
  font-size: 0.7rem;
  color: var(--muted);
}

.msg-system-event {
  max-width: 72%;
  text-align: center;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--border-rgb), 0.75);
  background: rgba(var(--surface-rgb), 0.75);
  display: grid;
  gap: 0.1rem;
}

.msg-system-event small {
  color: var(--muted);
  font-size: 0.65rem;
}

.timeline-list {
  display: none;
}

.timeline-compact {
  display: grid;
  gap: 0.45rem;
  position: relative;
}

.timeline-stage {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

.timeline-stage:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: -8px;
  width: 1px;
  background: rgba(var(--border-rgb), 0.9);
}

.timeline-point {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--border-rgb), 0.95);
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-size: 0.52rem;
  color: var(--muted);
}

.timeline-stage h4 {
  font-size: 0.78rem;
  font-weight: 600;
}

.timeline-stage time {
  font-size: 0.69rem;
  color: var(--muted);
  text-align: right;
}

.timeline-stage-completed .timeline-point {
  border-color: rgba(16, 185, 129, 0.62);
  background: rgba(16, 185, 129, 0.18);
  color: #86efac;
}

.timeline-stage-current .timeline-point {
  border-color: rgba(245, 158, 11, 0.6);
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}

.timeline-stage-pending .timeline-point {
  border-color: rgba(var(--border-rgb), 0.6);
  background: rgba(var(--border-rgb), 0.35);
  color: var(--muted);
}

.timeline-more {
  margin-top: 0.55rem;
}

.timeline-note {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: #fbbf24;
}

.chat-input {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 0.45rem;
  align-items: end;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid rgba(var(--border-rgb), 0.75);
  background: var(--bg-soft);
}

.send-error-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.6rem;
  color: #fca5a5;
  font-size: 0.75rem;
  border-top: 1px solid rgba(127, 29, 29, 0.35);
}

.chat-input textarea,
.inline-form input:not([type="checkbox"]):not([type="radio"]),
.modal-box input:not([type="checkbox"]):not([type="radio"]),
.modal-box textarea {
  min-height: 40px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  font-family: inherit;
}

.field-wrap input:not([type="checkbox"]):not([type="radio"]),
.field-wrap select,
.field-wrap textarea {
  min-height: 40px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  font-family: inherit;
}

.field-wrap textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.4;
}

.field-wrap label {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 0.32rem;
}

.chat-input textarea {
  max-height: 132px;
  resize: none;
  line-height: 1.4;
}

.template-wrap {
  position: relative;
}

.template-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 170px;
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  background: var(--panel);
  padding: 0.3rem;
  display: grid;
  gap: 0.2rem;
  z-index: 5;
}

.template-menu-title {
  padding: 0.3rem 0.5rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.template-menu button {
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  cursor: pointer;
}

.template-menu button:hover {
  background: var(--surface-item);
}

.send-btn {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.icon-square {
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 1rem;
}

.chat-loading-skeleton,
.skeleton-item {
  display: grid;
  gap: 0.45rem;
}

.chat-loading-skeleton {
  padding: 1rem;
}

.line {
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--border-rgb), 0.38), rgba(var(--border-rgb), 0.8), rgba(var(--border-rgb), 0.38));
  background-size: 200% 100%;
  animation: pulseLine 1.3s ease infinite;
}

.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-70 { width: 70%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }

@keyframes pulseLine {
  0% { background-position: 180% 0; }
  100% { background-position: -20% 0; }
}

.modal-box textarea {
  min-height: 104px;
  padding-top: 0.6rem;
}

/* Carta magna del negocio (Configuracion > Agente de IA): puede ser bastante
   larga (identidad + envio + pago + cancelaciones + ...), asi que tiene su
   propio alto fijo generoso con scroll interno en vez de crecer sin limite
   o quedar apretada — ver index.html #fase9-agent-instructions. */
.agent-instructions-textarea {
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', monospace;
  font-size: 0.82rem;
  line-height: 1.55;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.15rem 0.42rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.badge-ai { color: var(--ai); background: rgba(16, 185, 129, 0.14); }
.badge-human { color: var(--human); background: rgba(249, 115, 22, 0.14); }
.badge-stage { color: var(--primary); background: rgba(var(--primary-rgb), 0.14); }
.badge-hot { color: var(--danger); background: rgba(239, 68, 68, 0.14); }
.badge-warm { color: var(--warn); background: rgba(245, 158, 11, 0.14); }
.badge-cold { color: var(--muted); background: rgba(156, 163, 175, 0.14); }

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
}

th,
td {
  padding: 0.72rem;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.7);
  text-align: left;
  font-size: 0.84rem;
  white-space: nowrap;
}

th {
  color: var(--muted);
  background: var(--bg-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.68rem;
}

tr:hover td { background: var(--surface-item); }

.status-pending,
.status-pending_payment { color: var(--warn); font-weight: 600; }
.status-accepted,
.status-paid,
.status-confirmed { color: var(--ok); font-weight: 600; }
.status-cancelled,
.status-rejected { color: var(--danger); font-weight: 600; }

.inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.muted {
  color: var(--muted);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.catalog-panel {
  background:
    radial-gradient(1300px 500px at 100% -20%, rgba(var(--primary-rgb), 0.08), transparent 55%),
    var(--panel);
}

.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(140px, 1fr)) auto auto;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
  align-items: center;
}

.catalog-quick-filters {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.catalog-tabs {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.catalog-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  min-height: 140px;
}

.catalog-card-v2 {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 14px;
  overflow: visible;
  background: var(--panel);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 320px;
  transition: border-color 160ms ease, transform 160ms ease;
}

.catalog-card-v2:hover {
  border-color: rgba(var(--primary-rgb), 0.55);
  transform: translateY(-1px);
}

.catalog-card-image {
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

.catalog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catalog-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  background: var(--bg-soft);
}

.catalog-card-body {
  padding: 0.6rem 0.65rem 0.55rem;
  display: grid;
  gap: 0.38rem;
  grid-template-rows: auto auto auto 1fr;
}

.catalog-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.catalog-card-head h3 {
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-card-category {
  color: #fbbf24;
  font-size: 0.76rem;
}

.catalog-card-summary {
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2em;
}

.catalog-card-meta {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.catalog-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.1rem;
}

.price-rows-list {
  display: grid;
  gap: 0.6rem;
}

.price-rows-help {
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  background: rgba(var(--primary-rgb), 0.08);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.6rem;
  display: grid;
  gap: 0.35rem;
}

.price-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.price-row-item {
  border: 1px solid rgba(var(--border-rgb), 0.85);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(var(--surface-rgb), 0.45);
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
}

.price-row-field-hint {
  margin-top: 0.25rem;
}

.catalog-menu-wrap {
  position: relative;
}

.catalog-card-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 170px;
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  background: var(--panel);
  display: grid;
  padding: 0.3rem;
  z-index: 16;
}

.catalog-menu-action {
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}

.catalog-menu-action:hover,
.catalog-menu-action:focus-visible {
  background: var(--surface-item);
  outline: none;
}

.catalog-menu-action.danger {
  color: #fca5a5;
}

.status-cat-active {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.16);
}

.status-cat-inactive {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.14);
}

.status-cat-draft {
  color: var(--muted);
  border-color: rgba(var(--border-rgb), 0.8);
  background: rgba(var(--border-rgb), 0.3);
}

.catalog-detail-hero {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.65rem;
}

.catalog-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-detail-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.catalog-detail-item {
  border: 1px solid rgba(var(--border-rgb), 0.75);
  border-radius: 10px;
  padding: 0.45rem 0.5rem;
  background: rgba(var(--surface-rgb), 0.35);
  display: grid;
  gap: 0.25rem;
}

.catalog-detail-item span {
  color: var(--muted);
  font-size: 0.72rem;
}

.catalog-detail-item strong {
  font-size: 0.84rem;
  line-height: 1.25;
}

.catalog-detail-text-block {
  margin-bottom: 0.62rem;
}

.catalog-detail-text-block:last-child {
  margin-bottom: 0;
}

.catalog-detail-text-block h4 {
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.catalog-detail-text-block p {
  font-size: 0.82rem;
  line-height: 1.45;
}

.catalog-price-table-wrap {
  overflow-x: auto;
}

.catalog-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.catalog-price-table th,
.catalog-price-table td {
  text-align: left;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.75);
}

.catalog-price-table th {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.catalog-price-table tbody tr:last-child td {
  border-bottom: none;
}

.excursion-form-grid {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.excursion-form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.excursion-form-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.catalog-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

.catalog-gallery figure {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-soft);
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem;
}

.catalog-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.catalog-pagination {
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.operators-toolbar {
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
}

.brand-logo-preview-wrap {
  border: 1px dashed rgba(var(--border-rgb), 0.85);
  border-radius: 12px;
  padding: 0.65rem;
  min-height: 82px;
  display: grid;
  place-items: center;
  background: rgba(var(--surface-rgb), 0.4);
}

.settings-logo-preview {
  width: 100%;
  max-height: 80px;
  object-fit: contain;
}

.settings-logo-placeholder {
  color: var(--muted);
  font-size: 0.76rem;
}

.catalog-card {
  background: rgba(var(--surface-rgb), 0.58);
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 14px;
  padding: 0.7rem;
}

.catalog-card.inactive {
  opacity: 0.72;
  border-color: rgba(239, 68, 68, 0.45);
}

.catalog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
}

.switch-row.compact {
  margin: 0;
  font-size: 0.72rem;
}

.catalog-meta-grid {
  margin: 0.45rem 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.catalog-meta-grid div {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 10px;
  padding: 0.42rem;
  display: grid;
  gap: 0.18rem;
}

.catalog-meta-grid span {
  color: var(--muted);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.catalog-meta-grid strong {
  font-size: 0.76rem;
}

.catalog-detail {
  margin-top: 0.45rem;
  border-top: 1px solid rgba(var(--border-rgb), 0.7);
  padding-top: 0.45rem;
}

.catalog-card h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }

.catalog-card .price {
  color: var(--primary);
  font-size: 1.03rem;
  font-weight: 700;
  margin: 0.3rem 0 0.45rem;
}

.catalog-card p {
  color: var(--muted);
  font-size: 0.81rem;
  margin-bottom: 0.45rem;
  line-height: 1.45;
}

.catalog-card .duration {
  color: var(--muted);
  font-size: 0.75rem;
}

.empty-state-block p { color: var(--muted); max-width: 560px; }

.finance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}

.finance-alerts {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.75rem;
  background: rgba(var(--surface-rgb), 0.5);
}

.finance-alerts h3 {
  font-size: 0.85rem;
  margin-bottom: 0.45rem;
}

.insight-recommendations {
  display: grid;
  gap: 0.7rem;
}

.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(480px, 94vw);
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: -16px 0 40px rgba(2, 6, 23, 0.45);
}

.side-drawer.hidden { display: none; }

/* Efecto genio (version sutil): el panel "sale" del boton que lo abrio con una
   curva leve, casi sin deformarse. El punto de origen (transform-origin) se
   calcula en JS a partir de donde se hizo clic. */
@keyframes drawerGenieIn {
  0%   { clip-path: inset(94% 4% 0% 78% round 40px); transform: scale(0.9); opacity: 0.4; }
  55%  { clip-path: inset(-4% -2% -4% -2% round 14px); transform: scale(1.02); opacity: 1; }
  75%  { transform: scale(0.99); }
  100% { clip-path: inset(0% 0% 0% 0% round 0px); transform: scale(1); }
}

.side-drawer.genie-in {
  animation: drawerGenieIn 0.5s cubic-bezier(.2, .9, .25, 1.05) both;
}

.side-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.side-drawer-content {
  overflow-y: auto;
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.notification-list {
  display: grid;
  gap: 0.55rem;
}

.favorite-list {
  display: grid;
  gap: 0.55rem;
  margin: 0.65rem 0;
}

.favorite-item {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  background: rgba(var(--surface-rgb), 0.5);
}

.favorite-actions {
  display: flex;
  gap: 0.35rem;
}

.alert-list {
  display: grid;
  gap: 0.55rem;
}

.alert-item {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
  background: rgba(var(--surface-rgb), 0.55);
}

.alert-item p {
  margin-top: 0.35rem;
  font-size: 0.82rem;
}

.alert-item.warn {
  border-color: rgba(245, 158, 11, 0.45);
}

.alert-item.error {
  border-color: rgba(239, 68, 68, 0.55);
}

.audit-list {
  display: grid;
  gap: 0.55rem;
  max-height: 320px;
  overflow: auto;
}

.audit-item {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(var(--surface-rgb), 0.45);
}

.notification-item {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: rgba(var(--surface-rgb), 0.55);
  border-radius: 12px;
  padding: 0.65rem;
}

.notification-item.unread {
  border-color: rgba(var(--primary-rgb), 0.55);
}

.notification-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

body.compact-chat .msg {
  font-size: 0.82rem;
  padding: 0.45rem 0.62rem;
}

body.compact-chat .messages {
  gap: 0.4rem;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden,
.hidden { display: none; }

.modal-box {
  width: min(540px, 94vw);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 1.2rem;
}

.modal-box h2 { margin-bottom: 0.45rem; }

.modal-box label {
  margin: 0.8rem 0 0.35rem;
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}

.modal-actions {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
}

/* Guia de entrevista para la carta magna del agente (por negocio, ver
   index.html #interview-guide-modal) — modal mas ancho y con scroll interno
   porque cada categoria trae varias preguntas con su contexto de apoyo. */
.modal-box-wide {
  width: min(680px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
}

.interview-progress {
  margin: 0.7rem 0 0.9rem;
}

.interview-progress-label,
#interview-progress-label {
  font-size: 0.76rem;
  color: var(--muted);
}

.interview-progress-bar {
  margin-top: 0.35rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--border-rgb), 0.7);
  overflow: hidden;
}

.interview-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 180ms ease;
}

.interview-questions-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.interview-question-card {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: rgba(var(--surface-rgb), 0.55);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}

.interview-question-text {
  font-weight: 600;
  color: var(--text);
}

.interview-question-hint {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.quick-action-card {
  min-height: 52px;
  border: 1px solid rgba(var(--border-rgb), 0.8);
  background: rgba(var(--surface-rgb), 0.55);
  color: var(--text);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  text-align: left;
  cursor: pointer;
}

.quick-action-card:hover {
  border-color: var(--primary);
}

.help-grid {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.5rem;
}

.help-grid div {
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  background: rgba(var(--surface-rgb), 0.45);
}

.help-grid strong {
  font-size: 0.78rem;
  color: var(--primary);
}

.help-grid span {
  color: var(--muted);
  font-size: 0.78rem;
}

.sim-response {
  margin-top: 0.9rem;
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 12px;
  padding: 0.75rem;
  white-space: pre-wrap;
  font-size: 0.83rem;
}

.wa-badge {
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 0.37rem 0.7rem;
  font-size: 0.75rem;
}

.wa-connected { color: var(--ok); border-color: var(--ok); background: rgba(16, 185, 129, 0.1); }
.wa-qr { color: var(--warn); border-color: var(--warn); background: rgba(245, 158, 11, 0.1); }
.wa-disconnected { color: var(--danger); border-color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.wa-off { color: var(--muted); }

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  max-width: 360px;
  border-radius: 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.45);
  background: var(--panel);
  padding: 0.75rem 0.95rem;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   Editor de plantillas rapidas del chat
   --------------------------------------------------------------------------- */
.templates-block,
.wide-block { grid-column: 1 / -1; }

.template-editor {
  display: grid;
  gap: 0.55rem;
  margin: 0.6rem 0;
}

.template-card {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
  background: var(--bg-soft);
  border: 1px solid rgba(var(--border-rgb), 0.7);
  border-radius: 10px;
  padding: 0.6rem;
}

.template-card input,
.template-card textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid rgba(var(--border-rgb), 0.8);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
}

.template-card input { font-weight: 600; }

.template-card textarea {
  resize: vertical;
  min-height: 62px;
  line-height: 1.45;
}

.template-remove {
  background: none;
  border: 1px solid rgba(var(--border-rgb), 0.7);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
  line-height: 1;
}

.template-remove:hover {
  border-color: rgba(209, 58, 92, 0.6);
  color: var(--danger);
}

@media (max-width: 900px) {
  .template-card { grid-template-columns: 1fr auto; }
  .template-card textarea { grid-column: 1 / -1; }
}

/* Compact orders toolbar in both desktop and mobile layouts. */
#tab-reservations .reservations-filter-row { grid-template-columns:minmax(0,1fr) auto; }
#tab-reservations .reservations-filters-toggle { display:inline-flex; }
#tab-reservations .reservations-more-filters { display:none; grid-column:1 / -1; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--panel); }
#tab-reservations .reservations-more-filters.open { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
#tab-reservations .reservations-more-filters select { flex:1 1 160px; min-width:0; }
#tab-reservations #reservation-status-chips, #tab-reservations #reservation-module-tabs { display:none; }
#tab-reservations .metric-card { background:var(--panel); border-color:var(--border); box-shadow:none; }
#tab-reservations .metric-icon { display:none; }
#tab-reservations #reservations-table td span { background:transparent; border:0; color:var(--text); }
#tab-reservations #reservations-table td span::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--muted); margin-right:6px; vertical-align:middle; }

@media (min-width:981px) {
  #tab-reservations .reservations-filter-row { grid-template-columns:minmax(240px, 50%) max-content; justify-content:start; }
  #tab-reservations .reservations-more-filters { grid-column:1 / -1; }
}

/* Readable order overview typography. */
#reservations-table td { font-size:1rem; line-height:1.45; }
#reservations-table th { font-size:.85rem; }
#reservations-table .cell-primary { font-size:1rem; }
#reservations-table .cell-secondary, #reservations-table small { font-size:.85rem; }
#reservations-table td span, #reservations-table .btn { font-size:.9rem; }
#tab-reservations .metric-card p { font-size:.9rem; }
#tab-reservations .metric-card strong { font-size:1.2rem; }