/* Sora alojada acá en vez de depender de Google Fonts para esta -- es
   variable (un solo archivo cubre 500-800), y así el título del login no
   depende de que fonts.googleapis.com/fonts.gstatic.com estén accesibles
   desde la red de quien lo mire (algunas redes corporativas los bloquean). */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("assets/fonts/sora-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("assets/fonts/sora-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --bg: #f4f5f8;
  --mesh1: rgba(123, 60, 255, 0.15);
  --mesh2: rgba(0, 213, 255, 0.1);
  --mesh3: rgba(217, 70, 239, 0.08);
  --surface: rgba(255, 255, 255, 0.7);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;
  --tint: rgba(255, 255, 255, 0.9);
  --ink: #111827;
  --muted: #6b7280;
  --muted2: #9ca3af;
  --line: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.15);
  --brand: #7b3cff;
  --brand-strong: #3d5afe;
  --brand-soft: rgba(123, 60, 255, 0.12);
  --cyan: #0891b2;
  --cyan-soft: rgba(8, 145, 178, 0.12);
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --info: #0ea5e9;
  --info-soft: rgba(14, 165, 233, 0.12);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 32px 70px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07080f;
  --mesh1: rgba(123, 60, 255, 0.32);
  --mesh2: rgba(0, 213, 255, 0.2);
  --mesh3: rgba(217, 70, 239, 0.16);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.075);
  --surface-solid: #11121f;
  --tint: rgba(255, 255, 255, 0.06);
  --ink: #eef0fb;
  --muted: #8d90b8;
  --muted2: #666a92;
  --line: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --brand: #7b3cff;
  --brand-strong: #3d5afe;
  --brand-soft: rgba(123, 60, 255, 0.2);
  --cyan: #00d5ff;
  --cyan-soft: rgba(0, 213, 255, 0.16);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.14);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 32px 70px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 300ms ease, color 300ms ease;
}

.bg-blobs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-blob {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  filter: blur(90px);
}

.bg-blob-1 {
  left: -10%;
  top: -15%;
  background: var(--mesh1);
  animation: floatBlob 18s ease-in-out infinite;
}

.bg-blob-2 {
  right: -10%;
  top: 20%;
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  background: var(--mesh2);
  animation: floatBlob 22s ease-in-out infinite reverse;
}

.bg-blob-3 {
  left: 20%;
  bottom: -15%;
  width: 45vw;
  height: 45vw;
  max-width: 600px;
  max-height: 600px;
  background: var(--mesh3);
  animation: floatBlob 26s ease-in-out infinite;
}

@keyframes floatBlob {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(3%, -4%) scale(1.08);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  min-width: 220px;
  max-width: 360px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--shadow-glow);
  animation: toastIn 0.3s ease;
}

@keyframes heartbeat {
  0%, 100% {
    box-shadow: 0 8px 20px var(--brand-soft);
  }
  50% {
    box-shadow: 0 8px 30px var(--brand-soft), 0 0 0 6px var(--brand-soft);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 12, 0.55);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.modal-box {
  position: relative;
  width: min(420px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  box-shadow: var(--shadow-glow);
  padding: 26px;
  animation: fadeUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-box.wide {
  width: min(460px, 100%);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}

.modal-close svg {
  width: 13px;
  height: 13px;
}

/* Visor de imagen superpuesto para los adjuntos del chat -- antes el click
   abría el archivo en SharePoint en otra pestaña, lo que además de ser una
   navegación rara para "ver una foto", chocaba con permisos de SharePoint
   que el usuario logueado no siempre tiene (aunque la miniatura sí carga
   bien, porque esa pasa por nuestro propio backend). */
.lightbox-box {
  position: relative;
  max-width: min(90vw, 900px);
  max-height: 85vh;
  animation: fadeUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lightbox-img {
  display: block;
  max-width: min(90vw, 900px);
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: var(--shadow-glow);
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-glow);
}

.modal-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.flat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--surface-strong);
  font-size: 13px;
}

.flat-row-title {
  font-weight: 600;
  min-width: 0;
}

.flat-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.flat-row-icon-button {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.flat-row-icon-button:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.flat-row-icon-button svg {
  width: 14px;
  height: 14px;
}

h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

h1, h2, h3, h4 {
  letter-spacing: -0.01em;
}

.app-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 220ms ease;
}

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

.app-shell[hidden] {
  display: none;
}

.sidebar-collapse-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  transition: background 200ms ease, color 200ms ease, transform 220ms ease;
}

.sidebar-collapse-toggle:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.sidebar-collapse-toggle svg {
  width: 14px;
  height: 14px;
}

.sidebar.collapsed .sidebar-collapse-toggle {
  transform: rotate(180deg);
}

.sidebar.collapsed .brand > div,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .sidebar-summary,
.sidebar.collapsed .theme-toggle {
  display: none;
}

/* Colapsado: la columna queda muy angosta (72px, ~40px de contenido) para
   que el logo y el botón de achicar entren en la misma fila sin que se
   corten -- se apilan en cambio, pegados y centrados como un solo grupo. */
