/* ============================================
   evoTIC brand — Zammad agent view
   Colors:     #22577f (blue-700 evoTIC logo)
   Typography: Archivo + JetBrains Mono
   Brand kit:  /home/pbecerra/GIT/evotic.cl/brand/

   STRATEGY: override Zammad's design tokens (CSS variables)
   instead of fighting individual selectors. This keeps the
   entire UI coherent — icons, borders, hovers all adapt
   together because they all derive from these tokens.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* evoTIC palette */
  --evotic-brand: #22577f;
  --evotic-brand-hover: #1a4564;
  --evotic-brand-light: #3a7fa8;
  --evotic-brand-darker: #0f3855;

  /* ---- Override Zammad design tokens ---- */
  /* Primary button (was Zammad's hsl 203/65/55) */
  --button-primary-background: var(--evotic-brand);
  --button-primary-background-active: var(--evotic-brand-hover);
  --text-button-primary: var(--evotic-brand);
  --text-button-primary-active: var(--evotic-brand-hover);

  /* Links (was Zammad's hsl 204/72/50) */
  --text-link: var(--evotic-brand);
  --text-nav: var(--evotic-brand);

  /* Left navigation background — was near-black hsl(231 9% 16%) */
  --background-quaternary: var(--evotic-brand);
  --menu-background-primary: var(--evotic-brand);

  /* Active tab/state in nav (already pulls from --button-primary-background) */
  /* --menu-background-active inherits automatically                       */

  /* Fullscreen pages — login, reset password, signup */
  --background-tertiary: var(--evotic-brand-hover);
  --fullscreen-background: var(--evotic-brand-hover);

  /* Highlights / focus rings */
  --highlight: var(--evotic-brand-light);
  --border-highlight: var(--evotic-brand-light);

  /* Override "supergood" green — usado en botón Actualizar y status online */
  --supergood-color: var(--evotic-brand);
  --good-color: var(--evotic-brand-light);

  /* Bump contrast del texto muted (timestamps, "establecer como interno", etc.) */
  --text-muted: hsl(213, 6%, 46%);
  --text-muted-alt: hsl(197, 16%, 50%);

  /* ----- Sidebar izquierdo: contraste interno -----
     El fondo del nav ya es brand. Necesitamos:
     - Texto e íconos más blancos (default gris perdía contra fondo oscuro)
     - Estado activo claramente distinto del resto */
  --menu-text: rgba(255, 255, 255, 0.82);
  --menu-icon: rgba(255, 255, 255, 0.72);
  --menu-icon-secondary: rgba(255, 255, 255, 0.78);
  --menu-background-active: var(--evotic-brand-darker);
  --menu-background-primary-hover: rgba(0, 0, 0, 0.18);

  /* ----- Toggles del nav (Chat de Cliente, etc.)
     Antes: thumb era azul oscuro, track casi negro → indistinguibles.
     Ahora: thumb blanco siempre + track con contraste claro entre ON/OFF. */
  --menu-switch-background: rgba(255, 255, 255, 0.22);
  --menu-switch-pointer: #ffffff;

  /* Typography tokens (additions, not overrides) */
  --evotic-font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --evotic-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ----- Typography ----- */
