:root {
  /* Modo claro (default) -- paleta de marca Colmena */
  --bg: #f6f0e4;
  --bg-sidebar: #fffdf8;
  --card: #fffdf8;
  --card-2: #f6e8cb;
  --card-3: #eed9ae;
  --border: rgba(27, 26, 23, 0.14);
  --border-soft: rgba(27, 26, 23, 0.08);
  --text: #1b1a17;
  --text-dim: #777165;
  --text-faint: rgba(119, 113, 101, 0.7);
  --accent: #e6a52e;
  --accent-hover: #f2c66c;
  --accent-soft: rgba(230, 165, 46, 0.16);
  --accent-border: rgba(230, 165, 46, 0.45);
  --heading: #b85c38;
  --success: #596449;
  --danger: #c0392b;
  --danger-text: #a83226;
  --danger-soft: rgba(192, 57, 43, 0.1);
  --danger-soft-border: rgba(192, 57, 43, 0.3);
  --danger-ink: #7a2020;
  --warning: #9c6a12;
  --warning-soft: rgba(232, 163, 61, 0.12);
  --warning-soft-border: rgba(232, 163, 61, 0.35);
  --warning-ink: #7a4a05;
  --notice-ink: #6b4a12;
  --hover-border: rgba(27, 26, 23, 0.28);
  --toggle-knob-off: #8f8676;
  --shadow-sm: 0 8px 26px rgba(27, 26, 23, 0.25);
  --shadow-md: 0 16px 48px rgba(27, 26, 23, 0.2);
  /* Fija en ambos temas: texto/iconos sobre un fondo solido de --accent (siempre
     necesitan tinta oscura porque la miel mantiene luminancia media en los dos temas) */
  --accent-ink: #1b1a17;
  /* Mismo verde que ya usa .status-dot.live (status-pulse-live, #3dd68c) para "esto esta
     vivo/funcionando" -- se reusa acá para el flash de éxito, fija en ambos temas por el
     mismo motivo que --accent-ink. */
  --flash-success: #3dd68c;
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 240px;
  --sidebar-rail-w: 68px;
  --shadow-card: 0 1px 2px rgba(27, 26, 23, 0.05), 0 1px 8px rgba(27, 26, 23, 0.04);
}

:root[data-theme="dark"] {
  /* Modo oscuro -- mismos hues de marca, reordenados: Carbon pasa a ser el fondo
     (tal cual lo describe la propia paleta: "fondos oscuros, texto principal"),
     Crema pasa a ser el texto, y los acentos se aclaran un poco para mantener
     buen contraste sobre un fondo casi negro (verificado >= 4.5:1 en las lecturas
     de texto de la interfaz). */
  --bg: #1b1a17;
  --bg-sidebar: #16150f;
  --card: #221f19;
  --card-2: #2c2820;
  --card-3: #383226;
  --border: rgba(246, 240, 228, 0.13);
  --border-soft: rgba(246, 240, 228, 0.08);
  --text: #f6f0e4;
  --text-dim: #c9c2b4;
  --text-faint: rgba(246, 240, 228, 0.55);
  --accent: #e6a52e;
  --accent-hover: #f2c66c;
  --accent-soft: rgba(230, 165, 46, 0.18);
  --accent-border: rgba(230, 165, 46, 0.4);
  --heading: #d9764a;
  --success: #8fa574;
  --danger: #c0392b;
  --danger-text: #e5665c;
  --danger-soft: rgba(228, 102, 92, 0.16);
  --danger-soft-border: rgba(228, 102, 92, 0.4);
  --danger-ink: #f2a79f;
  --warning: #e3a94d;
  --warning-soft: rgba(227, 169, 77, 0.14);
  --warning-soft-border: rgba(227, 169, 77, 0.4);
  --warning-ink: #f0c98a;
  --notice-ink: #f2d9a6;
  --hover-border: rgba(246, 240, 228, 0.3);
  --toggle-knob-off: #6d6455;
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 8px rgba(0, 0, 0, 0.16);
}

/* Barrido circular de 2s al cambiar de tema (ver goddard.js) -- desactiva el
   crossfade por defecto de la View Transitions API para que se vea solo el
   circulo creciendo desde arriba a la derecha, con el tema nuevo tapando al
   viejo en vez de mezclarse con el. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a { color: inherit; text-decoration: none; }

/* Foco visible parejo para toda la interfaz (teclado/lectores de pantalla) --
   antes solo los inputs tenian un estado de foco propio. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.toggle:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollbar propia, discreta, en vez de la barra default del sistema */
* { scrollbar-width: thin; scrollbar-color: var(--card-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--card-3); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--hover-border); background-clip: padding-box; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 26px 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- Rail de iconos en desktop: colapsado a --sidebar-rail-w por defecto.
   Sin fijar (default): al pasar el mouse (o entrar con teclado) se expande
   solo, como una capa flotante que NO empuja el contenido -- es momentaneo,
   se cierra solo al sacar el mouse, por eso tapar un poco el contenido de
   atras no molesta (nadie intenta leer detras mientras el mouse esta ahi).
   Fijado (boton de pin arriba del nav): queda expandido siempre y el
   contenido SI se acomoda de verdad (empuja, no tapa). Preferencia
   persistida en localStorage ("goddard-sidebar": "pinned"/ausente), aplicada
   antes del primer paint por el mismo script inline que ya aplica el tema
   (ver base.html). Solo en pantallas anchas -- en mobile el sidebar sigue
   siendo la barra horizontal + menu hamburguesa de siempre, sin tocar. ---- */