.sidebar.collapsed .brand {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.sidebar.collapsed .brand-mark {
  height: 26px;
}

:root:not([data-theme="dark"]) .sidebar.collapsed .brand-mark {
  height: 22px;
  padding: 4px;
}

.sidebar.collapsed .sidebar-collapse-toggle {
  width: 20px;
  height: 20px;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.login-screen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.login-screen[hidden] {
  display: none;
}

.login-screen::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
  content: "";
  mask-image: radial-gradient(circle at center, black, transparent 75%);
  pointer-events: none;
}

.login-card {
  position: relative;
  width: min(400px, 100%);
  padding: 40px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}

/* Lockup del login: apilado y centrado (símbolo arriba, wordmark abajo) --
   distinto del lockup horizontal del sidebar (símbolo + texto en fila), que
   queda igual que antes porque en una fila de nav angosta es lo que entra
   bien. Acá hay lugar de sobra para la versión "hero" apilada. */
.login-card .brand {
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.login-card .brand-mark {
  height: 84px;
}

.login-card .brand-wordmark {
  color: var(--ink);
  height: 28px;
}

/* Sora para el título -- lo trajo Joel de un mockup aparte, dice que
   equilibra mejor lo "tech" con lo premium (linea de Vercel/Perplexity/Arc).
   El tamaño no es el 54px del mockup original: esa referencia tenía una
   tarjeta más ancha (500px) que la nuestra (400px, para no competir con el
   logo/wordmark de arriba) -- se ajustó para que no rompa línea acá. */
.login-card h1 {
  margin: 24px auto 8px;
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.05em;
  background: linear-gradient(90deg, #3d5afe 0%, #7b3cff 45%, #d946ef 70%, #00d5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .login-card h1 {
    font-size: 26px;
  }
}

.login-card .primary-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  background: linear-gradient(120deg, #3d5afe 0%, #7b3cff 30%, #d946ef 60%, #00d5ff 85%, #3d5afe 100%);
  background-size: 250% 100%;
  box-shadow: 0 10px 30px rgba(123, 60, 255, 0.28);
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.login-card .ms-logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.login-card .primary-button:hover {
  box-shadow: 0 14px 36px rgba(123, 60, 255, 0.36);
}

/* Degradé que respira lentamente -- un toque "vivo" en vez de un color
   plano. Se apaga si el usuario prefiere menos movimiento en pantalla. */
@media (prefers-reduced-motion: no-preference) {
  .login-card .primary-button {
    animation: waiaButtonGradient 7s ease-in-out infinite;
  }
}

@keyframes waiaButtonGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Brillo tipo "metal" que recorre el botón al pasar el mouse. */
.login-card .primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.65s ease;
}

.login-card .primary-button:hover::after {
  left: 130%;
}

.login-copy {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.login-note {
  margin: 18px 0 0;
  color: var(--muted2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.login-message {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  text-align: left;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--surface);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(20px);
}

.sidebar > * {
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* El símbolo trae un brillo/sombra suave pegado a los píxeles (pensado
   para verse sobre fondos oscuros) -- en tema claro ese brillo se ve como
   una mancha gris sucia en vez de fundirse con el fondo. Se le da una
   base oscura propia solo en tema claro, recreando el mismo fondo para el
   que el brillo fue diseñado. En tema oscuro no hace falta: el fondo de
   la app ya cumple ese rol. */
:root:not([data-theme="dark"]) .brand-mark {
  background: linear-gradient(160deg, #1e2348 0%, #0f172a 100%);
  border-radius: 18px;
  padding: 6px;
  box-sizing: content-box;
  box-shadow:
    0 10px 24px -6px rgba(15, 23, 42, 0.35),
    0 2px 8px rgba(15, 23, 42, 0.18);
}

.brand-wordmark {
  height: 16px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  transition: background 200ms ease;
}

.theme-toggle:hover {
  background: var(--surface-strong);
}

.theme-icon-light,
.theme-icon-dark {
  width: 16px;
  height: 16px;
}

.theme-icon-dark {
  display: none;
}

:root[data-theme="dark"] .theme-icon-light {
  display: none;
}

:root[data-theme="dark"] .theme-icon-dark {
  display: block;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
}

.command-palette[hidden] {
  display: none;
}

.command-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 25, 0.55);
}

.command-palette-box {
  position: relative;
  width: min(560px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.command-palette-box input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 20px;
  font-size: 16px;
}

.command-palette-box input:focus {
  box-shadow: none;
}

.command-palette-results {
  overflow-y: auto;
  padding: 8px;
}

.command-result {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.command-result:hover,
.command-result.active {
  background: var(--tint);
}

.command-result strong {
  font-size: 13.5px;
}

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

.command-result-empty {
  padding: 20px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.command-result-group {
  margin: 10px 6px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.brand small,
.sidebar-summary small,
.nav-item small {
  color: var(--muted);
}

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

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  transition: background 140ms ease, transform 140ms ease;
}

.nav-item:hover {
  background: var(--surface-strong);
}

.nav-item[hidden] {
  display: none;
}

.nav-item.active {
  background: var(--surface-strong);
}

.nav-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.nav-icon-wrap.tone-brand {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.nav-icon-wrap.tone-cyan {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.nav-icon-wrap.tone-success {
  background: var(--success-soft);
  color: var(--success);
}

.nav-icon-wrap.tone-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.nav-icon-wrap.tone-info {
  background: var(--info-soft);
  color: var(--info);
}

.nav-icon-wrap.tone-muted {
  background: var(--surface-strong);
  color: var(--muted);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}

.nav-icon-wrap .nav-item-badge {
  display: grid;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border-radius: 999px;
  border: 1.5px solid var(--surface);
  background: var(--danger);
  color: #ffffff;
  font-size: 7px;
  font-weight: 800;
  place-items: center;
  line-height: 1;
  box-sizing: border-box;
}

.nav-icon-wrap .nav-item-badge[hidden] {
  display: none;
}

.sidebar-signout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: background 140ms ease, color 140ms ease;
}

.sidebar-signout:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.sidebar-signout svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-signout span {
  display: none;
}

.sidebar.collapsed .sidebar-signout {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Foto de Microsoft 365 dentro de cualquier burbuja de avatar (topbar,
   perfil, fila de usuario, top agents, workload) -- llena el círculo del
   contenedor que la use, sea cual sea su tamaño. */
.avatar-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.topbar-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-item span {
  overflow: hidden;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item small {
  font-size: 11.5px;
  font-weight: 500;
}

.sidebar-summary {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--brand-soft);
}

.sidebar-summary span,
.sidebar-summary strong,
.sidebar-summary small {
  display: block;
}

.sidebar-summary span {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

.sidebar-summary strong {
  margin: 0;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(120deg, #3d5afe 0%, #7b3cff 45%, #d946ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sidebar-summary small {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
}

.main {
  min-width: 0;
  padding: 30px 32px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.error-banner {
  background: var(--danger-soft);
  border: 1px solid rgba(224, 51, 79, 0.3);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-weight: 650;
}

.topbar h1,
.section-heading h2 {
  margin: 0;
}

.topbar h1 {
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.02em;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--brand);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.topbar-actions,
.filters,
.form-row {
  display: flex;
  gap: 10px;
}

.primary-button,
.ghost-button {
  min-height: 42px;
  border-radius: var(--radius-sm);
  padding: 0 18px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

.primary-button {
  border: 0;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: 0 10px 30px var(--brand-soft);
}

.primary-button:hover {
  box-shadow: 0 14px 36px var(--brand-soft);
  transform: translateY(-1px);
}

.ghost-button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
}

.ghost-button:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}

.full {
  width: 100%;
}

.pill-button {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pill-button:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}

.view {
  display: none;
}

.view.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-grid {
  display: grid;
  gap: 18px;
}

.auth-panel {
  margin-bottom: 18px;
}

.profile-panel {
  margin-bottom: 18px;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.auth-summary {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr);
  gap: 10px;
}

.auth-person,
.auth-note {
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--tint);
}

.auth-person span,
.auth-person small,
.auth-note {
  color: var(--muted);
  font-size: 13px;
}

.auth-person span,
.auth-person small {
  display: block;
}

.auth-person strong {
  display: block;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.auth-mock-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.profile-form {
  display: grid;
  gap: 14px;
}

.profile-form input[readonly] {
  color: var(--muted);
  background: var(--tint);
}

.device-panel {
  margin-bottom: 18px;
}

.device-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.device-stat {
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--tint);
}

.device-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.device-stat strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.helper-copy {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.device-form,
.device-activity-summary {
  display: grid;
  gap: 14px;
}

.activity-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--surface);
}

.activity-card span,
.activity-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.activity-card strong {
  display: block;
  margin: 5px 0;
  overflow-wrap: anywhere;
}

.user-grid {
  grid-template-columns: minmax(320px, 0.8fr) minmax(360px, 1.2fr);
}

.admin-grid {
  grid-template-columns: minmax(480px, 1.25fr) minmax(320px, 0.75fr);
}

.support-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
}

.support-side-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.assignment-matrix {
  display: block;
}

.workload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workload-row + .workload-row {
  margin-top: 14px;
}

.workload-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--cyan));
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.workload-info {
  flex: 1;
  min-width: 0;
}

.workload-info-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 5px;
}

.workload-info-top span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workload-info-top span:last-child {
  color: var(--muted);
  flex-shrink: 0;
}

.workload-bar-track {
  height: 7px;
  border-radius: 6px;
  background: var(--surface-strong);
  overflow: hidden;
}

.workload-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--brand), var(--cyan));
  transition: width 400ms ease;
}

.queue-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.queue-stat-card {
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-strong);
}

.queue-stat-card strong {
  display: block;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.queue-stat-card span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.panel,
.kpi-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(20px);
}

.panel {
  padding: 22px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill,
.priority-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 11px;
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.pill.soft {
  color: var(--success);
  background: var(--success-soft);
}

/* Tipografía de marca compartida por todos los tags/chips/badges de la
   app -- antes heredaban Inter genérico y quedaban en desacuerdo con
   títulos y botones, que ya usan Plus Jakarta Sans. */
.status-pill,
.sla-chip,
.ticket-stepper-stage,
.wizard-summary-chip,
.urgency-chip,
.kb-category-pill,
.tag-chip,
.problem-ticket-chip,
.mail-status-pill,
.nav-item-badge,
.profile-protected-badge,
.status-chip {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}

.ticket-form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea {
  resize: vertical;
}

/* La lista desplegable de un <select> nativo la dibuja el sistema
   operativo, no esta pagina — sin esto, quedaba siempre clara aunque
   el tema fuera oscuro, con texto casi ilegible. */
select option {
  color: var(--ink);
  background-color: var(--surface-solid);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.compact-select {
  width: auto;
  min-width: 140px;
  padding: 9px 34px 9px 10px;
}

.ticket-list {
  display: grid;
  gap: 12px;
}

.ticket-card {
  position: relative;
  z-index: 0;
  display: grid;
  gap: 12px;
  border: 1px solid transparent;
  border-left: 3px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  background: var(--surface-strong);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* .resolved usa opacity, que crea su propio contexto de apilamiento -- sin
   esto, el menú desplegable (status/prioridad/asignado) de una tarjeta
   podía quedar tapado por la tarjeta siguiente en vez de flotar por
   encima. Mientras un desplegable está abierto, esa tarjeta puntual pasa
   por encima de todas las demás. */
.ticket-card:has(.dd-trigger.open) {
  z-index: 30;
}

.ticket-card.priority-baja {
  border-left-color: var(--success);
}

.ticket-card.priority-media {
  border-left-color: var(--info);
}

.ticket-card.priority-alta {
  border-left-color: var(--warning);
}

.ticket-card.priority-critica {
  border-left-color: var(--danger);
}

.ticket-card.resolved {
  border-left-color: var(--line);
  background: var(--surface);
  opacity: 0.6;
}

.ticket-card:hover,
.ticket-card.selected {
  border-top-color: rgba(84, 87, 224, 0.45);
  border-right-color: rgba(84, 87, 224, 0.45);
  border-bottom-color: rgba(84, 87, 224, 0.45);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ticket-main {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.ticket-card-top,
.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ticket-id {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ticket-update-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.ticket-update-dot[hidden] {
  display: none;
}

.ticket-card.has-update {
  border-top-color: var(--brand-soft);
  border-right-color: var(--brand-soft);
  border-bottom-color: var(--brand-soft);
}

.ticket-card.has-update h3 {
  font-weight: 750;
}

.ticket-card h3 {
  margin: 0;
  font-size: 16.5px;
}

.ticket-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13.5px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

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

.admin-actions {
  display: none;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
}

.search-input {
  margin-bottom: 12px;
}

.bulk-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}

.bulk-actions-bar[hidden] {
  display: none;
}

.bulk-actions-bar span {
  font-size: 13px;
  font-weight: 750;
  color: var(--brand-strong);
}

.ticket-select {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--muted);
}

.ticket-select input {
  width: auto;
}

.dense .admin-actions {
  display: grid;
}

.admin-actions[hidden] {
  display: none;
}

.sla-overdue,
.ticket-meta span.sla-overdue {
  color: var(--danger);
  font-weight: 800;
}

.sla-soon,
.ticket-meta span.sla-soon {
  color: var(--warning);
  font-weight: 800;
}

.toggle-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.toggle-filter input {
  width: auto;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(5, 6, 15, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.history-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 56;
  width: min(440px, 92vw);
  height: 100vh;
  margin-top: 0;
  border-radius: 0;
  border-left: 1px solid var(--line);
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  overflow-y: auto;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: var(--shadow-glow);
}

.history-panel.open {
  transform: translateX(0);
  pointer-events: auto;
}

.drawer-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.drawer-close:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}

.drawer-close svg {
  width: 15px;
  height: 15px;
}

.fab-new-ticket {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  /* Solo en mobile (ver @media max-width: 640px) — en desktop el
     composer de "Crear ticket" ya está a la vista, este botón flotante
     era un duplicado del atajo del topbar (que se sacó). */
  display: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px var(--brand-soft);
  animation: fabPulse 2.6s ease-in-out infinite;
}

.fab-new-ticket svg {
  width: 24px;
  height: 24px;
}

.fab-new-ticket:hover {
  animation-play-state: paused;
  transform: scale(1.05);
}

.fab-new-ticket[hidden] {
  display: none;
}

@keyframes fabPulse {
  0%, 100% {
    box-shadow: 0 12px 28px var(--brand-soft);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 34px var(--brand-soft), 0 0 0 8px var(--brand-soft);
    transform: scale(1.04);
  }
}

.ticket-detail {
  min-height: 180px;
}

.empty-state {
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

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

.detail-stat {
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--tint);
}

.detail-stat span,
.timeline small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.detail-stat strong {
  display: block;
  margin-top: 5px;
}

/* Valores de los campos adicionales de un ticket (definidos por tipo de
   incidencia desde Administración), mostrados en el detalle del ticket. */
.ticket-custom-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}

.ticket-custom-field {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--tint);
}

.ticket-custom-field span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
}

.ticket-custom-field strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Campos adicionales dinámicos del wizard de creación (según el tipo de
   incidencia elegido) -- mismo espaciado que el resto del formulario. */
.wizard-custom-fields {
  display: grid;
  gap: 14px;
}

.wizard-custom-fields:empty {
  display: none;
}

.ticket-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
}

.sla-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-strong);
  color: var(--muted);
}