html, body,
input, select, textarea, button,
.content, .main, .popover, .modal, .dropdown-menu {
  font-family: var(--evotic-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

code, kbd, pre, samp,
.font-mono,
.ticket-number,
.task .key {
  font-family: var(--evotic-font-mono);
}

/* ----- Sidebar izquierdo: barra blanca a la izquierda del ítem activo
   pa que sea fácil ubicar visualmente cuál está seleccionado.
   La entrada de ticket abierto es .nav-tab.is-active (no .menu-item). ----- */
.menu-item.is-active,
.menu-item.is-hovered,
.nav-tab.is-active,
.tasks-navigation .nav-tab.is-active {
  box-shadow: inset 4px 0 0 #ffffff !important;
  background: var(--evotic-brand-darker) !important;
}

/* ----- Browser autofill: Chrome/Edge ponen un highlight gris feo en los
   inputs que recuerdan (email pre-cargado en login, por ej). Esto los
   normaliza al fondo del input. ----- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--background-primary, #f8fafc) inset !important;
  -webkit-text-fill-color: var(--text-normal, #334155) !important;
  caret-color: var(--text-normal, #334155) !important;
  transition: background-color 9999s ease-out 0s;
}

/* ----- "Powered by Zammad" footer en login: integrarlo al fondo brand
   Los SVGs originales son rojo/naranjo + gris, que chocan con el azul.
   Filter brightness(0) invert(1) los pasa a blanco, opacity los hace
   sutiles. La atribución sigue visible (cumple licencia) pero deja de
   competir visualmente con el card de login. ----- */
.poweredBy {
  opacity: 0.45;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s ease;
}

.poweredBy:hover {
  opacity: 0.85;
}
/* ----- evoTIC inline filter sobre tablas de overview -----
   Modos:
   - .evotic-table-filter--in-header  -> dentro del page-header (compacto)
   - .evotic-table-filter--above-table -> fallback, sobre la tabla
   ---------------------------------------------------------- */

.evotic-table-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--evotic-font-sans, inherit);
  box-sizing: border-box;
}

/* --- En el header: matchear visualmente con el boton OPCIONES --- */
.evotic-table-filter--in-header {
  margin-right: 8px;
  padding: 4px 10px;
  height: 28px;
  border: 1px solid var(--border-color, hsl(213, 6%, 86%));
  border-radius: 6px;
  background: #ffffff;
  width: 220px;
  max-width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, width 0.18s ease;
}

.evotic-table-filter--in-header:focus-within {
  border-color: var(--evotic-brand, #22577f);
  box-shadow: 0 0 0 3px rgba(34, 87, 127, 0.14);
  width: 260px;
}

/* --- Fallback: sobre la tabla, mas slim que antes --- */
.evotic-table-filter--above-table {
  display: flex;
  margin: 0 0 10px 0;
  padding: 5px 10px;
  height: 30px;
  border: 1px solid var(--border-color, hsl(213, 6%, 86%));
  border-radius: 6px;
  background: #ffffff;
  max-width: 280px;
}

.evotic-table-filter--above-table:focus-within {
  border-color: var(--evotic-brand, #22577f);
  box-shadow: 0 0 0 3px rgba(34, 87, 127, 0.14);
}

/* --- Elementos internos comunes --- */
.evotic-table-filter__icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted, hsl(213, 6%, 56%));
  flex: 0 0 auto;
  line-height: 0;
}

.evotic-table-filter:focus-within .evotic-table-filter__icon {
  color: var(--evotic-brand, #22577f);
}

.evotic-table-filter__input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--text-normal, #334155);
  font-size: 12px;
  padding: 0;
  min-width: 0;
  line-height: 1;
}

.evotic-table-filter__input::placeholder {
  color: var(--text-muted, hsl(213, 6%, 58%));
  font-style: normal;
}

.evotic-table-filter__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Boton clear (X) - aparece solo cuando hay texto */
.evotic-table-filter__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  background: var(--text-muted, hsl(213, 6%, 70%));
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
  flex: 0 0 auto;
  line-height: 0;
}