@media (min-width: 861px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-rail-w);
    z-index: 40;
    overflow: hidden;
    transition: width 0.16s ease, box-shadow 0.16s ease;
  }
  .main {
    margin-left: var(--sidebar-rail-w);
    transition: margin-left 0.16s ease;
  }

  /* Sin fijar: el hover expande la capa pero no mueve el margen del
     contenido -- por eso se ve "flotando" encima, a proposito. */
  html:not([data-sidebar="pinned"]) .sidebar:hover,
  html:not([data-sidebar="pinned"]) .sidebar:focus-within {
    width: var(--sidebar-w);
    box-shadow: var(--shadow-md);
  }

  /* Fijado: expandido de verdad, empuja el contenido. */
  html[data-sidebar="pinned"] .sidebar { width: var(--sidebar-w); }
  html[data-sidebar="pinned"] .main { margin-left: var(--sidebar-w); }

  .brand { padding-left: 12px; padding-right: 12px; }

  .sidebar-toggle {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    margin-bottom: 10px;
  }
  .sidebar-toggle svg { flex-shrink: 0; transition: fill 0.16s ease; }
  html[data-sidebar="pinned"] .sidebar-toggle { color: var(--heading); }
  html[data-sidebar="pinned"] .sidebar-toggle svg { fill: var(--accent-soft); }

  .nav-label {
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.1s ease;
  }
  .sidebar:hover .nav-label,
  .sidebar:focus-within .nav-label,
  html[data-sidebar="pinned"] .nav-label {
    opacity: 1;
    transition-delay: 0.06s;
  }

  .account-card {
    background: transparent;
    border-color: transparent;
    padding: 12px 0;
    transition: background 0.16s ease, border-color 0.16s ease;
  }
  .sidebar:hover .account-card,
  .sidebar:focus-within .account-card,
  html[data-sidebar="pinned"] .account-card {
    background: var(--card);
    border-color: var(--border-soft);
    padding: 12px;
  }
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}

/* Los iconos (y la marca) nunca se encogen -- sin esto, un flex-shrink
   implicito los aplastaba a casi nada apenas la etiqueta de texto quedaba
   mas ancha que el rail colapsado, en vez de quedar recortados prolijos. */
.nav-item svg,
.brand-mark {
  flex-shrink: 0;
}

.nav-item:hover { background: var(--card); color: var(--text); }

.nav-item.active {
  background: var(--card-2);
  color: var(--heading);
  font-weight: 600;
}

.sidebar-footer { margin-top: auto; }

.account-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.account-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}

.account-name { font-weight: 600; font-size: 13px; }
.account-role { color: var(--text-faint); font-size: 12px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.theme-toggle:hover { background: var(--card-2); color: var(--text); border-color: var(--hover-border); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.main {
  flex: 1;
  min-width: 0;
  padding: 34px 44px 80px 44px;
  max-width: 1240px;
}

.page-title { font-size: 30px; font-weight: 700; margin: 0 0 6px 0; letter-spacing: -0.02em; }
.page-subtitle { color: var(--text-dim); margin: 0 0 26px 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  row-gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.card-desc { color: var(--text-faint); font-size: 13px; margin: 0 0 22px 0; }

.section-title {
  font-size: 19px;
  font-weight: 700;
  margin: 30px 0 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  row-gap: 10px;
  flex-wrap: wrap;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--heading);
  white-space: nowrap;
}

.badge.muted { background: var(--card-3); color: var(--text-faint); }
.badge-humano { background: var(--danger-soft); color: var(--danger-ink); }

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: 0 0 auto; }
.status-dot.off { background: var(--text-faint); }
.status-dot.live { animation: status-pulse-live 1.8s ease-in-out infinite; }
.status-dot.paused { background: var(--danger); animation: none; }

@keyframes status-pulse-live {
  0%, 100% { background: var(--success); box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.45); }
  50% { background: #3dd68c; box-shadow: 0 0 0 5px rgba(61, 214, 140, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.live { animation: none; background: #3dd68c; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}

.btn:hover { border-color: var(--hover-border); background: var(--card-3); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-outline-accent { border-color: var(--accent-border); color: var(--heading); background: transparent; }
.btn-outline-accent:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--card-2); color: var(--text); }
.btn-danger { color: var(--danger-text); border-color: var(--danger-soft-border); background: transparent; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.field-item, .field-block {
  background: var(--card-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.field-block:has(.field-value.quote) {
  background: none;
  border: none;
  padding: 0;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 7px;
}

.field-label .badge { text-transform: none; letter-spacing: normal; }

.field-label.sentence {
  text-transform: none;
  letter-spacing: normal;
  font-size: 12.5px;
}

.field-value { color: var(--text); font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.field-value.empty { color: var(--text-faint); font-style: italic; font-weight: 400; }
.field-value.quote {
  font-style: italic;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--card-2);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-border);
  padding: 12px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.field-block { margin-bottom: 22px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.pill:hover { border-color: var(--hover-border); color: var(--text); }
.pill.selected { border-color: var(--accent); color: var(--heading); background: var(--accent-soft); }
.pill.static { cursor: default; }
.pill.static:hover { border-color: var(--border); color: var(--text-dim); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
}

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: none;
  background: var(--card-3);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--toggle-knob-off);
  transition: transform 0.15s, background 0.15s;
}

.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(20px); background: var(--accent-ink); }
.toggle-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.toggle-label { color: var(--text); font-size: 13px; }

.form-group { margin-bottom: 20px; }

label.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

label.form-label.sentence {
  text-transform: none;
  letter-spacing: normal;
  font-size: 12.5px;
}

.form-hint { color: var(--text-faint); font-size: 12px; margin-top: 7px; }

input[type="text"],
input[type="url"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.12s;
}

input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-border); }
textarea { resize: vertical; min-height: 92px; line-height: 1.6; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

.steps { display: flex; flex-direction: column; gap: 13px; }
.step { display: flex; gap: 13px; align-items: flex-start; }

.step-num {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--accent-border);
  color: var(--heading);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}