.sla-chip.overdue {
  background: var(--danger-soft);
  color: var(--danger);
}

.ticket-detail-meta {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.ticket-stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 4px 10px 0;
  margin-bottom: 20px;
}

.ticket-stepper-line {
  position: absolute;
  top: 14px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--surface-strong);
  z-index: 1;
}

.ticket-stepper-line-fill {
  height: 100%;
  background: var(--brand);
  transition: width 0.4s ease;
}

.ticket-stepper-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.ticket-stepper-dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.ticket-stepper-dot svg {
  width: 12px;
  height: 12px;
}

.ticket-stepper-stage.done .ticket-stepper-dot {
  background: var(--brand);
  color: #ffffff;
}

.ticket-stepper-stage.pending .ticket-stepper-dot {
  background: var(--surface-solid);
  border: 2px solid var(--line);
}

.ticket-stepper-stage span {
  font-size: 10px;
  font-weight: 600;
}

.ticket-stepper-stage.done span {
  color: var(--brand);
}

.ticket-stepper-stage.pending span {
  color: var(--muted2);
}

.timeline {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 12px;
  padding-left: 20px;
  border-left: 2px solid var(--line);
  margin-left: 4px;
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  position: absolute;
  top: 4px;
  left: -25px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  content: "";
}

.timeline-item-notification::before {
  background: var(--cyan);
}

