:root {
  color-scheme: dark;
  --bg: #07090d;
  --panel: #10141c;
  --panel-2: #151b25;
  --panel-3: #1b2330;
  --ink: #f5f7fb;
  --muted: #8f9baa;
  --placeholder: rgba(143, 155, 170, 0.72);
  --soft: #b9c2cf;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --green: #8dffbe;
  --green-2: #36e88f;
  --purple: #a88cff;
  --blue: #5bc8ff;
  --amber: #ffc95e;
  --red: #ff5f72;
  --radius: 8px;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Las vistas contenidas ocupan el alto real del navegador. */
  --app-viewport-height: 100vh;
  /* La raíz crece con moderación: legible en ultrawide sin inflar 1080p. */
  --type-root-size: clamp(15px, 0.12vw + 12.75px, 18px);
  --content-title-size: clamp(1.15rem, 1rem + 0.28vw, 1.7rem);
  --type-display: clamp(2rem, 1.45rem + 0.52vw, 2.7rem);
  --type-page: clamp(1.55rem, 1.25rem + 0.38vw, 2.5rem);
  --type-label: clamp(0.75rem, 0.71rem + 0.08vw, 0.88rem);
  --type-meta: clamp(0.8rem, 0.75rem + 0.09vw, 0.95rem);
}

/* ============================================================
   LITE · ATENCIÓN PUNTUAL
   El propietario solo ve alertas, casos tomados y aperturas directas.
   ============================================================ */

.lite-attention-view {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}

.lite-attention-summary {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
}

.lite-attention-summary > .lite-attention-filter {
  --tab-accent: var(--green);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

/* Mismo color que su cápsula en la lista (.lite-attention-kind), para que
   el filtro y las etiquetas que filtra se lean como el mismo estado. */
.lite-attention-summary > .lite-attention-filter.automatic {
  --tab-accent: var(--info);
}

.lite-attention-summary > .lite-attention-filter.handling {
  --tab-accent: var(--t-s1-01);
}

.lite-attention-summary > .lite-attention-filter.attention {
  --tab-accent: var(--t-s1-02);
}

:root[data-theme="light"] .lite-attention-summary > .lite-attention-filter.handling {
  --tab-accent: var(--t-s1-03);
}

:root[data-theme="light"] .lite-attention-summary > .lite-attention-filter.attention {
  --tab-accent: var(--t-s1-04);
}

.lite-attention-summary > .lite-attention-filter:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--green);
  outline-offset: -3px;
}

.lite-attention-filter-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.lite-attention-filter-icon .svg-icon {
  width: 15px;
  height: 15px;
  background: currentColor;
}

.lite-attention-filter-copy {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lite-attention-filter-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  place-items: center;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  font-weight: 700;
  line-height: 1;
}

.lite-attention-shell {
  display: grid;
  grid-template-columns: clamp(300px, 30%, 380px) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lite-attention-list-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--t-s1-05), transparent 30%),
    var(--t-s1-06);
}

.lite-attention-list-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}

.lite-attention-list-panel > header p {
  margin: 0 0 3px;
  color: var(--green);
  font-size: var(--type-label);
  font-weight: 850;
  letter-spacing: 0.085em;
}

.lite-attention-list-panel > header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.lite-attention-list-panel > header > span,
.lite-attention-list-panel > header > button {
  display: grid;
  min-width: 29px;
  min-height: 29px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--t-s1-07);
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 800;
}

.lite-attention-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 10px 11px 4px;
}

.lite-attention-search .svg-icon {
  position: absolute;
  left: 11px;
  z-index: 1;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}

.lite-attention-search input {
  width: 100%;
  min-height: 39px;
  padding: 0 11px 0 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s1-08);
  color: var(--ink);
  font-size: var(--type-meta);
}

.lite-attention-list {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 7px;
  padding: 7px 10px 11px;
  overflow-y: auto;
  scrollbar-color: var(--t-s1-09) var(--t-s1-10);
  scrollbar-width: thin;
}

.lite-attention-row {
  position: relative;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  min-height: 112px;
  padding: 12px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s1-11);
  color: var(--ink);
  text-align: left;
}

.lite-attention-row:hover,
.lite-attention-row.active {
  border-color: var(--t-s1-12);
  background: var(--t-s1-13);
}

.lite-attention-row.attention.active {
  border-color: var(--t-s1-14);
  background: var(--t-s1-15);
  box-shadow: inset 3px 0 0 var(--t-s1-16);
}

.lite-attention-row:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.lite-attention-row-index {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid var(--t-s1-17);
  border-radius: 50%;
  color: var(--green);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 900;
}

.lite-attention-row.attention .lite-attention-row-index {
  border-color: var(--t-s1-18);
  color: var(--t-s1-02);
}

.lite-attention-row-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 5px;
}

.lite-attention-row-top {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lite-attention-row-top strong,
.lite-attention-row-top small,
.lite-attention-last-message,
.lite-attention-vehicle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lite-attention-row-top strong {
  font-size: 0.9rem;
}

.lite-attention-row-top small,
.lite-attention-vehicle {
  color: var(--muted);
  font-size: var(--type-label);
}

.lite-attention-kind {
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--t-s1-19);
  color: var(--t-s1-20);
  font-style: normal;
}

.lite-attention-kind.attention {
  background: var(--t-s1-21);
  color: var(--t-s1-02);
}

.lite-attention-kind.handling {
  background: var(--t-s1-22);
  color: var(--green);
}

.lite-attention-last-message {
  color: var(--soft);
  font-size: var(--type-meta);
}

.lite-attention-empty {
  display: grid;
  min-height: 190px;
  place-content: center;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

.lite-attention-empty .svg-icon {
  width: 27px;
  height: 27px;
  margin-bottom: 10px;
  color: var(--green);
}

.lite-attention-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--type-meta);
}

.lite-chat-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  box-shadow: none;
}

.lite-chat-panel .chat-header {
  min-height: 76px;
  padding: 11px 15px;
}

.lite-chat-panel .chat-header .eyebrow {
  color: var(--green);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.lite-chat-panel .chat-control .primary-button,
.lite-chat-panel .chat-control .caution-button {
  min-height: 41px;
}

.lite-chat-panel .chat-control {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.lite-chat-action {
  display: inline-flex;
  min-height: 41px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 13px;
  color: var(--t-s1-23);
  font-weight: 800;
  cursor: pointer;
}

.lite-chat-action.quote {
  border-color: var(--t-s1-24);
  background: linear-gradient(135deg, var(--t-s1-25), var(--t-s1-26));
  box-shadow: 0 0 16px var(--t-s1-27);
}

.lite-chat-action.appointment {
  border-color: var(--t-s1-28);
  background: linear-gradient(135deg, var(--t-s1-29), var(--t-s1-30));
  box-shadow: 0 0 16px var(--t-s1-31);
}

.lite-chat-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--t-s1-32);
}

.lite-chat-facts > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 10px 13px;
  border-right: 1px solid var(--line);
}

.lite-chat-facts > span:last-child {
  border-right: 0;
}

.lite-chat-facts small {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lite-chat-facts strong {
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .lite-attention-view {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .lite-attention-shell {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .lite-attention-list-panel {
    max-height: 410px;
  }

  .lite-chat-panel {
    min-height: 620px;
  }
}

@media (max-width: 720px) {
  .lite-attention-header {
    display: grid;
  }

  .lite-chat-panel .chat-header {
    display: grid;
  }

  .lite-chat-panel .chat-control {
    width: 100%;
    align-items: stretch;
  }

  .lite-chat-facts {
    grid-template-columns: 1fr;
  }

  .lite-chat-facts > span {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .lite-chat-facts > span:last-child {
    border-bottom: 0;
  }
}

/* La calibración tipográfica global vive en visual-system.css. */

@media (prefers-reduced-motion: reduce) {
  .lite-attention-row,
  .lite-attention-summary > .lite-attention-filter {
    transition-duration: 0.001ms;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none;
}

html {
  font-size: var(--type-root-size);
  scroll-behavior: smooth;
}

body {
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  min-width: 320px;
  margin: 0;
  background:
    linear-gradient(90deg, var(--t-s1-33) 1px, transparent 1px),
    linear-gradient(var(--t-s1-34) 1px, transparent 1px),
    radial-gradient(circle at top right, var(--t-s1-19), transparent 34rem),
    var(--bg);
  background-size: 48px 48px, 48px 48px, auto;
  color: var(--ink);
}

.login-body {
  min-height: var(--app-viewport-height);
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-shell {
  width: min(100%, 440px);
}

.login-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(145deg, var(--t-s1-35), var(--t-s1-36)),
    var(--panel);
  box-shadow: var(--shadow);
  padding: 26px;
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--purple));
}

.login-brand {
  margin-bottom: 28px;
}

.login-panel .login-brand {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.login-panel .login-brand .theme-toggle-button {
  flex: 0 0 auto;
  color: var(--muted);
}

.brand-parent {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 2px;
}

.login-brand-copy {
  min-width: 0;
  width: 100%;
}

.login-brand .brand-parent {
  font-size: 1rem;
  font-weight: 700;
  color: var(--soft);
}

.setup-panel .login-business-name {
  color: var(--t-s1-37);
}

.login-business-name {
  display: block;
  margin-top: 2px;
  font-size: 29px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.login-copy p:last-child {
  margin: 14px 0 0;
  color: var(--soft);
  line-height: 1.65;
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.login-form label:not(.checkbox-line) {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-size: 0.88rem;
  font-weight: 700;
}

.setup-form.setup-form label {
  color: var(--ink);
}

.setup-form.setup-form label span {
  color: var(--ink);
}

.setup-form.setup-form label span .optional-tag {
  color: var(--muted);
  font-weight: 400;
}

.login-form .branding-field {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-size: 0.88rem;
  font-weight: 700;
}

.setup-form.setup-form .branding-field {
  color: var(--ink);
}

.setup-form.setup-form .branding-field span {
  color: var(--ink);
}

.setup-form.setup-form .branding-field span .optional-tag {
  color: var(--muted);
  font-weight: 400;
}

.login-form input {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-38);
  color: var(--ink);
  padding: 0 13px;
}

.login-form input:hover,
.login-form input:focus {
  border-color: var(--t-s1-39);
}

.login-form input::placeholder {
  color: var(--t-s1-40);
  font-weight: 400;
}

.brand-logo {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
}

.login-button {
  min-height: 48px;
  margin-top: 4px;
}

.login-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.login-forgot-link {
  justify-self: center;
  margin-top: -2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.login-forgot-link:hover {
  color: var(--soft);
  text-decoration: underline;
}

.login-error {
  margin: 0;
  border: 1px solid var(--t-s1-41);
  border-radius: var(--radius);
  background: var(--t-s1-21);
  color: var(--t-s1-42);
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.45;
}

#confirmSuccess {
  border-color: var(--t-s1-43);
  background: var(--t-s1-44);
  color: var(--green);
}

.login-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

.setup-shell {
  width: min(100%, 1080px);
}

.setup-field-full {
  grid-column: 1 / -1;
}

.setup-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: start;
}

/* [hidden] pierde contra ".setup-page { display: grid }" porque una regla de
   autor con la misma especificidad que gana al estilo por defecto del
   navegador: sin esto, los pasos 2..4 quedaban visibles debajo del paso 1. */
.setup-page[hidden] {
  display: none;
}

.schedule-shift input.setup-shift-active {
  appearance: none;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--t-s1-45);
  border-radius: 4px;
  background: var(--t-s1-46);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  flex: 0 0 16px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.schedule-shift input.setup-shift-active::after {
  content: "";
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translate(0, -1px) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 140ms ease;
}
.schedule-shift input.setup-shift-active:checked {
  border-color: var(--t-s1-47);
  background: color(srgb 0.0548235 0.266039 0.184471);
}
.schedule-shift input.setup-shift-active:checked::after {
  transform: translate(0, -1px) rotate(45deg) scale(1);
}

.setup-page > .field-help,
.setup-page > .setup-schedule,
.setup-page > .setup-config-grid,
.setup-page > .setup-summary,
.setup-page > .setup-field-wide {
  grid-column: 1 / -1;
}

.setup-page > .setup-field-two-thirds {
  grid-column: span 2;
}

.country-select {
  position: relative;
}

.country-select-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-38);
  color: var(--ink);
  padding: 0 13px;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.country-select-trigger:hover,
.country-select-trigger[aria-expanded="true"] {
  border-color: var(--t-s1-39);
}

.country-select-trigger span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-select-caret {
  flex: 0 0 auto;
  color: var(--muted);
}

.flag-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--t-s1-48);
}

.country-select-menu {
  /* position/top/left/width los pone el componente en linea (position:
     fixed, calculados desde el trigger) porque este menu vive dentro de
     un <details class="settings-details"> con overflow:hidden (para
     recortar sus esquinas redondeadas) que si no lo cortaria a la mitad
     sin importar que sea position:absolute - fixed es lo unico que
     escapa al overflow de un ancestro sin tocar ese overflow compartido. */
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.country-select-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.setup-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.setup-step {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.setup-step.active {
  border-color: var(--t-s1-49);
  color: var(--ink);
  background: var(--t-s1-44);
}

.setup-step.done {
  border-color: var(--t-s1-09);
  color: var(--green);
}

.field-help {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.phone-input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.phone-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--t-s1-50);
  color: var(--soft);
  font-weight: 700;
  white-space: nowrap;
}

.phone-input-group input {
  flex: 1 1 0%;
  min-width: 0;
  max-width: none;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.system-config-field .phone-input-group input {
  flex: 1 1 0%;
  min-width: 0;
  max-width: none;
}

.setup-config-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}

.setup-schedule {
  display: grid;
  gap: 8px;
}

.schedule-shift input[type="time"]:disabled {
  opacity: 0.4;
}

.setup-summary {
  display: grid;
  gap: 10px;
  color: var(--soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.setup-summary strong {
  color: var(--ink);
}

.setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.setup-actions .primary-button {
  min-height: 42px;
  min-width: 168px;
  margin-left: auto;
  margin-top: 0;
}

button,
input,
select {
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: var(--app-viewport-height);
  min-width: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: var(--app-viewport-height);
  padding: 60px 22px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--t-s1-51);
  backdrop-filter: blur(18px);
}

/* Alto fijo (no intrinseco): a 68px de ancho (plegado) el nombre del
   negocio envuelve a 2 lineas (vs 1 linea a lo ancho del menu desplegado),
   lo que por si solo ya deja al bloque con una altura distinta segun el
   ancho - aunque quede oculto con visibility:hidden abajo. Fijando la
   altura total (2 lineas de .brand-copy strong + 1 linea de .brand > p +
   el gap) los iconos arrancan siempre en el mismo punto, sea cual sea el
   ancho o si el texto esta visible u oculto. */
.brand {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 14px;
  height: 90px;
  margin-bottom: 30px;
  overflow: hidden;
}

.brand-copy {
  min-width: 0;
  width: 100%;
}

.brand > p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.brand-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

.sidebar-footer-ad {
  display: block;
  margin-top: auto;
  padding: 10px 14px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer-ad strong {
  display: block;
  color: var(--soft);
  font-size: 0.82rem;
  margin: 2px 0;
}

.sidebar-footer-ad small {
  display: block;
  color: var(--green);
  font-size: 0.85rem;
}

.sidebar-collapse-button {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s1-52);
  color: var(--muted);
  cursor: pointer;
}

.sidebar-collapse-button:hover {
  border-color: var(--t-s1-43);
  color: var(--ink);
}

/* Pedido explicito del usuario: este boton ahora "pinea" el menu
   expandido en vez de colapsar/expandir a mano - mismo patron de fondo
   resaltado que el resto de botones "active" de la sesion. */
.sidebar-collapse-button.active {
  border-color: var(--t-s1-53);
  background: var(--t-s1-54);
  color: var(--green);
}

.sidebar-collapse-button .svg-icon {
  width: 16px;
  height: 16px;
  transition: transform 160ms var(--ease);
}

.sidebar-collapse-button.active .svg-icon {
  transform: rotate(45deg);
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 84px minmax(0, 1fr);
}

/* Pedido explicito del usuario: el menu es "sensitivo al hover" - sin
   pin, arranca colapsado (solo iconos, reglas de abajo) y se expande
   temporalmente al pasar el mouse, empujando el contenido igual que el
   PIN (no flota encima). El hover se detecta con JS (onMouseEnter/
   onMouseLeave en sidebar.js), que avisa tanto a .sidebar (clase
   ".hover-expanded") como a App.js (clase ".sidebar-hover-expanded" en
   .app-shell). La regla real que ensancha la columna del grid vive en
   visual-system.css (capa system) - esta capa (legacy) nunca puede
   ganarle a "#root .app-shell.sidebar-collapsed" de la capa system, que
   ya fija 68px ahi independientemente de especificidad. Con
   :not(.hover-expanded) en cada regla de abajo, el estado expandido cae
   de vuelta al CSS ya existente para el menu expandido, sin duplicar
   reglas. */

.sidebar.collapsed:not(.hover-expanded) {
  padding-left: 16px;
  padding-right: 16px;
}

/* Pedido explicito del usuario: los iconos deben quedar siempre a la
   misma altura que cuando el menu esta desplegado, plegado o no. Sin
   display:none (le quita el alto a .brand y el listado se corre hacia
   arriba) - visibility:hidden oculta el texto de marca pero conserva su
   espacio reservado, así el punto de partida del listado no cambia. */
.sidebar.collapsed:not(.hover-expanded) .brand {
  visibility: hidden;
}

.sidebar.collapsed:not(.hover-expanded) .sidebar-collapse-button {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.sidebar.collapsed:not(.hover-expanded) .nav-item {
  display: flex;
  justify-content: center;
  padding: 11px;
}

.sidebar.collapsed:not(.hover-expanded) .nav-label,
.sidebar.collapsed:not(.hover-expanded) .sidebar-detail {
  display: none;
}

/* El submenu de Configuracion y el panel de sonidos solo tienen sentido
   con etiquetas visibles - se ocultan igual que .nav-label mientras esta
   colapsado y sin hover (ambos ya quedan siempre en el DOM para poder
   revelarse aca, ver sidebar.js). */
.sidebar.collapsed:not(.hover-expanded) .nav-subtree,
.sidebar.collapsed:not(.hover-expanded) .sidebar-sound-toggles,
.sidebar.collapsed:not(.hover-expanded) .sidebar-demo-reset-button,
.sidebar.collapsed:not(.hover-expanded) .sidebar-footer-ad {
  display: none;
}

.sidebar.collapsed:not(.hover-expanded) .sidebar-status {
  justify-content: center;
}

.sidebar.collapsed:not(.hover-expanded) .session-card {
  justify-items: center;
  text-align: center;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--t-s1-39);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--t-s1-55), var(--t-s1-56));
  color: var(--green);
  font-weight: 900;
}

.brand p,
.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 7px;
}

.nav-item {
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  transition: 160ms var(--ease);
}

.nav-item:hover,
.nav-item.active {
  border-color: var(--t-s1-09);
  background: var(--t-s1-22);
  color: var(--ink);
}

.sound-toggle-button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin-top: 14px;
  background: none;
  font: inherit;
  cursor: pointer;
}

.nav-tree {
  display: grid;
  gap: 6px;
}

.nav-subtree {
  display: grid;
  gap: 4px;
  padding-left: 22px;
}

.nav-subitem {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.nav-subitem:hover,
.nav-subitem.active {
  border-color: var(--t-s1-57);
  background: var(--t-s1-58);
  color: var(--ink);
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.sidebar-sound-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--soft);
}

.sound-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sound-test-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--t-s1-59);
  border-radius: 6px;
  background: var(--t-s1-60);
  color: var(--t-s1-61);
  font-size: 12px;
}

.sound-test-button:hover {
  border-color: var(--t-s1-62);
  background: var(--t-s1-63);
}

.sidebar-status small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.session-card {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-64);
}

.session-card span,
.session-card small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.session-card strong {
  display: block;
  margin: 2px 0 0;
  color: var(--ink);
}

.session-card .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

/* Colapsado, el menú es angosto: el pill con borde y "Salir" se veía
   apretado. Queda como un icono suelto, sin caja ni texto (misma idea que
   el selector de tema). */
.sidebar.collapsed:not(.hover-expanded) .session-card .ghost-button {
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0.85;
}

.sidebar.collapsed:not(.hover-expanded) .session-card .ghost-button:hover {
  border-color: transparent;
  background: none;
  box-shadow: none;
  opacity: 1;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.status-dot.ok {
  background: var(--green);
  box-shadow: 0 0 18px var(--t-s1-39);
}

.status-dot.warn {
  background: var(--amber);
}

.status-dot.danger {
  background: var(--red);
}

.main {
  /* Pedido explicito del usuario: al pasar el mouse sobre el menu
     colapsado, este pasa a position:fixed (flota, sale del flujo del
     grid) - sin una columna explicita, .main (unico item que le queda al
     grid) se auto-colocaba en la PRIMERA columna (84px, angosta), no en
     la segunda donde vive el contenido real, haciendo que "desaparezca"
     todo. Columna fija, no depende de cuantos items sigan en el flujo. */
  grid-column: 2;
  width: min(1500px, 100%);
  min-width: 0;
  padding: 24px;
}

.view {
  display: grid;
  gap: 18px;
}

.global-alert-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  position: sticky;
  top: 0;
  z-index: 20;
}

.global-alert-bar.is-empty {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.global-alert-item {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  text-align: left;
  cursor: pointer;
  flex: 0 0 auto;
}

.global-alert-item strong,
.global-alert-item span {
  white-space: nowrap;
}

.global-alert-item.warning {
  animation: global-alert-item-flash-warning 2.4s ease-in-out infinite;
}

.global-alert-item.urgent,
.global-alert-item.danger {
  animation: global-alert-item-flash-danger 1.6s ease-in-out infinite;
}

.global-alert-item.developer {
  animation: global-alert-item-flash-developer 2.8s ease-in-out infinite;
}

.global-alert-pulse {
  border-radius: 50%;
  background: currentColor;
}

.global-alert-item.warning .global-alert-pulse,
.global-alert-item.urgent .global-alert-pulse,
.global-alert-item.danger .global-alert-pulse {
  box-shadow: 0 0 0 0 currentColor;
  animation: global-alert-pulse 1.8s ease-out infinite;
}

.global-alert-countdown {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.global-alert-countdown.urgent {
  color: var(--t-s1-65);
}

@keyframes global-alert-pulse {
  0% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
    opacity: 0.66;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    opacity: 1;
  }
}

@keyframes global-alert-item-flash-warning {
  0%, 100% {
    border-color: var(--t-s1-66);
    background: var(--t-s1-67);
  }
  50% {
    border-color: var(--t-s1-68);
    background: var(--t-s1-69);
  }
}

@keyframes global-alert-item-flash-danger {
  0%, 100% {
    border-color: var(--t-s1-70);
    background: var(--t-s1-71);
  }
  50% {
    border-color: var(--t-s1-72);
    background: var(--t-s1-73);
  }
}

@keyframes global-alert-item-flash-developer {
  0%, 100% {
    border-color: var(--t-s1-74);
    background: var(--t-s1-75);
  }
  50% {
    border-color: var(--t-s1-76);
    background: var(--t-s1-77);
  }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  margin-bottom: 20px;
}

.page-header.compact {
  padding: 6px 0 2px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: var(--type-display);
  line-height: 1.05;
  letter-spacing: 0;
}

#setupTitle {
  font-size: clamp(22px, 2.5vw, 30px);
}

h2 {
  margin-bottom: 0;
  font-size: var(--content-title-size);
}

h3 {
  margin-bottom: 0;
  font-size: 15px;
}

.view:not(.conversations-view) .panel-header h2,
.view:not(.conversations-view) .panel > h2,
.view:not(.conversations-view) .module-title h1,
.view:not(.conversations-view) .client-detail h2,
.view:not(.conversations-view) .task-title h3,
.view:not(.conversations-view) .settings-details summary,
.view:not(.conversations-view) .users-section-header h2 {
  font-size: var(--content-title-size);
}


.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-78);
  box-shadow: var(--shadow);
}

.panel {
  padding: 18px;
  min-width: 0;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.system-pill,
.date-pill,
.tag,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--t-s1-79);
  color: var(--soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.tag.green {
  border-color: var(--t-s1-09);
  color: var(--green);
}

.tag.blue {
  border-color: var(--t-s1-80);
  color: var(--blue);
}

.tag.red {
  border-color: var(--t-s1-41);
  color: var(--red);
}

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

.tag.purple {
  border-color: var(--t-s1-81);
  color: var(--purple);
}

.tag.amber {
  border-color: var(--t-s1-82);
  color: var(--amber);
}

.tag.white {
  border-color: var(--t-s1-83);
  color: var(--t-s1-84);
}

.daily-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.72fr);
  gap: 18px;
}

.work-column,
.right-rail {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.task-stack {
  display: grid;
  gap: 18px;
}

.task-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-title span {
  display: grid;
  min-width: 28px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--t-s1-85);
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.task-list,
.alert-list {
  display: grid;
  gap: 9px;
}


.alert-row,
.appointment-row,
.price-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-64);
}


.alert-row strong,
.appointment-row strong {
  display: block;
  overflow-wrap: anywhere;
}

.task-name-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  overflow: visible;
}

.task-name-line strong {
  white-space: nowrap;
  overflow-wrap: normal;
}

.client-display-name {
  display: inline;
  white-space: nowrap;
}

.client-name-source {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.client-display-name .client-name-source {
  display: inline;
  margin-top: 0;
}

.task-meta {
  color: var(--muted);
  font-size: 14px;
}

.task-meta-strong {
  color: var(--ink);
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.task-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.compact-select {
  min-height: var(--action-micro-height);
  flex: 1 1 auto;
  min-width: 108px;
  max-width: 190px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 14px;
  box-shadow: inset 0 0 0 1px var(--t-s1-86);
}

.compact-select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--green);
}

.compact-select.online {
  color: var(--green);
}

.compact-select.offline {
  color: var(--muted);
}

.primary-button,
.ghost-button,
.danger-button,
.caution-button,
.text-button {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-weight: 800;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease),
    color 160ms var(--ease);
}

.primary-button {
  border: 1px solid var(--t-s1-87);
  background: linear-gradient(135deg, var(--t-s1-55), var(--t-s1-88));
  color: var(--ink);
}

.primary-button:hover {
  border-color: var(--t-s1-89);
  background: linear-gradient(135deg, var(--t-s1-17), var(--t-s1-90));
  box-shadow: 0 0 0 1px var(--t-s1-63), 0 12px 26px var(--t-s1-91);
}

.reactivate-action {
  border-color: var(--t-s1-92);
  background:
    linear-gradient(135deg, var(--t-s1-93), var(--t-s1-94)),
    var(--t-s1-95);
  color: var(--t-s1-84);
  box-shadow:
    0 0 0 1px var(--t-s1-96),
    0 0 24px var(--t-s1-97),
    inset 0 1px 0 var(--t-s1-98);
  animation: reactivateBreathe 2s ease-in-out infinite alternate;
}

.reactivate-action:hover {
  border-color: var(--t-s1-99);
  background:
    linear-gradient(135deg, var(--t-s1-100), var(--t-s1-101)),
    var(--t-s1-102);
  box-shadow:
    0 0 0 1px var(--t-s1-103),
    0 0 32px var(--t-s1-104),
    0 12px 28px var(--t-s1-105),
    inset 0 1px 0 var(--t-s1-106);
}

@keyframes reactivateBreathe {
  from {
    border-color: var(--t-s1-107);
    box-shadow:
      0 0 0 1px var(--t-s1-108),
      0 0 10px var(--t-s1-109),
      0 0 22px var(--t-s1-110),
      inset 0 1px 0 var(--t-s1-98);
  }

  to {
    border-color: var(--t-s1-111);
    box-shadow:
      0 0 0 1px var(--t-s1-112),
      0 0 34px var(--t-s1-113),
      0 0 58px var(--t-s1-114),
      inset 0 1px 0 var(--t-s1-115);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reactivate-action {
    animation: none;
  }

  .recording-dot,
  .recording-wave i {
    animation: none;
  }
}

.primary-button:disabled:hover {
  border-color: var(--t-s1-116);
  background: linear-gradient(135deg, var(--t-s1-55), var(--t-s1-88));
  box-shadow: none;
}

.ghost-button,
.text-button {
  border: 1px solid var(--line);
  background: var(--t-s1-79);
  color: var(--soft);
}

.ghost-button:hover,
.text-button:hover {
  border-color: var(--t-s1-106);
  background: var(--t-s1-117);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--t-s1-64);
}

.ghost-button:disabled:hover,
.text-button:disabled:hover {
  border-color: var(--line);
  background: var(--t-s1-79);
  color: var(--soft);
  box-shadow: none;
}

.danger-button {
  border: 1px solid var(--t-s1-118);
  background: var(--t-s1-119);
  color: var(--t-s1-120);
}

.caution-button {
  border: 1px solid var(--t-s1-121);
  background: linear-gradient(135deg, var(--t-s1-122), var(--t-s1-123));
  color: var(--t-s1-124);
}

.danger-button:hover {
  border-color: var(--t-s1-125);
  background: var(--t-s1-126);
  box-shadow: 0 0 0 1px var(--t-s1-127), 0 12px 26px var(--t-s1-127);
}

.caution-button:hover {
  border-color: var(--t-s1-128);
  background: linear-gradient(135deg, var(--t-s1-129), var(--t-s1-130));
  box-shadow: 0 0 0 1px var(--t-s1-131), 0 12px 28px var(--t-s1-132);
}

.danger-button:disabled:hover {
  border-color: var(--t-s1-118);
  background: var(--t-s1-119);
  box-shadow: none;
}

.caution-button:disabled:hover {
  border-color: var(--t-s1-121);
  background: linear-gradient(135deg, var(--t-s1-122), var(--t-s1-123));
  box-shadow: none;
}

.primary-button:disabled,
.ghost-button:disabled,
.danger-button:disabled,
.caution-button:disabled,
.text-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.alert-row {
  padding: 12px;
  border-color: var(--t-s1-133);
}

.alert-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.text-link {
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.mini-chat-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
}

.mini-chat-list {
  display: grid;
  gap: 7px;
}


.mini-chat-list button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-79);
  color: var(--ink);
  text-align: left;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}


.mini-chat-list button:hover {
  border-color: var(--t-s1-43);
  background: var(--t-s1-58);
  box-shadow: inset 3px 0 0 var(--t-s1-62);
}

.mini-chat-list button {
  padding: 9px;
}

.mini-chat-preview {
  min-height: 190px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-134);
}


.chat-panel {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-78);
  box-shadow: var(--shadow);
}

.chat-tabs,
.segmented {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-64);
}

.chat-tabs button,
.segmented button {
  flex: 1;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.chat-tabs button.active,
.segmented button.active {
  background: var(--t-s1-85);
  color: var(--green);
}

/* Pedido explicito del usuario: el selector Mes/Semana/Día/Agenda debe
   medir lo mismo que el cuadro de busqueda de al lado (34px de alto, caja
   incluida) - se acota solo a esta instancia, sin tocar .segmented
   generico (compartido con chat-tabs y otros usos). */
.agenda-calendar-page-views button {
  min-height: 24px;
}

/* Pedido explicito del usuario (cambio de opinion): el estado NO
   seleccionado no debe verse como boton (sin borde ni fondo propio) -
   solo cambia el color del texto (gris, via visual-system.css). Se queda
   el border:0/background:transparent heredado de .segmented button. */

/* Pedido explicito del usuario: el selector Mes/Semana/Día/Agenda debe
   correr hacia la derecha, quedando justo antes del cuadro de busqueda -
   Hoy/prev/next se quedan a la izquierda. El buscador ya usa
   margin-left:auto de forma generica (compartida con Cotizaciones); esa
   regla vive en la capa "system" de visual-system.css y siempre gana
   sobre esta capa "legacy" sin importar especificidad, asi que anularla
   tiene que hacerse alla, no aca (ver visual-system.css). */
.agenda-calendar-page-views {
  margin-left: auto;
}

/* Pedido explicito del usuario: el verde tenue de .segmented button.active
   (compartido con chat-tabs) no es el que usamos para "seleccionado" en
   el resto de la app - se reemplaza aca por el mismo patron ya
   establecido en .transport-choice.active (contorno + 14% de tinte +
   texto en var(--brand)). */
.agenda-calendar-page-views button.active {
  border: 1px solid color-mix(in srgb, var(--brand) 52%, var(--border-default));
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-1));
  color: var(--brand);
}

.chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.chat-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.bot-disabled-hint {
  margin-top: 14px;
  color: var(--warning, var(--t-s1-135));
  font-size: 13px;
  font-weight: 500;
}

.chat-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.chat-messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  margin-top: 3px;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.message {
  max-width: min(78%, 720px);
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-86);
}

.message.ai {
  align-self: flex-end;
  border-color: var(--t-s1-136);
  background: var(--t-s1-137);
}

.message.human {
  align-self: flex-start;
  border-color: var(--t-s1-55);
}

.message small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
}

.message p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
}

.context-card {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.context-item {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-64);
}

.context-item span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.context-item strong {
  display: block;
  margin-top: 4px;
}