.step-text { color: var(--text-dim); white-space: pre-wrap; }
.step-edit { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.step-edit textarea { min-height: 62px; }

.table-wrap {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

table { width: 100%; min-width: 560px; border-collapse: collapse; }

thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--card);
}

tbody td { padding: 15px 18px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--card-2); }

.cell-strong { font-weight: 600; }
.cell-dim { color: var(--text-faint); }

.thumb {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--card-3);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  overflow: hidden;
  flex: 0 0 auto;
}

.thumb img { width: 100%; height: 100%; object-fit: cover; }
.cell-product { display: flex; align-items: center; gap: 13px; }

.row-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color 0.12s, box-shadow 0.12s;
  margin-bottom: 11px;
}

.row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--card-3);
  display: grid;
  place-items: center;
  color: var(--text-dim);
  flex: 0 0 auto;
}

.row-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card-3);
  display: grid;
  place-items: center;
  color: var(--text-dim);
  font-weight: 600;
  flex: 0 0 auto;
}

.row-body { flex: 1; min-width: 0; }
.row-title { font-weight: 600; }
.row-title .handle { color: var(--text-faint); font-weight: 400; margin-left: 6px; }
.row-meta { color: var(--text-faint); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.row-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; flex: 0 0 auto; }

.catalog-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 0;
  width: fit-content;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin-bottom: 22px;
}

.catalog-status-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 600;
}

.catalog-status-item.active { color: var(--text-dim); }
.catalog-status-item svg { flex: 0 0 auto; opacity: 0.85; }

.catalog-status-divider {
  width: 1px;
  height: 14px;
  background: var(--border-soft);
  flex: 0 0 auto;
}

.import-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.import-label { color: var(--text-dim); }

.tab-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.12s;
}

.tab:hover { color: var(--text); border-color: var(--hover-border); }

.notice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--notice-ink);
  font-size: 13px;
  margin-bottom: 20px;
}

.notice.warn { background: var(--warning-soft); border-color: var(--warning-soft-border); color: var(--warning-ink); }
.notice.error { background: var(--danger-soft); border-color: var(--danger-soft-border); color: var(--danger-ink); }

.flash {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  max-width: calc(100vw - 48px);
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  background: var(--flash-success);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 15px;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}

.flash.error { background: var(--danger); color: #fff; }

@media (max-width: 860px) {
  .flash { right: 12px; left: 12px; max-width: none; }
}

.empty-state {
  padding: 6px 0 18px 0;
  color: var(--text-faint);
  font-size: 13px;
}

.progress-track {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: var(--card-3);
  overflow: hidden;
}

.progress-fill { height: 100%; background: var(--accent); border-radius: 6px; }

.progress-summary { margin-bottom: 22px; }
.progress-summary-text { font-size: 13px; color: var(--text-dim); display: block; margin-bottom: 8px; }
.progress-track-sm { height: 6px; }

.probar-conexion-resultado { font-size: 12.5px; }
.probar-conexion-resultado.ok { color: var(--success); }
.probar-conexion-resultado.error { color: var(--danger-text); }

.detalle-tecnico { margin-top: 14px; }
.detalle-tecnico > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  list-style: none;
}
.detalle-tecnico > summary::-webkit-details-marker { display: none; }
.detalle-tecnico > summary::before { content: "▸ "; color: var(--text-faint); }
.detalle-tecnico[open] > summary::before { content: "▾ "; }
.detalle-tecnico > summary:hover { color: var(--text); }
.detalle-tecnico-body { margin-top: 14px; }

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

.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.stat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat-box {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.stat-box-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.stat-box-highlight { border-color: var(--accent-border); background: var(--accent-soft); }

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.stat-value { font-size: 19px; font-weight: 700; }

.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card { width: 100%; max-width: 385px; background: var(--card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 34px; box-shadow: var(--shadow-md); }
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; margin-bottom: 7px; }
.login-sub { color: var(--text-dim); margin-bottom: 26px; }

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.accent { color: var(--heading); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.inline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.btn:disabled, .btn:disabled:hover { opacity: 0.45; cursor: not-allowed; background: var(--card-2); border-color: var(--border); color: var(--text-dim); }

/* --- Uso y facturación --- */

.uso-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }

.plan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.plan-name { font-size: 22px; font-weight: 700; }
.plan-meta { color: var(--text-dim); font-size: 13px; margin: 4px 0; }

.mini-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 8px;
}