.evotic-table-filter__clear.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.evotic-table-filter__clear:hover {
  background: var(--evotic-brand, #22577f);
}

.evotic-table-filter__clear:focus {
  outline: none;
  background: var(--evotic-brand, #22577f);
  box-shadow: 0 0 0 2px rgba(34, 87, 127, 0.25);
}

.evotic-table-filter__count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--evotic-brand, #22577f);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
  border-left: 1px solid var(--border-color, hsl(213, 6%, 88%));
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.evotic-table-filter__count.is-visible {
  opacity: 1;
}

/* Si el page-header-meta no usa flex, forzamos alineacion */
.page-header-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===========================================================
   Scroll interno en overviews — solo la tabla scrollea,
   el page-header (titulo + filtro + opciones) queda fijo arriba.
   Wrapper real: .overview-table (no .content.active).
   =========================================================== */
.overview-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.overview-table > .page-header {
  flex: 0 0 auto;
}

.overview-table > .page-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-gutter: stable;
  /* Firefox: thumb invisible por defecto */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s ease;
}

/* Firefox: al hover sobre el area scrolleable, aparece el thumb */
.overview-table > .page-content:hover {
  scrollbar-color: var(--evotic-brand-light, #3a7fa8) transparent;
}

/* Estrategia simple: scrollbar bien delgado para que no estorbe.
   No intentamos forzar el width de la tabla (Zammad calcula columnas
   con widths inline) — solo hacemos la barra de scroll super sutil. */

/* ===========================================================
   Highlight de coincidencias del filtro
   =========================================================== */
mark.evotic-mark {
  background: #ffe066;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(212, 167, 0, 0.25);
}

/* ===========================================================
   Hover de filas - sutil con color brand
   =========================================================== */
.overview-table .table-overview table.table tbody tr.item {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.overview-table .table-overview table.table tbody tr.item:hover {
  background-color: rgba(34, 87, 127, 0.06) !important;
}

.overview-table .table-overview table.table tbody tr.item:hover td {
  background-color: transparent !important;
}

/* ===========================================================
   Tooltip custom (reemplaza el nativo gris feo)
   =========================================================== */
.evotic-tooltip {
  position: fixed;
  z-index: 9999;
  background: #1f2937;
  color: #ffffff;
  font-size: 12px;
  font-family: var(--evotic-font-sans, inherit);
  padding: 6px 10px;
  border-radius: 5px;
  max-width: 360px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: normal;
  word-wrap: break-word;
}

.evotic-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================
   Ocultar el dashboard nativo de Zammad cuando esta nuestro custom.
   Esconde "Mis estadisticas", "Tiempo espera", "Animo", "Canal
   distribucion" y la sidebar lateral "Flujo de Actividad". */
.content.active .dashboard > .stats,
.content.active .dashboard > .first-steps,
.content.active .dashboard > .activity-stream,
.content.active .dashboard .stats-group,
.content.active .dashboard .stats-list,
.content.active .dashboard .tabsHolder,
.content.active .dashboard .first-steps-content,
.content.active .dashboard .activity-stream-list,
.content.active .dashboard .channel-distribution,
.content.active .dashboard .tab-pane,
.content.active .dashboard .tab-content {
  display: none !important;
}

/* Sidebar lateral derecha (Flujo de actividad) */
.content.active .dashboard .sidebar:has(.activity-stream),
.content.active .dashboard ~ .sidebar,
.content.active aside.sidebar,
.activities {
  display: none !important;
}

/* El dashboard custom debe ocupar todo el ancho disponible */
.content.active .dashboard {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Ocultar TODO lo que venga despues del evotic-dashboard
   (mis estadisticas, primeros pasos, tiempo espera, etc.) */
.evotic-dashboard ~ * {
  display: none !important;
}

/* ===========================================================
   Dashboard custom en el Panel Principal
   =========================================================== */
.evotic-dashboard {
  padding: 14px 20px 16px 20px;
  font-family: var(--evotic-font-sans, inherit);
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Card del donut: centrar el donut verticalmente para que no quede
   espacio en blanco al fondo */
.evotic-card:has(.evotic-donut) {
  display: flex;
  flex-direction: column;
}

.evotic-card:has(.evotic-donut) > .evotic-donut {
  flex: 1 1 auto;
  justify-content: center;
}

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

/* min-width: 0 en TODOS los hijos de los grids - sin esto los items
   mantienen su tamano intrinseco y se desbordan */
.evotic-dashboard__kpis > *,
.evotic-dashboard__grid > *,
.evotic-dashboard__row > * {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Los SVG dentro de cards: limitarlos al 100% del ancho del card */
.evotic-card svg {
  max-width: 100%;
  height: auto;
}

.evotic-chart-line {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
}

/* El contenedor padre del dashboard: scrollbar slim brand + sin overflow X */
.content.active:has(.evotic-dashboard),
.content:has(.evotic-dashboard),
.dashboard:has(.evotic-dashboard) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.content.active:has(.evotic-dashboard):hover,
.content:has(.evotic-dashboard):hover,
.dashboard:has(.evotic-dashboard):hover {
  scrollbar-color: var(--evotic-brand-light, #3a7fa8) transparent;
}

.content.active:has(.evotic-dashboard)::-webkit-scrollbar,
.content:has(.evotic-dashboard)::-webkit-scrollbar,
.dashboard:has(.evotic-dashboard)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.content.active:has(.evotic-dashboard)::-webkit-scrollbar-track,
.content:has(.evotic-dashboard)::-webkit-scrollbar-track,
.dashboard:has(.evotic-dashboard)::-webkit-scrollbar-track {
  background: transparent;
}

.content.active:has(.evotic-dashboard)::-webkit-scrollbar-thumb,
.content:has(.evotic-dashboard)::-webkit-scrollbar-thumb,
.dashboard:has(.evotic-dashboard)::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.content.active:has(.evotic-dashboard):hover::-webkit-scrollbar-thumb,
.content:has(.evotic-dashboard):hover::-webkit-scrollbar-thumb,
.dashboard:has(.evotic-dashboard):hover::-webkit-scrollbar-thumb {
  background: var(--evotic-brand-light, #3a7fa8);
}

.evotic-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.evotic-dashboard__header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--evotic-brand, #22577f);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.evotic-dashboard__refresh {
  background: transparent;
  border: 1px solid var(--border-color, hsl(213, 6%, 86%));
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--text-muted, hsl(213, 6%, 50%));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}

.evotic-dashboard__refresh:hover {
  color: var(--evotic-brand, #22577f);
  border-color: var(--evotic-brand, #22577f);
}

.evotic-dashboard__refresh:active svg {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.evotic-dashboard__loading,
.evotic-dashboard__empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted, hsl(213, 6%, 50%));
  font-style: italic;
  font-size: 13px;
}

/* KPI cards (big numbers) */
.evotic-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* En pantallas anchas: 4 columnas. En medianas: 2. En chicas: 1 */
@media (min-width: 1100px) {
  .evotic-dashboard__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .evotic-dashboard__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.evotic-kpi {
  display: block;
  background: #ffffff;
  border: 1px solid var(--border-color, hsl(213, 6%, 90%));
  border-radius: 8px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.evotic-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(34, 87, 127, 0.12);
  border-color: var(--evotic-brand-light, #3a7fa8);
}

.evotic-kpi__value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--evotic-brand, #22577f);
  font-variant-numeric: tabular-nums;
}

.evotic-kpi__label {
  font-size: 10.5px;
  color: var(--text-muted, hsl(213, 6%, 50%));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  font-weight: 500;
}

.evotic-kpi--brand {
  background: linear-gradient(135deg, var(--evotic-brand, #22577f) 0%, var(--evotic-brand-hover, #1a4564) 100%);
  border-color: var(--evotic-brand, #22577f);
}

.evotic-kpi--brand .evotic-kpi__value,
.evotic-kpi--brand .evotic-kpi__label {
  color: #ffffff;
}

.evotic-kpi--brand .evotic-kpi__label {
  opacity: 0.85;
}

/* Cards grid */
.evotic-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

@media (min-width: 1100px) {
  .evotic-dashboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .evotic-dashboard__grid--key {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .evotic-dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.evotic-card {
  background: #ffffff;
  border: 1px solid var(--border-color, hsl(213, 6%, 90%));
  border-radius: 8px;
  padding: 10px 14px;
}

.evotic-card h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--evotic-brand, #22577f);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Bar chart horizontal */
.evotic-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evotic-bar {
  display: grid;
  grid-template-columns: 130px 1fr 70px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.evotic-bar__label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #334155;
}

.evotic-bar__track {
  background: hsl(213, 16%, 95%);
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}

.evotic-bar__fill {
  background: linear-gradient(to right, var(--evotic-brand-light, #3a7fa8), var(--evotic-brand, #22577f));
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.evotic-bar__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: hsl(213, 10%, 35%);
  font-size: 11.5px;
  letter-spacing: 0.01em;
}

.evotic-bar__value small {
  color: var(--text-muted, hsl(213, 6%, 60%));
  font-weight: 400;
  font-size: 10px;
  margin-left: 2px;
}

/* Row con tendencia + donut */
.evotic-dashboard__row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.evotic-dashboard__row--wide {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

@media (max-width: 900px) {
  .evotic-dashboard__row--wide {
    grid-template-columns: 1fr;
  }
}

.evotic-card--wide {
  /* nothing extra */
}

/* Fila destacada: Organizacion + Sistema + Tipo */
.evotic-dashboard__grid--key {
  margin-bottom: 14px;
}

.evotic-card--key {
  border-color: var(--evotic-brand-light, #3a7fa8);
  background: linear-gradient(180deg, hsl(213, 30%, 99%) 0%, #ffffff 100%);
}

.evotic-card--key h3 {
  color: var(--evotic-brand-darker, #0f3855);
}

/* Wrapper para canvas de Chart.js — altura fija evita scrolls raros */
.evotic-chart-wrap {
  position: relative;
  width: 100%;
  height: 160px;
}

/* Tunear C3 charts dentro del dashboard custom */
.evotic-chart-wrap .c3 svg {
  font-family: var(--evotic-font-sans, inherit);
  font-size: 11px;
}

.evotic-chart-wrap .c3-line {
  stroke-width: 2.2;
}

.evotic-chart-wrap .c3-area {
  opacity: 0.18;
}

.evotic-chart-wrap .c3-axis path,
.evotic-chart-wrap .c3-axis line {
  stroke: hsl(213, 12%, 88%);
}

.evotic-chart-wrap .c3-axis text {
  fill: var(--text-muted, hsl(213, 6%, 56%));
}

.evotic-chart-wrap .c3-grid line {
  stroke: hsl(213, 12%, 94%);
  stroke-dasharray: 2 2;
}

/* Donut: ocultar texto interno (mas limpio) */
.evotic-chart-wrap--donut .c3-chart-arc text,
.evotic-chart-wrap--donut .c3-chart-arcs-title {
  display: none;
}

.evotic-chart-wrap--donut {
  height: auto;
  min-height: 200px;
}

.evotic-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Line chart SVG fallback */
.evotic-chart-line {
  width: 100%;
  height: 180px;
  display: block;
}

.evotic-chart-axis {
  font-size: 10px;
  fill: var(--text-muted, hsl(213, 6%, 56%));
  font-family: var(--evotic-font-mono, ui-monospace, monospace);
}

.evotic-chart-line__footer {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted, hsl(213, 6%, 56%));
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Donut chart - vertical: donut centrado arriba, leyendas chicas abajo */
.evotic-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.evotic-donut__svg {
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
  margin: 0 auto;
}

.evotic-donut__total {
  font-size: 36px;
  font-weight: 700;
  fill: var(--evotic-brand, #22577f);
  font-family: var(--evotic-font-sans, inherit);
}

.evotic-donut__total-label {
  font-size: 11px;
  fill: var(--text-muted, hsl(213, 6%, 56%));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.evotic-donut__legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  min-width: 0;
}

.evotic-donut__legend-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 6px;
}

.evotic-donut__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.evotic-donut__legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
  font-size: 10.5px;
}

.evotic-donut__legend-value {
  font-weight: 600;
  color: hsl(213, 10%, 35%);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

.evotic-donut__legend-value small {
  color: var(--text-muted, hsl(213, 6%, 60%));
  font-weight: 400;
  font-size: 9.5px;
  margin-left: 2px;
}

/* Age badges (tickets viejos) */
.evotic-age-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: hsl(213, 16%, 92%);
  color: hsl(213, 8%, 36%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.evotic-age-badge--warn {
  background: hsl(40, 90%, 88%);
  color: hsl(35, 70%, 28%);
}

.evotic-age-badge--critical {
  background: hsl(0, 80%, 90%);
  color: hsl(0, 70%, 32%);
}

/* Recent activity list */
.evotic-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.evotic-recent-list li {
  padding: 8px 0;
  border-bottom: 1px solid hsl(213, 12%, 94%);
}

.evotic-recent-list li:last-child {
  border-bottom: 0;
}

.evotic-recent-list__title {
  display: block;
  font-size: 13px;
  color: var(--evotic-brand, #22577f);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evotic-recent-list__title:hover {
  text-decoration: underline;
}

.evotic-recent-list__meta {
  font-size: 11px;
  color: var(--text-muted, hsl(213, 6%, 56%));
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ===========================================================
   Ticket preview card (al hacer hover en un link de ticket)
   =========================================================== */
.evotic-ticket-preview {
  position: fixed;
  width: 400px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid var(--border-color, hsl(213, 12%, 88%));
  border-radius: 10px;
  padding: 16px;
  box-shadow:
    0 14px 38px rgba(15, 56, 85, 0.16),
    0 3px 10px rgba(15, 56, 85, 0.08);
  font-family: var(--evotic-font-sans, inherit);
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.evotic-ticket-preview.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.evotic-ticket-preview__loading {
  color: var(--text-muted, hsl(213, 6%, 54%));
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}

.evotic-ticket-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.evotic-ticket-preview__number {
  font-family: var(--evotic-font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--evotic-brand, #22577f);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.evotic-ticket-preview__state {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: hsl(213, 16%, 93%);
  color: hsl(213, 8%, 38%);
  font-weight: 500;
  white-space: nowrap;
  text-transform: capitalize;
}

.evotic-ticket-preview__state.state-closed {
  background: hsl(140, 55%, 90%);
  color: hsl(140, 55%, 22%);
}
.evotic-ticket-preview__state.state-open {
  background: hsl(213, 60%, 91%);
  color: hsl(213, 60%, 28%);
}
.evotic-ticket-preview__state.state-pending {
  background: hsl(40, 85%, 90%);
  color: hsl(35, 65%, 28%);
}
.evotic-ticket-preview__state.state-new {
  background: hsl(280, 60%, 92%);
  color: hsl(280, 50%, 32%);
}

.evotic-ticket-preview__title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 12px;
  color: #111827;
  word-break: break-word;
}

.evotic-ticket-preview__meta {
  display: grid;
  gap: 5px;
  font-size: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid hsl(213, 12%, 92%);
}

.evotic-ticket-preview__meta > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.evotic-ticket-preview__label {
  flex: 0 0 78px;
  color: var(--text-muted, hsl(213, 6%, 50%));
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.evotic-ticket-preview__body {
  font-size: 12.5px;
  line-height: 1.55;
  color: hsl(213, 6%, 30%);
  background: hsl(213, 16%, 97%);
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--evotic-brand-light, #3a7fa8);
  word-break: break-word;
  /* Respetar los \n del texto limpio */
  white-space: pre-wrap;
  max-height: 140px;
  overflow: hidden;
}

.evotic-ticket-preview__footer {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted, hsl(213, 6%, 54%));
  text-align: center;
  font-style: italic;
}

/* ===========================================================
   Toggle: ocultar la lista de colas. Zammad usa distintos
   contenedores segun la version (overview-header con tabs o
   .sidebar con nav-stacked). Cubrimos ambos con :has() para
   no afectar otras sidebars del agent UI. */
.evotic-sidebar-hidden .overview-header,
.evotic-sidebar-hidden .sidebar:has(a[href*="#ticket/view/"]),
.evotic-sidebar-hidden .sidebar:has(.nav-pills.nav-stacked) {
  display: none !important;
}

.evotic-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 30px;
  padding: 0;
  margin-right: 8px;
  border: 1px solid var(--border-color, hsl(213, 6%, 86%));
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-muted, hsl(213, 6%, 46%));
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  line-height: 0;
}

.evotic-sidebar-toggle:hover {
  border-color: var(--evotic-brand, #22577f);
  color: var(--evotic-brand, #22577f);
}

.evotic-sidebar-toggle.is-on {
  background: var(--evotic-brand, #22577f);
  border-color: var(--evotic-brand, #22577f);
  color: #ffffff;
}

.evotic-sidebar-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 87, 127, 0.18);
}

.evotic-dense .evotic-sidebar-toggle {
  height: 24px;
  width: 26px;
}

/* ===========================================================
   Boton "Modo compacto" en page-header
   =========================================================== */
.evotic-dense-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 30px;
  padding: 0;
  margin-right: 8px;
  border: 1px solid var(--border-color, hsl(213, 6%, 86%));
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-muted, hsl(213, 6%, 46%));
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  line-height: 0;
}

.evotic-dense-toggle:hover {
  border-color: var(--evotic-brand, #22577f);
  color: var(--evotic-brand, #22577f);
}

.evotic-dense-toggle.is-on {
  background: var(--evotic-brand, #22577f);
  border-color: var(--evotic-brand, #22577f);
  color: #ffffff;
}

.evotic-dense-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 87, 127, 0.18);
}

/* ===========================================================
   Modo denso: filas mas compactas, fuente mas chica.
   La clave para reducir altura son: padding + line-height + icon size.
   Sin reducir los iconos SVG, las filas no bajan de ~32px.
   =========================================================== */
.evotic-dense .overview-table .table-overview table.table {
  font-size: 12px;
  line-height: 1.25;
}

.evotic-dense .overview-table .table-overview table.table tbody tr.item td,
.evotic-dense .overview-table .table-overview table.table thead th {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  line-height: 1.25 !important;
}

.evotic-dense .overview-table .table-overview table.table thead th {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  height: auto !important;
}

/* Reducir iconos (los que dictan la altura minima) */
.evotic-dense .overview-table .table-overview table.table .icon {
  width: 13px !important;
  height: 13px !important;
}

.evotic-dense .overview-table .table-overview table.table .icon-task-state {
  width: 11px !important;
  height: 11px !important;
}

/* Checkbox: bajarlo a 12px */
.evotic-dense .overview-table .table-overview table.table .checkbox-replacement {
  height: 12px;
  width: 12px;
}
.evotic-dense .overview-table .table-overview table.table .checkbox-replacement .icon {
  width: 12px !important;
  height: 12px !important;
}

/* Forzar altura minima de la fila a auto */
.evotic-dense .overview-table .table-overview table.table tbody tr.item {
  height: auto !important;
  min-height: 0 !important;
}

/* Group row en denso: tambien compacto */
.evotic-dense .overview-table .table-overview table tbody tr:has(td[colspan]) td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 11px;
}

/* En denso ya no necesitamos forzar top - JS recalcula el offset
   cuando se toggle la clase .evotic-dense */

/* Filtro y boton denso tambien mas compactos en modo denso */
.evotic-dense .evotic-table-filter--in-header {
  height: 24px;
  width: 200px;
}

.evotic-dense .evotic-dense-toggle {
  height: 24px;
  width: 26px;
}

/* Scrollbar webkit (Chrome/Edge/Safari) - overlay tipo macOS:
   invisible mientras no hay hover, aparece suave al pasar el mouse */
.overview-table > .page-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.overview-table > .page-content::-webkit-scrollbar-track {
  background: transparent;
}
.overview-table > .page-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.overview-table > .page-content:hover::-webkit-scrollbar-thumb {
  background: var(--evotic-brand-light, #3a7fa8);
}
.overview-table > .page-content::-webkit-scrollbar-thumb:hover {
  background: var(--evotic-brand, #22577f);
}

/* Sticky thead dentro del scroll */
.overview-table .table-overview table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.overview-table .table-overview table thead th {
  background: #ffffff;
  box-shadow: inset 0 -1px 0 var(--border-color, hsl(213, 6%, 86%));
}

/* Filas de agrupacion (td con colspan) tambien sticky bajo el thead.
   Fondo azul brand + texto blanco para contraste legible. */
.overview-table .table-overview table tbody tr:has(td[colspan]) {
  position: sticky;
  /* Usa --evotic-thead-h calculado por JS (offsetHeight del thead).
     Fallback 34px para el flash inicial antes que cargue el JS. */
  top: var(--evotic-thead-h, 34px);
  z-index: 4;
  background: var(--evotic-brand, #22577f);
}

.overview-table .table-overview table tbody tr:has(td[colspan]) td,
.overview-table .table-overview table tbody tr:has(td[colspan]) td b {
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Group row: el td del colspan debe seguir siendo table-cell
   (display:flex lo rompe). Usamos float:right en el summary. */
.overview-table .table-overview table tbody tr:has(td[colspan]) > td {
  padding-right: 32px !important;
}

/* Resumen del grupo: count + apps + types — alineado a la derecha */
.evotic-group-summary {
  float: right;
  font-weight: 400 !important;
  font-size: 11px !important;
  opacity: 0.82;
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 16px;
}

.evotic-dense .evotic-group-summary {
  font-size: 10px !important;
}