.search-field {
  display: grid;
  gap: 6px;
  min-width: min(360px, 100%);
}

.search-field.wide {
  min-width: min(520px, 100%);
}

.search-field span,
label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

input,
select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s1-138);
  color: var(--ink);
  padding: 8px 10px;
}

select option {
  background: var(--t-s1-139);
  color: var(--t-s1-23);
}

/* La lista nativa del <select> no hereda del tema por sí sola: en modo día
   quedaba con fondo oscuro fijo y texto oscuro encima, casi ilegible. */
:root[data-theme="light"] select option {
  background: var(--panel, var(--t-s1-140));
  color: var(--ink);
}

.appointments-layout,
.prices-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}

.prices-layout {
  grid-template-columns: 380px minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.price-form-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.quote-numbering-panel {
  display: grid;
  gap: 12px;
}

.quote-numbering-settings-card {
  max-width: 1200px;
}

/* Vigencia y Numeración conviven en el mismo panel (pedido explicito del
   usuario) pero son dos formularios independientes con su propio guardado.
   El layout real (flex, no grid) lo define la capa `system` en
   visual-system.css, que siempre gana - estas reglas legacy solo cubren lo
   que esa capa no fija (paddings/tamaños de los hijos), sin duplicar
   display/flex-direction/align-items/justify-content para no crear un
   conflicto de propiedades sueltas entre capas. */
.quote-numbering-content {
  gap: 16px;
}

.quote-numbering-row {
  gap: 20px;
}

.quote-numbering-form {
  display: flex;
  align-items: end;
  gap: 10px;
}

.quote-numbering-form label {
  display: grid;
  flex: 0 1 220px;
  gap: 6px;
}

.quote-numbering-form label span {
  color: var(--muted);
  font-size: 0.76rem;
}

.quote-numbering-form input {
  width: 100%;
}

.quote-numbering-form .primary-button {
  flex: 0 0 auto;
  margin: 0;
}

.quote-numbering-status {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 296px;
  padding: 12px 16px;
  border: 1px solid var(--t-s1-141);
  border-radius: 6px;
  background: var(--t-s1-142);
  box-shadow: inset 0 1px 0 var(--t-s1-143);
  color: var(--soft);
  line-height: 1.25;
  text-align: center;
}

.quote-numbering-status-line {
  font-size: 0.86rem;
}

.quote-numbering-status-value {
  color: var(--green-2);
  font-weight: 800;
}

.quote-numbering-status-empty,
.quote-numbering-status-next {
  color: var(--soft);
  font-weight: 500;
}

.quote-numbering-locked {
  color: var(--amber);
  font-size: 0.82rem;
  font-weight: 800;
}

:root[data-theme="light"] .quote-numbering-status {
  border-color: var(--t-s1-144);
  background: var(--t-s1-145);
  box-shadow: inset 0 1px 0 var(--t-s1-146);
}

:root[data-theme="light"] .quote-numbering-status-value {
  color: var(--t-s1-147);
}

:root[data-theme="light"] .quote-numbering-status-empty,
:root[data-theme="light"] .quote-numbering-status-next {
  color: var(--t-s1-148);
}

:root[data-theme="light"] .quote-numbering-locked {
  color: var(--t-s1-149);
}

@media (max-width: 640px) {
  .quote-numbering-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .quote-numbering-form {
    flex-wrap: wrap;
  }

  .quote-numbering-form label {
    flex-basis: min(100%, 220px);
  }

  .quote-numbering-status {
    min-width: 0;
  }
}

.quote-numbering-panel h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.quote-numbering-panel form {
  display: flex;
  align-items: end;
  gap: 10px;
}

.quote-numbering-panel label {
  display: grid;
  flex: 1;
  gap: 6px;
}

.quote-numbering-panel label span,
.quote-numbering-panel label span {
  color: var(--muted);
  font-size: 0.76rem;
}

.quote-numbering-panel input {
  max-width: 150px;
}

.quotes-view {
  display: grid;
  align-content: start;
  gap: 16px;
}

.quotes-page-header {
  align-items: center;
}

.quotes-total {
  padding: 9px 12px;
  border: 1px solid var(--t-s1-150);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.78rem;
}

.quote-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.quote-filter-bar > button {
  min-height: 37px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: var(--t-s1-07);
  color: var(--muted);
  cursor: pointer;
}

.quote-filter-bar > button.active {
  border-color: var(--t-s1-151);
  background: var(--t-s1-152);
  color: var(--green);
}

.quote-search {
  min-width: min(100%, 280px);
  margin-left: auto;
}

.quotes-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--t-s1-153);
}

.quote-history-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(150px, 1fr) minmax(105px, 0.55fr) minmax(135px, 0.7fr) auto auto;
  align-items: center;
  gap: 15px;
  min-height: 86px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.quotes-page-header > div {
  min-width: 0;
}

.quote-history-row:last-child {
  border-bottom: 0;
}

.quote-history-main,
.quote-history-phone,
.quote-history-vehicle,
.quote-history-system,
.quote-history-price,
.quote-history-date {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quote-history-main strong,
.quote-history-phone strong,
.quote-history-vehicle strong,
.quote-history-system strong,
.quote-history-price strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-history-main small,
.quote-history-phone small,
.quote-history-vehicle small,
.quote-history-system small,
.quote-history-price small,
.quote-history-date small {
  color: var(--muted);
}

.quote-history-main small,
.quote-history-phone span,
.quote-history-vehicle span,
.quote-history-system span,
.quote-history-date span {
  color: var(--muted);
}

.quote-history-code {
  font-weight: 600;
}

.quote-history-price strong {
  color: var(--green);
}

.quote-history-status {
  width: max-content;
  border-radius: 999px;
  padding: 6px 9px;
}

.quote-history-status.sent {
  background: var(--t-s1-154);
  color: var(--green);
}

.quote-history-status.pending {
  background: var(--t-s1-155);
  color: var(--t-s1-156);
}

.quote-history-status.error {
  background: var(--t-s1-157);
  color: var(--t-s1-158);
}

.quote-history-status.expired {
  background: var(--t-s1-159);
  color: var(--t-s1-160);
}

.quote-history-open {
  border: 1px solid var(--t-s1-161);
  background: var(--t-s1-162);
  color: var(--green);
}

.quotes-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 46px 22px;
  text-align: center;
}

.quotes-empty .svg-icon {
  width: 30px;
  height: 30px;
  color: var(--green);
}

.quotes-empty p {
  margin: 0;
  color: var(--muted);
}

/* Cotizaciones comparte el lenguaje operativo de Agenda: una única superficie,
   filtros compactos y filas claras para escanear rápidamente. */
.quotes-view {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.quotes-shell {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, var(--t-s2-01), var(--t-s2-02)),
    var(--panel);
  box-shadow: 0 20px 58px var(--t-s2-03);
}

.quotes-page-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.quotes-page-header h1 {
  margin: 0 0 3px;
  line-height: 1.2;
  letter-spacing: 0;
}

.quotes-page-header > div > p:last-child {
  max-width: none;
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quotes-create-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--action-compact-height);
}

.quotes-create-button .svg-icon {
  width: 18px;
  height: 18px;
}

.quote-filter-bar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.quote-filter-bar > button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.quote-filter-bar > button strong {
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
}

.quote-search {
  min-width: min(100%, 300px);
  margin-left: auto;
}

/* Pedido explicito del usuario: filtro de antiguedad de la cotizacion,
   slider de una sola manija (1 a 30 dias) que se combina con el resto de
   filtros de la barra. */
.quote-age-filter {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 37px;
  padding: 0 4px;
  white-space: nowrap;
}

/* Pedido explicito del usuario: el texto ("hasta 30 días" vs "hasta 1
   día") cambia de ancho segun la cifra, y al no tener un ancho fijo
   empujaba/corria el slider de al lado. Ancho fijo (no minimo - el texto
   mas corto no debe encoger la caja tampoco), medido para el texto mas
   largo posible ("Antigüedad: hasta 30 días", ~164px) mas margen, asi el
   slider nunca se mueve de su posicion sin importar el valor. */
.quote-age-filter > span {
  flex: 0 0 auto;
  width: 170px;
}

.quote-age-filter > input[type="range"] {
  width: 200px;
  accent-color: var(--brand);
}

/* Pedido explicito del usuario: en modo dia, al pasar el mouse el
   navegador oscurece el color del control (mismo comportamiento nativo en
   ambos modos, ver #root .quote-age-filter en visual-system.css para el
   detalle). En modo noche --brand es un verde muy brillante y ese
   oscurecimiento sigue viendose verde; en modo dia --brand ya es un verde
   oscuro (pensado para contraste de texto sobre blanco), asi que el mismo
   oscurecimiento lo deja casi negro. Se usa un verde mas vivo, solo para
   este control, que le da margen antes de leerse como negro. */
:root[data-theme="light"] .quote-age-filter > input[type="range"] {
  accent-color: var(--t-s2-04);
}

.quotes-list {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.quotes-list > header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--t-s2-05);
}

.quotes-list > header strong {
  font-weight: 700;
}

.quotes-list > header span {
  color: var(--text-placeholder);
}

.quote-history-rows {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--t-s2-06) var(--t-s2-07);
  scrollbar-width: thin;
}

.quote-history-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-height: 76px;
  padding: 12px 14px 12px 17px;
  background: var(--t-s2-08);
}

.quote-history-row::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--amber);
}

.quote-history-row:has(.quote-history-status.sent)::before { background: var(--green); }
.quote-history-row:has(.quote-history-status.error)::before { background: var(--t-s2-09); }
.quote-history-row:has(.quote-history-status.expired)::before { background: var(--t-s2-10); }
.quote-history-row:hover { background: var(--t-s2-11); }

.quote-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-history-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-width: 0;
}

.quote-history-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: 11px;
  border-top: 1px solid var(--t-s2-12);
}

.quote-history-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.quote-history-field .svg-icon {
  width: 14px;
  height: 14px;
  color: var(--amber);
  flex: none;
}

.quote-history-plate {
  color: var(--muted);
}

.quote-history-price {
  margin-left: auto;
}

.quote-history-status {
  padding: 6px 11px;
  border-radius: 999px;
}

.quote-history-row .quote-history-system-flow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-right: 0;
}

.quote-history-row .quote-history-system-flow .svg-icon {
  flex: none;
}

.quote-history-row .quote-history-system-flow .appointment-system-pill {
  width: auto;
}

.appointment-system-flow.lite-agenda-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-right: 0;
}

.appointment-system-flow.lite-agenda-field .svg-icon {
  flex: none;
}

.appointment-system-flow.lite-agenda-field .appointment-system-pill {
  width: auto;
}

.quote-history-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-history-actions {
  display: flex;
  min-width: 0;
  align-self: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}

.quote-history-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quote-history-actions .svg-icon {
  width: 14px;
  height: 14px;
}

.quote-history-pdf {
  border: 1px solid var(--t-s2-13);
  background: var(--t-s2-14);
  color: var(--t-s2-15);
}

.quote-history-notes {
  margin: 0;
  padding: 0 0 0 2px;
}

.quote-history-notes summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.quote-history-notes summary::-webkit-details-marker { display: none; }

.quote-history-notes summary .svg-icon {
  width: 14px;
  height: 14px;
  color: var(--amber);
}

.quote-history-notes[open] summary { color: var(--soft); }

.quote-history-notes p {
  max-width: 920px;
  margin: 9px 0 2px;
  padding: 10px 12px;
  border-left: 2px solid var(--t-s2-16);
  background: var(--t-s2-17);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.quote-history-open {
  min-height: 34px;
  border-color: var(--t-s2-18);
  border-radius: 7px;
  background: var(--t-s2-19);
  color: var(--green);
  font-size: 0.66rem;
}

.quotes-empty {
  flex: 1;
  min-height: 190px;
  align-content: center;
}

@media (max-width: 680px) {
  .lite-chat-panel .chat-control {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .lite-chat-panel .chat-control .primary-button,
  .lite-chat-panel .chat-control .caution-button,
  .lite-chat-action {
    flex: 1 1 130px;
  }

  .quote-search {
    width: 100%;
    margin-left: 0;
  }

  .quote-history-open {
    flex: 1;
    justify-content: center;
  }
}

.capacity-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.capacity-strip article,
.stats-stack article,
.monitor-metrics article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s2-20);
}

.capacity-strip strong,
.stats-stack strong,
.monitor-metrics strong {
  display: block;
  margin-top: 5px;
  font-size: 24px;
}

.appointment-list,
.price-list,
.monitor-alerts {
  display: grid;
  gap: 9px;
}

.appointment-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.time-box {
  color: var(--green);
  font-size: 22px;
  font-weight: 900;
}

.client-detail {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s2-21);
  box-shadow: var(--shadow);
}

.client-detail h2 {
  font-weight: 600;
}

.client-detail .context-block h3 {
  font-weight: 600;
}

.client-detail .context-line-item > span {
  font-size: 13px;
  font-weight: 400;
}

.client-detail .context-line-item > strong {
  font-size: 15px;
  font-weight: 500;
}

.context-block-next-action {
  border-color: var(--t-s2-22);
  background: var(--t-s2-20);
}

.context-next-action-text {
  margin: 0;
  color: var(--t-s2-23);
  font-size: 13px;
  line-height: 1.4;
}

.client-detail-chat-button {
  width: 100%;
  margin-top: 2px;
}

.appointment-chat-button.client-detail-chat-button {
  border-color: var(--t-s2-18);
  background: var(--t-s2-24);
  color: var(--green);
}

.appointment-chat-button.client-detail-chat-button:hover {
  border-color: var(--t-s2-25);
  background: var(--t-s2-26);
  box-shadow: 0 0 18px var(--t-s2-27);
}

.client-detail-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--t-s2-28);
  border-radius: 8px;
  background: var(--t-s2-29);
  color: var(--t-s2-30);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease),
    color 160ms var(--ease);
}

.client-detail-delete-button:hover {
  border-color: var(--t-s2-31);
  background: var(--t-s2-32);
  box-shadow: 0 0 18px var(--t-s2-33);
}

.client-detail-delete-button .svg-icon {
  width: 18px;
  height: 18px;
}

.client-create-layout {
  display: grid;
  grid-template-columns: minmax(320px, 520px);
  align-items: start;
}

.client-create-form {
  display: grid;
  gap: 16px;
}

.client-create-form .form-grid {
  grid-template-columns: 1fr;
}

.client-create-button {
  margin-top: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 6px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setup-web-first {
  grid-column: 1 / -1;
  white-space: nowrap;
}

.setup-web-first.is-hidden {
  display: none;
}

.checkbox-line input {
  width: auto;
  min-height: auto;
}

.price-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}

.price-form .primary-button {
  margin-top: 24px;
}

.price-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.price-form .form-grid {
  align-content: start;
}

.price-toolbar > select {
  height: 40px;
  min-height: 40px;
  align-self: end;
  padding: 8px 34px 8px 12px;
  border-radius: 8px;
}

.price-table-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.price-table-panel .price-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
}

.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 170px 120px max-content;
  align-items: center;
  gap: 10px;
  padding: 11px;
  min-height: 68px;
  /* Las filas conservan su densidad normal, pero pueden crecer cuando un
     bloque propio —por ejemplo, Información adicional— se despliega. */
  height: auto;
}

.price-row strong {
  text-transform: uppercase;
}

.price-year-range {
  font-size: 14px;
}

.price-system-flow {
  grid-template-columns: 78px 16px 48px;
  column-gap: 6px;
  margin-right: 0;
}

.price-catalog-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.price-status-toggle {
  flex: 0 0 auto;
}

.price-edit-button {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 6px;
  border-color: var(--t-s2-34);
  background: var(--t-s2-35);
  color: var(--t-s2-36);
  font-size: 14px;
  font-weight: 700;
}

.price-edit-button:hover:not(:disabled) {
  border-color: var(--t-s2-37);
  background: var(--t-s2-38);
  color: var(--t-s2-39);
}

.settings-grid,
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.operation-settings-card {
  align-self: start;
}

.settings-basic-grid {
  grid-template-columns: 1fr;
  max-width: 1200px;
}

/* Configuración Lite: una portada breve y cuatro rutas comprensibles. */
.lite-settings-home {
  width: min(100%, 1120px);
}

.lite-settings-intro {
  margin-bottom: 22px;
  padding: 4px 2px;
}

.lite-settings-intro h2 {
  margin: 5px 0 8px;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  letter-spacing: -0.035em;
}

.lite-settings-intro > p:last-child {
  max-width: 68ch;
  margin: 0;
  line-height: 1.6;
}

.lite-settings-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lite-settings-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 15px 14px;
  min-height: 174px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--t-s2-40), transparent 52%),
    var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.lite-settings-card:hover,
.lite-settings-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--t-s2-41);
  background:
    linear-gradient(135deg, var(--t-s2-42), transparent 55%),
    var(--panel-2);
}

.lite-settings-number {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--t-s2-43);
  border-radius: 50%;
  background: var(--t-s2-44);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.lite-settings-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--soft);
}

.lite-settings-copy {
  display: grid;
  align-content: start;
  gap: 6px;
  padding-right: 40px;
}

.lite-settings-copy strong {
  font-size: 1.08rem;
}

.lite-settings-copy > span {
  max-width: 40ch;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.lite-settings-status {
  grid-column: 2 / 4;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.lite-settings-status .status-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--t-s2-45);
}

.lite-settings-status.ready .status-dot {
  background: var(--green);
  box-shadow: 0 0 10px var(--t-s2-46);
}

.lite-settings-arrow {
  position: absolute;
  right: 20px;
  bottom: 16px;
  color: var(--green);
  font-size: 1.05rem;
  font-weight: 900;
  transition: transform 180ms var(--ease);
}

.lite-settings-card:hover .lite-settings-arrow,
.lite-settings-card:focus-visible .lite-settings-arrow {
  transform: translateX(3px);
}

.lite-settings-route-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 2px 6px;
}

.lite-settings-route-intro h2 {
  margin: 1px 0 6px;
  font-size: 1.22rem;
}

.lite-settings-route-intro p {
  max-width: none;
  margin: 0;
  line-height: 1.5;
}

.lite-business-panel,
.lite-hours-settings {
  /* Crece con la pantalla en vez de quedarse en un ancho fijo: la tabla de
     variables de la cotizacion vive aca dentro y a 940px las descripciones se
     leian en dos lineas. El tope evita que en ultrawide las filas queden tan
     largas que cueste seguirlas. */
  width: min(100%, clamp(940px, 74vw, 1400px));
}

.lite-business-panel .system-config-form > .form-grid:first-child,
.lite-business-panel .system-config-section .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lite-business-panel .maps-latlong-grid {
  grid-template-columns: 1fr;
}

.lite-settings-icon.pro-channel-icon {
  position: static;
  flex: 0 0 auto;
}

.settings-advanced-grid {
  grid-template-columns: 1fr;
}

.dev-tool-panel {
  border-color: var(--t-s2-47);
  background: var(--t-s2-48);
}

.reactivation-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.reactivation-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s2-49);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--soft);
  cursor: pointer;
  max-width: 320px;
}

.reactivation-mode-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.reactivation-mode-option small {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.4;
}

.reactivation-mode-option.active {
  border-color: var(--t-s2-50);
  background: var(--t-s2-51);
  color: var(--ink);
}

.system-settings-card {
  max-width: 1200px;
}

.assistant-settings-form {
  display: grid;
  gap: 16px;
}

.assistant-settings-fields {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
}

.assistant-minutes-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assistant-minutes-input input {
  width: 120px;
}

.assistant-minutes-input span {
  color: var(--soft);
  font-weight: 700;
}


.system-settings-card h2 {
  margin-bottom: 8px;
}

/* El mensaje puede ser largo y empujaba la tarjeta hasta dejar el boton de
   guardar fuera de la pantalla. Se acota y desplaza dentro de si mismo. */
.redirection-message-field textarea {
  max-height: clamp(180px, 32vh, 340px);
  overflow-y: auto;
  resize: vertical;
}
/* Telegram+Token ocupan toda la fila arriba; Web va debajo en su propia
   fila completa, no al costado — así no compite por ancho con el bloque
   de Telegram, que ya reparte espacio internamente con su campo. */
.redirection-medium-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }

/* Todo en una sola fila sin divisores ni caja envolvente: switch, título e
   input del token flotan sueltos sobre el fondo de la tarjeta, sin borde ni
   fondo propio — versión minimalista pedida. */
.redirection-channel-block {
  display: flex;
  align-items: center;
  gap: 13px;
}
.redirection-channel-block > strong {
  flex: 0 0 auto;
  color: var(--text-neutral-strong);
  font-weight: 700;
}
.redirection-telegram-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
}
.redirection-telegram-fields {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}

.redirection-message-field { display: grid; gap: .55rem; margin-top: 14px; }
.redirection-message-field textarea { width: 100%; min-height: 15rem; resize: vertical; line-height: 1.55; }
@media (max-width: 760px) {
  .redirection-medium-grid { grid-template-columns: 1fr; }
  .redirection-channel-block { flex-wrap: wrap; }
  .redirection-telegram-label { white-space: normal; }
  .redirection-telegram-fields { flex-basis: 100%; }
}

/* ============================================================
   CONFIGURACIÓN · WHATSAPP
   Dos superficies: una tarjeta de estado con lo que atiende hoy, y
   una sola tarjeta de flujo con los dos pasos. Los pasos van
   numerados porque son una secuencia real con una compuerta:
   aplicar no se habilita hasta que el proveedor quedó verificado.
   ============================================================ */

.channel-state-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-left: 3px solid var(--line-strong);
}

.channel-state-card.ready { border-left-color: var(--green-2); }
.channel-state-card.warn { border-left-color: var(--amber); }

.channel-state-icon {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.channel-state-icon .svg-icon {
  width: 26px;
  height: 26px;
}

.channel-state-icon-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--text-heading);
}

.channel-state-icon-badge .svg-icon {
  width: 12px;
  height: 12px;
}

.channel-state-main {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-right: auto;
}

.channel-state-heading-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.channel-state-pill {
  padding: 5px 14px;
  font-weight: 800;
}

.channel-state-phone-line {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.channel-state-phone-line strong { letter-spacing: .02em; }

.channel-flow-card {
  padding: 0;
  overflow: hidden;
}

.channel-step {
  padding: 22px 26px 24px;
}

/* Solo el cierre real de la tarjeta (el último paso, sea 2 o 3 según la
   experiencia) recorta su aire final; el espacio entre pasos no se toca. */
.channel-flow-card .channel-step:last-child {
  padding-bottom: 6px;
}

.channel-step + .channel-step {
  border-top: 1px solid var(--line);
}

.channel-step-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.channel-step-head > div {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
}

.channel-step-head strong {
  color: var(--ink);
  font-size: 15px;
}

.channel-step-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* El riel une los dos pasos: deja ver que el segundo depende del primero. */
.channel-step-number {
  position: relative;
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 65%, var(--border-default));
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}

.channel-step:not(:last-child) .channel-step-number::after {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  width: 1px;
  height: calc(100% + 26px);
  background: color-mix(in srgb, var(--border-default) 78%, var(--brand));
}

.channel-step-body {
  margin-top: 16px;
  padding-left: 41px;
}

.channel-provider-body {
  display: grid;
  gap: 16px;
}

.channel-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

/* La ficha de Meta bajó a 3 campos (se sacó Número visible, ver más abajo):
   con la grilla de 2 columnas de siempre quedaba un campo huérfano en su
   propia fila, desperdiciando la mitad del ancho. Evolution y el selector de
   proveedor/experiencia siguen usando 2 columnas sin tocar. */
.meta-channel-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.channel-choice-grid {
  max-width: 760px;
}

.channel-field-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
}

.channel-field-grid input,
.channel-field-grid select {
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}

.channel-field-grid input:focus-visible,
.channel-field-grid select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.channel-field-grid input[readonly] {
  cursor: default;
  color: var(--soft);
  background: var(--t-s2-20);
}

.channel-note {
  display: grid;
  gap: 5px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--t-s2-52);
}

.channel-note span {
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
}

.channel-note code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
}

.channel-note small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.channel-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}

/* Antes era una tarjeta apilada (título, detalle, número en filas propias)
   que desperdiciaba mucho ancho horizontal. Ahora es una sola línea: ícono +
   mensaje a la izquierda, número detectado empujado al extremo derecho. */
.channel-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.channel-result > .svg-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--green);
}

.channel-result-line {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.channel-result-line strong { color: var(--ink); font-size: 13px; }
.channel-result small { color: var(--muted); font-size: 12px; line-height: 1.45; }

.channel-result-phone {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12px;
  white-space: nowrap;
}

/* Mismo trato que "Conexión Meta preparada" (color, forma y tamaño): es el
   otro título fuerte de la línea, no una etiqueta secundaria. Ese "strong"
   se pinta con var(--text-heading) — no con var(--green) pese a la clase
   .ready, porque el reset global de "strong" en el layer system le gana a
   ".channel-result.ready strong" aunque tenga más especificidad. El valor
   usa el color de aviso/ámbar para separarse del resto del texto. */
.channel-result-phone-label { color: var(--text-primary); font-weight: 700; }
.channel-result-phone-value { color: var(--warning); font-weight: 700; }

.channel-result.ready {
  border-color: var(--t-s2-53);
  border-left-color: var(--green-2);
  background: var(--t-s2-54);
}

.channel-result.ready strong { color: var(--green); }

.channel-result.error {
  border-color: var(--t-s2-55);
  border-left-color: var(--red);
  background: var(--t-s2-56);
}

.channel-result.error strong { color: var(--t-s2-57); }

.channel-result-details summary {
  width: max-content;
  cursor: pointer;
  color: var(--t-s2-58);
  font-size: 12px;
  font-weight: 700;
}

.channel-result-details small { display: block; margin-top: 6px; }

.channel-action-buttons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.channel-validate-button,
.channel-apply-button {
  min-height: 42px;
  white-space: nowrap;
}

.channel-apply-button { min-width: 180px; }
.channel-apply-button:disabled { cursor: not-allowed; opacity: .45; }

.channel-advanced {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s2-49);
}

.channel-advanced > summary {
  padding: 12px 15px;
  cursor: pointer;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}

.channel-advanced > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.channel-advanced-form {
  display: grid;
  gap: 14px;
  padding: 0 15px 15px;
}

.channel-advanced-form .primary-button,
.channel-advanced-form .ghost-button {
  justify-self: start;
}

/* La caja de "Entrada de mensajes" no necesita todo el ancho de la tarjeta -
   el check de TLS y "Guardar servidor" aprovechan el resto en vez de apilarse
   debajo dejando aire muerto a la derecha. Mismas columnas que
   .channel-field-grid para que quede exactamente del ancho de un campo. */
.channel-note-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px 14px;
}

/* stretch + space-between: el botón queda anclado abajo, alineado con el
   borde inferior de "Entrada de mensajes" en vez de pegado al check de TLS. */
.channel-note-row-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 2px;
}

.channel-note-row-actions > button {
  align-self: flex-end;
}

.channel-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--soft);
  font-size: 13px;
}

.channel-readonly-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Dentro del paso 2 el número ya está en la tarjeta de estado y el resultado
   de abajo describe si el canal puede aplicarse. Aquí solo hacen falta el
   estado de la sesión y sus acciones. */
.channel-provider-body > .instance-connection-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.channel-provider-body > .instance-connection-panel .instance-phone-inline {
  display: none;
}

@media (max-width: 900px) {
  .channel-state-card {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }
}

@media (max-width: 760px) {
  .channel-note-row { grid-template-columns: 1fr; }
  .channel-step { padding: 20px 18px 22px; }
  .channel-step-body { padding-left: 0; }
  .channel-step:not(:last-child) .channel-step-number::after { display: none; }
  .channel-field-grid { grid-template-columns: 1fr; }

  .channel-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .channel-action-buttons { flex-direction: column; align-items: stretch; }
  .channel-action-buttons > * { width: 100%; }
}

.meta-channel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
}

.meta-channel-heading-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.meta-channel-heading h2 {
  margin: 0 0 8px;
}

.meta-channel-heading p:last-child {
  margin: 0;
}

.meta-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 22px 26px 0;
}

.meta-channel-secret-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.meta-channel-grid label {
  display: grid;
  gap: 7px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}

.meta-channel-grid input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
}

.meta-channel-grid input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.meta-channel-grid input[readonly] {
  cursor: default;
  color: var(--soft);
  background: var(--t-s2-20);
}

.channel-save-button {
  min-height: 44px;
  padding-inline: 20px;
  justify-self: start;
  align-self: center;
}

.channel-validate-button {
  min-height: 38px;
  padding: 8px 20px;
  justify-self: end;
  align-self: center;
  border: 1px solid var(--t-s2-59);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--t-s2-60), var(--t-s2-61));
  color: var(--t-s2-62);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease);
}

.channel-validate-button:hover {
  border-color: var(--t-s2-63);
  background: linear-gradient(135deg, var(--t-s2-64), var(--t-s2-65));
  color: var(--t-s2-66);
  box-shadow: 0 0 0 1px var(--t-s2-67), 0 12px 26px var(--t-s2-68);
}

.channel-validate-button:focus-visible {
  outline: 2px solid var(--t-s2-69);
  outline-offset: 3px;
}

.channel-actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.channel-web-first input {
  margin-top: 0;
}

.channel-apply-button {
  min-width: 190px;
}

.channel-recovery-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 24px;
  border-color: var(--t-s2-70);
}

.channel-recovery-card > div {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 5px;
}

.channel-recovery-card h3,
.channel-recovery-card p {
  margin: 0;
}

@media (max-width: 760px) {
  
.meta-channel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  
.meta-channel-heading {
    padding-left: 18px;
    padding-right: 18px;
  }

  .channel-recovery-card {
    align-items: stretch;
    flex-direction: column;
  }

  .channel-recovery-card > button,
  .channel-apply-button {
    width: 100%;
  }

  
.channel-actions-row,
  .meta-channel-grid,
  .meta-channel-secret-grid {
    grid-template-columns: 1fr;
  }

  .meta-channel-grid {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.commercial-section-header {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.user-form {
  display: grid;
  gap: 14px;
  font-size: 15px;
}

.user-form .form-grid {
  grid-template-columns: 1fr;
}

.user-form label span,
.user-form .checkbox-line span,
.user-form input,
.user-form select,
.user-form summary,
.user-form .primary-button,
.user-form .ghost-button {
  font-size: var(--type-body);
}

.user-form label > span {
  font-size: 13px;
}

/* Bandejas del usuario en su ficha: solo lectura, mismo ritmo vertical que
   los demas campos del formulario (la edicion vive en Entradas). */
.user-inboxes-field {
  display: grid;
  gap: 6px;
}

.user-inboxes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Aviso honesto: sin bandeja el asesor no ve ni recibe nada, y antes eso
   quedaba invisible en la UI. */
.user-inboxes-warning {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--t-s2-71);
  border-radius: 10px;
  background: var(--t-s2-72);
  color: var(--t-s2-73);
}

.empty-state.compact {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--t-s2-74);
  border-radius: 8px;
}

.user-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 46px;
  min-height: 28px;
  padding: 4px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t-s2-75);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.user-status-toggle:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--t-s2-76);
}

.user-status-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.user-status-toggle.active {
  background: transparent;
  color: var(--t-s2-77);
}

.user-status-toggle.inactive {
  background: transparent;
  color: var(--t-s2-78);
}

.user-status-track {
  position: relative;
  width: 38px;
  height: 20px;
  flex: 0 0 38px;
  border-radius: 999px;
  background: var(--t-s2-79);
  box-shadow: inset 0 0 0 1px var(--t-s2-80);
}

.user-status-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--t-s2-81);
  box-shadow: 0 2px 6px var(--t-s2-82);
  transition: transform 0.18s ease, background 0.18s ease;
}

.user-status-toggle.active .user-status-track {
  background: var(--t-s2-83);
  box-shadow: inset 0 0 0 1px var(--t-s2-84), 0 0 10px var(--t-s2-85);
}

.user-status-toggle.active .user-status-thumb {
  transform: translateX(18px);
  background: var(--t-s2-86);
}

.user-role {
  justify-self: stretch;
  text-align: center;
}

.user-alert-inline {
  color: var(--t-s2-58);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.user-actions .ghost-button {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 6px;
  border-color: var(--t-s2-87);
  background: var(--t-s2-88);
  font-size: 14px;
  font-weight: 600;
}

.user-actions .ghost-button:hover:not(:disabled) {
  border-color: var(--t-s2-89);
  background: var(--t-s2-90);
}

.user-actions .edit-user-button {
  border-color: var(--t-s2-34);
  background: var(--t-s2-35);
  color: var(--t-s2-36);
}

.user-actions .edit-user-button:hover:not(:disabled) {
  border-color: var(--t-s2-37);
  background: var(--t-s2-38);
  color: var(--t-s2-39);
}

.danger-link {
  border-color: var(--t-s2-91);
  background: var(--t-s2-92);
  color: var(--t-s2-93);
}

.danger-link:hover:not(:disabled) {
  border-color: var(--t-s2-94);
  background: var(--t-s2-95);
  color: var(--t-s2-58);
}

.users-section-header .eyebrow {
  font-size: 13px;
}

.users-section-header h2 {
  font-size: var(--content-title-size);
}

.user-advanced {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s2-20);
  padding: 10px;
}