.addon-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  margin-top: 10px;
}
.addon-name { font-weight: 600; font-size: 13.5px; }
.addon-detail { color: var(--text-faint); font-size: 12.5px; margin-top: 2px; }

.card-footer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-soft); flex-wrap: wrap;
}

.notice-warning {
  display: flex; align-items: center; gap: 8px; color: var(--warning-ink);
  font-size: 13px; font-weight: 600; margin: 12px 0;
}

.wallet-balance { font-size: 30px; font-weight: 700; margin: 4px 0 6px 0; }

.copy-row {
  display: flex; align-items: center; gap: 8px; background: var(--card-2);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px;
}
.copy-row input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--text-dim);
  font-size: 13px; font-family: inherit;
}
.copy-row input:focus { outline: none; }

.usage-ring-wrap { display: flex; flex-direction: column; align-items: center; padding: 18px 0 6px 0; }
.usage-ring-outer { position: relative; width: 180px; height: 180px; }
.usage-ring-outer svg { width: 100%; height: 100%; }
.usage-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.usage-ring-value { font-size: 32px; font-weight: 700; line-height: 1; }
.usage-ring-sub { color: var(--text-faint); font-size: 12.5px; margin-top: 4px; }
.usage-ring-foot { text-align: center; color: var(--text-dim); font-size: 13px; margin-top: 16px; }
.usage-ring-reset { text-align: center; color: var(--text-faint); font-size: 12px; margin-top: 2px; }

.channel-list { margin-top: 4px; }
.channel-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; font-size: 13px;
}
.channel-row + .channel-row { border-top: 1px solid var(--border-soft); }

@media (max-width: 900px) {
  .uso-layout { grid-template-columns: 1fr; }
}

/* Celular (<= 860px): el menu es un cajon que abre el boton "Mas" de la barra inferior
   (ver "Menu nuevo (E4-1)" al final de este archivo). Reemplaza a la barra superior con
   hamburguesa por checkbox, que ya no existe en base.html. */
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar-toggle { display: none; }
  .account-card { padding: 8px; }
  .main { padding: 22px 18px 60px 18px; }
}

@media (max-width: 600px) {
  .page-title { font-size: 22px; }
  .page-subtitle { font-size: 13px; }
  .card { padding: 16px 14px; }

  .brand { font-size: 14.5px; gap: 8px; }
  .nav-item { padding: 8px 10px; font-size: 12.5px; gap: 8px; }

  .btn { padding: 7px 12px; font-size: 12.5px; }
  .btn-sm { padding: 5px 10px; font-size: 11.5px; }

  .card-title { flex-wrap: wrap; row-gap: 6px; font-size: 16px; }
  .card-desc { font-size: 12.5px; }

  .tab-row { gap: 7px; }
  .tab { padding: 6px 11px; font-size: 12px; gap: 6px; }

  .field-grid { gap: 10px; }
  .field-item, .field-block { padding: 10px 12px; }
  .field-label { font-size: 10px; }
  .field-value { font-size: 13.5px; }

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

  .row-actions { flex-basis: 100%; justify-content: flex-end; margin-top: 8px; }

  .card-footer-row { flex-direction: column; align-items: stretch; }
  .card-footer-row .btn { width: 100%; justify-content: center; }
  .usage-ring-outer { width: 150px; height: 150px; }
  .usage-ring-value { font-size: 27px; }

  .card > .inline { flex-wrap: wrap; }
  .card > .inline > .row-body { flex-basis: 100%; }
  .card > .inline > .btn { width: 100%; justify-content: center; margin-top: 8px; }

  .variante-row input { max-width: 45% !important; }

  /* Tablas -> lista de tarjetas apiladas: header oculto, cada celda con su etiqueta */
  .table-wrap { overflow-x: visible; border: none; }
  .table-wrap table { min-width: 0; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tbody tr { display: block; border-bottom: 1px solid var(--border-soft); padding: 12px 0; }
  .table-wrap tbody tr:first-child { padding-top: 0; }
  .table-wrap tbody tr:last-child { border-bottom: none; padding-bottom: 0; }
  .table-wrap tbody td { display: block; padding: 5px 0; border: none; }
  .table-wrap tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 3px;
  }
  .table-wrap tbody td.cell-product { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
  .table-wrap tbody td.cell-actions { margin-top: 6px; }

  /* Respuestas largas: resumidas a 3 lineas, Editar para ver el resto */
  .cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---- "Probar chat": widget flotante fijo abajo a la derecha (Inicio y Configuracion) ---- */
.chat-toggle-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.12s, border-color 0.12s;
}
.chat-toggle-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chat-toggle-btn.open { background: var(--card-2); color: var(--text); border-color: var(--border); }

.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 76px;
  z-index: 70;
  width: 360px;
  max-width: calc(100vw - 48px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex: 0 0 auto;
}
.chat-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.chat-panel-sub {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
  flex: 0 0 auto;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.chat-bubble.cliente { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.chat-bubble.agente { align-self: flex-start; background: var(--card-2); color: var(--text); }
.chat-bubble-time { display: block; text-align: right; font-size: 10.5px; opacity: .65; margin-top: 3px; }
.chat-bubble.error {
  align-self: flex-start;
  background: var(--danger-soft);
  color: var(--danger-ink);
  border: 1px solid var(--danger-soft-border);
}
.chat-bubble.pensando { align-self: flex-start; color: var(--text-faint); font-style: italic; }
.chat-bubble.aviso {
  align-self: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--notice-ink);
  font-size: 12px;
  text-align: center;
}

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-soft);
  flex: 0 0 auto;
}
.chat-form textarea {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 90px;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .chat-panel { left: 12px; right: 12px; width: auto; bottom: 72px; }
  .chat-toggle-btn { right: 12px; }
}