.timeline strong {
  display: block;
  margin-bottom: 2px;
}

.comments-section {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.comments-section h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.comment {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
}

.comment.from-requester {
  align-self: flex-start;
  align-items: flex-start;
}

.comment.from-staff {
  align-self: flex-end;
  align-items: flex-end;
}

.comment-bubble {
  border-radius: 12px;
  padding: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

.comment.from-requester .comment-bubble {
  background: var(--surface-strong);
  border-top-left-radius: 0;
}

.comment.from-staff .comment-bubble {
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft);
  border-top-right-radius: 0;
}

.comment-bubble p {
  margin: 0;
}

.comment-bubble-image-link {
  display: block;
  margin-bottom: 8px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.comment-bubble-image-link:last-child {
  margin-bottom: 0;
}

.comment-pending-attachment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-pending-attachment-list[hidden] {
  display: none;
}

.comment-pending-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--surface-strong);
  font-size: 12px;
  color: var(--muted);
}

.comment-pending-attachment-remove {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin-left: auto;
}

.comment-pending-attachment-remove:hover {
  color: var(--danger);
}

.comment-head {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: var(--muted2);
}

.comment-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.comment-form textarea {
  min-height: 64px;
  border-color: transparent;
  background: var(--surface-solid);
}

.comment-form textarea:focus {
  border-color: var(--brand-soft);
}