.user-advanced summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.user-advanced-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.wide-panel {
  grid-column: 1 / -1;
}

.settings-summary,
.schedule-list,
.exception-list,
.health-list,
.monitor-metrics {
  display: grid;
  gap: 10px;
}

.settings-details summary {
  cursor: pointer;
  font-weight: 900;
}

.instances-panel {
  display: grid;
  gap: 14px;
}

.main-instance-compact-header {
  display: block;
}

.main-instance-compact-header > div {
  min-width: 0;
}

.main-instance-title-row {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-instance-title-row h2 {
  margin: 0;
}

.main-instance-name-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 2px;
  background: var(--t-s2-96);
  color: var(--soft);
  font-size: 18px;
  font-weight: 800;
}

.main-instance-form {
  padding-top: 4px;
}

.main-instance-edit-button {
  min-height: 46px;
  min-width: 78px;
  padding: 10px 16px;
  border-radius: 8px;
  border-color: var(--t-s2-97);
  background: var(--t-s2-98);
  color: var(--t-s2-99);
  font-size: 16px;
  font-weight: 800;
}

.main-instance-edit-button:hover:not(:disabled) {
  border-color: var(--t-s2-100);
  background: var(--t-s2-101);
  color: var(--t-s2-102);
}

.instance-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s2-103);
}

.instance-list-section {
  margin-top: 4px;
}

.instance-section-header {
  display: grid;
  gap: 2px;
}

.instance-section-header h3 {
  margin: 0;
  line-height: 1.2;
}

.instance-form {
  display: grid;
  gap: 12px;
}

.instance-form label > span {
  font-size: 15px;
}

.instance-form .readonly-field {
  display: grid;
  gap: 6px;
}

.instance-form .readonly-value {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s2-103);
  color: var(--placeholder);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  word-break: break-all;
}

.instance-form .primary-button {
  width: auto;
  min-width: 120px;
  justify-self: start;
  padding-inline: 18px;
}

.settings-warning-text {
  margin: 0 0 12px 0;
  padding: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.system-config-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.system-config-form .contact-location-grid.contact-location-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-config-form .lite-contact-fields-grid.lite-contact-fields-grid {
  grid-template-columns: minmax(100px, 0.55fr) minmax(110px, 0.55fr) minmax(100px, 0.5fr) minmax(80px, 0.45fr);
}

.lite-contact-fields-grid .system-config-field {
  min-width: 0;
  padding: 12px;
  gap: 8px;
}

.lite-contact-fields-grid .system-config-field .field-help {
  margin-top: 2px;
  white-space: nowrap;
}

.system-config-form .maps-latlong-grid.maps-latlong-grid {
  grid-column: 1 / -1;
  grid-template-columns: 2fr 1fr 1fr;
}

.system-config-form .field-span-all {
  grid-column: 1 / -1;
}

.system-config-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.lite-business-panel > summary,
.operation-schedules-panel > summary,
.workshop-exceptions-panel > summary,
.assistant-editor-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.system-config-field.system-config-field {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--t-s2-103);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.system-config-field:focus-within {
  border-color: var(--t-s2-104);
  background: var(--t-s2-07);
}

.system-config-field input {
  flex: 0 0 auto;
  max-width: 100%;
}

.system-config-field .field-help {
  flex: 1 1 auto;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.settings-section-divider {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.branding-image-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.branding-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.branding-image-preview {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--t-s2-07);
}

.branding-file-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.branding-file-picker .ghost-button {
  flex: 0 0 auto;
}

/* Los botones del modelo de cotizacion van en una sola fila y reparten el ancho
   disponible. Envuelven en pantallas angostas en vez de encogerse hasta que las
   etiquetas se corten. */
.quote-actions-row {
  flex-wrap: wrap;
  gap: clamp(8px, 0.8vw, 12px);
}

.quote-actions-row > button {
  flex: 1 1 auto;
  min-width: max-content;
  white-space: nowrap;
}

/* branding-file-status nace con margen negativo para pegarse bajo un selector
   de archivo. Debajo de una fila de botones queda encima de ellos. */
.quote-actions-row ~ small { margin-top: clamp(10px, 1.2vw, 16px); }

.branding-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.branding-file-status {
  display: block;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.branding-remove-button {
  align-self: flex-start;
}

.instances-list {
  display: grid;
  gap: 14px;
}

.instance-user-group {
  display: grid;
  gap: 8px;
}

.instance-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.instance-group-title strong {
  font-size: 16px;
}

.instance-group-title span {
  color: var(--muted);
  font-size: 14px;
}

.empty-state.compact {
  padding: 10px;
  margin: 0;
}

.instance-row-shell {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s2-07);
  overflow: hidden;
}

.instance-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(110px, 0.7fr) minmax(88px, 0.55fr) minmax(210px, 1.55fr) minmax(150px, 1fr) minmax(130px, 0.85fr) minmax(190px, 1.15fr) minmax(120px, 0.8fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  overflow-x: auto;
}

.instance-row-shell.inactive {
  border-color: var(--t-s2-105);
  background:
    linear-gradient(90deg, var(--t-s2-106), var(--t-s2-107)),
    var(--t-s2-108);
  box-shadow: inset 3px 0 0 var(--t-s2-109);
}

.instance-row-shell.inactive .instance-row {
  background: var(--t-s2-110);
}

.instance-row-shell.inactive .instance-user-name strong,
.instance-row-shell.inactive .instance-value,
.instance-row-shell.inactive .muted {
  color: var(--t-s2-111);
}

.instance-row-shell.inactive .tag,
.instance-row-shell.inactive .tag.green,
.instance-row-shell.inactive .tag.blue,
.instance-row-shell.inactive .tag.red,
.instance-row-shell.inactive .tag.gray {
  border-color: var(--t-s2-112);
  background: var(--t-s2-113);
  color: var(--t-s2-111);
}

.instance-row-shell.inactive .instance-text-cell {
  color: var(--t-s2-111);
}

.instance-row-shell.inactive .ghost-button,
.instance-row-shell.inactive .primary-button,
.instance-row-shell.inactive .icon-button {
  border-color: var(--t-s2-114);
  background: var(--t-s2-115);
  color: var(--t-s2-116);
}

.instance-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.instance-user-name strong,
.instance-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instance-user-name strong,
.instance-value {
  font-size: 16px;
  color: var(--ink);
}

.instance-user-name .muted {
  font-size: 14px;
}

.instance-row .instance-text-cell {
  justify-self: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--t-s2-117);
  font-size: 14px;
  font-weight: 700;
}

.instance-row .instance-kind-text.independent {
  color: var(--t-s2-118);
}

.instance-row .instance-kind-text.principal {
  color: var(--t-s2-119);
  text-shadow: 0 0 10px var(--t-s2-120);
}

.instance-row .instance-status-tag {
  justify-content: center;
  justify-self: start;
  min-width: 150px;
  width: 150px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.instance-row .instance-name-value,
.instance-row .instance-phone-value {
  min-width: 0;
  justify-self: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instance-row .edit-user-button {
  justify-self: end;
  border-color: var(--t-s2-97);
  background: var(--t-s2-98);
  color: var(--t-s2-99);
}

.instance-row .edit-user-button:hover:not(:disabled) {
  border-color: var(--t-s2-100);
  background: var(--t-s2-101);
  color: var(--t-s2-102);
}

.instance-inline-form {
  position: relative;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--t-s2-121);
}

.instance-inline-sections {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 12px;
}

.instance-config-block {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--t-s2-122);
  border-radius: 8px;
  background: var(--t-s2-103);
}

.evolution-config-block {
  border-color: var(--t-s2-123);
  background: var(--t-s2-124);
}

.instance-config-title {
  display: grid;
  gap: 2px;
}

.instance-config-title h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.instance-config-title h4 span {
  font-weight: 500;
  color: var(--soft);
}

.instance-subtitle {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
}

.instance-permissions,
.instance-advanced-options {
  display: grid;
  gap: 8px;
}

.instance-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 8px 18px;
}

.instance-save-button {
  justify-self: end;
  margin-top: 12px;
  min-width: 170px;
}

@media (max-width: 900px) {
  .instance-inline-sections,
  .instance-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .instance-save-button {
    justify-self: stretch;
  }
}

.instance-generated-name {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s3-01);
}

.instance-generated-name strong {
  font-size: 15px;
  color: var(--text);
}

.instance-connection-panel {
  display: grid;
  gap: 10px;
  align-items: start;
  padding: 0;
  margin-top: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.instance-connection-info,
.instance-pairing-code {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.instance-connection-info {
  display: grid;
  align-items: start;
  gap: 6px;
}

.instance-status-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 4px;
  color: var(--soft);
  font-size: 14px;
}

.instance-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.instance-phone-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.instance-phone-inline span {
  color: var(--muted);
  font-size: 12px;
}

.instance-phone-inline strong {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.instance-status-line::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--t-s3-02);
  box-shadow: 0 0 10px var(--t-s3-03);
}

.instance-status-line.connected {
  color: var(--t-s3-04);
}

.instance-status-line.connected::before {
  background: var(--t-s3-05);
  box-shadow: 0 0 10px var(--t-s3-06);
}

.instance-status-line.error {
  color: var(--t-s3-07);
}

.instance-status-line.error::before {
  background: var(--t-s3-08);
  box-shadow: 0 0 10px var(--t-s3-09);
}

.instance-connection-actions {
  display: flex;
  align-items: center;
  /* Con una sola accion por estado ya no hay nada que empujar al borde: se
     alinea con el resto del panel en vez de quedar suelta a la derecha. */
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.instance-sync-icon {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 7px;
  border-color: var(--t-s3-10);
  background: var(--t-s3-11);
  color: var(--t-s3-12);
  font-size: 15px;
  line-height: 1;
}

.instance-sync-icon:hover:not(:disabled) {
  border-color: var(--t-s3-13);
  background: var(--t-s3-14);
}

.instance-disconnect-button {
  border-color: var(--t-s3-15);
  background: var(--t-s3-16);
  color: var(--t-s3-07);
}

.instance-disconnect-button:hover:not(:disabled) {
  border-color: var(--t-s3-17);
  background: var(--t-s3-18);
  color: var(--t-s3-19);
}

.instance-recreate-button {
  border-color: var(--t-s3-20);
  background: var(--t-s3-21);
  color: var(--t-s3-22);
}

.instance-recreate-button:hover:not(:disabled) {
  border-color: var(--t-s3-23);
  background: var(--t-s3-24);
  color: var(--t-s3-25);
}

.instance-recreate-button:disabled {
  opacity: 0.72;
}

/* El QR vive dentro de la tarjeta de la bandeja, no en un modal: al abrir una
   bandeja sin vincular se ve de una lo unico que falta hacer. */
.instance-qr-inline {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 4px;
  /* Se ajusta al codigo en vez de estirarse: una caja del ancho del panel con
     el QR flotando al centro deja dos huecos que no dicen nada. */
  width: fit-content;
  max-width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--t-s3-26);
}

/* El QR real que devuelve Evolution es denso: 348x348px nativos, verificado
   decodificando el PNG real (Baileys mete bastante dato en el pairing ref
   y eso obliga a mas modulos, mas chicos). Mostrarlo mas chico que su
   tamaño nativo (220px, como estaba) encoge modulos que ya eran finos -
   reportado por el dueño: "el de Evolution directo si lo lee, el nuestro
   no". Se muestra a su tamaño real en vez de encogerlo sin necesidad. */
.instance-qr-image {
  width: min(348px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10px;
  border-radius: 8px;
  background: var(--t-s3-27);
  /* Si el navegador igual tiene que escalar (pantalla angosta, densidad de
     pixeles no entera), que mantenga los bordes duros de cada modulo en vez
     de difuminarlos - un modulo borroso es justo lo que una camara no puede
     resolver. */
  image-rendering: pixelated;
}

.instance-qr-placeholder {
  display: grid;
  place-items: center;
  width: min(348px, 100%);
  aspect-ratio: 1;
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

.instance-qr-pairing {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 0;
  text-align: center;
}

.instance-qr-pairing strong {
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: 2px;
}

.instance-qr-hint {
  margin: 0;
  max-width: 34ch;
  text-align: center;
}

/* El texto solo etiqueta; lo pulsable es la flecha, y lleva el acento de
   marca para que se vea que es la accion y no un adorno. */
/* El TLS relajado va con el codigo, no en el bloque avanzado: es la salida
   cuando el certificado del servidor impide conectar. */
.instance-qr-tls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-size: var(--type-meta);
  color: var(--muted);
}

.instance-qr-tls input {
  width: auto;
  margin: 0;
}

.instance-qr-refresh-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}

.instance-qr-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--action-compact-height, 30px);
  height: var(--action-compact-height, 30px);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 48%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: color-mix(in srgb, var(--brand) 90%, var(--text));
}

.instance-qr-refresh:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand) 76%, transparent);
  background: color-mix(in srgb, var(--brand) 22%, transparent);
}

.instance-qr-refresh:disabled {
  opacity: 0.6;
}

/* Sin boton que pulsar: es solo el aviso de que el reinicio automatico esta
   en curso (ver pedirCodigo en settings-view.js), para que el QR viejo no se
   quede quieto sin explicacion. */
.instance-qr-autoreset {
  margin: 6px 0 0;
  text-align: center;
}

.danger-text {
  color: var(--t-s3-28);
}

.schedule-row,
.exception-row,
.health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--t-s3-29);
}

.schedule-row {
  padding: 8px 10px;
  border-color: var(--t-s3-30);
}

.schedule-edit-list {
  gap: 8px;
}

.settings-form-button {
  justify-self: start;
  width: auto;
  min-width: 156px;
}

.schedule-editor-row {
  display: grid;
  grid-template-columns: minmax(82px, 112px) minmax(300px, 1fr) minmax(300px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
}

.schedule-day {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.schedule-shift {
  display: grid;
  grid-template-columns: minmax(76px, 92px) minmax(136px, 1fr) minmax(136px, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.schedule-shift-afternoon {
  grid-template-columns: minmax(64px, 76px) minmax(136px, 1fr) minmax(136px, 1fr);
  margin-left: 22px;
}

.schedule-shift-toggle {
  min-width: 0;
  color: var(--t-s3-31);
  font-size: 12px;
  font-weight: 400;
}

/* #setupSchedule (id, gana cualquier guerra de especificidad) porque un
   utilitario generico "label span" en otra parte del wizard esta pisando
   el peso/color de este span especifico, al vivir dentro de un <label>. */
#setupSchedule .schedule-shift-toggle span {
  color: var(--t-s3-31);
  font-weight: 400;
}

.schedule-shift input[type="time"] {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 38px;
  text-align: center;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--t-s3-30);
  background: var(--t-s3-32);
  color: var(--t-s3-33);
}

.exception-form .form-grid {
  grid-template-columns: minmax(160px, 190px) minmax(240px, 1fr);
  align-items: end;
}

.exceptions-list {
  margin-top: 12px;
}

.exception-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(220px, 1fr) 48px 72px 86px;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
}

.exception-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 46px;
  min-height: 28px;
  padding: 4px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.exception-status-toggle:hover:not(:disabled) {
  transform: translateY(-1px);
}

.exception-status-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.exception-status-track {
  position: relative;
  width: 38px;
  height: 20px;
  flex: 0 0 38px;
  border-radius: 999px;
  background: var(--t-s3-34);
  box-shadow: inset 0 0 0 1px var(--t-s3-35);
}

.exception-status-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--t-s3-36);
  box-shadow: 0 2px 6px var(--t-s3-37);
  transition: transform 0.18s ease, background 0.18s ease;
}

.exception-status-toggle.active .exception-status-track {
  background: var(--t-s3-38);
  box-shadow: inset 0 0 0 1px var(--t-s3-39), 0 0 10px var(--t-s3-40);
}

.exception-status-toggle.active .exception-status-thumb {
  transform: translateX(18px);
  background: var(--t-s3-41);
}

.exception-edit-button,
.exception-delete-button {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}

.exception-edit-button {
  border-color: var(--t-s3-42);
  background: var(--t-s3-43);
  color: var(--t-s3-44);
}

.exception-edit-button:hover:not(:disabled) {
  border-color: var(--t-s3-45);
  background: var(--t-s3-46);
  color: var(--t-s3-47);
}

.exception-reason {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--font-size, 14px) + 2px);
}

@media (max-width: 980px) {
  .schedule-editor-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .schedule-shift {
    grid-template-columns: minmax(82px, 110px) minmax(110px, 1fr) minmax(110px, 1fr);
  }

  .schedule-shift-afternoon {
    margin-left: 0;
  }

  .exception-form .form-grid,
  .exception-row {
    grid-template-columns: 1fr;
  }

  .exception-reason {
    white-space: normal;
  }
}

.monitor-grid {
  grid-template-columns: 300px minmax(0, 1fr);
}

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

.empty-state {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid var(--t-s3-48);
  border-radius: var(--radius);
  background: var(--t-s3-49);
  box-shadow: var(--shadow);
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: 160ms var(--ease);
}

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

@media (max-width: 1180px) {
  
.daily-grid,
  .appointments-layout,
  .prices-layout,
  .settings-grid,
  .monitor-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-view="prices"] {
    overflow: auto;
  }

  body[data-active-view="prices"] .main {
    display: block;
    height: auto;
    min-height: var(--app-viewport-height);
    overflow: visible;
  }

  .prices-view {
    height: auto;
    overflow: visible;
  }

  .prices-layout {
    height: auto;
  }

  .price-form,
  .price-table-panel {
    height: auto;
  }

  .price-table-panel .price-list {
    max-height: min(620px, 62vh);
  }

  
.chat-messages {
    max-height: 520px;
  }
}

@media (max-width: 720px) {
  .assistant-settings-fields {
    grid-template-columns: 1fr;
  }

  .lite-settings-cards {
    grid-template-columns: 1fr;
  }

  .lite-settings-card {
    min-height: 158px;
    padding: 18px;
  }

  .lite-business-panel .system-config-form > .form-grid:first-child,
  .lite-business-panel .system-config-section .form-grid {
    grid-template-columns: 1fr;
  }

  .lite-contact-fields-grid .system-config-field .field-help {
    white-space: normal;
  }

  .lite-settings-route-intro {
    gap: 12px;
  }

}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

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

  
.capacity-strip,
  .monitor-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  
.page-header,
  .chat-header,
  .appointment-row,
  .price-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .price-row {
    height: auto;
    min-height: 68px;
  }
}

/* ============================================================
   LITE · CLIENTES ACCIONABLES
   Lista corta, siguiente paso visible y una sola acción primaria.
   ============================================================ */

.lite-clients-view {
  width: min(100%, 1260px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.lite-clients-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 5px 2px 2px;
}

.lite-clients-header h1 {
  margin: 4px 0 7px;
  font-size: var(--type-page);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.lite-clients-intro {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.lite-clients-header-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

.lite-clients-search {
  width: min(340px, 42vw);
}

.lite-client-create-button {
  white-space: nowrap;
}

.lite-client-filter-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lite-client-filter-rail button {
  --tab-accent: var(--green);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lite-client-filter-rail button.quoted {
  --tab-accent: var(--t-s3-50);
}

.lite-client-filter-rail button.appointments {
  --tab-accent: var(--t-s3-51);
}

.lite-client-filter-rail button.attention {
  --tab-accent: var(--t-s3-52);
}

:root[data-theme="light"] .lite-client-filter-rail button.quoted {
  --tab-accent: var(--t-s3-53);
}

:root[data-theme="light"] .lite-client-filter-rail button.appointments {
  --tab-accent: var(--t-s3-54);
}

:root[data-theme="light"] .lite-client-filter-rail button.attention {
  --tab-accent: var(--t-s3-55);
}

.lite-client-filter-rail button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--green);
  outline-offset: -3px;
}

.lite-client-filter-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.lite-client-filter-icon .svg-icon {
  width: 15px;
  height: 15px;
  background: currentColor;
}

.lite-client-filter-copy {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lite-client-filter-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  place-items: center;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  font-weight: 700;
  line-height: 1;
}

.lite-clients-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(470px, 1fr);
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lite-client-list-panel,
.lite-client-focus {
  min-width: 0;
  overflow: hidden;
}

.lite-client-list-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
}

.lite-client-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.lite-client-section-heading h2 {
  margin: 3px 0 0;
  font-size: 1.08rem;
}

.lite-client-list {
  display: grid;
  flex: 1;
  align-content: start;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow-y: auto;
}

.lite-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 15px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease);
}

.lite-client-row:hover {
  background: var(--t-s3-56);
}

.lite-client-row.active {
  background: linear-gradient(90deg, var(--t-s3-57), var(--t-s3-58));
  box-shadow: inset 3px 0 0 var(--green);
}

.lite-client-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--green);
  outline-offset: -3px;
}

.lite-client-row-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 4px;
}

.lite-client-row-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lite-client-row-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.lite-client-row-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  flex: 0 1 auto;
}

.lite-client-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--t-s3-56);
  color: var(--soft);
  white-space: nowrap;
  flex: 0 0 auto;
}

.lite-client-status.blue {
  border-color: var(--t-s3-59);
  background: var(--t-s3-60);
  color: var(--t-s3-61);
}

.lite-client-status.amber {
  border-color: var(--t-s3-62);
  background: var(--t-s3-63);
  color: var(--amber);
}

.lite-client-status.green {
  border-color: var(--t-s3-64);
  background: var(--t-s3-65);
  color: var(--green);
}

.lite-client-status.red {
  border-color: var(--t-s3-66);
  background: var(--t-s3-67);
  color: var(--t-s3-68);
}

.lite-client-row-next {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lite-client-row-arrow {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
}

.lite-client-row.active .lite-client-row-arrow {
  color: var(--green);
}

.lite-client-focus {
  position: static;
  display: grid;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  gap: 10px;
  padding: 14px;
}

.lite-client-focus-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.lite-client-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--t-s3-69);
  border-radius: 12px;
  background: var(--t-s3-70);
  color: var(--green);
  font-size: 1.1rem;
  font-weight: 900;
}

.lite-client-avatar .svg-icon {
  width: 20px;
  height: 20px;
}

.lite-client-focus-name {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.lite-client-focus-name > span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lite-client-focus-name .editable-client-name-button {
  justify-content: flex-start;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lite-client-focus-name .editable-client-name-input {
  width: 100%;
  min-height: 34px;
}

.lite-client-next-card {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--steel);
  border-radius: 9px;
  background: color-mix(in srgb, var(--steel) 8%, var(--surface-1));
}

.lite-client-next-card .eyebrow {
  color: var(--steel);
  font-weight: 700;
}

.lite-client-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.lite-client-facts > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--t-s3-71);
}

.lite-client-fact-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--amber);
}

.lite-client-fact-label .svg-icon {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.lite-client-facts strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lite-client-system-fact {
  grid-column: 1 / -1;
}

.lite-client-system-fact .quote-system-flow {
  min-height: 22px;
}

.lite-client-primary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lite-client-primary-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding-inline: 10px;
  white-space: nowrap;
}

.lite-client-primary-actions .lite-client-action-button,
.lite-home-new-appointment {
  border: 1px solid var(--t-s3-72);
  border-radius: 9px;
  background: linear-gradient(135deg, var(--t-s3-73), var(--t-s3-56));
  color: var(--t-s3-74);
  box-shadow: inset 0 1px 0 var(--t-s3-75);
  font-weight: 800;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.lite-client-primary-actions .lite-client-new-quote,
.lite-home-new-quote {
  border-color: var(--t-s3-76);
  background: linear-gradient(135deg, var(--t-s3-77), var(--t-s3-01));
  color: var(--t-s3-78);
  box-shadow: inset 0 1px 0 var(--t-s3-79), 0 7px 18px var(--t-s3-80);
}

.lite-client-primary-actions .lite-client-action-button:hover,
.lite-home-new-appointment:hover {
  border-color: var(--t-s3-81);
  background: linear-gradient(135deg, var(--t-s3-82), var(--t-s3-83));
  transform: translateY(-1px);
}

.lite-client-primary-actions .lite-client-new-quote:hover,
.lite-home-new-quote:hover {
  border-color: var(--t-s3-84);
  background: linear-gradient(135deg, var(--t-s3-85), var(--t-s3-86));
  box-shadow: inset 0 1px 0 var(--t-s3-87), 0 10px 24px var(--t-s3-88);
}

.lite-client-primary-actions .lite-client-contact {
  grid-column: 1 / -1;
  min-height: 42px;
}

.lite-client-primary-actions .svg-icon {
  width: 18px;
  height: 18px;
}

.lite-client-more {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.lite-client-more summary {
  padding: 12px 0 0;
  color: var(--soft);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.lite-client-more dl {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.lite-client-more dl > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.75rem;
}

.lite-client-more dt {
  color: var(--muted);
}

.lite-client-more dd {
  min-width: 0;
  margin: 0;
  color: var(--soft);
  text-align: right;
}

.lite-client-delete-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t-s3-89);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.lite-client-delete-link .svg-icon {
  width: 14px;
  height: 14px;
}

.lite-client-empty,
.lite-client-focus-empty {
  display: grid;
  flex: 1;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-height: 260px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.lite-client-empty-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--t-s3-90);
  border-radius: 50%;
  background: var(--t-s3-91);
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 900;
}

.lite-client-empty strong,
.lite-client-focus-empty strong {
  color: var(--ink);
}

.lite-client-empty p,
.lite-client-focus-empty p {
  max-width: 320px;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  body[data-active-view="clients"] {
    overflow: auto;
  }

  body[data-active-view="clients"] .main {
    display: block;
    height: auto;
    min-height: var(--app-viewport-height);
    overflow: visible;
  }

  .lite-clients-view,
  .lite-clients-layout {
    height: auto;
    overflow: visible;
  }

  .lite-clients-layout {
    grid-template-columns: 1fr;
  }

  .lite-client-focus {
    position: static;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .lite-clients-header,
  .lite-clients-header-actions {
    display: grid;
    align-items: stretch;
  }

  .lite-clients-header-actions {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .lite-clients-search,
  .lite-client-create-button {
    width: 100%;
  }

  .lite-client-list {
    max-height: none;
  }

  .lite-client-row {
    padding-inline: 14px;
  }

  .lite-client-row-heading {
    flex-wrap: wrap;
  }

  .lite-client-row-next {
    white-space: normal;
  }

  .lite-client-row-arrow {
    display: none;
  }

  .lite-client-next-card {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .lite-client-filter-copy {
    overflow: visible;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }

  .lite-client-focus-header {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .lite-client-focus-header > .lite-client-status {
    grid-column: 2;
    justify-self: start;
  }

  .lite-client-facts,
  .lite-client-primary-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lite-client-filter-rail button,
  .lite-client-row {
    transition: none;
  }
}

/* Control panel composition */
.app-shell {
  grid-template-columns: 226px minmax(0, 1fr);
}

.sidebar {
  padding: 44px 22px 22px 12px;
  background: linear-gradient(180deg, var(--t-s3-92), var(--t-s3-93));
}

.brand {
  gap: 10px;
  margin-bottom: 22px;
}

.brand strong {
  color: var(--t-s3-94);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
}

.brand p {
  color: var(--t-s3-95);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  text-shadow: 0 0 0.3px currentColor, 0 0 0.3px currentColor;
}

.brand-mark {
  border: 0;
  background: transparent;
}

.leaf-mark {
  position: relative;
  width: 52px;
  height: 64px;
}

.leaf-mark span {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 46px;
  border: 4px solid var(--t-s3-96);
  border-right: 0;
  border-bottom: 0;
  border-radius: 28px 0 0 0;
  transform: rotate(34deg);
  transform-origin: bottom center;
  filter: drop-shadow(0 0 12px var(--t-s3-97));
}

.leaf-mark span:nth-child(2) {
  top: 9px;
  left: 20px;
  height: 40px;
  opacity: 0.86;
}

.leaf-mark span:nth-child(3) {
  top: 18px;
  left: 26px;
  height: 34px;
  opacity: 0.72;
}

.nav-list {
  gap: 16px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 850;
}

.nav-item::before {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: currentColor;
  font-size: 24px;
  line-height: 1;
}

.nav-item[href="#overview"]::before {
  content: "⌂";
}

.nav-item[href="#conversations"]::before {
  content: "▣";
}

.nav-item[href="#appointments"]::before {
  content: "▤";
}

.nav-item[href="#clients"]::before {
  content: "♙";
}

.nav-item[href="#prices"]::before {
  content: "◇";
}

.nav-item[href="#settings-basic"]::before {
  content: "⚙";
}

.nav-item[href="#monitoring"]::before {
  content: "▧";
}

.nav-item.active {
  border-color: var(--t-s3-98);
  background: linear-gradient(90deg, var(--t-s3-99), var(--t-s3-100));
  box-shadow:
    inset 4px 0 0 var(--t-s3-101),
    0 0 28px var(--t-s3-102);
}

.nav-subtree {
  margin-top: 6px;
  padding-left: 58px;
}

.nav-subitem {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 15px;
}

.nav-subitem.active {
  border-color: var(--t-s3-103);
  background: var(--t-s3-104);
  color: var(--ink);
}

.sidebar-status {
  display: none;
}

.main {
  width: 100%;
  max-width: none;
  padding: 20px 26px 28px 38px;
}

body[data-active-view="conversations"] .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--app-viewport-height);
  min-height: 0;
  padding: 10px 20px 4px 20px;
  overflow: hidden;
}

body[data-active-view="conversations"] {
  overflow: hidden;
}

body[data-active-view="conversations"] .global-alert-bar {
  flex-wrap: nowrap;
  min-height: 42px;
  max-height: 42px;
  margin-bottom: 6px;
}

body[data-active-view="prices"] {
  overflow: hidden;
}

body[data-active-view="prices"] .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--app-viewport-height);
  min-height: 0;
  overflow: hidden;
}

body[data-active-view="appointments"] {
  overflow: hidden;
}

body[data-active-view="appointments"] .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--app-viewport-height);
  min-height: 0;
  overflow: hidden;
}

body[data-active-view="appointments"] .global-alert-bar {
  flex-wrap: nowrap;
  min-height: 42px;
  max-height: 42px;
  margin-bottom: 6px;
}

/* Cotizaciones comparte el área contenida de Agenda. */
body[data-active-view="quotes"] {
  overflow: hidden;
}

body[data-active-view="quotes"] .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--app-viewport-height);
  min-height: 0;
  overflow: hidden;
}

body[data-active-view="quotes"] .global-alert-bar {
  flex-wrap: nowrap;
  min-height: 42px;
  max-height: 42px;
  margin-bottom: 6px;
}

/* Hoy ancla Próxima Evaluación al pie real de la página: el layout llena
   el alto disponible y Próximas tareas hace scroll interno en vez de
   empujar el resto de la página hacia abajo. */
body[data-active-view="overview"] {
  overflow: hidden;
}

body[data-active-view="overview"] .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--app-viewport-height);
  min-height: 0;
  overflow: hidden;
}

body[data-active-view="overview"] .lite-home-view {
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

body[data-active-view="overview"] .lite-home-layout {
  min-height: 0;
}

/* Clientes Lite mantiene la misma superficie acotada de Agenda. */
body[data-active-view="clients"] {
  overflow: hidden;
}

body[data-active-view="clients"] .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--app-viewport-height);
  min-height: 0;
  overflow: hidden;
}

body[data-active-view="clients"] .global-alert-bar {
  flex-wrap: nowrap;
  min-height: 42px;
  max-height: 42px;
  margin-bottom: 6px;
}