/* Bandeja de entrada (Fase 1 de Goddard v3, 22/09): 3 columnas -- lista de
   conversaciones, hilo, y datos del cliente/notas internas. Mismas superficies que
   el resto del panel (--card/--card-2, --border-soft), sin acento nuevo. */
.inbox-layout {
  display: flex;
  height: calc(100vh - 150px);
  min-height: 460px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

/* Columna izquierda: buscador + filtros + pestanas + lista (23/09, bandeja estilo
   "Inbox"). position:relative para anclar el popover de filtros. */
.inbox-list-col {
  width: 340px;
  flex: 0 0 340px;
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}
.inbox-list { flex: 1; overflow-y: auto; min-height: 0; }

.inbox-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: inherit;
  text-decoration: none;
}
.inbox-list-item:hover { background: var(--card-2); }
.inbox-list-item.active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.inbox-list-item-body { flex: 1; min-width: 0; }
.inbox-list-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inbox-list-item-hace { color: var(--text-faint); font-size: 11px; flex: 0 0 auto; }

.inbox-thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-soft);
}
.inbox-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  flex: 0 0 auto;
}
.inbox-thread-body { flex: 1; overflow-y: auto; padding: 18px; }

.inbox-details {
  width: 280px;
  flex: 0 0 280px;
  overflow-y: auto;
  padding: 18px;
}
.inbox-details-section { margin-bottom: 24px; }

.inbox-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

@media (max-width: 860px) {
  .inbox-layout { flex-direction: column; height: auto; }
  .inbox-list-col { width: 100%; flex: none; max-height: 460px; border-right: none; border-bottom: 1px solid var(--border-soft); }
  .inbox-thread { border-right: none; border-bottom: 1px solid var(--border-soft); min-height: 360px; }
  .inbox-details { width: 100%; flex: none; }
}


/* ---- Bandeja: encabezado, buscador, filtros, pestanas, etiquetas (23/09) ---- */
.inbox-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.session-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none;
}
.session-pill:hover { border-color: var(--hover-border); }

.inbox-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border-soft); position: relative; }
.inbox-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-faint);
}
.inbox-search:focus-within { border-color: var(--accent-border); }
.inbox-search input[type="search"] {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 9px 0; font-size: 13px; color: var(--text);
}
.inbox-search input[type="search"]:focus { outline: none; }
.kbd-hint {
  font: inherit; font-size: 10.5px; color: var(--text-faint); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; white-space: nowrap;
}
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text-dim);
  cursor: pointer; text-decoration: none; padding: 0; font: inherit;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--card-2); color: var(--text); border-color: var(--hover-border); }
.icon-btn-count {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
}