.comment-attachment {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.comment-attachment-img {
  display: block;
  max-width: 220px;
  max-height: 220px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.comment-attachment span {
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Adjuntos que no son imagen (PDF, Word, Excel...) -- sin previsualización
   posible, se muestran como una tarjeta clickeable que descarga el
   archivo directo (el navegador arma la descarga solo, gracias al
   Content-Disposition que manda el servidor). */
.comment-file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  max-width: 240px;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 8px 10px;
  background: var(--surface-strong);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.comment-file-card:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.comment-file-card svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--brand-strong);
}

.comment-file-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.comment-file-card-info strong {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-file-card-info small {
  font-size: 11px;
  color: var(--muted);
}

.comment-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.comment-attach-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: color 160ms ease;
}

.comment-attach-link:hover {
  color: var(--brand-strong);
}

.comment-attach-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.comment-attach-link input[type="file"] {
  display: none;
}

.comment-send-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
}

.comment-send-button svg {
  width: 14px;
  height: 14px;
}

.kb-suggestions {
  margin: -6px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}

.kb-suggestions p {
  margin: 0 0 8px;
  color: var(--brand-strong);
  font-size: 12.5px;
  font-weight: 700;
}

.kb-suggestion-link {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.wizard-progress {
  margin-bottom: 6px;
}

.wizard-progress p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.wizard-progress-track {
  height: 6px;
  border-radius: 6px;
  background: var(--surface-strong);
  overflow: hidden;
}

.wizard-progress-bar {
  height: 100%;
  width: 33.33%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--brand), var(--cyan));
  transition: width 220ms ease;
}

.wizard-step {
  display: grid;
  gap: 14px;
  animation: fadeUp 0.35s ease;
}

.wizard-step[hidden] {
  display: none;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard-actions {
  display: flex;
  gap: 10px;
}

.wizard-actions .primary-button {
  flex: 1;
}

.dropzone-label {
  cursor: pointer;
}

.dropzone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--muted);
  transition: border-color 140ms ease, color 140ms ease;
}

.dropzone svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.dropzone-label:has(input:focus) .dropzone,
.dropzone-label:hover .dropzone {
  border-color: var(--brand);
  color: var(--brand-strong);
}

.dropzone-label input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  padding: 0;
}

.attachment-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.attachment-preview-list:not(:empty) {
  margin-top: -4px;
}

/* Armador de "campos adicionales" por tipo de incidencia (Administración
   > Incidencias & SLA > Nuevo/Editar tipo). */
.custom-fields-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--tint);
}

.custom-fields-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}

.custom-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-field-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  grid-template-areas: "label type remove" "options options remove" "required required remove";
  gap: 6px 8px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
}

.custom-field-row .custom-field-label {
  grid-area: label;
}

.custom-field-row .custom-field-type {
  grid-area: type;
}

.custom-field-row .custom-field-options {
  grid-area: options;
}

.custom-field-row .custom-field-required {
  grid-area: required;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.custom-field-row .custom-field-required input {
  width: auto;
}

.custom-field-remove {
  grid-area: remove;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  align-self: start;
}

.custom-field-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.attachment-preview-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-strong);
  font-size: 11.5px;
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-summary-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}

.wizard-summary-chip span {
  font-size: 12.5px;
  color: var(--muted);
}

.wizard-summary-chip strong {
  font-size: 12.5px;
  color: var(--brand-strong);
}

.wizard-summary-chip button {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.urgency-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.urgency-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.urgency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted2);
}

.urgency-chip[data-severity="Baja"] .urgency-dot {
  background: var(--info);
}

.urgency-chip[data-severity="Media"] .urgency-dot {
  background: var(--brand);
}

.urgency-chip[data-severity="Alta"] .urgency-dot {
  background: var(--warning);
}

.urgency-chip[data-severity="Crítica"] .urgency-dot {
  background: var(--danger);
}

.urgency-chip.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.wizard-sla-note {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  min-height: 1px;
}

.wizard-sla-note:empty {
  display: none;
}

.wizard-success {
  text-align: center;
  padding: 20px 8px;
}

.wizard-success-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}

.wizard-success-icon svg {
  width: 28px;
  height: 28px;
}

.wizard-success h3 {
  margin: 0 0 6px;
}

.wizard-success p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13.5px;
}

.dd-wrap {
  position: relative;
}

.dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease;
}

.dd-trigger:hover,
.dd-trigger.open {
  border-color: var(--brand);
}

.dd-trigger svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--muted);
}

.dd-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 20;
  min-width: 150px;
  border-radius: 11px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-glow);
  padding: 5px;
  animation: fadeUp 0.15s ease;
}

.dd-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.dd-option-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dd-trigger .dd-option-swatch {
  margin-right: 2px;
}

.dd-option.active {
  color: var(--brand-strong);
  background: var(--brand-soft);
}