.prices-view {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Precios necesita más superficie útil para sus dos catálogos, sin superar
   nunca el ancho disponible después del menú lateral. */
body[data-active-view="prices"] .main {
  width: min(2200px, 100%);
}

/* Servicios y Conversiones usan el mismo desplegable nativo de Horarios. */
.prices-disclosures {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: var(--space-3);
  overflow: hidden;
}

.prices-disclosure[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}

.prices-disclosure-content {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.prices-services-layout,
.prices-conversions-section > .prices-layout {
  height: 100%;
  min-height: 0;
}

.prices-disclosure .price-table-panel .price-list {
  /* Cada catálogo conserva una ventana navegable. El excedente pertenece a
     la lista, no al documento ni a una fila parcialmente recortada. */
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.prices-services-section {
  height: 100%;
  min-height: 0;
}

.prices-services-layout {
  min-height: 0;
}

/* En tabletas y móviles la vista deja de tener un alto contenido. No se debe
   heredar el mecanismo de escritorio: cada bloque recupera su alto natural y
   solo la lista conserva su propio scroll cuando realmente excede la pantalla. */
@media (max-width: 1180px) {
  .prices-disclosures,
  .prices-disclosure-content,
  .prices-services-section,
  .prices-services-layout,
  .prices-conversions-section > .prices-layout {
    height: auto;
    overflow: visible;
  }

  .prices-disclosure[open] {
    display: block;
    flex: 0 0 auto;
  }

  .prices-disclosure .price-table-panel .price-list {
    height: auto;
    max-height: min(620px, 62vh);
    overflow-y: auto;
  }
}

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

.service-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

.price-form > .service-form-footer .primary-button {
  margin-top: 0;
}

.services-toolbar {
  grid-template-columns: minmax(0, 1fr);
}

.service-catalog-list {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
}

.service-catalog-row {
  /* Una fila de servicio tiene dos regiones reales: el resumen y su
     información desplegable. La grilla vertical evita que el segundo bloque
     invada la siguiente fila cuando está contraído o abierto. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  align-self: start;
  min-height: 0;
  height: auto;
  padding: 8px 10px;
}

.service-catalog-row-main {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(92px, max-content) max-content;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

.service-catalog-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.service-catalog-price {
  justify-self: end;
  white-space: nowrap;
}

.service-status-toggle {
  justify-self: end;
}

.service-catalog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.service-catalog-details {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--border-default);
}

.service-catalog-details > summary {
  width: max-content;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 400;
}

.service-catalog-details-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.service-catalog-details .service-catalog-marker {
  white-space: nowrap;
}

/* En el ancho intermedio se conserva la lectura de cada servicio: nombre y
   acciones quedan alineados arriba; su marcador técnico ocupa una línea propia. */
@media (max-width: 900px) {
  .service-catalog-row-main {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
  }
}

@media (max-width: 620px) {
  .prices-disclosures { overflow: visible; }
  .service-catalog-row-main { grid-template-columns: minmax(0, 1fr) auto; }
  .service-catalog-price,
  .service-catalog-actions { grid-column: 1 / -1; justify-self: start; }

  .service-catalog-details-content { align-items: flex-start; flex-direction: column; }
}

.prices-conversions-section {
  display: grid;
  /* Ya no hay encabezado interno: el único hijo es el área de trabajo y debe
     recibir toda la altura disponible, igual que Servicios. */
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  gap: var(--space-3);
}

.prices-conversions-heading h2,
.prices-conversions-heading p {
  margin: 0;
}

.prices-conversions-heading p {
  margin-top: 2px;
}

.control-view {
  gap: 14px;
}

.control-header {
  min-height: 58px;
}

.control-header .eyebrow {
  margin-bottom: 6px;
  color: var(--t-s3-105);
  font-weight: 900;
  text-transform: none;
}

.control-header h1 {
  color: var(--t-s3-106);
  font-size: 16px;
  line-height: 1.2;
}

.page-header .eyebrow {
  margin-bottom: 6px;
  color: var(--t-s3-105);
  font-weight: 900;
  text-transform: none;
}

.page-header h1 {
  color: var(--t-s3-106);
  font-size: 16px;
  line-height: 1.2;
}

.control-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--t-s3-107);
  font-weight: 800;
}

.date-pill {
  white-space: nowrap;
}

.system-pill {
  border-color: var(--t-s3-108);
  background: var(--t-s3-104);
  color: var(--t-s3-109);
}

.metric-green {
  color: var(--green);
}

.metric-purple {
  color: var(--purple);
}

.metric-blue {
  color: var(--blue);
}

.metric-amber {
  color: var(--amber);
}

.progress-track {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.daily-grid {
  grid-template-columns: minmax(600px, 1fr) minmax(600px, 1fr);
  gap: 14px;
  align-items: start;
}


.daily-panel,
.mini-conversations {
  border-color: var(--t-s3-110);
  background: var(--t-s3-111);
  box-shadow: none;
}

.daily-panel {
  padding: 13px 10px 15px;
}

.daily-panel > .panel-header {
  margin: 0 10px 44px;
}

.daily-panel-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.daily-title-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--info) 28%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
}

.daily-title-icon .line-icon {
  width: 20px;
  height: 20px;
}


.daily-panel h2,
.mini-conversations h2 {
  font-size: var(--content-title-size);
}

.mini-conversations h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-stack {
  gap: 14px;
}

.table-section {
  border: 1px solid var(--t-s3-112);
  border-radius: 8px;
  overflow: hidden;
  background: var(--t-s3-113);
}

.table-section .task-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  overflow-y: auto;
  scrollbar-color: var(--t-s3-114) var(--t-s3-115);
  scrollbar-width: thin;
}

.confirm-section .task-list {
  max-height: 230px;
}

.gold-section .task-list,
.revive-section .task-list {
  max-height: 205px;
}

.task-title {
  min-height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid var(--t-s3-116);
  background: var(--t-s3-117);
}

.task-title h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--t-s3-94);
}

.task-title small {
  margin-right: auto;
  color: var(--text-muted);
}

.task-title-copy {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

.task-title-copy small {
  margin-right: 0;
  margin-bottom: 3px;
  font-weight: 600;
}

.task-title > span,
.mini-conversations h2 span {
  display: inline-grid;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid var(--t-s3-118);
  border-radius: 999px;
  background: var(--t-s3-104);
  color: var(--t-s3-119);
  line-height: 1;
}

.section-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 15px;
  background: color-mix(in srgb, currentColor 13%, transparent);
}

.section-icon .line-icon {
  width: 18px;
  height: 18px;
}

.section-icon.green {
  color: var(--green);
}

.section-icon.gold,
.section-icon.amber {
  color: var(--amber);
}

.section-icon.blue {
  color: var(--blue);
}

.section-icon.purple {
  color: var(--purple);
}

.section-icon.red {
  color: var(--red);
}

.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--action-normal-height);
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--green) 11%, transparent);
  color: var(--green);
  font-size: var(--type-body);
  font-weight: 900;
  text-decoration: none;
}

.ghost-link:hover {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 17%, transparent);
}

.data-table {
  display: grid;
}

.table-head,
.table-row {
  display: grid;
  grid-template-columns: 1.15fr 1.05fr 1.45fr 1.25fr 1.42fr;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
}

.gold-table .table-head,
.gold-table .table-row,
.revive-table .table-head,
.revive-table .table-row {
  grid-template-columns: 1.18fr 1.45fr 1.18fr 0.95fr 1fr;
}

.table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 34px;
  border-bottom: 1px solid var(--t-s3-120);
  background: var(--t-s3-121);
  box-shadow: 0 8px 18px var(--t-s3-122);
  color: var(--t-s3-123);
  font-size: 13px;
  font-weight: 900;
}

.table-row {
  border-top: 1px solid var(--t-s3-124);
  color: var(--t-s3-125);
  font-size: 14px;
}

.table-row strong {
  color: var(--t-s3-126);
}

.row-actions {
  display: flex;
  gap: 8px;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.action-button.call {
  border: 1px solid var(--t-s3-127);
  background: var(--t-s3-29);
  color: var(--t-s3-128);
}

.action-button.whatsapp {
  border: 1px solid var(--t-s3-129);
  background: var(--t-s3-130);
  color: var(--t-s3-131);
}

.action-button.contact {
  border: 1px solid var(--t-s3-132);
  background: var(--t-s3-133);
  color: var(--t-s3-134);
}

.action-button.follow {
  border: 1px solid var(--t-s3-135);
  background: var(--t-s3-136);
  color: var(--t-s3-137);
}

.interest-chip {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid var(--t-s3-138);
  border-radius: 6px;
  background: var(--t-s3-139);
  color: var(--t-s3-140);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.alert-list {
  gap: 8px;
}

.mini-conversations {
  padding: 12px;
}

.mini-conversations .panel-header {
  margin-bottom: 10px;
}

.mini-search input {
  min-height: 38px;
  margin-bottom: 10px;
  border-color: var(--line);
  background: var(--panel-2);
}

.mini-chat-grid {
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 274px;
  gap: 11px;
}

.mini-chat-list {
  gap: 6px;
}

.mini-chat-list button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 7px 9px;
}


.mini-chat-list button.client-needs-attention {
  border-color: var(--t-s3-141);
  background: var(--t-s3-104);
  box-shadow: inset 3px 0 0 var(--t-s3-101);
}

.avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--t-s3-142);
  color: var(--t-s3-143);
  font-size: 14px;
  font-weight: 900;
}

.mini-chat-copy {
  min-width: 0;
}

.mini-chat-copy strong,
.mini-chat-copy small,
.mini-chat-right small {
  display: block;
}

.mini-chat-copy strong {
  color: var(--ink);
}

.mini-chat-copy small,
.mini-chat-right small {
  color: var(--muted);
  font-size: 12px;
}

.mini-chat-right {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.mini-chat-right .tag {
  padding: 3px 6px;
  font-size: 11px;
}

.mini-chat-preview {
  padding: 0;
  background: transparent;
  border: 0;
}

.mini-chat-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  height: 100%;
}

.mini-chat-live section,
.mini-chat-live aside {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--t-s3-116);
  border-radius: 8px;
  background: var(--t-s3-144);
}

.mini-chat-live header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}

.mini-chat-live header small {
  margin-left: auto;
  color: var(--t-s3-107);
}

.bubble {
  max-width: 82%;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 8px;
  color: var(--t-s3-145);
  font-size: 13px;
  line-height: 1.35;
}

.bubble.client {
  background: var(--t-s3-146);
}

.mini-chat-live aside h3 {
  margin-bottom: 13px;
  color: var(--t-s3-147);
}

.context-line {
  padding: 10px 0;
  border-top: 1px solid var(--t-s3-124);
}

.context-line span,
.context-line strong {
  display: block;
}

.context-line span {
  color: var(--t-s3-148);
  font-size: 12px;
  font-weight: 850;
}

.context-line strong {
  margin-top: 5px;
  color: var(--t-s3-149);
  font-size: 13px;
}

@media (max-width: 1480px) {
  .daily-grid {
    grid-template-columns: 1fr;
  }
}

/* Appointments control view */
.appointments-view {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Pedido explicito del usuario: en modo noche, el contenedor de Agenda
   (.lite-agenda-shell) debe tener el mismo color que el contenedor del
   mini-calendario (.agenda-calendar-sidebar, fondo plano
   var(--surface-1)) - se quita el degradado que tenia, dejando el mismo
   fondo plano que ya usa el mini-calendario. */

:root:not([data-theme="light"]) .lite-agenda-shell {
  background: var(--panel);
}

.module-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.module-title h1 {
  margin: 0;
  line-height: 1.05;
}

.appointments-toolbar {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--t-s4-01);
  border-radius: 8px 8px 0 0;
  background: var(--t-s4-02);
}

.appointment-tabs {
  width: max-content;
}

.appointment-tabs button {
  flex: 0 0 auto;
  min-width: 112px;
  padding: 0 12px;
  white-space: nowrap;
}

.date-navigator {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
}

.date-navigator button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--t-s4-03);
  border-radius: 7px;
  background: var(--t-s4-04);
  color: var(--t-s4-05);
  font-size: 22px;
}

.date-navigator strong {
  min-width: 230px;
  color: var(--t-s4-06);
  font-size: 13px;
  text-align: center;
  text-transform: capitalize;
}

.block-button {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid var(--t-s4-07);
  border-radius: 7px;
  background: var(--t-s4-08);
  color: var(--t-s4-09);
  font-weight: 900;
}

.day-capacity {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  min-height: 60px;
  padding: 0 14px;
  border-right: 1px solid var(--t-s4-01);
  border-left: 1px solid var(--t-s4-01);
  background: var(--t-s4-10);
  color: var(--t-s4-11);
  font-size: 13px;
  font-weight: 800;
}

.capacity-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--t-s4-12);
}

.capacity-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--t-s4-13);
  box-shadow: 0 0 18px var(--t-s4-14);
}

.appointments-table-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--t-s4-01);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.appointments-table {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: var(--t-s4-15) var(--t-s4-16);
  scrollbar-width: thin;
}

.appointments-head {
  display: grid;
  grid-template-columns: 136px 360px 250px 210px 178px minmax(166px, 1fr);
  column-gap: 28px;
  row-gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--t-s4-17);
  color: var(--t-s4-18);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 8px 18px var(--t-s4-19);
}

/* Pedido explicito del usuario: cada cita debe verse como su propio
   contenedor (tarjeta separada), no como una lista continua - se agrega
   margen entre tarjetas (en .appointment-item) y un borde/radio propio
   aca en vez del border-top que las mantenia flush entre si. */
.appointment-item {
  margin: 10px;
}

.appointments-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 76px;
  padding: 16px 14px 12px 17px;
  border: 1px solid var(--t-s4-20);
  border-radius: 10px;
  color: var(--t-s4-06);
  cursor: pointer;
}

.appointment-item.expanded {
  background:
    linear-gradient(90deg, var(--t-s4-21), var(--t-s4-22)),
    var(--t-s4-23);
}

.appointment-item.pending-optimistic {
  opacity: 0.6;
}

.appointment-item.pending-optimistic .appointments-row {
  pointer-events: none;
}

/* Pedido explicito del usuario: la tarjeta seleccionada (click en "Ver
   responsables") se marca con un marco verde fino - mismo patron ya usado
   para la columna de "hoy" en Semana (box-shadow con spread fraccionario
   en vez de border-width, que los navegadores redondean a 1px y se ve
   grueso). */
.appointments-row.expanded {
  border-color: transparent;
  box-shadow: inset 0 0 0 0.5px var(--brand);
}

.appointment-validity-group {
  border-top: 1px solid var(--t-s4-24);
}

.appointment-validity-group:first-child {
  border-top: 0;
}

/* Pedido explicito del usuario: mismo oscurecimiento que el resto de
   encabezados de grupo - se veia muy blanca/brillante en modo noche. */
.appointment-validity-header,
.lite-agenda-validity-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid var(--t-s4-25);
  background: linear-gradient(90deg, var(--t-s4-26), var(--t-s4-27));
}

.appointment-validity-header strong,
.lite-agenda-validity-group > header strong {
  color: var(--t-s4-28);
}

.appointment-validity-header span,
.lite-agenda-validity-group > header span {
  color: var(--t-s4-29);
  font-weight: 700;
}

.appointment-validity-group.expired > .appointment-validity-header,
.lite-agenda-validity-group.expired > header {
  background: linear-gradient(90deg, var(--t-s4-30), var(--t-s4-23));
}

.appointment-validity-group.expired > .appointment-validity-header span,
.lite-agenda-validity-group.expired > header span {
  color: var(--t-s4-31);
}

.appointment-validity-empty,
.lite-agenda-validity-empty {
  margin: 0;
  padding: 15px 16px;
  color: var(--muted);
  font-size: 0.72rem;
}

.appointment-system-flow {
  display: inline-grid;
  flex: 0 0 auto;
  grid-template-columns: 84px 18px 52px;
  align-items: center;
  column-gap: 7px;
  min-width: 0;
  justify-self: start;
  margin-right: 36px;
}

.appointment-system-arrow {
  justify-self: center;
  color: var(--t-s4-18);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.appointment-system-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  border-radius: 999px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.appointment-system-pill.gasolina {
  border: 1px solid var(--t-s4-32);
  background:
    linear-gradient(180deg, var(--t-s4-33), var(--t-s4-34));
  color: var(--t-s4-35);
}

.appointment-system-pill.diesel {
  border: 1px solid var(--t-s4-36);
  background:
    linear-gradient(180deg, var(--t-s4-37), var(--t-s4-38));
  color: var(--t-s4-39);
}

.appointment-system-pill.glp {
  border: 1px solid var(--t-s4-40);
  background: var(--t-s4-41);
  color: var(--t-s4-42);
}

.appointment-system-pill.gnv {
  border: 1px solid var(--t-s4-43);
  background: var(--t-s4-44);
  color: var(--t-s4-45);
}

.appointment-system-pill.other {
  border: 1px solid var(--t-s4-46);
  background: var(--t-s4-47);
  color: var(--t-s4-28);
}

.quote-system-flow {
  grid-template-columns: 84px 18px 52px;
  margin-right: 0;
}

.quote-system-flow .appointment-system-pill {
  min-height: 22px;
}

.quote-system-flow .appointment-system-arrow {
  font-size: 15px;
}

.context-icon-button,
.icon-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--t-s4-48);
  border-radius: 8px;
  background: var(--t-s4-49);
  color: var(--t-s4-50);
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.context-icon-button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  border-color: var(--t-s4-51);
  background: var(--t-s4-52);
  box-shadow: 0 0 0 1px var(--t-s4-53);
}

.appointment-cancel-button {
  border-color: var(--t-s4-54);
  background: var(--t-s4-55);
  color: var(--t-s4-56);
}

.appointment-cancel-button:hover:not(:disabled) {
  border-color: var(--t-s4-57);
  background: var(--t-s4-58);
  box-shadow: 0 0 0 1px var(--t-s4-59);
}

.context-block-appointment .appointment-create-button,
.context-block-appointment .appointment-confirm-button,
.context-block-appointment .appointment-reschedule-button {
  border-color: var(--t-s4-60);
  background: var(--t-s4-61);
  color: var(--t-s4-62);
}

.context-block-appointment .appointment-create-button:hover:not(:disabled),
.context-block-appointment .appointment-confirm-button:hover:not(:disabled),
.context-block-appointment .appointment-reschedule-button:hover:not(:disabled) {
  border-color: var(--t-s4-63);
  background: var(--t-s4-64);
  box-shadow: 0 0 0 1px var(--t-s4-65);
}

.context-icon-button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.context-icon-button .svg-icon,
.icon-button .svg-icon {
  width: 18px;
  height: 18px;
}

.appointment-status {
  display: inline-flex;
  justify-content: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.appointment-status.confirmed {
  color: var(--t-s4-66);
}

.status-count.confirmed {
  border: 1px solid var(--t-s4-67);
  background: var(--t-s4-68);
  color: var(--t-s4-66);
}

.appointment-status.pending {
  color: var(--t-s4-69);
}

.status-count.pending {
  border: 1px solid var(--t-s4-70);
  background: var(--t-s4-71);
  color: var(--t-s4-69);
}

.appointment-rescheduled-mark {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status-count.rescheduled {
  border: 1px solid var(--t-s4-72);
  background: var(--t-s4-73);
  color: var(--t-s4-74);
}

.appointment-status.cancelled {
  color: var(--t-s4-75);
}

.status-count.cancelled {
  border: 1px solid var(--t-s4-76);
  background: var(--t-s4-77);
  color: var(--t-s4-75);
}

.appointment-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.appointment-detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--t-s4-78);
  background: var(--t-s4-79);
  color: var(--t-s4-80);
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease);
}

.appointment-detail-button:hover,
.appointment-detail-button.active {
  border-color: var(--t-s4-48);
  background: var(--t-s4-81);
  color: var(--t-s4-82);
}

.appointment-chat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--t-s4-83);
  border-radius: 8px;
  background: var(--t-s4-61);
  color: var(--t-s4-84);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease),
    color 160ms var(--ease);
}

.appointment-chat-button:hover {
  border-color: var(--t-s4-85);
  background: var(--t-s4-64);
  box-shadow: 0 0 18px var(--t-s4-65);
}

.appointment-chat-button .svg-icon {
  width: 13px;
  height: 13px;
}

.appointment-detail-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px 14px 148px;
  border-top: 1px solid var(--t-s4-86);
}

.appointment-responsible {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--t-s4-20);
  border-radius: 8px;
  background: var(--t-s4-87);
}

.appointment-responsible-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--t-s4-88);
  color: var(--t-s4-84);
}

.appointment-responsible-icon .svg-icon {
  width: 18px;
  height: 18px;
}

.appointment-responsible-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.appointment-responsible-copy small {
  color: var(--t-s4-18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.appointment-responsible-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--t-s4-89);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-responsible-copy em {
  min-width: 0;
  overflow: hidden;
  color: var(--t-s4-90);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointments-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0 0;
}

.appointment-status-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.status-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.status-count strong {
  font-size: 13px;
}

.export-button {
  min-width: 150px;
}

@media (max-width: 1180px) {
  .appointments-toolbar,
  .day-capacity {
    grid-template-columns: 1fr;
  }

  .date-navigator {
    justify-content: start;
  }

  .appointment-detail-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 14px;
  }
}

@media (max-width: 760px) {
  .appointment-detail-panel {
    grid-template-columns: 1fr;
  }
}

/* Conversations desk */
.nav-item::before {
  content: none;
  display: none;
}

.nav-item svg,
.message small svg,
.ghost-button svg,
.primary-button svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message small .svg-icon {
  width: 15px;
  height: 15px;
}

.conversations-view {
  gap: 4px;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.conversations-header {
  align-items: start;
  min-height: 38px;
  margin-bottom: 0;
}

.conversations-header h1 {
  margin-top: 0;
  color: var(--t-s4-91);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
}

.conversations-header .eyebrow {
  color: var(--t-s4-92);
  line-height: 1;
  font-weight: 900;
  text-transform: none;
}

.conversations-header .control-meta {
  gap: 10px;
}

.conversations-header .system-pill {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.conversations-header .date-pill {
  font-size: 12px;
}


.chat-panel {
  min-width: 0;
  max-width: 100%;
  border-color: var(--t-s4-93);
  background:
    linear-gradient(180deg, var(--t-s4-94), transparent 34%),
    var(--t-s4-95);
}

.conversation-search input {
  min-height: 38px;
  margin-bottom: 8px;
  border-color: var(--t-s4-93);
  background: var(--t-s4-96);
}

.chat-tabs {
  gap: 5px;
  padding: 4px;
  min-width: 0;
  overflow: hidden;
}

.chat-tabs button {
  display: inline-flex;
  min-height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 5px 8px;
  font-weight: 560;
  overflow: hidden;
}

.chat-tab-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-tab-count {
  display: inline-grid;
  min-width: 22px;
  height: 20px;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--t-s4-97);
  color: var(--t-s4-98);
  font-weight: 400;
  line-height: 1;
}

.chat-tabs button.active .chat-tab-count {
  background: var(--t-s4-99);
  color: var(--green);
}

.client-attention-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--t-s4-13);
  box-shadow: 0 0 0 3px var(--t-s4-100), 0 0 12px var(--t-s4-101);
}

.chat-panel {
  width: 100%;
  min-width: 0;
}

.chat-header {
  align-items: center;
  min-height: 64px;
  padding: 10px 14px;
  background: var(--t-s4-102);
}

.chat-header-content {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-header-main {
  display: grid;
  grid-template-columns: minmax(180px, .85fr) minmax(0, 2.15fr);
  align-items: center;
  gap: clamp(18px, 2.1vw, 34px);
}

.chat-client-identity {
  min-width: 0;
}

.chat-client-phone {
  display: block;
  margin-top: 4px;
  color: var(--t-s4-103);
}

.chat-header-details {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(118px, .72fr);
  align-items: center;
  gap: 0;
  min-width: 0;
}

.chat-header-detail {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat-header-detail + .chat-header-detail {
  margin-left: clamp(12px, 1.5vw, 22px);
  padding-left: clamp(12px, 1.5vw, 22px);
  border-left: 1px solid var(--t-s4-93);
}

.chat-header-detail small {
  margin: 0;
  color: var(--t-s4-104);
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.chat-header-detail strong {
  overflow: hidden;
  color: var(--t-s4-105);
  font-size: 0.78rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-header h2 {
  margin-top: 3px;
  font-size: var(--content-title-size);
}

.chat-header small {
  display: block;
  margin-top: 3px;
  color: var(--t-s4-106);
}

@media (max-width: 1240px) {
  .chat-header-main {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .chat-header-details {
    grid-template-columns: minmax(0, 1.55fr) minmax(118px, .72fr);
  }
}

@media (max-width: 760px) {
  .chat-header-details {
    grid-template-columns: 1fr 1fr;
    gap: 8px 0;
  }

  .chat-header-detail + .chat-header-detail {
    margin-left: 12px;
    padding-left: 12px;
  }

}

.chat-control .primary-button,
.chat-control .danger-button,
.chat-control .caution-button {
  font-size: 14px;
  white-space: nowrap;
}

.chat-control .primary-button .svg-icon,
.chat-control .caution-button .svg-icon,
.context-actions .primary-button .svg-icon,
.context-actions .caution-button .svg-icon {
  width: 25px;
  height: 25px;
}

.chat-messages {
  padding: 14px;
  background:
    linear-gradient(90deg, var(--t-s4-102) 1px, transparent 1px),
    linear-gradient(var(--t-s4-23) 1px, transparent 1px);
  background-size: 36px 36px;
}

.message-line {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

.message-line.ai,
.message-line.advisor,
.message-line.system {
  justify-content: flex-end;
}

.message-line.human {
  justify-content: flex-start;
}

.message-line.ai .message-avatar,
.message-line.advisor .message-avatar,
.message-line.system .message-avatar {
  order: 2;
}

.message-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 950;
}

.message-line.human .message-avatar {
  border: 1px solid var(--t-s4-107);
  background: linear-gradient(135deg, var(--t-s4-108), var(--t-s4-109));
  color: var(--t-s4-92);
}

.message-line.ai .message-avatar {
  border: 1px solid var(--t-s4-110);
  background: radial-gradient(circle at 45% 35%, var(--t-s4-111), var(--t-s4-112));
  color: var(--t-s4-113);
  box-shadow: 0 0 18px var(--t-s4-114);
}

.message-line.advisor .message-avatar {
  border: 1px solid var(--t-s4-115);
  background: radial-gradient(circle at 45% 35%, var(--t-s4-116), var(--t-s4-117));
  color: var(--t-s4-118);
  box-shadow: 0 0 18px var(--t-s4-119);
}

.message-line.system .message-avatar {
  border: 1px solid var(--t-s4-120);
  background: radial-gradient(circle at 45% 35%, var(--t-s4-121), var(--t-s4-122));
  color: var(--t-s4-123);
  box-shadow: 0 0 18px var(--t-s4-124);
}

.message-line.quote-resolved-line .message-avatar {
  border-color: var(--t-s4-125);
  background: radial-gradient(circle at 45% 35%, var(--t-s4-126), var(--t-s4-127));
  color: var(--t-s4-128);
  box-shadow: 0 0 18px var(--t-s4-129);
}

.message-line.quote-sending-line .message-avatar {
  border-color: var(--t-s4-130);
  background: radial-gradient(circle at 45% 35%, var(--t-s4-131), var(--t-s4-132));
  color: var(--t-s4-133);
  box-shadow: 0 0 18px var(--t-s4-134);
}

.message-avatar .svg-icon {
  width: 24px;
  height: 24px;
}

.message {
  max-width: min(72%, 760px);
  min-width: 170px;
  padding: 10px 12px 7px;
  border-radius: 9px;
  position: relative;
  font-size: 15px;
  box-shadow: 0 12px 28px var(--t-s4-135);
}

.message.ai {
  border-color: var(--t-s4-136);
  background: linear-gradient(180deg, var(--t-s4-137), var(--t-s4-138));
  color: var(--t-s4-139);
}

.message.advisor {
  border-color: var(--t-s4-140);
  background: linear-gradient(180deg, var(--t-s4-71), var(--t-s4-141));
  color: var(--t-s4-142);
}

.message.advisor.document-message {
  border-color: var(--t-s4-143);
  background: linear-gradient(180deg, var(--t-s4-144), var(--t-s4-145));
  box-shadow: 0 12px 28px var(--t-s4-146), inset 0 1px 0 var(--t-s4-147);
}

.message.system {
  border: 1px solid var(--t-s4-148);
  background: linear-gradient(180deg, var(--t-s4-149), var(--t-s4-150));
  color: var(--t-s4-151);
}

.message.human {
  border-color: var(--t-s4-152);
  background: linear-gradient(180deg, var(--t-s4-153), var(--t-s4-154));
  color: var(--t-s4-89);
}

.message p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
}

.audio-message {
  width: min(360px, 100%);
}

.image-message {
  width: min(460px, 72%);
}

.image-message-body {
  display: grid;
  gap: 8px;
}

.image-message-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  overflow: hidden;
}

.image-message-button:focus-visible {
  outline: 2px solid var(--t-s4-155);
  outline-offset: 2px;
}

.image-message-preview,
.image-message-placeholder {
  width: 100%;
  max-height: 320px;
  border-radius: 7px;
}

.image-message-preview {
  display: block;
  object-fit: cover;
  transition: transform 160ms var(--ease), filter 160ms var(--ease);
}

.image-message-button:hover .image-message-preview {
  filter: brightness(1.08);
  transform: scale(1.015);
}

.image-message-placeholder {
  display: grid;
  min-height: 160px;
  place-items: center;
  gap: 8px;
  border: 1px dashed var(--t-s4-156);
  color: var(--t-s4-157);
}

.document-message {
  width: min(460px, 72%);
}

.document-message-card,
.location-message-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 250px;
}

.document-message-icon,
.location-message-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  background: var(--t-s4-97);
}

.message.advisor.document-message .document-message-icon {
  background: var(--t-s4-158);
  color: var(--t-s4-159);
}

.document-message-icon .svg-icon,
.location-message-icon .svg-icon {
  width: 20px;
  height: 20px;
}

.document-message-card strong,
.document-message-card small,
.location-message-card strong,
.location-message-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-message-card strong,
.location-message-card strong {
  font-weight: 650;
}

.document-message-card small,
.location-message-card small {
  margin-top: 2px;
  color: var(--t-s4-91);
  font-size: 11px;
}

.document-message-card a,
.location-message-card a {
  color: var(--t-s4-84);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.location-map-preview {
  position: relative;
  grid-column: 1 / -1;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid var(--t-s4-78);
  border-radius: 10px;
  background: var(--t-s4-160);
}

.location-map-preview iframe {
  display: block;
  width: 100%;
  height: 150px;
  border: 0;
  pointer-events: none;
  filter: saturate(0.78) contrast(1.04);
}

.location-map-preview .location-map-open {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--t-s4-161);
  border-radius: 999px;
  background: var(--t-s4-162);
  color: var(--t-s4-163);
  box-shadow: 0 6px 18px var(--t-s4-164);
}

.location-map-open .svg-icon {
  width: 13px;
  height: 13px;
}

.message.advisor.document-message .document-message-card a {
  color: var(--t-s4-165);
}

.location-message {
  width: min(480px, 72%);
}

.quote-delivery-message.pending {
  border-color: var(--t-s4-166);
  background: linear-gradient(180deg, var(--t-s4-167), var(--t-s4-168));
  box-shadow: 0 12px 28px var(--t-s4-146), inset 0 1px 0 var(--t-s4-169);
}

.quote-delivery-message.resolved {
  border-color: var(--t-s4-170);
  background: linear-gradient(180deg, var(--t-s4-171), var(--t-s4-172));
  color: var(--t-s4-173);
  box-shadow: 0 12px 28px var(--t-s4-146), inset 0 1px 0 var(--t-s4-174);
}

.quote-sending-message {
  border-color: var(--t-s4-175);
  background: linear-gradient(180deg, var(--t-s4-176), var(--t-s4-177));
  color: var(--t-s4-178);
  box-shadow: 0 12px 28px var(--t-s4-146), inset 0 1px 0 var(--t-s4-179);
}

.quote-delivery-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: min(360px, 100%);
}

.quote-delivery-alert strong {
  display: block;
  font-weight: 650;
}

.quote-delivery-alert p {
  margin-top: 3px;
}

.quote-retry-button,
.quote-delivery-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.quote-retry-button {
  border: 1px solid var(--t-s4-180);
  background: var(--t-s4-181);
  color: var(--t-s4-182);
  cursor: pointer;
}

.quote-retry-button:hover:not(:disabled) {
  border-color: var(--t-s4-183);
  background: var(--t-s4-184);
}

.quote-retry-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.quote-delivery-status {
  border: 1px solid var(--t-s4-185);
  background: var(--t-s4-186);
  color: var(--t-s4-187);
}

.quote-delivery-status.sending {
  border-color: var(--t-s4-40);
  background: var(--t-s4-188);
  color: var(--t-s4-189);
}

.sending-dots {
  display: inline-flex;
  margin-left: 2px;
  min-width: 14px;
}

.quote-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--t-s4-190);
  border-top-color: var(--t-s4-191);
  border-radius: 50%;
  animation: quote-spin 0.85s linear infinite;
}

.sending-dots span {
  animation: quote-dot 1.2s infinite ease-in-out;
  opacity: 0.28;
}

.sending-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.sending-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes quote-dot {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

@keyframes quote-spin {
  to {
    transform: rotate(360deg);
  }
}

.quote-retry-button .svg-icon,
.quote-delivery-status .svg-icon {
  width: 15px;
  height: 15px;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--t-s5-01);
  backdrop-filter: blur(10px);
}

.image-lightbox-frame {
  display: grid;
  gap: 12px;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  margin: 0;
}

.image-lightbox-frame img {
  display: block;
  max-width: min(96vw, 1200px);
  max-height: calc(92vh - 48px);
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 24px 80px var(--t-s5-02);
}

.image-lightbox-frame figcaption {
  max-width: min(96vw, 900px);
  justify-self: center;
  color: var(--t-s5-03);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  white-space: pre-wrap;
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--t-s5-04);
  border-radius: 50%;
  background: var(--t-s5-05);
  color: var(--t-s5-06);
}

.image-lightbox-close:hover {
  border-color: var(--t-s5-07);
  background: var(--t-s5-08);
}

.image-lightbox-close .svg-icon {
  width: 20px;
  height: 20px;
}

.audio-player {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: min(280px, 100%);
}

.audio-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--t-s5-09);
  color: currentColor;
}

.audio-icon .svg-icon {
  width: 17px;
  height: 17px;
}

.audio-player audio {
  width: 100%;
  min-width: 0;
  height: 38px;
}

.audio-record-button {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}

.audio-record-button .svg-icon {
  width: 20px;
  height: 20px;
}