.filtros-pop {
  position: absolute; top: calc(100% + 6px); left: 12px; z-index: 40;
  width: min(440px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 220px)); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 16px 18px;
}
.filtro-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.filtro-ctrl { display: flex; align-items: center; gap: 8px; width: 62%; }
.filtro-ctrl select { flex: 1; min-width: 0; }
.filtro-label { color: var(--text-dim); font-size: 13.5px; }
.filtro-block { margin-bottom: 16px; }
.filtro-block > select { margin-top: 6px; }
.filtro-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.filtro-count { color: var(--text-faint); font-size: 12.5px; }
.filtro-sep { border: none; border-top: 1px solid var(--border-soft); margin: 4px 0 14px 0; }
.filtro-empty { color: var(--text-faint); font-size: 13px; text-align: center; margin: 14px 0 6px 0; }
.filtro-actions { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; }
.filtros-pop select { padding: 8px 10px; font-size: 13.5px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.chip:hover { border-color: var(--hover-border); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--heading); }
.chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.inbox-tabs { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.inbox-tab {
  flex: 1; text-align: center; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 13px; font-weight: 600; text-decoration: none; background: transparent;
}
.inbox-tab:hover { background: var(--card-2); color: var(--text); }
.inbox-tab.active { background: var(--card-2); color: var(--text); border-color: var(--border); }
.inbox-tab-n { color: var(--text-faint); font-weight: 500; margin-left: 4px; }

.inbox-preview { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-list-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.inbox-list-item-meta .row-meta { margin: 0; }
.inbox-empty-list { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 42px 22px; text-align: center; color: var(--text-faint); font-size: 13px; }
.inbox-empty-list strong { color: var(--text); font-size: 14px; }

.inbox-empty { flex-direction: column; gap: 6px; }
.inbox-empty strong { color: var(--text); font-size: 17px; margin-top: 10px; }
.inbox-empty-icon {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.inbox-thread-foot { flex: 0 0 auto; padding: 10px 18px; border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: 12px; }

/* Etiquetas: solo colores de la paleta de marca, por variable (funcionan en claro y oscuro) */
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: var(--card-2); color: var(--text-dim);
}
.etiqueta-miel { background: var(--accent-soft); border-color: var(--accent-border); color: var(--heading); }
.etiqueta-terracota { background: var(--danger-soft); border-color: var(--danger-soft-border); color: var(--danger-ink); }
.etiqueta-oliva { background: var(--card-2); border-color: var(--success); color: var(--success); }
.etiqueta-carbon { background: var(--card-3); border-color: var(--border); color: var(--text); }
.chip-terracota.on { background: var(--danger-soft); border-color: var(--danger-soft-border); color: var(--danger-ink); }
.chip-oliva.on { border-color: var(--success); color: var(--success); }
.chip-carbon.on { background: var(--card-3); color: var(--text); }
.etiquetas-asignadas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.etiqueta-form { margin: 0; }
.etiqueta-x { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.etiqueta-add { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta-add input[type="text"], .etiqueta-add select:not([name="color"]) { flex: 1 1 100%; }
.etiqueta-add .btn { flex: 0 0 auto; }
.etiqueta-add select, .etiqueta-add input[type="text"] { padding: 7px 9px; font-size: 13px; min-width: 0; }
.etiqueta-add select[name="color"] { width: auto; flex: 0 0 auto; }

/* ---- Campana de notificaciones (sidebar) y su popover ---- */
#notif-toggle { width: 100%; border: none; background: transparent; font: inherit; cursor: pointer; text-align: left; }
#notif-toggle .icon-bell-off { display: none; }
#notif-toggle.notif-off .icon-bell { display: none; }
#notif-toggle.notif-off .icon-bell-off { display: block; }
.notif-pop {
  position: fixed; z-index: 60; width: 300px; max-width: calc(100vw - 24px);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 14px 16px;
}
.notif-pop-title { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.notif-pop-msg { margin: 0 0 10px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.notif-pop-msg.warn { color: var(--warning-ink); }
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13.5px; }
.notif-row-main { border-bottom: 1px solid var(--border-soft); }
.notif-check { justify-content: flex-start; color: var(--text-dim); cursor: pointer; }
.notif-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.notif-pop[data-off] .notif-check { opacity: 0.5; }
.notif-pop-foot { margin: 8px 0 0 0; color: var(--text-faint); font-size: 11.5px; line-height: 1.45; }
.toggle:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Bandeja (23/09, feedback tras probarla): datos del cliente, etiquetas como chips,
   notas con menu/edicion y tarjeta flotante, toasts de notificacion. Solo variables del
   tema (claro/oscuro), nada de colores sueltos. ---- */
.datos-cliente { margin: 0; display: grid; gap: 8px; }
.datos-cliente > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.datos-cliente dt { color: var(--text-faint); font-size: 12px; }
.datos-cliente dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.datos-cliente .dato-vacio { color: var(--text-faint); font-style: italic; }
.datos-cliente .dato-id { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-dim); }

.etiquetas-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.etiqueta-toggle { font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 4px 10px; line-height: 1.3; }
.etiqueta-toggle.off { background: transparent; border-style: dashed; border-color: var(--border); color: var(--text-dim); }
.etiqueta-toggle.off:hover { border-color: var(--hover-border); color: var(--text); background: var(--card-2); }
.etiqueta-toggle.on { box-shadow: 0 0 0 1px currentColor inset; }
.etiqueta-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.etiqueta-add-label { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.etiquetas-admin { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.etiquetas-admin summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.etiquetas-admin summary:hover { color: var(--text); }
.etiquetas-admin ul { list-style: none; margin: 10px 0 0 0; padding: 0; display: grid; gap: 8px; }
.etiquetas-admin li { display: flex; align-items: center; gap: 8px; }
.etiquetas-admin li form { margin: 0 0 0 auto; }
.etiquetas-admin-uso { margin: 0; }
.btn-link-danger { border: none; background: transparent; color: var(--danger-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; text-decoration: underline; text-underline-offset: 2px; }
.btn-link-danger:hover { color: var(--danger); }

.notas-lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.nota { border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; min-width: 0; }
.nota-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.nota-head .row-meta { min-width: 0; overflow-wrap: anywhere; }
.nota-menu { position: relative; flex: 0 0 auto; }
.nota-menu-btn {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; border: none;
  background: transparent; color: var(--text-dim); cursor: pointer; padding: 0; opacity: 0; transition: opacity 0.12s;
}
.nota:hover .nota-menu-btn, .nota:focus-within .nota-menu-btn, .nota-menu-btn[aria-expanded="true"] { opacity: 1; }
.nota-menu-btn:hover { background: var(--card-2); color: var(--text); }
@media (hover: none) { .nota-menu-btn { opacity: 1; } }
.nota-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 130px; padding: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.nota-menu-list.arriba { top: auto; bottom: calc(100% + 4px); }
.nota-menu-list form { margin: 0; }
.nota-menu-list button {
  display: block; width: 100%; text-align: left; border: none; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.nota-menu-list button:hover, .nota-menu-list button:focus-visible { background: var(--card-2); outline: none; }
.nota-menu-list button.danger { color: var(--danger-text); }
.nota-texto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap;
  color: var(--text-dim); font-size: 13.5px; line-height: 1.5; margin-top: 2px; border-radius: 6px;
}
.nota-texto.is-truncada { cursor: zoom-in; }
.nota-texto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nota-edit { margin-top: 6px; }
.nota-edit textarea { width: 100%; }
.nota-edit-actions { display: flex; gap: 6px; margin-top: 8px; }

.nota-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: nota-fade 0.14s ease-out;
}
.nota-card {
  position: fixed; width: min(380px, calc(100vw - 24px)); max-height: min(60vh, 420px); overflow: auto;
  padding: 16px 18px; border-radius: 16px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-md), var(--shadow-sm);
  animation: nota-pop 0.16s ease-out;
}
.nota-card-meta { color: var(--text-faint); font-size: 12px; margin-bottom: 8px; }
.nota-card-texto { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 13.5px; line-height: 1.55; }
@keyframes nota-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nota-pop { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }

.toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px;
  width: 340px; max-width: calc(100vw - 24px); pointer-events: none;
}
.toast {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 34px 12px 14px;
  border-radius: 14px; background: var(--card); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); text-align: left; font: inherit; pointer-events: auto;
  animation: toast-in 0.22s ease-out;
}
.toast-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.toast-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.toast:hover { border-color: var(--hover-border); }
.toast-body { min-width: 0; flex: 1; }
.toast-top { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.toast-title { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-canal { color: var(--text-faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-texto {
  color: var(--text-dim); font-size: 12.5px; line-height: 1.4; margin-top: 3px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.toast-x {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.toast-x:hover { background: var(--card-2); color: var(--text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .toast-stack { right: 12px; left: 12px; width: auto; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .nota-overlay, .nota-card, .toast { animation: none; }
}


/* ==== Menu nuevo (E4-1) ====================================================
   Menu con grupos (acordeon), badge de la Bandeja, punto de alerta de Canales,
   cajon + barra inferior en celular y los componentes de las pantallas nuevas
   (_ui.html). Solo variables de la paleta Colmena: anda en claro y oscuro.
   Clases nuevas, distintas de .tab / .pill / .badge / .chip (esas ya existen). */

.nav-item { position: relative; }
.nav-divider { height: 1px; background: var(--border-soft); margin: 10px 8px; }

.nav-group-head { display: flex; align-items: center; gap: 2px; }
.nav-group-head .nav-item { flex: 1; min-width: 0; }
.nav-item.active-group { color: var(--heading); font-weight: 600; }
.nav-chevron {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nav-chevron:hover { background: var(--card); color: var(--text); }
.nav-chevron svg { transition: transform 0.12s; }
.nav-chevron[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 22px;
  padding-left: 10px;
  border-left: 1px solid var(--border-soft);
}
.nav-sub[hidden] { display: none; }
.nav-item-sub { padding: 7px 10px; font-size: 13px; }
.nav-item-sub .nav-label { white-space: normal; line-height: 1.3; }
.nav-item.is-reservado { cursor: default; opacity: 0.75; }
.nav-item.is-reservado:hover { background: transparent; color: var(--text-dim); }
.nav-item.is-reservado .estado-chip { margin-left: 4px; }

/* Contador de la Bandeja (conversaciones que esperan a una persona): miel = "mirame". */
.nav-badge {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.nav-badge[hidden] { display: none; }

/* Punto de alerta de Canales: solo aparece cuando un canal conectado esta caido. */
.nav-dot {
  margin-left: auto;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-sidebar);
}
.nav-dot[hidden] { display: none; }

/* Fuera del celular el cajon y las barras moviles no existen. */
.drawer-close, .topbar-movil, .bottombar { display: none; }
.drawer-scrim[hidden] { display: none; }

@media (min-width: 861px) {
  /* Rail colapsado (sin fijar y sin mouse encima): solo iconos. Las secciones de cada grupo y
     la flecha se ven cuando el menu se expande; el badge y el punto quedan sobre el icono. */
  html:not([data-sidebar="pinned"]) .sidebar:not(:hover):not(:focus-within) .nav-sub,
  html:not([data-sidebar="pinned"]) .sidebar:not(:hover):not(:focus-within) .nav-chevron { display: none; }
  html:not([data-sidebar="pinned"]) .sidebar:not(:hover):not(:focus-within) .nav-badge {
    position: absolute;
    top: 1px;
    left: 22px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
  }
  html:not([data-sidebar="pinned"]) .sidebar:not(:hover):not(:focus-within) .nav-dot {
    position: absolute;
    top: 7px;
    left: 26px;
  }
  /* El nav recorta a lo ancho del sidebar (no de sus 36 px utiles), asi el badge no se corta. */
  .sidebar .nav { margin: 0 -16px; padding: 0 16px; }
}

/* Pantallas bajas (notebooks de ~700 px): menos aire vertical para que entre todo el menu y el pie. */
@media (min-width: 861px) and (max-height: 760px) {
  .sidebar { padding-top: 14px; padding-bottom: 12px; }
  .sidebar .brand { padding-bottom: 12px; }
  .sidebar .sidebar-toggle { margin-bottom: 4px; }
  .sidebar .nav-item { padding-top: 7px; padding-bottom: 7px; }
  .sidebar .nav-item-sub { padding-top: 5px; padding-bottom: 5px; }
  .sidebar .nav-divider { margin: 6px 8px; }
  .sidebar .account-card { padding-top: 8px; padding-bottom: 8px; }
}

/* Celular: barra superior con la marca, barra inferior (Bandeja, Clientes, Inicio, Agente, Mas)
   y el menu completo como cajon que sale desde la izquierda. */
@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    width: min(86vw, 340px);
    height: auto;
    flex: none;
    overflow-y: auto;
    padding: 16px 14px;
    visibility: hidden;
    transform: translateX(-104%);
    transition: transform 0.18s ease, visibility 0s linear 0.18s;
  }
  body.drawer-open .sidebar {
    visibility: visible;
    transform: none;
    box-shadow: var(--shadow-md);
    transition: transform 0.18s ease;
  }
  .sidebar .brand { padding: 0 4px 18px 4px; }
  .sidebar .nav-item { padding: 11px 12px; font-size: 14px; }
  .sidebar .nav-item-sub { padding: 9px 10px; font-size: 13.5px; }
  .sidebar .nav-chevron { width: 40px; height: 40px; }
  .drawer-close {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  /* Velo detras del cajon: neutro a proposito (no es color de marca), igual en claro y oscuro. */
  .drawer-scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, 0.5); }

  .topbar-movil {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
  }
  .bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-soft);
  }
  .bottombar-item {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }
  .bottombar-item.active { color: var(--heading); }
  .bottombar-item .nav-badge {
    position: absolute;
    top: 0;
    left: calc(50% + 6px);
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
  }

  .main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* Todo lo que flota abajo se corre para no quedar tapado por la barra inferior. */
  .chat-toggle-btn { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .chat-panel { bottom: calc(128px + env(safe-area-inset-bottom)); }
  .flash { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .toast-stack { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .sidebar, body.drawer-open .sidebar { transition: none; }
}

/* ---- Componentes de las pantallas nuevas (_ui.html) ---- */
.pag-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pag-cab-texto { min-width: 0; }
.pag-cab-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.estado-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.estado-chip.est-ok { background: transparent; border-color: var(--success); color: var(--success); }
.estado-chip.est-aviso { background: var(--warning-soft); border-color: var(--warning-soft-border); color: var(--warning-ink); }
.estado-chip.est-error { background: var(--danger-soft); border-color: var(--danger-soft-border); color: var(--danger-ink); }
.estado-chip.est-acento { background: var(--accent-soft); border-color: var(--accent-border); color: var(--heading); }

.tabs-nav {
  display: flex;
  gap: 4px;
  margin: 0 0 22px 0;
  border-bottom: 1px solid var(--border-soft);
  overflow-x: auto;
}
.tabs-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
a.tabs-nav-item:hover { color: var(--text); }
.tabs-nav-item.activa { color: var(--heading); border-bottom-color: var(--accent); }
.tabs-nav-item.reservada { color: var(--text-faint); cursor: default; }

.tarjeta-canal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.tarjeta-canal-cab { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: space-between; }
.tarjeta-canal-nombre { font-size: 15px; font-weight: 700; }
.tarjeta-canal-detalle { margin: 0; color: var(--text-dim); font-size: 13px; }

/* Grilla de tarjetas de la pantalla Canales (E4-6): 1 columna en celular, se acomodan solas
   en pantallas mas anchas -- mismo patron que otras grillas del panel, sin colores nuevos. */
.tarjetas-canal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.vacio-est { padding: 28px 12px; text-align: center; }
.vacio-est-titulo { font-weight: 700; margin-bottom: 4px; }
.vacio-est-texto { margin: 0 0 14px 0; color: var(--text-dim); font-size: 13px; }

.reservada-card { border-style: dashed; }

/* Con los grupos abiertos el menu puede ser mas alto que la pantalla: el nav scrollea por dentro
   y el pie (Ayuda, Notificaciones, cuenta) queda siempre a la vista. */
.sidebar .nav { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-color: var(--hover-border) transparent; }
.sidebar .sidebar-footer { flex: 0 0 auto; }
@media (max-width: 860px) {
  body.drawer-open { overflow: hidden; }
}

/* ---- E4-2: chips de estado de la Bandeja, aviso "Tomar la conversacion" y pantalla Clientes ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.inbox-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); }
.inbox-chips .chip { padding: 4px 10px; font-size: 12px; white-space: nowrap; text-decoration: none; }
.inbox-chips .chip .inbox-tab-n { margin-left: 2px; }
.inbox-chips .chip.aviso:not(.on) { border-color: var(--accent-border); color: var(--heading); }

.composer-tomar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--accent-border); border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text);
}
.composer-tomar-texto { margin: 0; font-size: 13px; line-height: 1.5; flex: 1 1 240px; }
.composer-tomar form { margin: 0; }

.clientes-total { color: var(--text-dim); font-size: 13px; font-weight: 600; }
.clientes-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px 0; }
.clientes-busqueda { flex: 1 1 260px; min-width: 0; }
.clientes-busqueda input { width: 100%; padding: 8px 11px; font-size: 13.5px; }
.clientes-select { flex: 0 1 190px; min-width: 0; }
.clientes-select select { width: 100%; padding: 8px 10px; font-size: 13.5px; }
.clientes-pronto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px 0; color: var(--text-faint); font-size: 12.5px; }
.clientes-pronto span:not(.estado-chip) { margin-left: 8px; }
.clientes-pronto span:first-child { margin-left: 0; }
.tabla-clientes .etiqueta { margin: 0 4px 4px 0; }
.fila-click { cursor: pointer; }
.fila-link:hover { color: var(--heading); }
.clientes-paginacion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.clientes-paginacion-botones { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 860px) {
  .clientes-select { flex: 1 1 140px; }
  .fila-click { cursor: default; }
}