/* El resaltado "activo" (opción ya guardada) usa un fondo tenue a
   propósito, para no confundirse con "hover" (la opción que estás por
   elegir) — por eso el hover necesita ser bien sólido y no un tinte
   casi invisible como antes, sobre todo en tema oscuro. */
.dd-option:hover,
.dd-option.active:hover {
  background: var(--brand);
  color: #ffffff;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
}

.profile-header-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-header-info h2 {
  margin: 0;
}

.profile-email {
  color: var(--muted);
  font-size: 13px;
}

.profile-role-badges {
  margin-top: 4px;
}

.profile-accent-block {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.field-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.accent-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.accent-swatch {
  width: 40px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.accent-swatch:hover {
  transform: scale(1.08);
}

.accent-swatch.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--surface);
}

.notif-pref-list {
  display: grid;
  gap: 8px;
}

.notif-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-strong);
}

.notif-pref-label {
  font-size: 13.5px;
  font-weight: 650;
  margin-bottom: 2px;
}

.notif-pref-hint {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0;
  background: var(--surface);
  transition: background 160ms ease, border-color 160ms ease;
}

.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 160ms ease, background 160ms ease;
}

.switch.on {
  background: var(--brand);
  border-color: var(--brand);
}

.switch.on .switch-knob {
  transform: translateX(18px);
  background: #ffffff;
}

.kb-suggestion-link:hover {
  border-color: var(--brand);
}

.kb-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.kb-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 320px;
  flex-shrink: 0;
}

.kb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kb-list-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 12px;
  padding: 14px 16px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.kb-list-item:hover:not(.selected) {
  background: var(--surface);
}

.kb-list-item.selected {
  background: var(--surface-strong);
  border-left-color: var(--brand);
}

.kb-list-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kb-list-item h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}

.kb-list-item p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kb-category-pill.lg {
  padding: 4px 10px;
  font-size: 11px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
}

.kb-reading-pane {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 40px;
}

.kb-reading-actions {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  gap: 8px;
}

.kb-reading-actions[hidden] {
  display: none;
}

.ghost-button.compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.ghost-button.compact svg {
  width: 15px;
  height: 15px;
}

.ghost-button.compact[hidden] {
  display: none;
}

.kb-detail {
  min-height: 160px;
  max-width: 900px;
}

.kb-reader-title {
  margin: 16px 0 12px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.kb-reader-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 13px;
}

.kb-reader-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted2);
}

.kb-reader-image {
  display: block;
  max-width: 100%;
  margin: 14px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.kb-reader-body p {
  margin: 0 0 16px;
}

.kb-reader-body h3,
.kb-reader-body h4 {
  margin: 24px 0 12px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 650;
  color: var(--ink);
}

.kb-reader-body h3 {
  font-size: 19px;
}

.kb-reader-body h4 {
  font-size: 16px;
}

.kb-reader-body ul,
.kb-reader-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.kb-reader-body li {
  margin-bottom: 8px;
}

.kb-reader-body strong {
  color: var(--ink);
  font-weight: 700;
}

.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
}

.problems-panel {
  margin-top: 0;
}

.problems-panel .form-row {
  margin-bottom: 14px;
  align-items: end;
}

.problems-panel .form-row label {
  flex: 1;
}

.problems-list {
  display: grid;
  gap: 12px;
}

.problem-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--surface);
}

.problem-card.resolved {
  opacity: 0.72;
}

.problem-card h3 {
  margin: 4px 0 0;
  font-size: 15px;
}

.problem-resolved-note {
  display: inline-block;
  margin-top: 4px;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
}

.problem-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.problem-status-select {
  width: auto;
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12.5px;
}

.problem-tickets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.problem-ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  padding: 6px 8px 6px 10px;
  background: var(--tint);
  color: var(--muted);
  font-size: 12px;
}

.problem-ticket-unlink {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.problem-ticket-unlink:hover {
  color: var(--danger);
}

.problem-link-ticket {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.problem-link-ticket select {
  width: auto;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.problem-link-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 13px;
}

.problem-link-banner label {
  flex: 1;
  min-width: 220px;
}

.csat-section {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--tint);
}

.csat-section p {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 650;
}

.csat-section.csat-done p {
  font-weight: 500;
}

.csat-form {
  display: grid;
  gap: 10px;
}

.csat-scale {
  display: flex;
  gap: 8px;
}

.csat-option {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.csat-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.csat-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kpi-card {
  padding: 18px;
}

.kpi-footnote {
  margin: -6px 0 18px;
  color: var(--muted2);
  font-size: 11.5px;
}

.kpi-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.kpi-card strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.kpi-card small {
  color: var(--muted);
}

.report-split-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.report-donut-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar-chart {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 96px 1fr 32px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--tint);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7274f2, var(--brand-strong));
}

.status-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.status-donut {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--surface-strong);
  transition: background 200ms ease;
}

.status-donut-center {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--surface-solid);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.status-donut-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.status-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
}

.status-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.report-range-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.report-range-bar .status-filter-chips {
  margin-bottom: 0;
}

.insight-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.insight {
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--tint);
  color: var(--muted);
}

.notification-center {
  display: grid;
  gap: 10px;
}

.mail-event {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--surface);
}

.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  padding-top: 20px;
  border-bottom: 1px solid var(--line);
}

.trend-bar {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.trend-bar-fill {
  flex: 1;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  transition: height 400ms ease;
}

.trend-bar-fill.created {
  background: var(--brand-soft);
}

.trend-bar-fill.resolved {
  background: var(--brand);
}

.trend-chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.trend-chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}

.trend-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trend-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.trend-legend-dot.created {
  background: var(--brand-soft);
}

.trend-legend-dot.resolved {
  background: var(--brand);
}

.top-agents-list {
  display: grid;
  gap: 12px;
}