.audio-record-button.recording {
  border-color: var(--t-s5-10);
  background: var(--t-s5-11);
  color: var(--t-s5-12);
}

.message-emoji {
  display: inline-block;
  font-size: 1.45em;
  line-height: 1;
  vertical-align: -0.1em;
}

.message footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 5px;
  color: var(--t-s5-13);
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 0;
}

.message footer time {
  color: var(--t-s5-06);
  font-size: 12px;
  font-weight: 400;
}

.message.ai footer {
  color: var(--t-s5-14);
}

.message.advisor footer {
  color: var(--t-s5-15);
}

.dashboard-message-signature {
  display: inline-block;
  margin-right: 3px;
  color: var(--t-s5-16);
  font-weight: 600;
  white-space: nowrap;
}

.message-checks {
  color: var(--t-s5-17);
  letter-spacing: -2px;
}

.message-delivery-failure {
  color: var(--t-s5-18);
  font-weight: 800;
  letter-spacing: .01em;
}

.meta-window-status { display: block; margin-top: 5px; font-weight: 700; }
.meta-window-status.active { color: var(--neon-green, var(--t-s5-19)); }
.meta-window-status.closed { color: var(--t-s5-20); }
/* Sin tope propio: sus tarjetas hermanas —channel-flow-card,
   channel-recovery-card— llenan la columna, y con `min(100%, 1200px)` esta se
   quedaba mas angosta y rompia la alineacion de la pantalla. */
.meta-templates-card { width: 100%; margin: 0; overflow: hidden; }
.meta-template-header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.meta-create-button { min-height: 40px; padding-inline: 15px; }
.meta-template-list { display: grid; gap: 10px; margin: 0; padding: 18px 26px 26px; }
/* Plegable: la fila colapsada solo muestra nombre, estado e idioma/categoría
   (el resumen); cuerpo, variables y motivo de rechazo quedan dentro y solo se
   pintan al abrir — antes todo se mostraba siempre, aunque hubiera muchas. */
.meta-template-row { border: 1px solid var(--t-s5-21); border-radius: 12px; overflow: hidden; background: var(--t-s5-22); }
.meta-template-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meta-template-row-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.meta-template-row-summary-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.meta-template-row-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.meta-template-row-icon-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.meta-template-row-body { display: grid; gap: 9px; padding: 4px 16px 16px; }
.meta-template-row-text { margin: 10px 0; color: var(--soft); line-height: 1.45; }
.meta-template-rejection { color: var(--warning); }

/* El color real se fija en visual-system.css (capa system): esa capa gana
   siempre sobre legacy, sin importar la especificidad acá. */
.meta-template-delete-icon-button {
  border-color: var(--t-s5-23);
  background: var(--t-s5-24);
}

.meta-template-delete-icon-button:hover:not(:disabled) {
  border-color: var(--t-s5-25);
  background: var(--t-s5-11);
  box-shadow: 0 0 0 1px var(--t-s5-26);
}

/* Texto simple, sin cápsula ni negrita: solo un punto de color antes del
   estado. El color va en visual-system.css (capa system) porque un reset de
   esa capa gana sobre cualquier color declarado en legacy. */
.meta-template-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; white-space: nowrap; }
.meta-template-status-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }

/* Idioma / categoría: texto simple, sin cápsula. */
.meta-template-meta-chip { color: var(--muted, var(--t-s5-27)); font-weight: 400; }

/* Lista de variables bajo el mensaje, separada por una línea divisoria. */
.meta-template-variables-line { margin: 0; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted, var(--t-s5-27)); }
.meta-template-variables-label { color: var(--muted, var(--t-s5-27)); font-weight: 400; margin-right: 10px; }
.meta-template-variables-list { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.meta-template-empty { padding: 30px 20px; border: 1px dashed var(--t-s5-28); border-radius: 12px; text-align: center; }
.meta-template-empty strong { color: var(--ink); }
.meta-template-empty p { margin: 6px 0 0; color: var(--muted); }
.meta-template-editor { margin: 18px 26px 0; padding: 20px; border: 1px solid var(--t-s5-29); border-radius: 14px; background: linear-gradient(120deg, var(--t-s5-30), var(--t-s5-31) 58%, transparent); }
.meta-template-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.meta-template-editor-heading h3 { margin: 3px 0 6px; }
.meta-template-editor-heading p { margin: 0; }
.meta-template-editor-close { flex: 0 0 auto; }
.meta-template-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meta-template-cancel-button,
.meta-template-submit-button { display: inline-flex; align-items: center; gap: 7px; }
.meta-template-editor-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr); gap: 18px; margin-top: 18px; }
.meta-template-form { display: grid; gap: 12px; }
.meta-template-form label { display: grid; gap: 7px; }
.meta-template-form input, .meta-template-form select, .meta-template-form textarea { width: 100%; box-sizing: border-box; }

/* Campo de mensaje con su propia barra de formato pegada arriba, en vez de
   un botón "Insertar dato dinámico" suelto debajo del texto. */
.meta-template-message-group { display: grid; gap: 7px; }
.meta-template-message-field { border: 1px dashed var(--t-s5-32); border-radius: 8px; overflow: hidden; }
.meta-template-message-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border-bottom: 1px dashed var(--t-s5-32); background: var(--t-s5-33); }
.meta-template-format-buttons { display: flex; gap: 4px; }
.meta-template-format-button { min-width: 28px; min-height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; font: inherit; cursor: pointer; }
.meta-template-format-button:hover { background: var(--t-s5-34); }
.meta-template-format-italic { font-style: italic; }
.meta-template-format-strike { text-decoration: line-through; }
.meta-template-message-field textarea { display: block; width: 100%; box-sizing: border-box; border: none; border-radius: 0; margin: 0; }
.meta-insert-variable { min-height: 30px; padding: 0 10px; border: 1px dashed var(--t-s5-35); border-radius: 8px; background: var(--t-s5-36); color: var(--t-s5-37); font: inherit; cursor: pointer; }
.meta-insert-variable:hover { background: var(--t-s5-38); }
.meta-variable-list { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--t-s5-39); }
.meta-variable-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.meta-variable-token { padding: 3px 6px; border-radius: 4px; background: var(--t-s5-40); }
.meta-variable-arrow { color: var(--muted); }
.meta-template-preview { display: grid; align-content: start; gap: 11px; padding: 16px; border: 1px solid var(--t-s5-28); border-radius: 12px; background: var(--t-s5-41); }
.meta-template-message { padding: 13px 14px; border-radius: 4px 12px 12px; background: linear-gradient(135deg, var(--t-s5-42), var(--t-s5-43)); color: var(--t-s5-44); line-height: 1.45; box-shadow: 0 8px 18px var(--t-s5-45); }
.meta-template-preview p { margin: 0; line-height: 1.45; }
.meta-template-send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; }
.meta-template-send > strong { flex: 0 0 auto; }
.meta-template-send select { flex: 0 0 auto; width: 230px; min-width: 0; }
.meta-template-send input { flex: 1 1 120px; min-width: 100px; }
.meta-template-send > button { flex: 0 0 auto; margin-left: auto; }
.meta-template-send-preview { flex: 1 1 100%; margin: 0; }
@media (max-width: 760px) { .meta-template-editor-grid, .meta-variable-row { grid-template-columns: 1fr; } .meta-template-editor, .meta-template-list { margin-left: 18px; margin-right: 18px; } .meta-template-list { padding-left: 0; padding-right: 0; } .meta-template-header-actions { justify-content: flex-start; } }

.message-date {
  align-self: center;
  margin: 4px 0;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px;
  background: var(--t-s5-46);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 10px;
  border-top: 1px solid var(--t-s5-47);
  background: var(--t-s5-48);
}

.composer-transports { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-left:auto; padding:.15rem .1rem; }
.composer-transports > span { color:var(--muted); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-right:.15rem; }
.transport-choice { min-height:30px; padding:.34rem .7rem; border:1px solid var(--line); border-radius:999px; background:var(--t-s5-49); color:var(--muted); font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
.transport-choice.active { color:var(--t-s5-50); border-color:var(--t-s5-51); background:var(--t-s5-52); box-shadow:0 0 16px var(--t-s5-53); }
.transport-choice:disabled { opacity:.42; cursor:not-allowed; }
.last-transport-badge { display:inline-flex; width:max-content; margin-top:.35rem; padding:.22rem .55rem; border:1px solid var(--t-s5-54); border-radius:999px; color:var(--t-s5-55); font-size:.72rem; font-weight:800; }
.last-transport-badge.telegram { border-color:var(--t-s5-56); color:var(--t-s5-57); }
.last-transport-badge.web { border-color:var(--t-s5-58); color:var(--t-s5-59); }

.chat-composer label,
.chat-composer .composer-input {
  display: grid;
  gap: 7px;
}

.composer-input-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.composer-input-heading > span:first-child {
  color: var(--soft);
  font-size: var(--type-label);
  font-weight: 800;
}

.composer-window-status {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

.composer-window-status i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.composer-window-status.active { color: var(--t-s5-60); }
.composer-window-status.closed { color: var(--t-s5-61); }

.composer-input {
  position: relative;
  width: 100%;
  min-width: 0;
}

.composer-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

textarea {
  width: 100%;
  min-height: 58px;
  max-height: 152px;
  resize: none;
  overflow-y: hidden;
  border: 1px solid var(--t-s5-62);
  border-radius: 8px;
  background: var(--t-s5-63);
  color: var(--ink);
  padding: 13px 12px;
  font: inherit;
  line-height: 1.35;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.composer-input textarea {
  min-height: 42px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 84px;
  padding-right: 48px;
}

.composer-attach-button {
  position: absolute;
  left: 8px;
  bottom: 5px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--t-s5-64);
  border-radius: 50%;
  background: var(--t-s5-40);
  color: var(--t-s5-65);
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 160ms var(--ease);
}

.composer-attach-button:hover:not(:disabled) {
  border-color: var(--t-s5-66);
  background: var(--t-s5-67);
  color: var(--green);
}

.composer-attach-button:active:not(:disabled) {
  transform: scale(0.96);
}

.composer-attach-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.composer-attach-button .svg-icon {
  width: 15px;
  height: 15px;
}

.composer-location-button {
  position: absolute;
  left: 44px;
  bottom: 5px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--t-s5-64);
  border-radius: 50%;
  background: var(--t-s5-40);
  color: var(--t-s5-65);
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 160ms var(--ease);
}

.composer-location-button:hover:not(:disabled) {
  border-color: var(--t-s5-68);
  background: var(--t-s5-69);
  color: var(--t-s5-17);
}

.composer-location-button:active:not(:disabled) {
  transform: scale(0.96);
}

.composer-location-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.composer-location-button .svg-icon {
  width: 15px;
  height: 15px;
}

.composer-inline-action {
  position: absolute;
  right: 8px;
  bottom: 5px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--t-s5-70);
  border-radius: 50%;
  background: var(--t-s5-67);
  color: var(--green);
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 160ms var(--ease);
}

.composer-inline-action:hover:not(:disabled) {
  border-color: var(--t-s5-71);
  background: var(--t-s5-72);
}

.composer-inline-action:active:not(:disabled) {
  transform: scale(0.96);
}

.composer-inline-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.composer-inline-action .svg-icon {
  width: 15px;
  height: 15px;
}

.composer-inline-action.recording {
  border-color: var(--t-s5-73);
  background: var(--t-s5-11);
  color: var(--t-s5-12);
}

.recording-strip {
  display: grid;
  grid-template-columns: 34px 10px auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 58px 10px 10px;
  border: 1px solid var(--t-s5-74);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--t-s5-24), var(--t-s5-75)),
    var(--t-s5-63);
}

.recording-cancel {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--t-s5-64);
  border-radius: 50%;
  background: var(--t-s5-76);
  color: var(--t-s5-65);
}

.recording-cancel:hover {
  border-color: var(--t-s5-77);
  color: var(--t-s5-12);
}

.recording-cancel .svg-icon {
  width: 17px;
  height: 17px;
}

.recording-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 var(--t-s5-78);
  animation: recordingPulse 1.15s ease-in-out infinite;
}

.recording-time {
  color: var(--t-s5-12);
  font-variant-numeric: tabular-nums;
}

.recording-wave {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 36px;
  gap: 3px;
  overflow: hidden;
}

.recording-wave i {
  display: block;
  width: 3px;
  height: var(--bar-height);
  min-height: 8px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--t-s5-79), var(--t-s5-80));
  transform-origin: center;
  animation: recordingWave 760ms ease-in-out infinite alternate;
  animation-delay: var(--bar-delay);
}

@keyframes recordingPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--t-s5-81);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px var(--t-s5-82);
    transform: scale(0.88);
  }
}

@keyframes recordingWave {
  from {
    transform: scaleY(0.42);
    opacity: 0.62;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

textarea:hover,
textarea:focus {
  border-color: var(--t-s5-83);
  background: var(--t-s5-84);
  box-shadow: 0 0 0 1px var(--t-s5-85);
  outline: 0;
}

textarea:disabled {
  cursor: not-allowed;
  border-color: var(--t-s5-86);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--t-s5-87) 0,
      var(--t-s5-87) 8px,
      var(--t-s5-88) 8px,
      var(--t-s5-88) 16px
    ),
    var(--t-s5-89);
  color: var(--t-s5-90);
  box-shadow: inset 0 0 0 1px var(--t-s5-91);
}

textarea:disabled:hover,
textarea:disabled:focus {
  border-color: var(--t-s5-86);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--t-s5-87) 0,
      var(--t-s5-87) 8px,
      var(--t-s5-88) 8px,
      var(--t-s5-88) 16px
    ),
    var(--t-s5-89);
  box-shadow: inset 0 0 0 1px var(--t-s5-91);
  outline: 0;
}

.composer-actions,
.context-actions {
  display: grid;
  gap: 8px;
}

.composer-actions {
  align-content: end;
  min-width: 190px;
}

.composer-actions .ghost-button,
.composer-actions .primary-button,
.context-actions .ghost-button,
.context-actions .primary-button,
.context-actions .danger-button,
.context-actions .caution-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.composer-note {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  color: var(--t-s5-92);
}

:root[data-theme="light"] .message-checks {
  color: var(--t-s5-93);
}

:root[data-theme="light"] .composer-note {
  color: var(--t-s5-94);
  opacity: 1;
}

:root[data-theme="light"] .conversation-intervene-button {
  border-color: var(--t-s5-95);
  background: var(--t-s5-96);
  color: var(--t-s5-97);
  box-shadow: 0 4px 12px var(--t-s5-98);
}

:root[data-theme="light"] .conversation-intervene-button:hover:not(:disabled) {
  border-color: var(--t-s5-99);
  background: var(--t-s5-100);
  color: var(--t-s5-101);
}

@media (max-width: 560px) {
  .composer-input-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .composer-input-heading .composer-transports {
    margin-left: 0;
  }

  .composer-window-status {
    text-align: left;
  }
}

.context-card {
  align-content: start;
  display: grid;
  gap: 8px;
  margin-top: 9px;
  min-height: 0;
  overflow-y: auto;
}

.context-item {
  padding: 10px 0;
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
}

.context-item strong {
  color: var(--t-s5-102);
  font-size: 11px;
  line-height: 1.3;
}

.context-actions {
  margin-top: 4px;
}

.conversation-state-card {
  padding: 10px;
  border: 1px solid var(--t-s5-103);
  border-radius: 8px;
  background: var(--t-s5-104);
}

.conversation-state-card.red {
  border-color: var(--t-s5-105);
  background: var(--t-s5-106);
}

.conversation-state-card.purple {
  border-color: var(--t-s5-107);
  background: var(--t-s5-108);
}

.conversation-state-card.amber {
  border-color: var(--t-s5-109);
  background: var(--t-s5-110);
}

.conversation-state-card.white {
  border-color: var(--t-s5-111);
  background: var(--t-s5-112);
}

.conversation-state-card.gray {
  border-color: var(--t-s5-113);
  background: var(--t-s5-63);
}

.conversation-state-card > span:first-child {
  display: block;
  color: var(--t-s5-114);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
}

.state-status-pill {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin-top: 5px;
  padding: 6px 12px;
  border: 1px solid var(--t-s5-115);
  border-radius: 999px;
  background: var(--t-s5-63);
  color: var(--t-s5-06);
  font-size: 13px;
  font-style: normal;
  font-weight: 520;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.state-status-pill.green {
  border-color: var(--t-s5-116);
  background: var(--t-s5-117);
  color: var(--t-s5-118);
}

.state-status-pill.red {
  border-color: var(--t-s5-119);
  background: var(--t-s5-120);
  color: var(--t-s5-121);
}

.state-status-pill.purple {
  border-color: var(--t-s5-122);
  background: var(--t-s5-108);
  color: var(--t-s5-123);
}

.state-status-pill.amber {
  border-color: var(--t-s5-124);
  background: var(--t-s5-125);
  color: var(--t-s5-126);
}

.state-status-pill.white {
  border-color: var(--t-s5-127);
  background: var(--t-s5-128);
  color: var(--t-s5-129);
}

.state-status-pill.gray {
  border-color: var(--t-s5-130);
  background: var(--t-s5-40);
  color: var(--t-s5-65);
}

.conversation-state-card p {
  margin: 10px 0 0;
  color: var(--t-s5-131);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
}

.context-hero {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--t-s5-132);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--t-s5-133), var(--t-s5-134)),
    var(--t-s5-135);
}

.context-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--t-s5-136);
  border-radius: 50%;
  background: var(--t-s5-133);
  color: var(--t-s5-118);
  font-weight: 700;
}

.context-hero strong,
.context-hero small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-hero strong {
  color: var(--t-s5-137);
  font-size: 13px;
}

.context-hero small {
  margin-top: 4px;
  color: var(--t-s5-138);
  font-size: 12px;
}

.context-block {
  padding: 9px;
  border: 1px solid var(--t-s5-139);
  border-radius: 8px;
  background: var(--t-s5-140);
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.context-block.highlight {
  border-color: var(--t-s5-141);
  background: linear-gradient(180deg, var(--t-s5-142), var(--t-s5-87));
}

.context-block-data {
  border-color: var(--t-s5-109);
  background: linear-gradient(180deg, var(--t-s5-143), var(--t-s5-144));
}

.context-block-vehicle {
  border-color: var(--t-s5-145);
  background: linear-gradient(180deg, var(--t-s5-146), var(--t-s5-147));
}

.context-block-quote {
  border-color: var(--t-s5-148);
  background: linear-gradient(180deg, var(--t-s5-149), var(--t-s5-147));
}

.context-block-appointment {
  --appointment-accent: var(--t-s5-150);
  --appointment-accent-rgb: 91, 200, 255;
  border-color: rgba(var(--appointment-accent-rgb), 0.32);
  background: linear-gradient(180deg, rgba(var(--appointment-accent-rgb), 0.12), rgba(var(--appointment-accent-rgb), 0.026));
}

.context-block-appointment.appointment-state-confirmed {
  --appointment-accent: var(--t-s5-150);
  --appointment-accent-rgb: 91, 200, 255;
}

.context-block-appointment.appointment-state-pending {
  --appointment-accent: var(--t-s5-150);
  --appointment-accent-rgb: 91, 200, 255;
}

.context-block-appointment.appointment-state-rescheduled {
  --appointment-accent: var(--t-s5-150);
  --appointment-accent-rgb: 91, 200, 255;
}

.context-block-appointment.appointment-state-cancelled {
  --appointment-accent: var(--t-s5-151);
  --appointment-accent-rgb: 255, 95, 114;
}

.context-block-appointment.appointment-state-empty {
  --appointment-accent: var(--t-s5-150);
  --appointment-accent-rgb: 91, 200, 255;
}

.context-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 7px;
  min-width: 0;
}

.context-block-client .context-block-header {
  align-items: flex-start;
  flex-wrap: wrap;
}

.context-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.context-block h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: var(--t-s5-152);
  font-weight: 700;
}

.context-block h3 span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-block h3 .svg-icon {
  width: 30px;
  height: 30px;
  color: var(--t-s5-118);
}

.context-block-data h3 .svg-icon {
  color: var(--t-s5-153);
}

.context-block-vehicle h3 .svg-icon {
  color: var(--t-s5-118);
}

.context-block.highlight h3 .svg-icon,
.context-block-quote h3 .svg-icon {
  color: var(--t-s5-154);
}

.context-block-appointment h3 .svg-icon {
  color: var(--appointment-accent);
}

.context-line-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--t-s5-155);
}

.context-line-item:first-of-type {
  border-top: 0;
}

.context-line-item > span {
  color: var(--t-s5-156);
  font-size: 13px;
  font-weight: 500;
}

.context-line-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--t-s5-102);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.18;
}

.editable-client-name-button {
  display: inline-flex;
  max-width: 100%;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.editable-client-name-button:not(:disabled):hover {
  border-color: var(--t-s5-157);
  background: var(--t-s5-158);
  color: var(--t-s5-159);
}

.editable-client-name-button:disabled {
  cursor: not-allowed;
}

.editable-client-name-input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--t-s5-124);
  border-radius: 6px;
  background: var(--t-s5-160);
  color: var(--t-s5-152);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: 0;
}

.editable-client-name-input:focus {
  border-color: var(--t-s5-161);
  box-shadow: 0 0 0 2px var(--t-s5-162);
}

.contact-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 9px;
}

.contact-switch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--t-s5-64);
  border-radius: 6px;
  background: var(--t-s5-76);
  color: var(--t-s5-13);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease);
}

.contact-switch-button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-switch-button .svg-icon {
  width: 15px;
  height: 15px;
}

.contact-switch-button.allowed.active {
  border-color: var(--t-s5-163);
  background: var(--t-s5-133);
  color: var(--t-s5-118);
}

.contact-switch-button.blocked.active {
  border-color: var(--t-s5-164);
  background: var(--t-s5-165);
  color: var(--t-s5-166);
}

.contact-switch-button:not(:disabled):hover {
  color: var(--t-s5-03);
  background: var(--t-s5-112);
}

.contact-switch-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.appointment-date-time {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--t-s5-167);
  backdrop-filter: blur(10px);
}

.quote-modal {
  width: min(720px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--t-s5-168);
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--t-s5-169), var(--t-s5-170)),
    var(--t-s5-171);
  box-shadow: var(--shadow);
}

.resource-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--t-s5-172);
}

.resource-viewer-modal {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

/* width:100% (no solo max-width) para que la imagen SIEMPRE llene el ancho
   del visor, incluso una mas chica que su miniatura en la grilla - sin esto
   una imagen pequeña se mostraba a su tamaño real (mas chica que la
   miniatura, que la agranda con object-fit:cover), justo al reves de lo
   que se espera al presionar "Ver". */
.resource-viewer-image {
  display: block;
  width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
}

.resource-viewer-media {
  display: block;
  width: 100%;
  max-height: calc(100vh - 160px);
}

/* Visor nativo de PDF del navegador, sin libreria - un <iframe> alcanza. */
.resource-viewer-pdf {
  display: block;
  width: 100%;
  height: calc(100vh - 160px);
  border: 0;
  border-radius: 8px;
  background: var(--t-s5-173);
}

.floating-window {
  position: fixed;
  top: var(--window-y, 72px);
  left: var(--window-x, 320px);
  z-index: 82;
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  box-shadow:
    0 30px 90px var(--t-s5-174),
    0 0 0 1px var(--t-s5-175),
    0 0 34px var(--t-s5-176);
}

.floating-window .quote-modal-form {
  max-height: calc(100vh - 116px);
  overflow: auto;
}

.appointment-cancel-window {
  width: min(520px, calc(100vw - 24px));
}

.appointment-cancel-reason {
  grid-column: 1 / -1;
}

.agenda-calendar-window {
  width: min(360px, calc(100vw - 24px));
}

/* A diferencia de Cancelar/Reagendar/Crear (que reusan .quote-window como
   tarjeta blanca fija), el calendario sí debe adaptarse al modo de la app:
   pedido explícito, gris oscuro/azulado distinguible del fondo en modo
   noche, no la tarjeta blanca fija. Se usa el mismo diseño oscuro que
   .quote-modal define por defecto, y se vuelve a la tarjeta blanca solo
   en modo día. */
.quote-window.appointment-window.agenda-calendar-window {
  border-color: var(--t-s5-168);
  background: var(--t-s5-171);
  box-shadow: var(--shadow);
}

:root[data-theme="light"] .quote-window.appointment-window.agenda-calendar-window {
  border-color: var(--t-s5-177);
  background: linear-gradient(180deg, var(--t-s5-178) 0%, var(--t-s5-179) 100%);
  box-shadow:
    0 30px 90px var(--t-s5-180),
    0 0 0 1px var(--t-s5-181);
}

/* El icon-button de cerrar hereda fondo/borde claros de .quote-window
   .icon-button (pensados para la tarjeta blanca fija de Cancelar/Crear),
   que no encajan con el fondo oscuro que este modal sí usa en modo noche. */
.quote-window.appointment-window.agenda-calendar-window .icon-button {
  border-color: var(--t-s5-182);
  background: var(--t-s5-63);
}

.quote-window.appointment-window.agenda-calendar-window .icon-button:hover:not(:disabled) {
  border-color: var(--t-s5-183);
  background: var(--t-s5-184);
}

:root[data-theme="light"] .quote-window.appointment-window.agenda-calendar-window .icon-button {
  border-color: var(--t-s6-01);
  background: var(--t-s6-02);
}

:root[data-theme="light"] .quote-window.appointment-window.agenda-calendar-window .icon-button:hover:not(:disabled) {
  border-color: var(--t-s6-03);
  background: var(--t-s6-04);
}

.agenda-calendar-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
}

.agenda-calendar-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agenda-calendar-month-nav strong {
  text-transform: capitalize;
  color: var(--text-heading);
}

/* Pedido explicito del usuario: los dias de la semana arriba de la
   grilla de "Mes" deben verse como una cabecera (una sola fila con
   fondo), igual que ya se hizo para las cabeceras de "Semana". */
.agenda-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 0;
  background: var(--panel);
}

.agenda-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.agenda-calendar-weekdays span {
  text-align: center;
  color: var(--text-muted);
}

/* El color va en los <span> internos, no en el <button>: la capa system
   trae un reset `button { color: inherit }` que siempre gana sobre
   cualquier color puesto en el propio botón, sin importar especificidad.
   Se usan tokens de tema (no colores fijos) porque, a diferencia del
   resto de .quote-window, esta tarjeta sí cambia de oscura a clara según
   el modo de la app. */
.agenda-calendar-day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

/* Pedido explicito del usuario: el numero del dia debe verse menos
   brillante que el blanco casi puro de var(--text-neutral-strong). */
.agenda-calendar-day-number {
  align-self: flex-end;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

/* Pedido explicito del usuario: los dias que no pertenecen al mes visible
   se ven atenuados solo por el fondo (mas opaco/oscuro) - el borde se queda
   igual que el resto de la cuadricula, sin usar opacity en toda la celda.
   Pedido explicito (cambio de opinion, verificado en modo dia): tenia
   demasiado contraste, se aclara. Este valor queda solo para modo dia -
   modo noche pide el criterio opuesto (ver mas abajo). */
:root[data-theme="light"] .agenda-calendar-day.outside-month {
  background: var(--t-s6-05);
}

/* Pedido explicito del usuario: en modo noche el criterio es al reves -
   los dias fuera de mes deben verse lo mas oscuros posible, y los dias
   del mes visible un poco mas claros (no transparentes/planos). */
:root:not([data-theme="light"]) .agenda-calendar-day.outside-month {
  background: var(--t-s6-06);
}

:root:not([data-theme="light"]) .agenda-calendar-month .agenda-calendar-day:not(.outside-month) {
  background: var(--t-s6-07);
}

.agenda-calendar-day.outside-month .agenda-calendar-day-number {
  color: var(--text-disabled);
}

.agenda-calendar-day.is-today {
  border-color: var(--brand);
}

/* El numero de "hoy" lleva ademas su propia insignia circular, aparte del
   contorno de la celda - referencia de UX confirmada por el usuario.
   Pedido explicito: el numero va en blanco, no en negro, en ambos modos. */
.agenda-calendar-day-number.is-today-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-strong) 82%, var(--t-s6-08));
  color: var(--t-s6-09);
}

/* Pedido explicito del usuario: la celda seleccionada se marca con
   contorno verde, sin relleno (antes era un fondo verde solido). */
.agenda-calendar-day.is-selected {
  border-color: var(--brand);
}

/* Citas del dia, mostradas dentro de la celda - pedido explicito del
   usuario ("el contenido de los dias tambien debe mostrar los eventos"). */
.agenda-calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  width: 100%;
}

/* Pedido explicito del usuario: en vez de truncar a 3 citas + "+N más",
   se muestran todas con scroll propio dentro del cuadro del dia (Mes). */
.agenda-calendar-month .agenda-calendar-day-events {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Pedido explicito del usuario: sin negrita y un punto menos que el
   tamaño base (--type-body, 13px) - el chip hereda font-weight:bold de la
   celda (es un <button>, y la capa system pone font-weight:bold en todo
   boton), asi que hay que devolverlo a regular aca explicitamente. */
.agenda-calendar-day-chip {
  display: block;
  width: 100%;
  /* Sin esto, el flex column de .agenda-calendar-day-events (overflow-y:
     auto) comprime los chips en vez de dejarlos desbordar y scrollear -
     bug clasico de flexbox (los items encogen por default). */
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 4px;
  /* Es un <button> (para poder abrir el dia en modo Dia al clickear la
     cita), pero no debe verse como boton - se le quita el estilo nativo
     (appearance, borde) y solo queda el borde izquierdo de color propio. */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-left: 3px solid var(--info);
  background: color-mix(in srgb, var(--info) 14%, var(--surface-1));
  color: var(--text-primary);
  font: inherit;
  font-weight: var(--weight-regular);
  text-align: left;
}

.agenda-calendar-day-chip-time {
  color: var(--info);
  margin-right: 4px;
}


.agenda-calendar-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agenda-calendar-active-pill button {
  display: inline-flex;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.agenda-calendar-active-pill .svg-icon {
  width: 12px;
  height: 12px;
}

/* Calendario embebido en Agenda (boton "Ver calendario") - referencia de
   UX confirmada por el usuario contra su propio CRM, corregida tras una
   segunda observacion suya: NO es una pagina propia con su propia
   cabecera - se embebe debajo de la cabecera/filtros de Agenda que ya
   existen (.lite-agenda-shell, flex-column con flex:1 en sus hijos), asi
   que esta barra y el cuerpo del calendario heredan la altura real de ese
   contenedor sin necesitar su propio min-height. Reusa
   .agenda-calendar-day/-weekdays/-grid definidas arriba para la grilla
   grande del mes; lo nuevo es la barra de vistas, la barra lateral con el
   mini-calendario de navegacion, y Semana/Dia. */
.agenda-calendar-page-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.agenda-calendar-page-title {
  text-transform: capitalize;
  color: var(--text-heading);
  margin-left: 4px;
}

/* Pedido explicito del usuario: la 3ra fila del contenedor de Agenda (la
   que aloja el mini-calendario y el contenido principal) debe tener el
   color de fondo de la pagina principal, no el mismo panel que las otras
   dos filas (cabecera y barra de filtros). */
/* Pedido explicito del usuario: sin espacio entre el mini-calendario y
   el contenido, para aprovechar el maximo ancho posible. */
.agenda-calendar-page-body {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg);
}

/* Pedido explicito del usuario: el fondo detras del mini-calendario y
   detras de las columnas de "Semana" debe ser transparente, para que se
   vea el mismo color del contenedor principal que los alberga
   (.lite-agenda-shell) en vez de una capa de color propia encima. */
.agenda-calendar-sidebar {
  flex: 0 0 220px;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 0;
  border: 1px solid var(--border-soft);
  background: var(--panel);
}

.agenda-calendar-mini-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.agenda-calendar-mini-nav strong {
  text-transform: capitalize;
  color: var(--text-heading);
}

.agenda-calendar-mini-weekdays,
.agenda-calendar-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.agenda-calendar-mini-weekdays span {
  text-align: center;
  color: var(--text-muted);
}

/* Pedido explicito del usuario: el dia (hover/hoy/seleccionado) se marca
   con un circulo, no un cuadrado - por eso border-radius:999px en vez de
   6px. El tamaño/peso de fuente se fija en visual-system.css (capa
   system) - un font-size/font-weight puesto aca (legacy) nunca gana: la
   capa system trae reglas globales (:where(*) para font-size,
   #root :is(...,button) para font-weight) que pisan cualquier valor de
   esta capa sin importar especificidad, sea cual sea el selector.
   El COLOR va en el <span> interno (.agenda-calendar-mini-day-number), no
   en el <button>: la capa system trae `button { color: inherit }`, que
   siempre gana sobre cualquier color puesto en el propio boton - mismo
   motivo por el que .agenda-calendar-day-number (grilla grande) ya hacia
   lo mismo. border/background si funcionan puestos en el boton, ese reset
   no los toca. */
.agenda-calendar-mini-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.agenda-calendar-mini-day-number {
  color: var(--text-neutral-strong);
}

.agenda-calendar-mini-day:hover {
  background: var(--border-soft);
}

.agenda-calendar-mini-day.outside-month .agenda-calendar-mini-day-number {
  color: var(--text-disabled);
  opacity: 0.5;
}

/* Pedido explicito del usuario: solo "hoy" se distingue de un dia
   cualquiera (los dias con citas ya no llevan color propio) - numero en
   verde y con mas peso, sin contorno ni relleno. El peso se fija en
   visual-system.css (capa system, junto al resto del tamaño/peso de este
   mini-calendario) - puesto aca (legacy) lo pisa siempre la regla base de
   esta misma capa, sin importar especificidad. */
.agenda-calendar-mini-day.is-today .agenda-calendar-mini-day-number {
  color: var(--brand);
}

/* Pedido explicito del usuario: el dia seleccionado se marca como un
   boton activo (contorno + fondo + texto en verde, circular - mismo
   formato que .transport-choice.active en el resto de la app), no solo
   con un contorno. Va despues de is-today para que el fondo gane cuando
   "hoy" tambien esta seleccionado. */
.agenda-calendar-mini-day.is-selected {
  border-color: color-mix(in srgb, var(--brand) 52%, var(--border-default));
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-1));
}