.top-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.top-agent-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.top-agent-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 650;
}

.top-agent-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--cyan));
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.top-agent-count {
  text-align: right;
}

.top-agent-count strong {
  display: block;
  font-size: 14px;
  color: var(--success);
}

.top-agent-count span {
  font-size: 11px;
  color: var(--muted);
}

.priority-breakdown {
  display: grid;
  gap: 16px;
}

.priority-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12.5px;
}

.priority-row-top span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.priority-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.report-activity-list {
  display: flex;
  flex-direction: column;
}

.report-activity-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.report-activity-item:last-child {
  border-bottom: none;
}

.report-activity-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

.report-activity-body strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
}

.report-activity-body span {
  font-size: 11.5px;
  color: var(--muted2);
}

.mail-event strong,
.mail-event span,
.mail-event small {
  display: block;
}

.mail-event span,
.mail-event small {
  color: var(--muted);
  font-size: 12px;
}

.mail-event {
  display: grid;
  gap: 7px;
}

.mail-event-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.mail-event p {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
}

.mail-status-pill {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.mail-status-pill.success {
  background: var(--success-soft);
  color: var(--success);
}

.mail-status-pill.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.users-admin-panel {
  margin-top: 18px;
}

.sla-admin-panel {
  margin-top: 18px;
}

.user-form,
.user-directory,
.sla-form,
.incident-types-list,
.sla-rules-matrix {
  display: grid;
  gap: 12px;
}

.sla-form h3 {
  margin: 0;
}

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

.user-kpi {
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--tint);
}

.user-kpi span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.user-kpi strong {
  display: block;
  margin-top: 5px;
  font-size: 23px;
}

.assets-admin-panel {
  margin-top: 18px;
}

.automation-admin-panel {
  margin-top: 18px;
}

.automation-rules-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.automation-rule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-strong);
}

.automation-rule-row.inactive {
  opacity: 0.55;
}

.automation-rule-row strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13.5px;
}

.automation-rule-row span {
  color: var(--muted);
  font-size: 12px;
}

.notifications-admin-panel {
  margin-top: 18px;
}

.mail-settings-card {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.mail-style-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mail-style-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.mail-style-swatch.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}

.mail-style-preview {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mail-templates-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.mail-template-card {
  border-radius: 12px;
  background: var(--surface-strong);
  overflow: hidden;
}

/* Abierta, la tarjeta no debe recortar el menu del dropdown de "Estilo
   propio", que se posiciona absoluto y puede sobresalir del borde. */
.mail-template-card.open {
  overflow: visible;
}

.mail-template-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.mail-template-card-toggle-text {
  display: grid;
  gap: 3px;
}

.mail-template-card-toggle-text strong {
  font-size: 14px;
}

.mail-template-card-toggle-text small {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.mail-template-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 160ms ease;
}

.mail-template-card.open .mail-template-chevron {
  transform: rotate(180deg);
}

.mail-template-card-body {
  display: none;
  gap: 10px;
  padding: 0 16px 16px;
}

.mail-template-card.open .mail-template-card-body {
  display: grid;
}

.mail-template-card textarea {
  min-height: 70px;
  resize: vertical;
}

.mail-template-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  color: var(--muted);
  font-size: 11px;
}

.mail-template-vars code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--tint);
}

.mail-template-overrides {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.mail-template-override-field {
  display: grid;
  gap: 4px;
  flex: 1 1 160px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.mail-template-override-field input {
  padding: 7px 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

.mail-template-override-field .dd-wrap {
  width: 100%;
}

.mail-template-override-field .dd-trigger {
  width: 100%;
  justify-content: space-between;
  padding: 7px 9px;
  font-size: 12.5px;
  font-weight: 500;
}

.mail-template-actions {
  display: flex;
  gap: 8px;
}

.mail-templates-heading {
  margin-top: 22px;
}

.section-heading.compact {
  margin-bottom: 10px;
}

.section-heading.compact h3 {
  margin: 0;
  font-size: 15px;
}

.helper-copy.compact {
  margin-top: 6px;
}

/* Tres clases a proposito: ".modal-box.wide" e ".mail-preview-box" tenian
   la misma especificidad (0,2,0) y el orden del archivo hacia ganar a
   "wide", asi que este modal quedaba atascado en 460px en vez de los
   560px pensados. Con tres clases (0,3,0) gana siempre, sin depender
   del orden de las reglas. */
.modal-box.wide.mail-preview-box {
  width: min(560px, 92vw);
  max-height: 90vh;
}

.mail-preview-frame {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 12px;
  background: #ffffff;
}

.assets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.asset-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-strong);
}

.asset-row.inactive {
  opacity: 0.6;
}

.asset-row-open {
  text-align: left;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.asset-row-open strong {
  display: block;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-row-open span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-detail-grid {
  margin-top: 16px;
  grid-template-columns: 1fr 1fr;
}

.asset-detail-notes {
  margin-top: 4px;
}

.asset-detail-edit-button {
  margin-top: 4px;
}

.user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--surface-strong);
}

.user-row.inactive {
  opacity: 0.6;
}

.user-row-open {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.user-row-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--cyan));
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}

.user-row-avatar.large {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

/* El nombre/mail viven en un <span> sin clase (segundo hijo de
   .user-row-open, un flex item de por si) -- sin min-width:0 no se
   achica y termina superponiendose con el selector de rol en pantallas
   angostas, en vez de truncarse con puntos suspensivos. */
.user-row-open > span:last-child {
  min-width: 0;
  overflow: hidden;
}

.user-row-open strong {
  display: block;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row-open span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.user-detail-header-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-detail-email {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}

.user-info-grid {
  margin-top: 16px;
}

.user-detail-catalog-toggle {
  margin-top: 14px;
}

.user-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}

.user-detail-grid h4 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
}