.agenda-calendar-mini-day.is-selected .agenda-calendar-mini-day-number {
  color: var(--brand);
}

.agenda-calendar-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* Pedido explicito del usuario: en la vista "Agenda" hace falta un poco
   de padding respecto al mini-calendario (antes el gap general de
   .agenda-calendar-page-body daba esa separacion, pero ya se redujo a 0
   para Mes/Semana) - se agrega aca, sin afectar a las demas vistas. */
.agenda-calendar-main:has(.appointments-table-shell) {
  padding-left: 14px;
}

.agenda-calendar-month {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* Pedido explicito del usuario: el lado derecho de la grilla ya queda
     enmarcado por el borde de .lite-agenda-shell (la columna "Dom" toca
     ese borde directo) - el lado izquierdo no, porque de ese lado esta
     el hueco hacia el mini-calendario. Este borde iguala ambos lados. */
  border-left: 1px solid var(--border-soft);
}

/* Pedido explicito del usuario: cuadricula simple, sin margenes entre los
   dias - las celdas se tocan entre si (gap:0, sin border-radius propio),
   compartiendo el borde con su vecina. */
.agenda-calendar-month .agenda-calendar-grid {
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  /* A diferencia del grid chico del modal (filas cuadradas via aspect-ratio),
     acá cada fila reparte el alto disponible por igual - es lo que hace que
     el mes llene la pantalla en vez de dejar una franja negra abajo. */
  grid-auto-rows: 1fr;
}

.agenda-calendar-month .agenda-calendar-day {
  aspect-ratio: unset;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  padding: 8px;
  border-radius: 0;
  border: 1px solid var(--border-soft);
  margin: -1px 0 0 -1px;
}

/* Pedido explicito del usuario: espacio arriba de los 7 contenedores de
   dia (columna 2 de la 3ra fila de Agenda), sin mover el mini-calendario
   (columna 1) - por eso el padding va aca, no en .agenda-calendar-page-
   body (que afecta a ambas columnas por igual). */
/* Pedido explicito del usuario: la columna del domingo (7ma) chocaba con
   el margen derecho porque no habia padding-right - se agrega, y se
   mantiene el padding-left chico (no 0) para compensar sin duplicar el
   espacio que ya da el gap con el mini-calendario. */
/* Pedido explicito del usuario: los 7 dias deben ocupar el maximo ancho
   posible, con el mismo padding a ambos lados (Lun izquierda = Dom
   derecha) - ahora que no hay gap con el mini-calendario, se usa el
   valor mas chico (6px) en los dos lados en vez del 18px asimetrico. */
.agenda-calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 6px 0 6px;
}

.agenda-calendar-week-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: transparent;
  overflow: hidden;
  min-height: 220px;
}

.agenda-calendar-week-column.is-today {
  border-color: var(--brand);
}

/* Pedido explicito del usuario: en modo noche el marco verde de la
   columna de "hoy" se ve muy grueso. border-width < 1px se redondea a
   1px en los navegadores (no hay cambio visual real) - se usa box-shadow
   en su lugar, que si soporta grosores fraccionarios, y se vuelve
   transparente el border original para no duplicar el trazo. */
:root:not([data-theme="light"]) .agenda-calendar-week-column.is-today {
  border-color: transparent;
  box-shadow: inset 0 0 0 0.5px var(--brand);
}

/* Pedido explicito del usuario: en modo dia el marco de la columna de
   "hoy" debe verse mas "chillon" (vivido) y un poco mas grueso - mismo
   tratamiento y mismo valor que ya se aplico a la fila seleccionada de
   Agenda (1.25px inset, color-mix hacia un verde mas vivido). */
:root[data-theme="light"] .agenda-calendar-week-column.is-today {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--brand) 75%, var(--t-s6-10));
}

/* El fondo opaco de la cabecera (bleed con margen negativo, ver mas abajo)
   tapa el box-shadow del padre justo en el tramo de arriba - se repite el
   mismo trazo fino sobre la propia cabecera para que el marco no se corte.
   Ademas: border-radius igual al del padre (10px arriba) para que el
   trazo siga la esquina redondeada en vez de quedar en angulo recto, y se
   quita el border-bottom gris propio de la cabecera (no debe verse una
   linea aparte cortando el marco verde). */
:root:not([data-theme="light"]) .agenda-calendar-week-column.is-today .agenda-calendar-week-column-header {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  /* Solo arriba/izquierda/derecha - sin el cuarto lado (abajo), para que
     no quede una linea separando la cabecera del resto de la columna. */
  box-shadow:
    inset 0 0.5px 0 0 var(--brand),
    inset 0.5px 0 0 0 var(--brand),
    inset -0.5px 0 0 0 var(--brand);
}

/* Mismo motivo que el bloque de modo noche de arriba (el fondo opaco de
   la cabecera tapa el box-shadow del padre), con el grosor/color mas
   vivido de modo dia. */
:root[data-theme="light"] .agenda-calendar-week-column.is-today .agenda-calendar-week-column-header {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  box-shadow:
    inset 0 1.25px 0 0 color-mix(in srgb, var(--brand) 75%, var(--t-s6-10)),
    inset 1.25px 0 0 0 color-mix(in srgb, var(--brand) 75%, var(--t-s6-10)),
    inset -1.25px 0 0 0 color-mix(in srgb, var(--brand) 75%, var(--t-s6-10));
}

/* Pedido explicito del usuario, con referencia visual: cabecera de cada
   columna de "Semana" apilada y centrada (dia de la semana arriba, numero
   grande debajo), no en una sola fila con space-between. */
/* Pedido explicito del usuario: la cabecera de cada dia debe tener el
   mismo color de fondo que el mini-calendario (.agenda-calendar-sidebar,
   var(--panel)). */
/* Pedido explicito del usuario: el fondo de la cabecera debe rellenar
   todo el ancho de la caja del dia, tocando sus bordes - como el color
   se pone aca (no en .agenda-calendar-week-column, compartido con
   .agenda-calendar-week-items) se compensa el padding:10px del padre con
   margenes negativos, y overflow:hidden en el padre recorta las esquinas
   para que respeten el border-radius de la caja. */
.agenda-calendar-week-column-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: -10px -10px 0;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--panel);
  color: var(--text-muted);
  text-align: center;
}

.agenda-calendar-week-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Vista "Agenda" del calendario embebido: envuelve la lista interactiva
   completa (la misma que se usa cuando el calendario esta cerrado), asi
   que necesita el mismo flex:1/min-height:0 que ya tienen .agenda-calendar-
   main y .agenda-calendar-month para heredar el alto real disponible. */
/* La fila completa de Pro/Enterprise (appointments-row) usa una grilla de
   4 columnas con anchos minimos pensados para el ancho completo de la
   lista normal (.appointments-table-shell) - dentro del calendario
   embebido el mini-calendario lateral deja bastante menos ancho, asi que
   se contiene el scroll horizontal aca en vez de dejarlo escapar a toda
   la pagina (arreglar la grilla en si para un contexto angosto es un
   trabajo aparte, mas grande, no se improvisa sobre un sistema tan usado). */
.agenda-calendar-agenda-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
}

/* Es un <button> (abre "Día" al clickear la cita, igual que los chips de
   Mes) pero no debe verse como boton - mismo reset de apariencia nativa
   que .agenda-calendar-day-chip. */
.agenda-calendar-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-left: 3px solid var(--border-soft);
  background: var(--surface-1);
  color: inherit;
  font: inherit;
  text-align: left;
}

.agenda-calendar-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.agenda-calendar-item.confirmed {
  border-left-color: var(--brand);
}

.agenda-calendar-item.pending,
.agenda-calendar-item.rescheduled {
  border-left-color: var(--warning);
}

.agenda-calendar-item.cancelled {
  border-left-color: var(--danger);
  opacity: 0.7;
}

.agenda-calendar-item-vehicle {
  color: var(--text-muted);
}

.agenda-calendar-empty {
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .agenda-calendar-page-body {
    flex-direction: column;
  }

  .agenda-calendar-sidebar {
    width: 100%;
    flex: 1 1 auto;
  }

  .agenda-calendar-week {
    grid-template-columns: repeat(2, 1fr);
  }
}

.floating-window-header {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.floating-window-header .icon-button {
  cursor: pointer;
}

.floating-window .eyebrow {
  color: var(--t-s6-11);
}

.floating-window .icon-button {
  border-color: var(--t-s6-12);
  background: var(--t-s6-13);
  color: var(--t-s6-14);
}

.floating-window .icon-button:hover {
  border-color: var(--t-s6-15);
  background: var(--t-s6-16);
  color: var(--t-s6-09);
}

body.dragging-window {
  user-select: none;
}

.quote-modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--t-s6-17);
  background:
    linear-gradient(180deg, var(--t-s6-18), var(--t-s6-19)),
    var(--t-s6-20);
}

.quote-modal-header h2 {
  margin: 3px 0 0;
  color: var(--t-s6-21);
  font-size: var(--content-title-size);
}

.floating-window-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.floating-window-title > .svg-icon {
  width: 34px;
  height: 34px;
  color: var(--t-s6-22);
}

.quote-window {
  border-color: var(--t-s6-23);
  background: linear-gradient(180deg, var(--t-s6-24) 0%, var(--t-s6-25) 100%);
  box-shadow:
    0 30px 90px var(--t-s6-26),
    0 0 0 1px var(--t-s6-27);
}

.quote-window .quote-modal-header {
  border-bottom-color: var(--t-s6-28);
  background: transparent;
}

.quote-window .floating-window-title > .svg-icon,
.quote-window .eyebrow {
  color: var(--t-s6-29);
}

.quote-window .quote-modal-form {
  background: transparent;
}

.quote-window .quote-modal-form fieldset {
  border-color: var(--t-s6-30);
  background: var(--t-s6-24);
}

.quote-window .quote-modal-form legend {
  color: var(--t-s6-31);
}

.quote-window .quote-modal-form select option {
  background: var(--t-s6-02);
  color: var(--t-s6-32);
}

.quote-window .quote-modal-form input,
.quote-window .quote-modal-form select,
.quote-window .quote-modal-form textarea,
.quote-window .quote-option-select-button {
  border-color: var(--t-s6-01);
  background: var(--t-s6-02);
  color: var(--t-s6-33);
}

.quote-window .quote-phone-prefix,
.quote-window .quote-combo-toggle {
  border-color: var(--t-s6-01);
  background: var(--t-s6-34);
  color: var(--t-s6-33);
}

.quote-window .quote-modal-header h2 {
  color: var(--t-s6-33);
}

.quote-window .quote-modal-form label,
.quote-window .quote-modal-form label > span {
  color: var(--t-s6-35);
}

.quote-window .quote-modal-form .quote-option-select-button > span:first-child {
  color: var(--t-s6-32);
}

.quote-window .quote-phone-prefix,
.quote-window .quote-modal-form input,
.quote-window .quote-modal-form textarea,
.quote-window .quote-option-select-button {
  color: var(--t-s6-32);
}

.quote-window .quote-modal-form .quote-option-select-button > span:last-child {
  color: var(--t-s6-36);
}

.quote-window .quote-modal-form .required-mark {
  color: var(--t-s6-37);
}

.quote-window .quote-modal-form input:focus,
.quote-window .quote-modal-form select:focus,
.quote-window .quote-modal-form textarea:focus,
.quote-window .quote-option-select-button:focus {
  border-color: var(--t-s6-38);
  background: var(--t-s6-24);
  box-shadow: 0 0 0 3px var(--t-s6-39);
}

.quote-window .quote-phone-control:focus-within .quote-phone-prefix {
  border-color: var(--t-s6-38);
  background: var(--t-s6-40);
  color: var(--t-s6-41);
}

.quote-window .quote-combo-toggle:hover,
.quote-window .quote-combo-toggle:focus {
  background: var(--t-s6-40);
  color: var(--t-s6-41);
}

.quote-window .quote-option-list,
.quote-window .quote-suggestion-list {
  border-color: var(--t-s6-01);
  background: var(--t-s6-24);
}

.quote-window .quote-option-list button,
.quote-window .quote-suggestion-list button {
  color: var(--t-s6-33);
}

.quote-window .quote-option-list button:hover,
.quote-window .quote-option-list button.active,
.quote-window .quote-option-list button[aria-selected="true"],
.quote-window .quote-suggestion-list button:hover,
.quote-window .quote-suggestion-list button:focus,
.quote-window .quote-suggestion-list button.active {
  background: var(--t-s6-40);
  color: var(--t-s6-41);
}

.quote-window .quote-suggestion-empty {
  color: var(--t-s6-36);
}

.quote-window .icon-button {
  border-color: var(--t-s6-01);
  background: var(--t-s6-02);
  color: var(--t-s6-36);
}

.quote-window .icon-button:hover {
  border-color: var(--t-s6-03);
  background: var(--t-s6-04);
  color: var(--t-s6-33);
}

.quote-modal-form {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--t-s6-42);
}

.quote-modal-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--t-s6-43);
  border-radius: 8px;
  background: var(--t-s6-44);
}

.quote-modal-form .quote-vehicle-fieldset {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-modal-form legend {
  padding: 0 6px;
  color: var(--t-s6-45);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-modal-form label {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  color: var(--t-s6-46);
  font-size: 16px;
  font-weight: 500;
}

.quote-modal-form label > span {
  color: var(--t-s6-46);
  font-size: 16px;
  font-weight: 500;
}

.quote-modal-form .required-mark {
  margin-left: 3px;
  color: var(--t-s6-47);
  font-weight: 650;
}

.appointment-schedule-hint {
  color: var(--t-s6-48);
  font-size: 12px;
  font-weight: 400;
}

.quote-window .appointment-schedule-hint {
  color: var(--t-s6-36);
}

.quote-modal-form input,
.quote-modal-form select,
.quote-modal-form textarea {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--t-s6-12);
  border-radius: 7px;
  background: var(--t-s6-49);
  color: var(--t-s6-50);
  padding: 0 11px;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
}

.quote-modal-form input:focus,
.quote-modal-form select:focus,
.quote-modal-form textarea:focus {
  border-color: var(--t-s6-51);
  background: var(--t-s6-52);
  box-shadow: 0 0 0 3px var(--t-s6-53);
  outline: 0;
}

.quote-phone-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
}

.quote-phone-prefix {
  display: grid;
  min-width: 46px;
  min-height: 40px;
  place-items: center;
  border: 1px solid var(--t-s6-12);
  border-right: 0;
  border-radius: 7px 0 0 7px;
  background: var(--t-s6-54);
  color: var(--t-s6-55);
  font-size: 17px;
  font-weight: 650;
}

.quote-phone-control input {
  border-radius: 0 7px 7px 0;
}

.quote-number-control {
  position: relative;
  display: block;
}

.quote-number-control input {
  padding-right: 34px;
}

.quote-number-steppers {
  position: absolute;
  top: 3px;
  right: 4px;
  bottom: 3px;
  display: grid;
  width: 24px;
  grid-template-rows: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease);
}

.quote-number-control:focus-within .quote-number-steppers {
  opacity: 1;
  pointer-events: auto;
}

.quote-number-steppers button {
  display: grid;
  width: 24px;
  min-height: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--t-s6-56);
  padding: 0;
}

.quote-number-steppers button:hover {
  color: var(--t-s6-57);
}

.quote-number-steppers .svg-icon {
  width: 15px;
  height: 15px;
  background: currentColor;
}

.quote-window .quote-number-steppers button {
  color: var(--t-s6-58);
}

.quote-window .quote-number-steppers button:hover {
  color: var(--t-s6-59);
}

.quote-window .quote-number-steppers .svg-icon {
  width: 17px;
  height: 17px;
  background: var(--t-s6-60);
}

.quote-window .quote-number-control input {
  padding-right: 34px;
}

.quote-phone-control:focus-within .quote-phone-prefix {
  border-color: var(--t-s6-51);
  background: var(--t-s6-16);
  color: var(--t-s6-09);
}

.quote-modal-form textarea {
  min-height: 104px;
  max-height: 180px;
  overflow-y: auto;
  resize: vertical;
  padding: 10px 11px;
  line-height: 1.35;
  scrollbar-gutter: stable;
  scrollbar-color: var(--t-s6-61) var(--t-s6-62);
  scrollbar-width: thin;
}

.quote-modal-form textarea::-webkit-scrollbar {
  width: 10px;
}

.quote-modal-form textarea::-webkit-scrollbar-track {
  border-radius: 0 7px 7px 0;
  background: var(--t-s6-62);
}

.quote-modal-form textarea::-webkit-scrollbar-thumb {
  border: 2px solid var(--t-s6-63);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--t-s6-64), var(--t-s6-61));
}

.quote-modal-form textarea::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--t-s6-65), var(--t-s6-66));
}

.quote-modal-form textarea::-webkit-scrollbar-button {
  height: 10px;
  border-radius: 0 7px 0 0;
  background: var(--t-s6-67);
}

.quote-modal-form textarea::-webkit-scrollbar-button:vertical:decrement {
  background:
    linear-gradient(135deg, transparent 42%, var(--t-s6-61) 43% 57%, transparent 58%) center / 8px 8px no-repeat,
    var(--t-s6-67);
}

.quote-modal-form textarea::-webkit-scrollbar-button:vertical:increment {
  background:
    linear-gradient(45deg, transparent 42%, var(--t-s6-61) 43% 57%, transparent 58%) center / 8px 8px no-repeat,
    var(--t-s6-67);
}

.quote-window.appointment-window .quote-modal-form textarea {
  scrollbar-color: var(--t-s6-68) var(--t-s6-69);
}

.quote-window.appointment-window .quote-modal-form textarea::-webkit-scrollbar-track {
  background: var(--t-s6-69);
}

.quote-window.appointment-window .quote-modal-form textarea::-webkit-scrollbar-thumb {
  border-color: var(--t-s6-70);
  background: linear-gradient(180deg, var(--t-s6-71), var(--t-s6-68));
}

.quote-window.appointment-window .quote-modal-form textarea::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--t-s6-72), var(--t-s6-73));
}

.quote-window.appointment-window .quote-modal-form textarea::-webkit-scrollbar-button {
  background: var(--t-s6-69);
}

.quote-window.appointment-window .quote-modal-form textarea::-webkit-scrollbar-button:vertical:decrement {
  background:
    linear-gradient(135deg, transparent 42%, var(--t-s6-68) 43% 57%, transparent 58%) center / 8px 8px no-repeat,
    var(--t-s6-69);
}

.quote-window.appointment-window .quote-modal-form textarea::-webkit-scrollbar-button:vertical:increment {
  background:
    linear-gradient(45deg, transparent 42%, var(--t-s6-68) 43% 57%, transparent 58%) center / 8px 8px no-repeat,
    var(--t-s6-69);
}

.quote-notes-fieldset,
.quote-notes-label {
  grid-column: 1 / -1;
}

.quote-combo {
  position: relative;
  display: block;
}

.quote-combo input {
  padding-right: 42px;
}

.quote-combo-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  display: grid;
  width: 38px;
  height: calc(100% - 2px);
  place-items: center;
  border: 0;
  border-left: 1px solid var(--t-s6-74);
  border-radius: 0 7px 7px 0;
  background: var(--t-s6-20);
  color: var(--t-s6-75);
  font-size: 18px;
  line-height: 1;
}

.quote-combo-toggle:hover,
.quote-combo-toggle:focus {
  background: var(--t-s6-76);
  color: var(--t-s6-09);
  outline: none;
}

.quote-autocomplete {
  z-index: 30;
}

.quote-option-select {
  position: relative;
  z-index: 28;
}

.quote-option-select-button {
  display: flex;
  min-height: 40px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--t-s6-12);
  border-radius: 7px;
  background: var(--t-s6-49);
  color: var(--t-s6-50);
  padding: 0 11px;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
}

.quote-option-select-button:hover,
.quote-option-select-button:focus {
  border-color: var(--t-s6-51);
  background: var(--t-s6-52);
  box-shadow: 0 0 0 3px var(--t-s6-53);
  outline: 0;
}

.quote-option-select-button:disabled {
  cursor: not-allowed;
  border-color: var(--t-s6-77);
  background: var(--t-s6-78);
  box-shadow: none;
  opacity: 0.72;
}

.quote-modal-form .quote-option-select-button > span:first-child {
  color: var(--t-s6-50);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.quote-modal-form .quote-option-select-button > span:last-child {
  color: var(--t-s6-79);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.quote-window .quote-combo input {
  padding-right: 42px;
}

.quote-window .quote-combo-toggle {
  top: 1px;
  right: 1px;
  width: 38px;
  height: calc(100% - 2px);
  border-left: 1px solid var(--t-s6-80);
  border-radius: 0 7px 7px 0;
  background: linear-gradient(180deg, var(--t-s6-81), var(--t-s6-60));
  color: var(--t-s6-82);
}

.quote-window .quote-combo-toggle .svg-icon {
  width: 21px;
  height: 21px;
  color: var(--t-s6-82);
  background: var(--t-s6-24);
}

.quote-window .quote-combo-toggle:hover,
.quote-window .quote-combo-toggle:focus {
  background: linear-gradient(180deg, var(--t-s6-83), var(--t-s6-84));
  color: var(--t-s6-82);
}

.quote-window .quote-option-select-button {
  gap: 0;
  overflow: hidden;
  padding: 0 0 0 11px;
  border-color: var(--t-s6-01);
  background: var(--t-s6-02);
}

.quote-window .quote-option-select-button:hover,
.quote-window .quote-option-select-button:focus {
  border-color: var(--t-s6-38);
  background: var(--t-s6-24);
  box-shadow: 0 0 0 3px var(--t-s6-39);
}

.quote-window .quote-modal-form .quote-option-select-button > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--t-s6-33);
}

.quote-window .quote-modal-form .quote-option-select-button > span:last-child {
  display: grid;
  align-self: stretch;
  width: 38px;
  min-height: 38px;
  margin-left: 10px;
  place-items: center;
  background: linear-gradient(180deg, var(--t-s6-81), var(--t-s6-60));
  color: var(--t-s6-82);
}

.quote-window .quote-select-chevron .svg-icon {
  width: 21px;
  height: 21px;
  color: var(--t-s6-82);
  background: var(--t-s6-24);
}

.quote-window .quote-option-select-button:hover > span:last-child,
.quote-window .quote-option-select-button:focus > span:last-child {
  background: linear-gradient(180deg, var(--t-s6-83), var(--t-s6-84));
}

.quote-option-list {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 95;
  display: grid;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--t-s6-85);
  border-radius: 8px;
  background: var(--t-s6-86);
  box-shadow: 0 18px 36px var(--t-s6-87);
  padding: 4px;
}

.quote-option-list button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--t-s6-88);
  padding: 7px 10px;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
}

.quote-option-list button:hover,
.quote-option-list button.active,
.quote-option-list button[aria-selected="true"] {
  background: var(--t-s6-16);
  color: var(--t-s6-14);
}

.quote-suggestion-list {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--t-s6-85);
  border-radius: 8px;
  background: var(--t-s6-86);
  box-shadow: 0 18px 36px var(--t-s6-87);
  padding: 4px;
}

.quote-suggestion-list button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--t-s6-89);
  padding: 7px 9px;
  text-align: left;
  font: inherit;
  font-size: 15px;
}

.quote-suggestion-list button:hover,
.quote-suggestion-list button:focus,
.quote-suggestion-list button.active {
  background: var(--t-s6-16);
  color: var(--t-s6-14);
  outline: none;
}

.quote-suggestion-empty {
  padding: 9px;
  color: var(--t-s6-90);
  font-size: 15px;
  font-weight: 600;
}

.quote-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--t-s7-01);
  border-radius: 8px;
  background: var(--t-s7-02);
}

.quote-price-box.matched {
  border-color: var(--t-s7-03);
  background: var(--t-s7-04);
}

.quote-window .quote-price-box,
.quote-window .quote-price-box.matched {
  border-color: var(--t-s7-05);
  background: var(--t-s7-06);
}

.quote-window .quote-submit-button {
  border-color: var(--t-s7-07);
  background: linear-gradient(180deg, var(--t-s7-08), var(--t-s7-09));
  color: var(--t-s7-10);
  box-shadow: 0 0 0 1px var(--t-s7-11), 0 12px 28px var(--t-s7-12);
}

.quote-window .quote-submit-button:hover:not(:disabled) {
  border-color: var(--t-s7-13);
  background: linear-gradient(180deg, var(--t-s7-14), var(--t-s7-15));
  box-shadow: 0 0 0 1px var(--t-s7-16), 0 14px 32px var(--t-s7-17);
}

.quote-window .ghost-button {
  border-color: var(--t-s7-18);
  background: var(--t-s7-19);
  color: var(--t-s7-20);
}

.quote-window .ghost-button:hover:not(:disabled) {
  border-color: var(--t-s7-21);
  background: var(--t-s7-22);
  color: var(--t-s7-23);
}

.quote-window .quote-clear-button {
  border-color: var(--t-s7-24);
  background: var(--t-s7-25);
  color: var(--t-s7-20);
}

.quote-window .quote-clear-button:hover:not(:disabled) {
  border-color: var(--t-s7-26);
  background: var(--t-s7-27);
  color: var(--t-s7-28);
}

.quote-window.appointment-window {
  border-color: var(--t-s7-29);
  box-shadow:
    0 30px 90px var(--t-s7-30),
    0 0 0 1px var(--t-s7-31),
    0 16px 40px var(--t-s7-32);
}

.quote-window.appointment-window .floating-window-title > .svg-icon,
.quote-window.appointment-window .eyebrow {
  color: var(--t-s7-33);
}

.quote-window.appointment-window .quote-modal-form legend,
.quote-window.appointment-window .quote-modal-form label,
.quote-window.appointment-window .quote-modal-form label > span {
  color: var(--t-s7-34);
}

.quote-window.appointment-window .quote-modal-form .required-mark,
.quote-window.appointment-window .quote-number-steppers button {
  color: var(--t-s7-33);
}

.quote-window.appointment-window .quote-number-steppers button:hover {
  color: var(--t-s7-35);
}

.quote-window.appointment-window .quote-number-steppers .svg-icon {
  background: var(--t-s7-36);
}

.quote-window.appointment-window .quote-modal-form input:focus,
.quote-window.appointment-window .quote-modal-form select:focus,
.quote-window.appointment-window .quote-modal-form textarea:focus,
.quote-window.appointment-window .quote-option-select-button:focus,
.quote-window.appointment-window .quote-option-select-button:hover {
  border-color: var(--t-s7-37);
  background: var(--t-s7-06);
  box-shadow: 0 0 0 3px var(--t-s7-38);
}

.quote-window.appointment-window .quote-modal-form input[type="date"],
.quote-window.appointment-window .quote-modal-form input[type="time"] {
  color-scheme: light;
  padding-right: 8px;
}

.quote-window.appointment-window .quote-modal-form input[type="date"]::-webkit-calendar-picker-indicator,
.quote-window.appointment-window .quote-modal-form input[type="time"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 4px;
  border: 1px solid var(--t-s7-39);
  border-radius: 6px;
  background-color: var(--t-s7-40);
  cursor: pointer;
  filter: invert(32%) sepia(59%) saturate(993%) hue-rotate(158deg) brightness(88%) contrast(92%);
  opacity: 1;
}

.quote-window.appointment-window .quote-modal-form input[type="date"]::-webkit-calendar-picker-indicator:hover,
.quote-window.appointment-window .quote-modal-form input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: var(--t-s7-41);
  filter: invert(24%) sepia(82%) saturate(1250%) hue-rotate(166deg) brightness(92%) contrast(96%);
}

.quote-window.appointment-window .quote-phone-control:focus-within .quote-phone-prefix {
  border-color: var(--t-s7-37);
  background: var(--t-s7-42);
  color: var(--t-s7-43);
}

.quote-window.appointment-window .quote-combo-toggle,
.quote-window.appointment-window .quote-option-select-button > span:last-child {
  border-left-color: var(--t-s7-44);
  background: linear-gradient(180deg, var(--t-s7-45), var(--t-s7-36));
  color: var(--t-s7-10);
}

.quote-window.appointment-window .quote-combo-toggle .svg-icon,
.quote-window.appointment-window .quote-select-chevron .svg-icon {
  background: var(--t-s7-06);
  color: var(--t-s7-10);
}

.quote-window.appointment-window .quote-combo-toggle:hover,
.quote-window.appointment-window .quote-combo-toggle:focus,
.quote-window.appointment-window .quote-option-select-button:hover > span:last-child,
.quote-window.appointment-window .quote-option-select-button:focus > span:last-child {
  background: linear-gradient(180deg, var(--t-s7-46), var(--t-s7-47));
  color: var(--t-s7-10);
}

.quote-window.appointment-window .quote-option-list button:hover,
.quote-window.appointment-window .quote-option-list button.active,
.quote-window.appointment-window .quote-option-list button[aria-selected="true"],
.quote-window.appointment-window .quote-suggestion-list button:hover,
.quote-window.appointment-window .quote-suggestion-list button:focus,
.quote-window.appointment-window .quote-suggestion-list button.active {
  background: var(--t-s7-42);
  color: var(--t-s7-43);
}

.quote-window.appointment-window .appointment-original-fieldset {
  grid-template-columns: 1fr;
}

.appointment-original-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--t-s7-48);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--t-s7-49), var(--t-s7-42));
}

.appointment-original-card > .svg-icon {
  width: 28px;
  height: 28px;
  color: var(--t-s7-33);
}

.appointment-original-card span {
  display: block;
  color: var(--t-s7-34);
  font-size: 13px;
  font-weight: 800;
}

.appointment-original-card strong {
  display: block;
  color: var(--t-s7-50);
  font-size: 18px;
  font-weight: 650;
}

.appointment-original-card .appointment-date-time {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.appointment-original-card .appointment-date-time span {
  color: var(--t-s7-50);
  font-size: 18px;
  font-weight: 650;
}

.quote-window.appointment-window .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: var(--t-s7-44);
  background: linear-gradient(180deg, var(--t-s7-45), var(--t-s7-36));
  color: var(--t-s7-10);
  box-shadow: 0 0 0 1px var(--t-s7-51), 0 12px 28px var(--t-s7-52);
}

.quote-window.appointment-window .primary-button .svg-icon {
  width: 17px;
  height: 17px;
  background: currentColor;
}

.quote-window.appointment-window .primary-button:hover:not(:disabled) {
  border-color: var(--t-s7-53);
  background: linear-gradient(180deg, var(--t-s7-46), var(--t-s7-47));
  box-shadow: 0 0 0 1px var(--t-s7-54), 0 14px 32px var(--t-s7-55);
}

.quote-window.appointment-cancel-window .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: var(--t-s7-56);
  background: linear-gradient(180deg, var(--t-s7-57), var(--t-s7-58));
  color: var(--t-s7-10);
  box-shadow: 0 0 0 1px var(--t-s7-59), 0 12px 26px var(--t-s7-60);
}

.quote-window.appointment-cancel-window .danger-button:hover:not(:disabled) {
  border-color: var(--t-s7-61);
  background: linear-gradient(180deg, var(--t-s7-62), var(--t-s7-63));
  color: var(--t-s7-10);
  box-shadow: 0 0 0 1px var(--t-s7-64), 0 14px 30px var(--t-s7-65);
}

.quote-window.appointment-cancel-window .danger-button .svg-icon {
  width: 17px;
  height: 17px;
  background: currentColor;
}

.quote-window .quote-price-box span {
  color: var(--t-s7-20);
}

.quote-window .quote-price-box strong {
  color: var(--t-s7-23);
}

.quote-price-box span {
  color: var(--t-s7-66);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-price-box strong {
  color: var(--t-s7-67);
  font-size: 22px;
}

.quote-price-box label {
  grid-column: 1 / -1;
}

.quote-modal-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.context-next {
  padding: 12px;
  border: 1px solid var(--t-s7-68);
  border-radius: 8px;
  background: var(--t-s7-69);
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.context-next:hover {
  border-color: var(--t-s7-70);
  background: var(--t-s7-71);
  box-shadow: inset 3px 0 0 var(--t-s7-72);
}

.context-next span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t-s7-73);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.context-next span .svg-icon {
  width: 16px;
  height: 16px;
}

.context-next strong {
  display: block;
  margin-top: 7px;
  color: var(--t-s7-74);
  font-size: 12px;
  line-height: 1.35;
}

.context-actions .ghost-button,
.context-actions .primary-button,
.context-actions .danger-button,
.context-actions .caution-button {
  min-height: 34px;
  font-size: 14px;
}

.context-actions .ghost-button {
  border-color: var(--t-s7-75);
  background: var(--t-s7-76);
}


body[data-active-view="conversations"] .chat-panel {
  transition:
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease),
    background-color 160ms var(--ease);
}


body[data-active-view="conversations"] .chat-panel:hover {
  border-color: var(--t-s7-77);
  box-shadow: var(--shadow), 0 0 0 1px var(--t-s7-78);
}

body[data-active-view="conversations"] .chat-tabs button[data-filter="human_waiting"] {
  color: var(--t-s7-79);
}

body[data-active-view="conversations"] .chat-tabs button[data-filter="human_waiting"] .chat-tab-count {
  background: var(--t-s7-80);
  color: var(--t-s7-81);
}

body[data-active-view="conversations"] .chat-tabs button[data-filter="human_waiting"].active {
  background: var(--t-s7-82);
  color: var(--t-s7-81);
}

@media (max-width: 1260px) {

  
.chat-panel {
    min-height: 420px;
  }
}

@media (max-width: 1080px) {
  body[data-active-view="conversations"] {
    overflow: auto;
  }

  body[data-active-view="conversations"] .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body[data-active-view="conversations"] .sidebar {
    position: sticky;
    height: var(--app-viewport-height);
    padding: 16px 14px;
  }

  body[data-active-view="conversations"] .nav-list {
    grid-template-columns: 1fr;
  }

  body[data-active-view="conversations"] .main {
    height: auto;
    min-height: var(--app-viewport-height);
    padding: 12px 16px 20px;
    overflow: visible;
  }

  .global-alert-bar {
    min-height: 40px;
    max-height: 40px;
  }

  .conversations-view {
    height: auto;
    min-height: calc(100vh - 14px);
    overflow: visible;
  }

  .message {
    max-width: min(78%, 680px);
  }

  
.chat-panel {
    min-height: 360px;
  }

  
.chat-messages {
    max-height: none;
  }
}

@media (max-width: 900px) {
  
.chat-composer {
    grid-template-columns: 1fr;
  }

  .chat-control,
  .composer-actions {
    width: 100%;
  }

  .conversations-view {
    height: auto;
    min-height: calc(100vh - 14px);
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .global-alert-bar {
    justify-content: flex-start;
  }

  body[data-active-view="conversations"] .app-shell {
    grid-template-columns: 1fr;
  }

  body[data-active-view="conversations"] .sidebar {
    position: static;
    height: auto;
  }

  body[data-active-view="conversations"] .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .quote-modal-form .quote-vehicle-fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .floating-window {
    top: 12px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  .quote-modal-form fieldset,
  .quote-modal-form .quote-vehicle-fieldset {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LITE · INICIO ACCIONABLE
   Una sola ruta diaria para el propietario que atiende el taller.
   ============================================================ */

.lite-home-view {
  width: min(100%, 1260px);
  gap: 16px;
}

.lite-home-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 2px 4px;
}

.lite-home-header h1 {
  margin: 2px 0 7px;
  font-size: var(--type-page);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.lite-home-header p {
  margin: 0;
  color: var(--muted);
}

.lite-home-header p strong {
  color: var(--ink);
}

.lite-home-eyebrow,
.lite-home-panel-index,
.lite-home-section-heading p {
  margin: 0;
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lite-home-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Nueva Cotización / Nueva Evaluación viven ahora debajo de la tarjeta del
   bot, no en la cabecera — mismo par de botones, distinta ubicación. */
.lite-home-bot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lite-home-bot-actions > button {
  flex: 0 0 auto;
  padding-inline: 12px;
}

.lite-home-system-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.lite-home-system-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px var(--t-s7-83);
}

.lite-home-new-appointment,
.lite-home-new-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding-inline: 15px;
  border-radius: 9px;
  font-weight: 800;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}

.lite-home-new-appointment .svg-icon,
.lite-home-new-quote .svg-icon {
  width: 17px;
  height: 17px;
}

.lite-home-new-quote:hover,
.lite-home-new-appointment:hover {
  transform: translateY(-1px);
}

.lite-home-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lite-home-metric {
  position: relative;
  display: grid;
  min-height: 132px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--t-s7-84), var(--t-s7-85));
  box-shadow: 0 12px 36px var(--t-s7-86);
  color: var(--ink);
  text-align: left;
  transition: transform 150ms var(--ease), border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.lite-home-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--blue);
}

.lite-home-metric.clients::before {
  background: var(--green);
}

.lite-home-metric.attention::before {
  background: var(--red);
}

.lite-home-metric.clear::before {
  background: var(--muted);
}

.lite-home-metric:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: linear-gradient(145deg, var(--t-s7-87), var(--t-s7-88));
}

.lite-home-metric:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.lite-home-metric-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lite-home-metric-heading > span {
  position: relative;
  display: inline-grid;
  gap: 7px;
  align-content: start;
  color: var(--t-s7-89);
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.lite-home-metric-heading > span::after {
  width: 27px;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 12px var(--t-s7-90);
  content: "";
}

.lite-home-metric.clients .lite-home-metric-heading > span {
  color: var(--t-s7-91);
}

.lite-home-metric.clients .lite-home-metric-heading > span::after {
  background: var(--green);
  box-shadow: 0 0 12px var(--t-s7-92);
}

.lite-home-metric.attention .lite-home-metric-heading > span::after {
  background: var(--red);
  box-shadow: 0 0 12px var(--t-s7-93);
}

.lite-home-metric.clear .lite-home-metric-heading > span::after {
  background: var(--soft);
  box-shadow: 0 0 12px var(--t-s7-94);
}

.lite-home-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--t-s7-95);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--t-s7-96), var(--t-s7-97));
  box-shadow: inset 0 1px 0 var(--t-s7-98), 0 8px 20px var(--t-s7-99);
  color: var(--blue);
}

.lite-home-metric-icon .svg-icon {
  width: 25px;
  height: 25px;
}

.lite-home-metric.clients .lite-home-metric-icon {
  border-color: var(--t-s7-100);
  background: linear-gradient(135deg, var(--t-s7-101), var(--t-s7-102));
  color: var(--green);
}

.lite-home-metric.attention .lite-home-metric-icon {
  border-color: var(--t-s7-103);
  background: linear-gradient(135deg, var(--t-s7-104), var(--t-s7-105));
  color: var(--red);
}

.lite-home-metric.clear .lite-home-metric-icon {
  color: var(--soft);
}

.lite-home-metric > strong {
  align-self: center;
  margin: 8px 0;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.06em;
}

.lite-home-metric > small {
  align-self: end;
  color: var(--muted);
  font-size: 0.72rem;
}

/* Las tarjetas de arriba (.lite-home-metrics) mandan: esta grilla usa
   exactamente las mismas 3 columnas iguales y el mismo gap, para que los
   bordes coincidan al píxel (una proporción propia como 2fr/1fr calcula
   distinto y desalinea unos px). Ruta ocupa 2 columnas, riel 1. */
.lite-home-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.lite-home-route {
  grid-column: span 2;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lite-home-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--t-s7-106);
}

.lite-home-section-heading h2 {
  margin: 4px 0 0;
  font-size: 1.18rem;
}

.lite-home-section-heading > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.lite-home-task-list {
  padding: 4px 20px 12px;
  overflow-y: auto;
  min-height: 0;
}

.lite-home-task {
  position: relative;
  display: grid;
  grid-template-columns: 42px 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 106px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.lite-home-task:last-child {
  border-bottom: 0;
}

.lite-home-task::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: calc(50% + 21px);
  width: 1px;
  background: var(--line-strong);
}

.lite-home-task::after {
  content: "";
  position: absolute;
  left: 20px;
  top: calc(50% + 21px);
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

.lite-home-task:first-child::before,
.lite-home-task:last-child::after {
  display: none;
}

.lite-home-task-index {
  position: relative;
  z-index: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--soft);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.lite-home-task.urgent .lite-home-task-index {
  border-color: var(--t-s7-107);
  background: var(--t-s7-108);
  color: var(--t-s7-109);
}

.lite-home-task-time {
  display: grid;
  gap: 3px;
}

.lite-home-task-time strong {
  font-size: 0.83rem;
}

.lite-home-task-time small,
.lite-home-task-copy p {
  color: var(--muted);
  font-size: 0.72rem;
}

.lite-home-task-copy {
  min-width: 0;
}

.lite-home-task-copy > strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.86rem;
}

.lite-home-task-copy p {
  max-width: 66ch;
  margin: 0 0 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lite-home-task-copy > span {
  display: inline-flex;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
}

.lite-home-task.urgent .lite-home-task-copy > span {
  border-color: var(--t-s7-110);
  background: var(--t-s7-111);
  color: var(--t-s7-109);
}

.lite-home-task.appointment .lite-home-task-copy > span {
  border-color: var(--t-s7-112);
  background: var(--t-s7-113);
  color: var(--t-s7-114);
}

.lite-home-task > button {
  min-width: 96px;
  min-height: 42px;
}

.lite-home-task-action,
.lite-home-view-attention {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid var(--t-s7-115);
  border-radius: 9px;
  background: linear-gradient(135deg, var(--t-s7-116), var(--t-s7-117));
  color: var(--t-s7-118);
  font-size: 0.76rem;
  font-weight: 800;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}

.lite-home-task-action .svg-icon,
.lite-home-view-attention .svg-icon {
  width: 16px;
  height: 16px;
}

.lite-home-task-action:hover,
.lite-home-view-attention:hover {
  border-color: var(--t-s7-119);
  background: linear-gradient(135deg, var(--t-s7-120), var(--t-s7-121));
  transform: translateY(-1px);
}

.lite-home-task-action.urgent {
  border-color: var(--t-s7-122);
  background: linear-gradient(135deg, var(--t-s7-123), var(--t-s7-124));
  color: var(--t-s7-125);
}

.lite-home-rail {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  min-height: 0;
}

.lite-home-next-card {
  align-self: end;
}

.lite-home-bot-card {
  padding: 20px;
}


.lite-home-bot-card h2,
.lite-home-next-card h3 {
  margin: 8px 0 6px;
}

.lite-home-bot-card > p:not(.lite-home-panel-index),
.lite-home-next-card > p,
.lite-home-no-appointment p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* En la noche los dos índices del panel lateral pertenecen a la misma
   jerarquía operativa. El tema día los convierte deliberadamente en metadatos. */
.lite-home-next-card > .lite-home-panel-index { color: var(--green); }

.lite-home-bot-mark {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 18px auto 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--t-s7-126);
  border-radius: 50%;
  background: var(--t-s7-127);
  box-shadow: 0 0 22px var(--t-s7-128), inset 0 1px 0 var(--t-s7-129);
}

.lite-home-bot-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lite-home-bot-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.lite-home-bot-stats span {
  display: grid;
  gap: 2px;
  padding: 10px 6px;
  background: var(--panel-2);
  text-align: center;
}

.lite-home-bot-stats strong {
  font-size: 1.12rem;
}

.lite-home-bot-stats small {
  color: var(--muted);
  font-size: 0.58rem;
}

.lite-home-bot-card > button {
  width: 100%;
  min-height: 42px;
}

.lite-home-view-attention {
  width: 100%;
  border-color: var(--t-s7-130);
  background: linear-gradient(135deg, var(--t-s7-131), var(--t-s7-132));
  color: var(--t-s7-133);
}

.lite-home-view-attention:hover {
  border-color: var(--t-s7-134);
  background: linear-gradient(135deg, var(--t-s7-135), var(--t-s7-136));
}

.lite-home-next-card time {
  display: block;
  margin-top: var(--space-2);
  color: var(--blue);
  letter-spacing: -0.03em;
}

.lite-home-next-card .text-button,
.lite-home-no-appointment .text-button {
  min-height: 40px;
  padding: 8px 12px;
}

.lite-home-no-appointment {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.lite-home-no-appointment p {
  margin: 0;
}

.lite-home-no-appointment .text-button {
  justify-self: start;
}

.lite-home-all-clear {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 170px;
  padding: 26px;
}

.lite-home-all-clear > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid var(--t-s7-137);
  border-radius: 50%;
  background: var(--t-s7-138);
  color: var(--green);
  font-weight: 900;
}

.lite-home-all-clear strong {
  display: block;
  margin-bottom: 4px;
}

.lite-home-all-clear p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 1080px) {
  .lite-home-route,
  .lite-home-rail {
    grid-column: 1 / -1;
  }

  .lite-home-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* En pantallas angostas las tarjetas se apilan: vuelve al scroll normal
     de la página en vez del alto acotado al viewport de escritorio. */
  body[data-active-view="overview"] {
    overflow: auto;
  }

  body[data-active-view="overview"] .main {
    display: block;
    height: auto;
    min-height: var(--app-viewport-height);
    overflow: visible;
  }

  body[data-active-view="overview"] .lite-home-view {
    display: grid;
    grid-template-rows: none;
    overflow: visible;
  }

  .lite-home-route {
    min-height: 0;
    max-height: none;
  }

  .lite-home-task-list {
    overflow-y: visible;
  }

  .lite-home-rail {
    grid-template-rows: none;
  }

  .lite-home-next-card {
    align-self: auto;
  }
}

@media (max-width: 760px) {
  .lite-home-header {
    display: grid;
  }

  .lite-home-header-actions {
    justify-content: flex-start;
  }

  .lite-home-metrics {
    grid-template-columns: 1fr;
  }

  .lite-home-metric {
    min-height: 110px;
  }

  .lite-home-task {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px 12px;
  }

  .lite-home-task-time,
  .lite-home-task-copy,
  .lite-home-task > button {
    grid-column: 2;
  }

  .lite-home-task-time {
    grid-row: 1;
  }

  .lite-home-task-index {
    grid-row: 1 / span 3;
    align-self: start;
  }

  .lite-home-task-copy p {
    white-space: normal;
  }

  .lite-home-task > button {
    width: 100%;
  }

  .lite-home-rail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .lite-home-header-actions,
  .lite-home-system-state,
  .lite-home-new-appointment,
  .lite-home-new-quote {
    width: 100%;
  }

  .lite-home-section-heading {
    align-items: flex-start;
  }

  .lite-home-task-list {
    padding-inline: 14px;
  }

  .lite-home-bot-stats {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lite-home-metric {
    transition-duration: 0.001ms;
  }
}

/* ============================================================
   LITE · AGENDA OPERATIVA
   Una lista diaria para crear, confirmar y mover citas rápido.
   ============================================================ */

.lite-agenda-shell {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, var(--t-s7-139), var(--t-s7-140)),
    var(--panel);
  box-shadow: 0 20px 58px var(--t-s7-141);
}

.lite-agenda-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.lite-agenda-header h1 {
  margin: 0 0 3px;
  line-height: 1.2;
  letter-spacing: 0;
}

.lite-agenda-header > div {
  min-width: 0;
}

.lite-agenda-header > div > p:last-child {
  max-width: none;
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lite-agenda-header .lite-agenda-create-button {
  flex: 0 0 auto;
  min-height: var(--action-compact-height);
}


.lite-agenda-filters {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  padding: 6px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.lite-agenda-filters button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}

.lite-agenda-filters button:focus-visible,
.lite-agenda-actions button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.lite-agenda-filters button strong {
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
}

.lite-agenda-list {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.lite-agenda-list > header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--t-s7-142);
}

.lite-agenda-list > header strong {
  font-weight: 700;
}

.lite-agenda-list > header span {
  color: var(--text-placeholder);
}

.lite-agenda-rows {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--t-s7-143) var(--t-s7-144);
  scrollbar-width: thin;
}

.lite-agenda-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 76px;
  padding: 16px 14px 12px 17px;
  border-bottom: 1px solid var(--line);
  background: var(--t-s7-145);
}

.lite-agenda-row::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--blue);
}

.lite-agenda-row.pending::before,
.lite-agenda-row.pending-optimistic::before {
  background: var(--amber);
}

.lite-agenda-row.confirmed::before {
  background: var(--green);
}

.lite-agenda-row.rescheduled::before {
  background: var(--blue);
}

.lite-agenda-row:hover {
  background: var(--t-s7-106);
}

.lite-agenda-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.lite-agenda-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

.lite-agenda-client {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lite-agenda-subtle {
  flex: 0 0 auto;
  color: var(--muted);
  white-space: nowrap;
}

/* Vista "Agenda" del calendario embebido: dentro de un grupo por dia la
   fecha ya esta en el encabezado, asi que la fila la oculta y la hora pasa
   a ser el dato resaltado - pedido explicito del usuario. */
.lite-agenda-subtle.lite-agenda-time-highlight {
  color: var(--brand);
}

.lite-agenda-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.lite-agenda-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
}

.lite-agenda-field .svg-icon {
  width: 14px;
  height: 14px;
  color: var(--amber);
  flex: none;
}

.lite-agenda-plate {
  color: var(--muted);
}

.agenda-day-vehicle-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Pedido explicito del usuario: los disparadores de "Notas"/"Detalles" van
   en su propia columna, separada de la columna de Vehiculo (Agenda Pro/
   Enterprise) - ver grid-column en visual-system.css para la posicion
   exacta en pantallas anchas. */