.user-detail-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
}

.user-detail-row strong {
  display: block;
}

.user-detail-row span,
.user-detail-row small {
  display: block;
  color: var(--muted);
}

.incident-types-list {
  margin-top: 18px;
}

.sla-rules-matrix {
  margin-top: 12px;
}

.incident-type-row,
.sla-rule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  padding: 11px 13px;
  background: var(--surface-strong);
  font-size: 13px;
}

.incident-type-row.inactive {
  opacity: 0.6;
}

.incident-type-row-title {
  font-weight: 600;
  min-width: 0;
}

.incident-type-row-title small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  margin-top: 2px;
}

.incident-type-row-controls,
.sla-rule-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.empty-state.compact {
  min-height: 82px;
  padding: 16px;
}

.priority-chip.priority-baja {
  color: var(--success);
  background: var(--success-soft);
}

.priority-chip.priority-media {
  color: var(--info);
  background: var(--info-soft);
}

.priority-chip.priority-alta {
  color: var(--warning);
  background: var(--warning-soft);
}

.priority-chip.priority-critica {
  color: var(--danger);
  background: var(--danger-soft);
}

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

  .sidebar {
    position: static;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    padding: 18px;
  }

  .sidebar-collapse-toggle {
    display: none;
  }

  .nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .nav-item {
    width: auto;
  }

  .sidebar-summary {
    margin: 0;
    min-width: 140px;
  }

  .sidebar-signout {
    margin-top: 0;
  }

  .user-grid,
  .admin-grid,
  .support-grid,
  .report-split-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1300px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .admin-grid,
  .support-grid,
  .report-split-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 18px;
  }

  .sidebar,
  .topbar,
  .section-heading,
  .topbar-actions,
  .auth-layout,
  .auth-actions,
  .form-row,
  .filters {
    align-items: stretch;
    flex-direction: column;
  }

  .sidebar {
    display: flex;
  }

  .nav-list {
    grid-auto-flow: row;
  }

  .topbar {
    display: grid;
  }

  /* .kb-layout es flex con un sidebar de ancho fijo (320px) que nunca se
     achicaba -- en mobile quedaba un segundo panel apretado/desbordado
     al costado en vez de apilarse. */
  .kb-layout {
    flex-direction: column;
  }

  .kb-sidebar {
    width: 100%;
  }

  .kpi-grid,
  .detail-grid,
  .auth-summary,
  .device-summary,
  .user-kpis,
  .user-detail-grid {
    grid-template-columns: 1fr;
  }

  .incident-type-row,
  .sla-rule-row,
  .asset-row,
  .user-row {
    flex-wrap: wrap;
  }

  .admin-actions {
    grid-template-columns: 1fr;
  }

  .compact-select {
    width: 100%;
  }
}

.nav-item-badge {
  display: none;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.admin-tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.admin-tab:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.admin-tab.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.role-perms-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  font-size: 12.5px;
}

/* Perfiles: mismo esquema lista + detalle que la Base de conocimiento
   (.kb-layout) en vez de una tabla con una columna por perfil -- la lista
   de la izquierda escala sin límite (scrollea), sin volverse ilegible
   apenas hay más de 4-5 perfiles. Renombrar/borrar son acciones del panel
   de detalle, no botones sueltos por fila, para que la lista quede pareja. */
.profiles-layout {
  align-items: stretch;
}

.profiles-sidebar {
  width: 260px;
}

.profiles-list {
  max-height: 560px;
  overflow-y: auto;
  padding-right: 2px;
}

.profile-list-item {
  width: 100%;
}

.profile-list-item .kb-list-item-top {
  justify-content: space-between;
}

.profile-protected-badge {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

.profile-protected-badge svg {
  width: 12px;
  height: 12px;
}

.profiles-reading-pane {
  padding: 28px 32px;
}

.profiles-reading-pane .empty-state {
  min-height: 300px;
}

.profile-detail-header h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.profile-detail-header .helper-copy {
  margin: 0 0 22px;
}

.profile-rename-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.profile-rename-input {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 650;
  padding: 6px 10px;
}

.ghost-button.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.capability-table {
  display: flex;
  flex-direction: column;
}

.capability-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

.capability-row:last-child {
  border-bottom: none;
}

.capability-row-label {
  font-size: 13.5px;
  color: var(--ink);
}

.capability-row.disabled .capability-row-label {
  color: var(--muted);
}

.capability-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.status-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.status-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.status-chip:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.status-chip.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

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

  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 40;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: var(--surface-strong);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
    border-radius: 0;
  }

  .sidebar::before,
  .sidebar::after {
    display: none;
  }

  .sidebar > .brand,
  .sidebar-summary {
    display: none;
  }

  .nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    flex: 1;
    gap: 0;
  }

  .nav-item {
    position: relative;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    width: auto;
  }

  /* Mismo tratamiento que un nav-item mas (solo icono, sin texto) para
     que no le quede sin lugar y termine cayendo debajo de la barra. */
  .sidebar-signout {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 10px;
  }

  .sidebar-signout span {
    display: none;
  }

  .nav-item.active {
    box-shadow: none;
    background: var(--brand-soft);
  }

  .nav-text {
    display: none;
  }

  .nav-item-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    display: grid;
    place-items: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--danger);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
  }

  .nav-item-badge[hidden] {
    display: none;
  }

  .main {
    padding-bottom: 92px;
  }

  .fab-new-ticket {
    display: grid;
    place-items: center;
    bottom: 84px;
  }

  .history-panel {
    width: 100%;
  }
}