.agenda-day-vehicle-disclosures {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.agenda-day-disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.agenda-day-disclosure-toggle .svg-icon {
  width: 14px;
  height: 14px;
  color: var(--amber);
  flex: none;
}

.agenda-day-disclosure-toggle.is-details .svg-icon {
  color: var(--blue);
}

.agenda-day-disclosure-toggle.active {
  color: var(--soft);
}

.agenda-day-disclosure-toggle.is-empty {
  opacity: 0.5;
  cursor: default;
}

/* Contenido de "Notas"/"Detalles" - sigue apareciendo al fondo de la
   tarjeta, como antes, aunque el disparador ya no este ahi al lado. */
.agenda-day-disclosure-panels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agenda-day-notes-panel {
  max-width: 920px;
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--t-s7-146);
  background: var(--t-s7-147);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.lite-agenda-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.lite-agenda-status-line .appointment-status {
  line-height: 1.2;
}

.lite-agenda-status-line .appointment-rescheduled-mark {
  padding: 3px 7px;
  line-height: 1.1;
}

/* Sistema visual Lite: una sola escala para títulos, datos y acciones.
   Los colores se reservan para estados y decisiones, no para texto decorativo. */
.lite-home-view .panel,
.lite-agenda-shell,
.quotes-shell,
.lite-clients-layout > .panel,
.lite-attention-list-panel,
.lite-attention-conversation-panel {
  box-shadow: 0 14px 36px var(--t-s7-141);
}

.lite-home-view .eyebrow,
.quote-history-row small,
.lite-client-facts span {
  letter-spacing: 0.065em;
}

.lite-agenda-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.lite-agenda-actions button .svg-icon,
.appointment-actions button .svg-icon {
  width: 14px;
  height: 14px;
}

.lite-agenda-actions .appointment-chat-button,
.appointment-actions .appointment-chat-button {
  border-color: var(--t-s7-112);
  background: var(--t-s7-148);
  color: var(--t-s7-149);
}

.lite-agenda-actions .lite-agenda-confirm,
.appointment-actions .lite-agenda-confirm {
  border-color: var(--t-s7-150);
  background: var(--t-s7-151);
  color: var(--green);
}

.lite-agenda-actions .lite-agenda-secondary,
.appointment-actions .lite-agenda-secondary {
  border-color: var(--t-s7-152);
  background: var(--t-s7-153);
  color: var(--amber);
}

.lite-agenda-actions .lite-agenda-cancel,
.appointment-actions .lite-agenda-cancel {
  border-color: var(--t-s7-110);
  background: var(--t-s7-154);
  color: var(--t-s7-155);
}

.lite-agenda-actions button:disabled,
.appointment-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.lite-agenda-empty {
  display: grid;
  flex: 1;
  min-height: 190px;
  place-content: center;
  justify-items: center;
  padding: 28px;
  text-align: center;
}

.lite-agenda-empty > span {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 13px;
  place-items: center;
  border: 1px solid var(--t-s8-001);
  border-radius: 50%;
  background: var(--t-s8-002);
  color: var(--green);
}

.lite-agenda-empty > span .svg-icon {
  width: 23px;
  height: 23px;
}

.lite-agenda-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

@media (max-width: 900px) {
  .appointments-view:has(.lite-agenda-shell) {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .lite-agenda-shell {
    overflow: visible;
  }

  .lite-agenda-header {
    display: grid;
    padding: 20px;
  }

  .lite-agenda-header > div > p:last-child {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .lite-agenda-header .lite-agenda-create-button {
    width: 100%;
  }

  .lite-agenda-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 12px;
    overflow: visible;
  }

  .lite-agenda-filters button {
    min-width: 0;
    justify-content: space-between;
  }
}

/* La composición principal se redefine varias veces por vistas históricas.
   Esta regla final garantiza que ninguna definición de escritorio posterior
   vuelva a empujar el contenido fuera del viewport en teléfonos. */
@media (max-width: 860px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .sidebar.collapsed {
    width: 100%;
    min-width: 0;
  }

  .main {
    /* En movil el grid vuelve a ser de una sola columna - .main debe
       volver a la columna 1 (la unica que existe), no la 2 fija de
       escritorio. */
    grid-column: 1;
    width: 100%;
    min-width: 0;
    padding: 16px;
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .nav-tree.open {
    grid-column: 1 / -1;
  }

  .nav-item {
    min-width: 0;
    min-height: 48px;
    gap: 10px;
    padding: 0 12px;
    font-size: 15px;
  }

  .nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-tree.open .nav-subtree {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2px;
    padding-left: 34px;
  }

  .nav-subitem {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* En teléfono el menú funciona como una cabecera compacta. */
  .sidebar,
  .sidebar.collapsed {
    position: relative;
    top: auto;
    display: grid;
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 12px 14px 14px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-collapse-button,
  .sidebar-status,
  .sound-toggle-button,
  .sidebar-sound-toggles,
  .sidebar-footer-ad {
    display: none;
  }

  .sidebar .brand,
  .sidebar.collapsed .brand {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    gap: 2px;
    margin: 0;
  }

  .sidebar .brand-copy strong,
  .sidebar.collapsed .brand-copy strong {
    display: block;
    font-size: 21px;
    line-height: 1.05;
    text-align: left;
    white-space: nowrap;
  }

  .sidebar .brand p,
  .sidebar.collapsed .brand p {
    margin: 2px 0 0;
    font-size: 11px;
    text-align: left;
  }

  .sidebar .nav-list,
  .sidebar.collapsed .nav-list {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .sidebar .nav-item,
  .sidebar.collapsed .nav-item {
    justify-content: center;
    min-height: 43px;
    gap: 7px;
    padding: 0 8px;
    font-size: 12px;
  }

  .sidebar.collapsed .nav-label {
    display: block;
  }

  .sidebar .nav-item .svg-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .sidebar .session-card,
  .sidebar.collapsed .session-card {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .sidebar .session-card .sidebar-detail,
  .sidebar.collapsed .session-card .sidebar-detail {
    display: none;
  }

  .sidebar .session-card .ghost-button,
  .sidebar.collapsed .session-card .ghost-button {
    width: auto;
    min-width: 62px;
    min-height: 36px;
    padding: 0 10px;
  }

  .sidebar.collapsed .session-card .nav-label {
    display: block;
  }
}

/* Precedencia final para la composición de Atención Lite frente a las
   reglas históricas de la mesa de conversaciones. Solo dos filas: el
   resumen de filtros y el panel (ya no hay cabecera con título). */
.conversations-view.lite-attention-view {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}


@media (max-width: 1100px) {
  .conversations-view.lite-attention-view {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  body[data-active-view="conversations"] .global-alert-bar,
  .global-alert-bar {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .global-alert-item {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  .global-alert-item > span:not(.global-alert-pulse):not(.global-alert-countdown) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Lista de variables de la cotizacion. Se revisa antes de encargarle una
   plantilla a una IA, asi que prioriza leerse de corrido: la descripcion ocupa
   el ancho que le sobra y el marcador se lee como codigo. */
/* `minmax(0, 1fr)` es lo que permite que las columnas encojan: sin eso una
   tabla ancha estira el grid y el panel se sale de la tarjeta. */
.quote-variables-panel { margin-top: clamp(12px, 1.5vw, 20px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.5vw, 18px); }
.quote-variables-group { min-width: 0; }
.quote-variables-scroll { max-width: 100%; overflow-x: auto; }
/* Los dos porcentajes viven dentro de la fila de {{porcentajeAhorro}}, en la
   columna del ejemplo: son numeros de dos digitos y una seccion aparte gastaba
   el alto de un formulario entero para pedir cuatro caracteres. */
.quote-savings-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.quote-savings-item { display: inline-flex; align-items: center; gap: 5px; }
.quote-savings-item label { font-size: clamp(0.7rem, 0.8vw, 0.8rem); font-weight: 600; }
.quote-savings-item input { width: 52px; text-align: center; padding: 2px 4px; }

/* El estado del redireccionamiento aparece bajo los combos del paso 1 y sin
   separacion se leia como parte del selector. */
.channel-choice-grid + .channel-result { margin-top: clamp(14px, 1.6vw, 22px); }
.quote-variables-group h3 { font-size: clamp(0.9rem, 1vw, 1rem); margin-bottom: 4px; }
.quote-variables-table { width: 100%; border-collapse: collapse; font-size: clamp(0.75rem, 0.85vw, 0.85rem); }
.quote-variables-table th,
.quote-variables-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border, var(--t-s8-003)); vertical-align: middle; }
.quote-variables-table th { font-weight: 600; opacity: .7; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; }
.quote-variables-table th:first-child,
.quote-variables-table td:first-child { width: 1%; white-space: nowrap; }
/* Sin esto heredan el ancho de los campos de formulario y ocupan toda la celda. */
.quote-variables-table input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.quote-variables-table code { font-size: .95em; white-space: nowrap; }
.quote-variables-table td:nth-child(3) { width: 100%; }
.quote-variables-table input[type="text"] { width: 100%; min-width: 12ch; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; color: inherit; font: inherit; }
.quote-variables-table input[type="text"]:hover { border-color: var(--border, var(--t-s8-004)); }
.quote-variables-table input[type="text"]:focus { border-color: currentColor; outline: none; }
.quote-variables-table td:last-child { max-width: 26ch; opacity: .65; }

/* La tabla de constantes propias tiene una columna mas —el valor— y heredaba el
   reparto de la de arriba: "Que representa" se quedaba con todo el ancho
   sobrante y el valor salia cortado. Aqui se reparte a mano. */
.quote-variables-table.quote-custom-table td:nth-child(3),
.quote-variables-table.quote-custom-table th:nth-child(3) { width: 40%; }
.quote-variables-table.quote-custom-table td:nth-child(4),
.quote-variables-table.quote-custom-table th:nth-child(4) { width: 32%; }
.quote-variables-table.quote-custom-table td:last-child { width: 1%; max-width: none; white-space: nowrap; opacity: 1; }
/* Quitar y Agregar son acciones de mantenimiento, no la accion principal de la
   pantalla: compiten con Guardar si pesan lo mismo. */
.quote-custom-actions { margin-top: clamp(12px, 1.6vw, 20px); }

/* La lista de datos es larga y se revisa una vez: plegada, la pantalla arranca
   mostrando lo que se usa a diario —subir modelo, vista previa— en lugar de
   veinte filas de variables. */
.quote-data-disclosure { margin: clamp(14px, 1.8vw, 22px) 0; }
.quote-data-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit; font-weight: 700;
  font-size: clamp(0.9rem, 1vw, 1rem);
}
.quote-data-toggle:hover { color: var(--ink); }
.quote-data-caret { opacity: .6; font-size: .85em; }
.quote-mini-button { min-height: 28px; padding: 4px 10px; font-size: clamp(0.72rem, 0.8vw, 0.8rem); opacity: .75; }
.quote-mini-button:hover { opacity: 1; }

/* ============================================================
   TEMA DÍA
   La interfaz inicia de noche en cada carga. El interruptor solo cambia el
   estado de la pestaña: no se guarda como preferencia del usuario.
   ============================================================ */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f7f4;
  --panel: #ffffff;
  --panel-2: #f7faf8;
  --panel-3: #eaf1ed;
  /* El verde operativo unifica las vistas diurnas; el bosque queda como firma
     exclusiva del nombre del producto en el lateral. */
  --ink: #087b40;
  --muted: #587565;
  --placeholder: rgba(39, 91, 63, 0.64);
  --soft: #285e43;
  --line: rgba(29, 67, 43, 0.14);
  --line-strong: rgba(29, 67, 43, 0.24);
  --green: #087b40;
  --green-2: #087b40;
  --brand-forest: #0d4a31;
  --purple: #7155c9;
  --blue: #087eb8;
  --amber: #9b6200;
  --red: #c8374b;
  --shadow: 0 18px 48px var(--t-s8-005);
  --chat-canvas: var(--t-s8-006);
  --chat-advisor: var(--t-s8-007);
  --chat-advisor-ink: var(--t-s8-008);
}

:root[data-theme="light"] body {
  background:
    linear-gradient(90deg, var(--t-s8-009) 1px, transparent 1px),
    linear-gradient(var(--t-s8-010) 1px, transparent 1px),
    radial-gradient(circle at top right, var(--t-s8-011), transparent 34rem),
    var(--bg);
}

:root[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, var(--t-s8-012), var(--t-s8-013));
  box-shadow: 14px 0 38px var(--t-s8-014);
}

:root[data-theme="light"] .brand strong { color: var(--ink); }
:root[data-theme="light"] .brand p { color: var(--brand-forest); text-shadow: none; }
:root[data-theme="light"] .sidebar-collapse-button { background: var(--t-s8-015); }
:root[data-theme="light"] .sidebar-collapse-button.active {
  border-color: color-mix(in srgb, var(--brand) 65%, transparent);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
}
:root[data-theme="light"] .session-card { background: var(--t-s8-016); }

:root[data-theme="light"] .lite-attention-summary,
:root[data-theme="light"] .lite-attention-list-panel,
:root[data-theme="light"] .chat-panel,
:root[data-theme="light"] .quotes-list,
:root[data-theme="light"] .quotes-shell,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .daily-panel,
:root[data-theme="light"] .mini-conversations {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 12px 28px var(--t-s8-017);
}


:root[data-theme="light"] .chat-panel {
  background:
    linear-gradient(180deg, var(--t-s8-018), transparent 34%),
    var(--panel);
}


:root[data-theme="light"] :is(.conversation-search input, .mini-chat-preview, .appointments-toolbar, .day-capacity, .table-section, .task-title, .transport-choice) {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--soft);
}

:root[data-theme="light"] :is(.chat-tab-count, .date-navigator button) {
  border-color: var(--line);
  background: var(--panel-3);
  color: var(--ink);
}


:root[data-theme="light"] :is(.task-title small, .date-navigator strong, .day-capacity, .appointments-head, .appointments-row) {
  color: var(--muted);
}

:root[data-theme="light"] :is(.task-title h3, .appointments-head) {
  background: var(--panel-3);
  color: var(--ink);
  box-shadow: none;
}

.session-card-head {
  display: flex;
  justify-content: center;
}

.theme-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 160ms var(--ease);
}

.theme-toggle-button:hover {
  opacity: 1;
}

.theme-toggle-button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ajustes finales del tema día: cada plan conserva su estructura, pero comparte
   superficies legibles, estados reconocibles y contraste suficiente. */
:root[data-theme="light"] .global-alert-bar {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

:root[data-theme="light"] .global-alert-item.warning {
  border-color: var(--t-s8-019);
  background: var(--t-s8-020);
  color: var(--t-s8-021);
}

:root[data-theme="light"] .global-alert-item.urgent,
:root[data-theme="light"] .global-alert-item.danger {
  border-color: var(--t-s8-022);
  background: var(--t-s8-023);
  color: var(--t-s8-024);
}

:root[data-theme="light"] .global-alert-item.developer {
  border-color: var(--t-s8-025);
  background: var(--t-s8-026);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .global-alert-countdown.urgent { color: var(--t-s8-024); }


:root[data-theme="light"] :is(.daily-panel, .mini-conversations, .lite-home-view .panel, .lite-home-metric, .table-section) {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 12px 28px var(--t-s8-017);
}

:root[data-theme="light"] .lite-home-metric {
  background: linear-gradient(145deg, var(--t-s8-028), var(--t-s8-029));
}

:root[data-theme="light"] .lite-home-metric:hover {
  background: linear-gradient(145deg, var(--t-s8-028), var(--t-s8-030));
}

:root[data-theme="light"] .lite-home-metric > strong { color: var(--brand-forest); }


:root[data-theme="light"] :is(.lite-home-metric-heading > span, .lite-home-metric.clients .lite-home-metric-heading > span) { color: var(--ink); }

:root[data-theme="light"] :is(
  .lite-home-new-quote,
  .lite-home-view-attention,
  .lite-client-primary-actions .lite-client-new-quote
) {
  border-color: var(--t-s8-031);
  background: var(--t-s8-032);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .lite-home-new-quote {
  border: 1px solid var(--t-s8-031);
  background: var(--t-s8-032);
  box-shadow: none;
}

:root[data-theme="light"] :is(
  .lite-home-new-appointment,
  .lite-client-primary-actions .lite-client-action-button:not(.lite-client-new-quote)
) {
  border-color: var(--t-s8-034);
  background: var(--t-s8-026);
  color: var(--t-s8-027);
  box-shadow: inset 0 1px 0 var(--t-s8-035), 0 7px 18px var(--t-s8-036);
}

:root[data-theme="light"] :is(
  .lite-home-eyebrow,
  .lite-home-panel-index,
  .lite-home-section-heading p
) { color: var(--muted); }

:root[data-theme="light"] .lite-home-next-card .text-button {
  border-color: var(--t-s8-037);
  background: var(--t-s8-026);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .lite-home-next-card .text-button:hover {
  border-color: var(--t-s8-038);
  background: var(--t-s8-039);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .lite-home-task-action.agenda {
  border-color: var(--t-s8-037);
  background: var(--t-s8-026);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .lite-home-task-action.agenda:hover {
  border-color: var(--t-s8-038);
  background: var(--t-s8-039);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .lite-home-bot-mark {
  border-color: var(--t-s8-040);
  background: var(--t-s8-041);
  box-shadow: 0 0 0 4px var(--t-s8-042), 0 8px 20px var(--t-s8-043), inset 0 1px 0 var(--t-s8-044);
}


:root[data-theme="light"] :is(.lite-home-task.urgent .lite-home-task-copy > span) {
  border-color: var(--t-s8-045);
  background: var(--t-s8-023);
  color: var(--t-s8-024);
}

:root[data-theme="light"] .lite-home-task-index {
  border-color: var(--t-s8-046);
  background: var(--t-s8-028);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .lite-home-task.urgent .lite-home-task-index {
  border-color: var(--t-s8-047);
  background: var(--t-s8-048);
  color: var(--t-s8-049);
}

:root[data-theme="light"] .lite-home-task.appointment .lite-home-task-copy > span {
  border-color: var(--t-s8-037);
  background: var(--t-s8-026);
  color: var(--t-s8-027);
}

:root[data-theme="light"] :is(
  .table-section,
  .task-title h3,
  .appointments-head,
  .lite-home-section-heading
) { background: var(--panel-2); }

/* Atención: la cabecera conserva sus dos niveles, con una segunda franja más ágil. */
:root[data-theme="light"] .chat-header,
:root[data-theme="light"] .lite-chat-facts {
  border-color: var(--line);
  background: var(--panel);
}

.lite-chat-panel .chat-header {
  min-height: 68px;
  padding: 8px 14px;
}

.lite-chat-panel .lite-chat-facts > span {
  gap: 2px;
  padding: 7px 13px;
}

.lite-chat-panel .chat-control .primary-button,
.lite-chat-panel .chat-control .caution-button,
.lite-chat-panel .lite-chat-action { min-height: 38px; }

:root[data-theme="light"] :is(
  .chat-header h2,
  .chat-header-detail strong,
  .lite-chat-facts strong
) { color: var(--ink); }

:root[data-theme="light"] :is(
  .chat-header-detail small,
  .chat-header small,
  .lite-chat-facts small
) { color: var(--muted); }

:root[data-theme="light"] .chat-client-phone { color: var(--t-s8-050); }

:root[data-theme="light"] .chat-header-detail + .chat-header-detail {
  border-left-color: var(--line);
}

:root[data-theme="light"] .lite-attention-kind.automatic {
  border: 1px solid var(--t-s8-051);
  background: var(--t-s8-052);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .lite-attention-kind.handling {
  border: 1px solid var(--t-s8-053);
  background: var(--t-s8-054);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .lite-attention-row {
  border-color: var(--t-s8-055);
  background: var(--t-s8-056);
}

:root[data-theme="light"] .lite-attention-row:hover,
:root[data-theme="light"] .lite-attention-row.active {
  border-color: var(--t-s8-057);
  background: var(--t-s8-058);
  box-shadow: 0 4px 12px var(--t-s8-059);
}

:root[data-theme="light"] .lite-attention-row.active .lite-attention-row-index {
  border-color: var(--t-s8-060);
  background: var(--t-s8-028);
}

/* Burbujas del chat: la conversación en modo día adopta la paleta de WhatsApp. */
:root[data-theme="light"] .message {
  box-shadow: 0 3px 10px var(--t-s8-061);
}

:root[data-theme="light"] .message.ai {
  border-color: var(--t-s8-062);
  background: var(--t-s8-063);
  color: var(--t-s8-064);
}

:root[data-theme="light"] .message.human {
  border-color: var(--t-s8-065);
  background: var(--t-s8-028);
  color: var(--t-s8-064);
}

:root[data-theme="light"] .message.ai footer { color: var(--t-s8-066); }
:root[data-theme="light"] .message.human footer { color: var(--t-s8-067); }

:root[data-theme="light"] .message-date {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, var(--t-s8-068));
  color: var(--brand);
  font-weight: 750;
}

:root[data-theme="light"] .message-line.ai .message-avatar {
  border-color: var(--t-s8-062);
  background: var(--t-s8-069);
  color: var(--t-s8-033);
  box-shadow: none;
}

:root[data-theme="light"] .message-line.human .message-avatar {
  border-color: var(--t-s8-065);
  background: var(--t-s8-028);
  color: var(--t-s8-024);
  box-shadow: none;
}

:root[data-theme="light"] :is(.document-message-icon, .location-message-icon) {
  background: var(--t-s8-070);
}

:root[data-theme="light"] :is(.document-message-card small, .location-message-card small) { color: var(--t-s8-067); }
:root[data-theme="light"] :is(.document-message-card a, .location-message-card a) { color: var(--t-s8-033); }

:root[data-theme="light"] .image-message-placeholder {
  border-color: var(--t-s8-071);
  color: var(--t-s8-067);
}

:root[data-theme="light"] .location-map-preview {
  border-color: var(--t-s8-072);
  background: var(--t-s8-073);
}

:root[data-theme="light"] .location-map-preview .location-map-open {
  border-color: var(--t-s8-072);
  background: var(--t-s8-028);
  color: var(--t-s8-027);
  box-shadow: 0 4px 12px var(--t-s8-074);
}

/* Los encabezados y el contexto tienen reglas propias en Pro y Enterprise. */
:root[data-theme="light"] .page-header .eyebrow { color: var(--green-2); }
:root[data-theme="light"] .page-header h1 { color: var(--ink); }
:root[data-theme="light"] .control-meta,
:root[data-theme="light"] .date-pill { color: var(--muted); }
:root[data-theme="light"] .system-pill {
  border-color: var(--t-s8-075);
  background: var(--t-s8-032);
  color: var(--t-s8-033);
}


:root[data-theme="light"] :is(.context-item strong, .conversation-state-card p, .context-hero strong, .context-next strong) { color: var(--ink); }

:root[data-theme="light"] :is(
  .conversation-state-card > span:first-child,
  .context-item span,
  .context-item small,
  .context-hero small,
  .context-next span
) { color: var(--muted); }

:root[data-theme="light"] .conversation-state-card {
  border-color: var(--t-s8-075);
  background: var(--t-s8-032);
}

:root[data-theme="light"] .conversation-state-card.red {
  border-color: var(--t-s8-076);
  background: var(--t-s8-023);
}

:root[data-theme="light"] .conversation-state-card.purple {
  border-color: var(--t-s8-077);
  background: var(--t-s8-078);
}

:root[data-theme="light"] .conversation-state-card.amber {
  border-color: var(--t-s8-079);
  background: var(--t-s8-020);
}

:root[data-theme="light"] .conversation-state-card.white,
:root[data-theme="light"] .conversation-state-card.gray {
  border-color: var(--line);
  background: var(--panel-2);
}

:root[data-theme="light"] .state-status-pill.green {
  border-color: var(--t-s8-080);
  background: var(--t-s8-081);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .state-status-pill.red {
  border-color: var(--t-s8-082);
  background: var(--t-s8-083);
  color: var(--t-s8-024);
}

:root[data-theme="light"] .state-status-pill.purple {
  border-color: var(--t-s8-084);
  background: var(--t-s8-085);
  color: var(--t-s8-086);
}

:root[data-theme="light"] .state-status-pill.amber {
  border-color: var(--t-s8-087);
  background: var(--t-s8-088);
  color: var(--t-s8-021);
}

:root[data-theme="light"] .state-status-pill.white,
:root[data-theme="light"] .state-status-pill.gray {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--soft);
}

:root[data-theme="light"] .context-hero {
  border-color: var(--t-s8-089);
  background: linear-gradient(135deg, var(--t-s8-090), var(--t-s8-091));
}

:root[data-theme="light"] .contact-switch-button.allowed.active {
  border-color: var(--t-s8-092);
  background: var(--t-s8-093);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .contact-switch-button.blocked.active {
  border-color: var(--t-s8-045);
  background: var(--t-s8-023);
  color: var(--t-s8-024);
}

:root[data-theme="light"] .contact-switch-button:not(:disabled):hover {
  background: var(--panel-3);
  color: var(--ink);
}

:root[data-theme="light"] :is(.toast, .toast-message, .toast-item) {
  border-color: var(--line);
  background: var(--t-s8-028);
  color: var(--ink);
  box-shadow: 0 12px 28px var(--t-s8-094);
}

:root[data-theme="light"] .context-block {
  border-color: var(--line);
  background: var(--panel-2);
}

:root[data-theme="light"] :is(
  .context-block.highlight,
  .context-block-data,
  .context-block-vehicle,
  .context-block-quote,
  .context-block-appointment
) { background: var(--panel-2); }

:root[data-theme="light"] .context-block h3 { color: var(--ink); }
:root[data-theme="light"] .context-line-item { border-top-color: var(--line); }
:root[data-theme="light"] .context-line-item > span { color: var(--muted); }
:root[data-theme="light"] .context-line-item strong,
:root[data-theme="light"] .editable-client-name-button { color: var(--soft); }

:root[data-theme="light"] .editable-client-name-button:not(:disabled):hover {
  border-color: var(--t-s8-095);
  background: var(--t-s8-020);
  color: var(--t-s8-021);
}

:root[data-theme="light"] .editable-client-name-input {
  border-color: var(--t-s8-096);
  background: var(--t-s8-028);
  color: var(--ink);
}
:root[data-theme="light"] .tag.white { border-color: var(--line); color: var(--soft); }
:root[data-theme="light"] .message footer time { color: var(--t-s8-067); }


:root[data-theme="light"] :is(.appointment-validity-header strong, .lite-agenda-validity-group > header strong) { color: var(--ink); }
:root[data-theme="light"] .appointment-system-arrow { color: var(--muted); }
:root[data-theme="light"] .contact-switch-button.blocked:not(.active) { color: var(--muted); }
:root[data-theme="light"] .mini-conversations .avatar { color: var(--t-s8-027); }
:root[data-theme="light"] .mini-chat-copy strong { color: var(--ink); }

/* En el ancho intermedio de Pro/Enterprise el panel de conversación es más
   estrecho que el viewport: los datos pasan debajo del nombre antes de chocar
   con la acción principal. */
@media (max-width: 1450px) {
  .conversations-view .chat-panel:not(.lite-chat-panel) .chat-header-main {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .conversations-view .chat-panel:not(.lite-chat-panel) .chat-header-details {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cabecera Lite: identidad, resumen y acciones con jerarquía propia. La misma
   composición se adapta al ancho real del panel, no al ancho total de pantalla. */
.lite-chat-panel { container-type: inline-size; }

.lite-chat-panel .lite-chat-header {
  display: grid;
  grid-template-columns: minmax(180px, .82fr) minmax(330px, 1.42fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 2px 12px;
}

.lite-chat-header .chat-client-identity { min-width: 0; }
.lite-chat-header .chat-client-identity .eyebrow { margin-bottom: 3px; }
.lite-chat-header .chat-client-name {
  margin: 0;
}

.lite-chat-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(136px, .56fr);
  gap: 0;
  min-width: 0;
  width: min(100%, 460px);
  justify-self: start;
}

.lite-chat-header-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lite-chat-header-card > .svg-icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.lite-chat-header-card.transport > .svg-icon { color: var(--blue); }
.lite-chat-header-card + .lite-chat-header-card { border-left: 1px solid var(--line); }
.lite-chat-header-card > div { min-width: 0; }

.lite-chat-header-card small,
.lite-chat-header-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lite-chat-header-card small {
  color: var(--muted);
  font-size: var(--type-micro);
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.lite-chat-header-card strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 650;
}

.lite-chat-panel .lite-chat-header .chat-control {
  justify-content: flex-end;
  min-width: 0;
}

.lite-chat-panel .lite-chat-header .chat-control > button { white-space: nowrap; }

.lite-chat-panel .lite-chat-facts {
  background: var(--t-s8-097);
}

.lite-chat-panel .lite-chat-fact {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 32px;
  padding: 2px 13px;
  border-right: 1px solid var(--line);
}

.lite-chat-panel .lite-chat-fact:last-child { border-right: 0; }
.lite-chat-fact > .svg-icon { width: 16px; height: 16px; color: var(--amber); }
.lite-chat-fact strong { display: block; overflow: hidden; min-width: 0; color: var(--amber); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }

@container (max-width: 760px) {
  .lite-chat-panel .lite-chat-header {
    grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
    gap: 9px;
    min-height: 84px;
    padding: 6px 10px;
  }

  .lite-chat-overview { gap: 6px; }
  .lite-chat-header-card { grid-template-columns: 18px minmax(0, 1fr); min-height: 36px; padding: 0 7px; gap: 6px; }
  .lite-chat-header-card > .svg-icon { width: 16px; height: 16px; }
  .lite-chat-header-card small { font-size: .55rem; letter-spacing: .025em; }
  .lite-chat-header-card.transport small { font-size: .5rem; letter-spacing: 0; }
  .lite-chat-header-card strong { font-size: .69rem; }
  .lite-chat-panel .lite-chat-header .chat-control { grid-column: 1 / -1; justify-content: flex-end; gap: 6px; }
  .lite-chat-panel .chat-control .primary-button,
  .lite-chat-panel .chat-control .caution-button,
  .lite-chat-panel .lite-chat-action { min-height: 34px; padding-inline: 9px; font-size: .72rem; }
  .lite-chat-panel .lite-chat-fact { min-height: 32px; padding: 2px 10px; gap: 6px; }
}

@container (max-width: 460px) {
  .lite-chat-panel .lite-chat-header { grid-template-columns: 1fr; }
  .lite-chat-overview { grid-template-columns: 1fr 1fr; }
  .lite-chat-panel .lite-chat-header .chat-control { justify-content: stretch; }
  .lite-chat-panel .lite-chat-header .chat-control > button { flex: 1 1 0; }
  .lite-chat-panel .lite-chat-facts { grid-template-columns: 1fr; }
  .lite-chat-panel .lite-chat-fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .lite-chat-panel .lite-chat-fact:last-child { border-bottom: 0; }
}

/* Modo día del compositor: los controles bloqueados siguen siendo legibles,
   pero ya no parecen una capa gris sobre el chat. */
:root[data-theme="light"] .lite-chat-panel .lite-chat-header { background: var(--panel); }
:root[data-theme="light"] .lite-chat-panel .lite-chat-facts { background: var(--t-s8-098); }

:root[data-theme="light"] .lite-chat-header-card { border-color: var(--line); background: var(--panel-2); }
:root[data-theme="light"] .lite-chat-header-card small { color: var(--muted); }
:root[data-theme="light"] .lite-chat-header-card strong { color: var(--ink); }
:root[data-theme="light"] .lite-chat-fact > .svg-icon { color: var(--amber); }

:root[data-theme="light"] .chat-composer {
  border-top-color: var(--line);
  background: var(--t-s8-099);
}

:root[data-theme="light"] .composer-transports > span { color: var(--t-s8-100); }

:root[data-theme="light"] .transport-choice {
  border-color: var(--t-s8-101);
  background: var(--t-s8-102);
  color: var(--t-s8-103);
}

:root[data-theme="light"] .transport-choice.active {
  border-color: var(--t-s8-104);
  background: var(--t-s8-028);
  color: var(--t-s8-033);
  box-shadow: 0 2px 7px var(--t-s8-105);
}

:root[data-theme="light"] .transport-choice:disabled {
  opacity: 1;
  border-color: var(--t-s8-106);
  background: var(--t-s8-107);
  color: var(--t-s8-108);
}

:root[data-theme="light"] .composer-window-status.active {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--t-s8-081);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .composer-window-status.closed {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--t-s8-088);
  color: var(--t-s8-021);
}

:root[data-theme="light"] .composer-input textarea {
  border-color: var(--t-s8-109);
  background: var(--t-s8-028);
  color: var(--ink);
}

:root[data-theme="light"] .composer-input textarea:disabled {
  border-color: var(--t-s8-110);
  background: var(--t-s8-111);
  color: var(--t-s8-112);
}

:root[data-theme="light"] .lite-attention-search input {
  border-color: var(--t-s8-113);
  background: var(--t-s8-114);
  color: var(--ink);
  box-shadow: inset 0 1px 2px var(--t-s8-115);
}

:root[data-theme="light"] .lite-attention-search input::placeholder { color: var(--t-s8-116); }

:root[data-theme="light"] .lite-attention-search input:focus {
  border-color: var(--t-s8-117);
  box-shadow: 0 0 0 3px var(--t-s8-118);
}

:root[data-theme="light"] :is(.composer-attach-button, .composer-location-button) {
  border-color: var(--t-s8-101);
  background: var(--t-s8-028);
  color: var(--t-s8-119);
}

:root[data-theme="light"] :is(.composer-attach-button, .composer-location-button):disabled {
  border-color: var(--t-s8-120);
  background: var(--t-s8-121);
  color: var(--t-s8-122);
}

:root[data-theme="light"] .composer-inline-action {
  border-color: var(--t-s8-123);
  background: var(--t-s8-124);
  color: var(--t-s8-033);
  box-shadow: 0 0 0 1px var(--t-s8-125), 0 3px 8px var(--t-s8-059);
}

:root[data-theme="light"] .composer-inline-action:disabled {
  border-color: var(--t-s8-126);
  background: var(--t-s8-127);
  color: var(--t-s8-128);
  opacity: 0.72;
  box-shadow: none;
}

/* El historial conserva el tono cálido del lienzo de WhatsApp: separa las
   burbujas blancas sin recurrir a un fondo plano o excesivamente decorativo. */
:root[data-theme="light"] .chat-messages {
  background-color: var(--chat-canvas);
  background-image:
    radial-gradient(var(--t-s8-129) 0.65px, transparent 0.8px),
    radial-gradient(var(--t-s8-130) 0.65px, transparent 0.8px),
    linear-gradient(135deg, var(--t-s8-131), var(--t-s8-132));
  background-position: 0 0, 9px 13px, 0 0;
  background-size: 18px 18px, 27px 27px, 100% 100%;
}

/* Atención manual: al tomar un caso el asesor necesita una señal propia,
   legible y distinta a la respuesta automática. */
:root[data-theme="light"] .message.advisor {
  border-color: var(--t-s8-133);
  background: var(--chat-advisor);
  color: var(--chat-advisor-ink);
}

:root[data-theme="light"] .message.advisor.document-message {
  border-color: var(--t-s8-134);
  background: var(--t-s8-135);
  box-shadow: 0 3px 10px var(--t-s8-136);
}

:root[data-theme="light"] .message.advisor footer,
:root[data-theme="light"] .message.advisor footer time,
:root[data-theme="light"] .message.advisor .dashboard-message-signature {
  color: var(--t-s8-137);
}

:root[data-theme="light"] .message-line.advisor .message-avatar {
  border-color: var(--t-s8-133);
  background: var(--t-s8-138);
  color: var(--t-s8-139);
  box-shadow: none;
}

:root[data-theme="light"] .message.advisor.document-message .document-message-icon {
  background: var(--t-s8-140);
  color: var(--t-s8-021);
}

:root[data-theme="light"] .message.advisor.document-message .document-message-card a {
  color: var(--t-s8-021);
}

:root[data-theme="light"] .message.system {
  border-color: var(--t-s8-141);
  background: var(--t-s8-142);
  color: var(--t-s8-143);
}

:root[data-theme="light"] .message.system footer,
:root[data-theme="light"] .message.system footer time {
  color: var(--t-s8-137);
}

/* Un toast no debe desaparecer sobre las superficies claras del modo día. */
:root[data-theme="light"] .toast {
  z-index: 100;
  border-color: var(--t-s8-144);
  background: var(--t-s8-145);
  box-shadow: 0 14px 34px var(--t-s8-146);
  color: var(--t-s8-147);
}

/* Agenda no puede conservar capas nocturnas dentro del modo día. La vista usa
   superficies claras escalonadas y deja el color solo para el estado operativo. */

:root[data-theme="light"] :is(.lite-agenda-shell) {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 12px 28px var(--t-s8-148);
}

:root[data-theme="light"] :is(.lite-agenda-header, .lite-agenda-filters) {
  border-color: var(--line);
  background: var(--panel);
}

:root[data-theme="light"] .quote-filter-bar > button {
  border-color: var(--t-s8-101);
  background: var(--t-s8-149);
  color: var(--t-s8-150);
}

:root[data-theme="light"] .quote-filter-bar > button:hover,
:root[data-theme="light"] .quote-filter-bar > button.active {
  border-color: var(--t-s8-104);
  background: var(--t-s8-151);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .quotes-list > header {
  border-bottom-color: var(--t-s8-101);
  background: var(--t-s8-152);
}

:root[data-theme="light"] .quotes-list > header strong { color: var(--t-s8-033); }

:root[data-theme="light"] .quote-history-pdf {
  border-color: var(--t-s8-051);
  background: var(--t-s8-153);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .quote-history-open {
  border-color: var(--t-s8-154);
  background: var(--t-s8-090);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .lite-client-row.active {
  background: linear-gradient(90deg, var(--t-s8-155), var(--t-s8-056) 76%);
  box-shadow: inset 3px 0 0 var(--t-s8-156);
}

:root[data-theme="light"] .lite-client-avatar {
  border-color: var(--t-s8-157);
  background: var(--t-s8-090);
  box-shadow: inset 0 0 0 1px var(--t-s8-158);
}

:root[data-theme="light"] .lite-client-delete-link { color: var(--t-s8-159); }
:root[data-theme="light"] .lite-client-delete-link:hover { color: var(--t-s8-160); }

:root[data-theme="light"] .lite-chat-action.quote {
  border-color: var(--t-s8-031);
  background: var(--t-s8-032);
  color: var(--t-s8-033);
  box-shadow: none;
}

:root[data-theme="light"] .lite-chat-action.appointment {
  border-color: var(--t-s8-051);
  background: var(--t-s8-153);
  color: var(--t-s8-027);
  box-shadow: none;
}

:root[data-theme="light"] .lite-chat-panel .chat-control .reactivate-action {
  border: 2px solid var(--t-s8-161);
  background: var(--t-s8-162);
  color: var(--t-s8-033);
  box-shadow: 0 0 0 1px var(--t-s8-163), 0 4px 10px var(--t-s8-164);
}

:root[data-theme="light"] .lite-agenda-list > header,
:root[data-theme="light"] .appointments-toolbar {
  border-color: var(--line);
  background: var(--panel-2);
}

:root[data-theme="light"] .lite-agenda-rows,
:root[data-theme="light"] .appointments-table,
:root[data-theme="light"] .appointments-table-shell {
  border-color: var(--line);
  background: var(--panel);
  scrollbar-color: var(--t-s8-165) var(--t-s8-166);
}

:root[data-theme="light"] .lite-agenda-row {
  border-color: var(--line);
  background: var(--t-s8-028);
}

:root[data-theme="light"] .lite-agenda-row:hover,
:root[data-theme="light"] .appointment-item.expanded {
  background: var(--t-s8-167);
}

:root[data-theme="light"] .appointments-head {
  background: var(--panel-3);
  color: var(--t-s8-150);
  box-shadow: 0 6px 14px var(--t-s8-168);
}

:root[data-theme="light"] .appointments-row {
  border-top-color: var(--line);
  color: var(--soft);
}


:root[data-theme="light"] :is(.appointment-validity-group) {
  border-top-color: var(--line);
}


:root[data-theme="light"] :is(.appointment-validity-header, .lite-agenda-validity-group > header) {
  border-color: var(--t-s8-169);
  background: linear-gradient(90deg, var(--t-s8-170), var(--t-s8-171));
}


:root[data-theme="light"] :is(.appointment-validity-header strong, .lite-agenda-validity-group > header strong) {
  color: var(--ink);
}


:root[data-theme="light"] :is(.appointment-validity-header span, .lite-agenda-validity-group > header span) {
  color: var(--t-s8-033);
}

:root[data-theme="light"] :is(.appointment-validity-group.expired > .appointment-validity-header, .lite-agenda-validity-group.expired > header) {
  border-color: var(--t-s8-172);
  background: linear-gradient(90deg, var(--t-s8-020), var(--t-s8-173));
}

:root[data-theme="light"] :is(.appointment-validity-group.expired > .appointment-validity-header span, .lite-agenda-validity-group.expired > header span) {
  color: var(--t-s8-021);
}

:root[data-theme="light"] .appointment-system-pill.gasolina {
  border-color: var(--t-s8-174);
  background: var(--t-s8-175);
  color: var(--t-s8-176);
}

:root[data-theme="light"] .appointment-system-pill.diesel {
  border-color: var(--t-s8-177);
  background: var(--t-s8-178);
  color: var(--t-s8-179);
}

:root[data-theme="light"] .appointment-system-pill.glp {
  border-color: var(--t-s8-180);
  background: var(--t-s8-181);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .appointment-system-pill.gnv {
  border-color: var(--t-s8-182);
  background: var(--t-s8-183);
  color: var(--t-s8-033);
}

:root[data-theme="light"] .appointment-system-pill.other {
  border-color: var(--t-s8-101);
  background: var(--t-s8-184);
  color: var(--soft);
}

:root[data-theme="light"] :is(.appointment-status.confirmed, .lite-agenda-confirm) { color: var(--t-s8-033); }
:root[data-theme="light"] .appointment-status.pending { color: var(--t-s8-021); }
:root[data-theme="light"] :is(.appointment-status.cancelled, .lite-agenda-cancel) { color: var(--t-s8-024); }

:root[data-theme="light"] :is(.appointment-detail-button, .lite-agenda-actions button) {
  border-color: var(--t-s8-101);
  background: var(--t-s8-028);
  color: var(--t-s8-150);
}

:root[data-theme="light"] :is(.appointment-detail-button:hover, .appointment-detail-button.active) {
  border-color: var(--t-s8-104);
  background: var(--t-s8-151);
  color: var(--t-s8-033);
}

:root[data-theme="light"] :is(.appointment-chat-button, .lite-agenda-actions .appointment-chat-button) {
  border-color: var(--t-s8-180);
  background: var(--t-s8-181);
  color: var(--t-s8-027);
}

:root[data-theme="light"] .lite-agenda-empty {
  background: linear-gradient(180deg, var(--t-s8-185), transparent 42%);
  color: var(--ink);
}

:root[data-theme="light"] .lite-agenda-empty > span {
  border-color: var(--t-s8-182);
  background: var(--t-s8-170);
  color: var(--t-s8-033);
}

/* En modo día la marca se expresa mediante una tinta verde bosque. Se deja el
   negro de WhatsApp solo dentro de sus burbujas, donde es parte del lenguaje
   visual del canal y no de la interfaz del dashboard. */
:root[data-theme="light"] .quote-window :is(
  .quote-modal-header h2,
  .quote-modal-form input,
  .quote-modal-form select,
  .quote-modal-form textarea,
  .quote-phone-prefix,
  .quote-combo-toggle,
  .quote-option-select-button,
  .quote-option-select-button > span:first-child,
  .quote-option-list button,
  .quote-suggestion-list button,
  .icon-button:hover,
  .ghost-button:hover:not(:disabled)
) { color: var(--ink); }

/* ============================================================
   TEMA DIA — Login / Configuracion inicial (wizard)
   Estas dos pantallas viven fuera de #root (paginas propias, sin la SPA),
   asi que los tokens de arriba (--bg, --panel, --ink...) ya las retiñen
   solas, pero varios detalles usan blanco translucido a mano
   (rgba(255,255,255,x)) para insinuarse sobre el fondo oscuro: en modo dia
   eso queda invisible sobre blanco y hay que oscurecerlo a mano.
   ============================================================ */
:root[data-theme="light"] .login-panel {
  background:
    linear-gradient(145deg, var(--t-s8-186), var(--t-s8-187)),
    var(--panel);
  box-shadow: 0 22px 60px var(--t-s8-074);
}
:root[data-theme="light"] .login-form input:not(.setup-shift-active),
:root[data-theme="light"] .country-select-trigger,
:root[data-theme="light"] .phone-input-group input {
  background: var(--t-s8-188);
}
/* El texto que el usuario escribe en los campos usa el mismo gris que la
   burbuja de paso inactiva ("2. Administrador"), en vez del verde de marca
   (--ink) que se usa para titulos: separa visualmente "dato ingresado" de
   "texto de interfaz". */
:root[data-theme="light"] .login-form input:not(.setup-shift-active) {
  color: var(--muted);
}
:root[data-theme="light"] .country-select-trigger,
:root[data-theme="light"] .country-select-trigger span,
:root[data-theme="light"] .country-select-menu li,
:root[data-theme="light"] .country-select-menu li span {
  color: var(--muted);
}
:root[data-theme="light"] .flag-icon {
  background: var(--t-s8-189);
}
:root[data-theme="light"] .login-form input::placeholder {
  color: var(--t-s8-190);
  font-weight: 400;
}
:root[data-theme="light"] .ghost-button,
:root[data-theme="light"] .text-button {
  background: var(--t-s8-009);
}
:root[data-theme="light"] .ghost-button:hover,
:root[data-theme="light"] .text-button:hover {
  border-color: var(--line-strong);
  background: var(--t-s8-191);
  box-shadow: none;
}
:root[data-theme="light"] .login-error {
  border-color: var(--t-s8-192);
  background: var(--t-s8-193);
  color: var(--t-s8-194);
}
:root[data-theme="light"] .setup-panel .login-business-name {
  color: var(--green);
}
/* Los acentos rgba(141,255,190,x) del tema oscuro son un mint claro pensado
   para brillar sobre fondo casi negro; mezclado con blanco queda casi
   invisible. En modo dia se reemplazan por el verde bosque, mas saturado. */
:root[data-theme="light"] .setup-step.active {
  border-color: var(--t-s8-195);
  background: var(--t-s8-196);
}
:root[data-theme="light"] .setup-step.done {
  border-color: var(--t-s8-197);
}
/* En oscuro, el mint translúcido brilla porque se mezcla con un fondo casi
   negro; la misma receta sobre blanco se diluye a un pastel casi invisible.
   Para que el botón tenga el mismo peso visual solido que en modo noche,
   en modo dia se rellena solido en vez de con un tinte translucido. */
:root[data-theme="light"] .primary-button {
  border-color: var(--ink);
  background: linear-gradient(135deg, var(--t-s8-198), var(--ink));
  color: var(--t-s8-199);
}
:root[data-theme="light"] .primary-button:hover {
  border-color: var(--ink);
  background: linear-gradient(135deg, var(--t-s8-200), var(--t-s8-201));
  box-shadow: 0 0 0 1px var(--t-s8-202), 0 12px 26px var(--t-s8-203);
}
:root[data-theme="light"] .primary-button:disabled,
:root[data-theme="light"] .primary-button:disabled:hover {
  background: linear-gradient(135deg, var(--t-s8-198), var(--ink));
  opacity: 0.45;
  box-shadow: none;
}
:root[data-theme="light"] .login-form input:hover,
:root[data-theme="light"] .login-form input:focus,
:root[data-theme="light"] .country-select-trigger:hover,
:root[data-theme="light"] .country-select-trigger[aria-expanded="true"] {
  border-color: var(--t-s8-204);
}
/* Fila y checkbox de Horarios: mismos valores exactos que Configuracion ->
   Horarios en modo dia (capturados en vivo), no una derivacion de los
   tokens oscuros de arriba. */
:root[data-theme="light"] .schedule-row {
  border-color: var(--t-s8-205);
}
:root[data-theme="light"] .schedule-shift input.setup-shift-active {
  border-color: var(--t-s8-206);
  background: var(--t-s8-207);
}
:root[data-theme="light"] .schedule-shift input.setup-shift-active::after {
  border-right-color: var(--green);
  border-bottom-color: var(--green);
}
:root[data-theme="light"] .schedule-shift input.setup-shift-active:checked {
  border-color: var(--t-s8-208);
  background: var(--t-s8-209);
}
:root[data-theme="light"] .schedule-shift input[type="time"] {
  color-scheme: light only;
  border-color: var(--t-s8-205);
  background: var(--t-s8-207);
  color: var(--t-s8-210);
}
:root[data-theme="light"] .schedule-shift-toggle {
  color: var(--t-s8-211);
}
:root[data-theme="light"] #setupSchedule .schedule-shift-toggle span {
  color: var(--t-s8-211);
  font-weight: 400;
}