@import url('/design-tokens.css');
* {
  margin:0;
  padding:0
}
body {
  background:var(--bg-dark);
  height:100vh;
  height:100dvh;
  overflow:hidden;
  font-size:14px;
  line-height:1.5
}
.app-container {
  display:flex;
  height:100%;
  isolation:isolate
}
.sidebar {
  width:232px;
  flex-shrink:0;
  background:var(--bg-sidebar);
  color:#f8fafc;
  display:flex;
  flex-direction:column;
  padding:28px 16px 16px;
  z-index:60
}
.brand {
  padding:0 12px 32px;
  display:flex;
  align-items:center;
  gap:12px
}
.brand-mark {
  width:36px;
  height:36px;
  background:var(--accent);
  color:#171c26;
  display:grid;
  place-items:center;
  border-radius:10px
}
.brand h1 {
  font-size:16px;
  font-weight:650;
  letter-spacing:-.4px
}
.brand small {
  display:block;
  font-size:11px;
  color:#aab6c9;
  letter-spacing:1.6px;
  margin-top:2px
}
.nav-label {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:#aab6c9;
  padding:0 16px 12px
}
.nav-links {
  list-style:none;
  flex:1
}
.nav-links li {
  margin-bottom:6px
}
.nav-links a {
  min-height:46px;
  padding:12px 14px;
  color:#bec7d6;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:7px;
  position:relative;
  font-size:13px;
  font-weight:500;
  transition:background .15s,color .15s
}
.nav-links a:hover {
  background:#252d3b;
  color:white
}
.nav-links a.active {
  color:white;
  background:#2c3545
}
.nav-links a.active::before {
  content:'';
  position:absolute;
  left:0;
  width:3px;
  height:18px;
  border-radius:3px;
  background:var(--accent)
}
.nav-links a.active .icon {
  color:var(--accent)
}
.user-info {
  padding:16px 12px 4px;
  border-top:1px solid #364050;
  color:#aab6c9;
  font-size:12px
}
.user-info span {
  display:block;
  color:#eef2f8;
  overflow-wrap:anywhere
}
.sidebar .user-info input.agent-input[type="text"] {
  min-height:38px;
  background:#252d3b;
  color:white;
  border:1px solid #526174;
  padding:8px 10px;
  margin-top:6px;
  font-size:13px
}
.content {
  flex:1;
  min-width:0;
  overflow-y:auto;
  scrollbar-gutter:stable
}
.workspace-bar {
  height:64px;
  padding:0 40px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:rgba(255,255,255,.9)
}
.workspace-path {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px;
  color:var(--text-muted)
}
.workspace-path strong {
  color:var(--text-main);
  font-weight:500
}
.workspace-note {
  font-size:11px;
  color:var(--text-muted);
  letter-spacing:.4px
}
.mobile-menu {
  display:none
}
.sidebar-backdrop {
  display:none
}
.view {
  display:none;
  padding:36px 40px 48px;
  max-width:1520px;
  margin:0 auto
}
.active-view {
  display:block;
  animation:enter .18s ease-out
}
.view>header {
  margin-bottom:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.eyebrow {
  display:block;
  font-size:10px;
  font-weight:650;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px
}
h2 {
  font-size:32px;
  line-height:1.2;
  font-weight:650;
  letter-spacing:-1.15px
}
h3 {
  font-size:20px;
  font-weight:600;
  letter-spacing:-.4px
}
h4 {
  font-size:16px;
  font-weight:600
}
.subtitle {
  color:var(--text-muted);
  font-size:14px;
  margin-top:8px;
  max-width:65ch
}
.highlight {
  color:var(--primary);
  font-weight:600
}
button {
  min-height:44px;
  padding:10px 16px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:13px;
  font-weight:550;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  transition:background .15s,border-color .15s,color .15s
}
button:active:not(:disabled) {
  filter:brightness(.95)
}
.btn-primary {
  background:var(--primary);
  color:white
}
.btn-primary:hover:not(:disabled) {
  background:var(--primary-hover)
}
.btn-secondary,.btn-outline,.btn-cancel {
  background:white;
  color:var(--text-main);
  border-color:var(--border)
}
.btn-secondary:hover,.btn-outline:hover,.btn-cancel:hover {
  background:var(--surface-soft);
  border-color:var(--control-border)
}
.btn-success {
  background:var(--success);
  color:white
}
.btn-warning {
  background:#fff7e6;
  color:var(--warning);
  border-color:#d6b889
}
.btn-link {
  background:transparent;
  color:var(--primary);
  padding:8px 0;
  justify-content:flex-start;
  text-decoration:underline
}
.btn-enfocar-asistente {
  background:var(--primary-soft);
  color:var(--primary);
  white-space:nowrap
}
.btn-enfocar-asistente:hover {
  background:#dce6ff
}
.btn-enfocar-asistente svg {
  width:16px;
  height:16px;
  fill:currentColor
}
.btn-icon {
  padding:10px;
  min-width:44px;
  background:transparent;
  color:var(--text-main);
  border:1px solid var(--border)
}
input:not([type=radio]):not([type=checkbox]):not([type=hidden]),select,textarea {
  width:100%;
  min-height:44px;
  border:1px solid var(--control-border);
  border-radius:6px;
  padding:10px 12px;
  background:#fff;
  color:var(--text-main);
  font-size:14px;
  max-width:100%;
  transition:border-color .15s
}
input::placeholder,textarea::placeholder {
  color:#657287
}
textarea {
  resize:vertical;
  line-height:1.6
}
input[type=file] {
  font-size:13px!important;
  padding:8px!important
}
input[type=file]::file-selector-button {
  padding:7px 10px;
  border:0;
  border-radius:4px;
  background:var(--surface-soft);
  color:var(--text-main);
  margin-right:10px;
  cursor:pointer
}
input[type=radio],input[type=checkbox] {
  accent-color:var(--primary);
  width:18px;
  height:18px
}
.form-group {
  margin-bottom:20px
}
.form-group label {
  display:block;
  font-size:13px;
  font-weight:550;
  margin-bottom:7px;
  color:var(--text-main)
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.form-help {
  font-size:12px;
  color:var(--text-muted);
  margin-top:6px
}
.filters {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:16px 0 20px;
  margin-bottom:0;
  border-top:1px solid var(--border)
}
.filters label {
  font-size:12px;
  font-weight:600
}
.filters select {
  width:auto;
  min-width:180px
}
.filters input {
  flex:1;
  min-width:180px
}
.filters button {
  flex-shrink:0
}
.tickets-list {
  display:flex;
  flex-direction:column;
  gap:12px
}
.ticket-card {
  position:relative;
  background:white;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  min-width:0
}
.ticket-general {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:24px;
  row-gap:12px
}
.ticket-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  grid-column:1 / -1
}
.ticket-id {
  font-family:ui-monospace,Consolas,monospace;
  font-size:12px;
  color:var(--text-muted);
  letter-spacing:.4px
}
.ticket-title {
  font-size:16px;
  font-weight:600;
  letter-spacing:-.2px;
  overflow-wrap:anywhere;
  margin-top:4px
}
.ticket-heading {
  min-width:0
}
.ticket-header-status {
  display:flex;
  align-items:center;
  gap:8px;
  position: relative;
}
.ticket-status-badge {
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  padding:5px 9px;
  border-radius:4px;
  background:var(--primary-soft);
  color:var(--info);
  max-width:100%;
  overflow-wrap:anywhere
}
.status-closed {
  background:#ecfdf3;
  color:var(--success)
}
.status-open {
  background:#fff7e6;
  color:var(--warning)
}
.status-derived {
  background:#eff8ff;
  color:var(--info)
}
.ticket-meta {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--text-muted);
  font-size:12px
}
.ticket-chip {
  display:inline-flex;
  gap:6px;
  align-items:center;
  overflow-wrap:anywhere
}
.ticket-chip svg {
  width:14px;
  height:14px;
  fill:currentColor
}
.ticket-summary {
  grid-column:1;
  font-size:13px;
  color:var(--text-muted);
  overflow-wrap:anywhere
}
.ticket-summary strong {
  font-weight:500
}
.ticket-row-actions {
  grid-column:2;
  grid-row:2 / 4;
  display:flex;
  gap:8px;
  align-items:center;
  align-self:center
}
.ticket-metrics {
  grid-column:1 / -1;
  font-size:12px;
  color:var(--text-muted)
}
.ticket-menu {
  position:absolute;
  top: 16px;
  right: 16px;
}
.btn-ticket-menu {
  width:44px;
  min-height:44px;
  padding:4px;
  background:transparent;
  color:var(--text-muted);
  font-size:22px
}
.btn-ticket-menu:hover {
  background:var(--surface-soft)
}
.ticket-dropdown {
  display:none;
  position:absolute;
  right:0;
  top:100%;
  width:200px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-float);
  border-radius:8px;
  padding:4px;
  z-index:10
}
.ticket-dropdown.show {
  display:block;
  animation:enter .12s
}
.ticket-dropdown-item {
  width:100%;
  justify-content:flex-start;
  text-align:left;
  background:white;
  color:var(--text-main)
}
.ticket-dropdown-item:hover {
  background:var(--surface-soft)
}
#ticket-detail-content {
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important
}
.detail-overview {
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  margin-bottom:28px
}
.detail-meta {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin-top:20px
}
.detail-meta strong {
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--text-muted);
  margin-bottom:5px
}
.detail-meta div {
  overflow-wrap:anywhere
}
.timeline-title {
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:12px
}
.timeline-title small {
  font-size:12px;
  color:var(--text-muted);
  font-weight:400;
  letter-spacing:0
}
.bitacora-list {
  border-left:1px solid var(--border);
  margin-left:7px;
  padding-left:25px
}
.bitacora-item {
  position:relative;
  background:white;
  border:1px solid var(--border);
  border-radius:8px;
  padding:20px;
  margin-bottom:16px;
  overflow-wrap:anywhere
}
.bitacora-item::before {
  content:'';
  position:absolute;
  left:-31px;
  top:25px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px var(--bg-dark)
}
.bitacora-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px
}
.bitacora-author {
  font-size:14px;
  font-weight:600
}
.bitacora-time {
  font-size:12px;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums
}
.bitacora-text {
  font-size:14px;
  line-height:1.7
}
.active-ticket-panel {
  padding:24px;
  background:white;
  border:1px solid var(--border);
  border-radius:12px
}
.ticket-actions h4 {
  margin:16px 0
}
.action-buttons,#log-form {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
#log-form {
  margin-bottom:16px
}
#log-text {
  flex:1
}
#log-mins {
  width:120px
}
.accordion-toggle {
  background:transparent;
  color:var(--primary)
}
.accordion-arrow.open {
  transform:rotate(180deg)
}
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
  animation:fade .18s
}
.modal {
  background:white;
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  width:640px;
  max-width:100%;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  box-shadow:var(--shadow-dialog);
  animation:dialog-in .2s
}
.modal h3 {
  font-size:23px;
  line-height:1.3;
  margin-bottom:24px;
  padding-right:24px
}
.modal-actions {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px;
  border-top:1px solid var(--border);
  padding-top:20px;
  margin-top:24px
}
.modal textarea {
  padding:12px!important;
  border:1px solid var(--control-border)!important;
  border-radius:6px!important
}
.modal-close {
  float:right;
  margin:-10px -10px 0 10px
}
.team-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.team-card {
  display:flex!important;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
  cursor:pointer;
  overflow-wrap:anywhere
}
.team-card:has(input:checked) {
  background:var(--primary-soft);
  border-color:var(--primary)
}
.team-card input {
  flex-shrink:0
}
.team-card span {
  font-size:12px
}
.ai-extract-box {
  background:#f2effb;
  border:1px solid #ddd4f4;
  border-radius:8px;
  padding:16px
}
.ai-label {
  color:#5937b0!important
}
.ai-desc {
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:12px
}
.ai-extract-box>div {
  flex-wrap:wrap
}
#view-asistente-ia {
  height:calc(100dvh - 64px);
  display:none;
  flex-direction:column;
  padding-bottom:24px
}
#view-asistente-ia.active-view {
  display:flex!important
}
#view-asistente-ia>header {
  flex-shrink:0
}
.asistente-layout {
  display:flex;
  gap:20px;
  flex:1;
  min-height:0
}
.asistente-context-panel {
  order:2;
  width:240px;
  flex-shrink:0;
  align-self:flex-start;
  padding:20px;
  background:white;
  border:1px solid var(--border);
  border-radius:10px
}
.context-label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-muted);
  margin-bottom:18px
}
.context-ticket-info {
  font-size:13px;
  line-height:1.7;
  overflow-wrap:anywhere
}
.no-ticket-msg {
  color:var(--text-muted)
}
.context-ticket-row {
  display:flex;
  flex-direction:column;
  gap:10px
}
.ctx-id {
  font-family:ui-monospace,Consolas,monospace;
  font-weight:600
}
.ctx-detail {
  color:var(--text-muted)
}
.context-toggle {
  display:none
}
.asistente-chat-container {
  flex:1;
  min-width:0;
  min-height:0;
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.asistente-history {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:24px
}
.asistente-msg {
  max-width:90%;
  overflow-wrap:anywhere
}
.asistente-msg.user {
  align-self:flex-end;
  background:var(--primary-soft);
  border-radius:12px 12px 3px 12px
}
.asistente-msg.system,.asistente-msg.loading {
  align-self:flex-start
}
.asistente-msg-content {
  font-size:14px;
  line-height:1.8;
  padding:12px 16px;
  max-width:72ch
}
.asistente-msg.system .asistente-msg-content {
  padding-left:0
}
.asistente-msg.system::before {
  content:'AGENTE DE SOPORTE';
  display:block;
  color:var(--violet);
  font-weight:600;
  font-size:10px;
  letter-spacing:1px
}
.asistente-msg.loading {
  color:var(--text-muted)
}
.asistente-msg.loading .asistente-msg-content::before {
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--violet);
  border-radius:50%;
  margin-right:8px;
  animation:pulse 1.2s ease-in-out infinite
}
.assistant-welcome {
  margin:auto 0;
  padding:24px 8px;
  max-width:540px
}
.assistant-welcome::before {
  display:none!important
}
.assistant-symbol {
  display:inline-flex;
  width:64px;
  height:64px;
  color:var(--violet);
  margin-bottom:24px
}
.assistant-welcome h3 {
  font-size:36px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:-1.2px;
  max-width:400px
}
.assistant-welcome p {
  color:var(--text-muted);
  line-height:1.8;
  margin-top:16px;
  max-width:48ch
}
.welcome-topics {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:24px
}
.welcome-topics span {
  padding:6px 10px;
  font-size:11px;
  background:var(--bg-dark);
  border:1px solid var(--border);
  border-radius:4px
}
.asistente-input-area {
  padding:16px 20px;
  border-top:1px solid var(--border);
  background:white
}
.asistente-input-area form {
  display:flex;
  gap:10px;
  align-items:center
}
.asistente-input-area input[type=text] {
  flex:1;
  min-width:0;
  background:var(--bg-dark);
  border-color:var(--border)
}
.attach-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  flex-shrink:0
}
.composer-note {
  font-size:10px;
  color:var(--text-muted);
  margin-top:9px
}
.attachment-preview {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.attachment-tile {
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-soft);
  font-size:12px
}
.ki-source-box,.ki-source-card,.suggestion-box {
  padding:16px;
  margin-top:16px;
  background:#f5f3fc;
  border:1px solid #ded6f2;
  border-radius:8px;
  font-size:13px
}
.ki-source-item {
  margin-top:8px;
  line-height:1.6
}
.suggestion-box-header,.ki-source-card-title {
  font-size:11px;
  font-weight:600;
  color:var(--violet);
  margin-bottom:8px
}
.suggestion-box-content {
  line-height:1.7
}
.chat-interface {
  display:flex;
  flex-direction:column;
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  height:60vh;
  min-height:550px;
  margin-bottom:24px
}
.chat-history {
  flex:1;
  overflow:auto;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px
}
.message {
  max-width:85%;
  padding:12px 16px;
  border-radius:8px;
  overflow-wrap:anywhere
}
.message.user {
  align-self:flex-end;
  background:var(--primary-soft)
}
.message.system {
  background:var(--bg-dark)
}
.chat-input-area {
  padding:16px;
  border-top:1px solid var(--border)
}
#chat-form {
  display:flex;
  gap:12px
}
#ki-stats-grid {
  display:flex!important;
  flex-wrap:wrap;
  gap:0!important;
  padding:20px 0;
  margin-bottom:24px!important;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}
.ki-stat-card {
  min-width:110px;
  padding:0 24px;
  border-right:1px solid var(--border);
  margin:8px 0
}
.ki-stat-card:first-child {
  padding-left:0
}
.ki-stat-card:last-child {
  border-right:0
}
.ki-stat-num {
  font-size:28px;
  font-weight:600;
  letter-spacing:-.8px;
  font-variant-numeric:tabular-nums
}
.ki-stat-label {
  font-size:11px;
  color:var(--text-muted);
  margin-top:4px
}
#view-knowledge-mgmt .filters {
  border-top:0;
  padding-top:0
}
#ki-list {
  background:white;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden
}
.ki-item-card {
  padding:24px;
  border-bottom:1px solid var(--border)
}
.ki-item-card:last-child {
  border-bottom:0
}
.ki-item-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:12px
}
.ki-item-title {
  font-size:17px;
  font-weight:600;
  letter-spacing:-.3px;
  overflow-wrap:anywhere
}
.ki-item-actions {
  display:flex;
  gap:4px;
  flex-shrink:0
}
.ki-item-actions button {
  background:transparent;
  padding:8px 10px;
  font-size:12px;
  color:var(--text-muted)
}
.ki-item-actions .btn-view {
  color:var(--primary)
}
.ki-item-actions .btn-del {
  color:var(--danger)
}
.ki-item-actions button:hover {
  background:var(--bg-dark)
}
.ki-item-meta {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  font-size:12px;
  margin-bottom:10px
}
.ki-item-tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px
}
.ki-tag {
  font-size:11px;
  color:var(--text-muted);
  padding:3px 7px;
  background:var(--bg-dark);
  border-radius:4px
}
.ki-badge-tipo,.ki-badge-cat,[class^=ki-badge-estado-] {
  display:inline-flex;
  font-size:11px;
  font-weight:500;
  padding:4px 7px;
  border-radius:4px;
  background:var(--surface-soft);
  color:var(--text-muted)
}
.ki-badge-tipo {
  background:var(--primary-soft);
  color:var(--primary)
}
.ki-badge-estado-publicado {
  background:#ecfdf3;
  color:var(--success)
}
.ki-badge-estado-pendiente,.ki-badge-estado-pendiente_revision {
  background:#fff7e6;
  color:var(--warning)
}
.ki-badge-estado-error {
  background:#fef3f2;
  color:var(--danger)
}
.ki-badge-estado-procesando {
  background:#f2effb;
  color:var(--violet)
}
.ki-type-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:20px
}
.ki-type-btn {
  flex-direction:column;
  gap:12px;
  background:white;
  border-color:var(--border);
  padding:20px 12px
}
.ki-type-btn:hover {
  background:var(--primary-soft);
  border-color:var(--primary)
}
.ki-type-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:6px;
  background:var(--surface-soft);
  font-size:16px
}
.ki-processing-bar {
  background:#f2effb;
  color:var(--violet);
  padding:14px;
  border-radius:6px;
  margin-bottom:16px
}
.ki-empty,.empty-state {
  padding:56px 24px;
  text-align:center;
  color:var(--text-muted)
}
.ki-empty strong,.empty-state strong {
  display:block;
  font-size:18px;
  color:var(--text-main);
  margin-bottom:8px
}
.empty-state .icon {
  width:36px;
  height:36px;
  margin-bottom:16px
}
.knowledge-article {
  font-size:15px;
  line-height:1.9;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--border)
}
#modal-ki-detail .modal {
  width:800px!important
}
.loading {
  padding:32px;
  color:var(--text-muted);
  font-size:13px;
  min-height:120px
}
.loading::after {
  content:'';
  display:block;
  width:min(320px,100%);
  height:8px;
  margin-top:16px;
  background:var(--surface-soft);
  border-radius:4px;
  animation:pulse 1.5s ease-in-out infinite
}
.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}
.metric {
  padding:24px;
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  min-width:0
}
.metric-label {
  display:block;
  color:var(--text-muted);
  font-size:12px
}
.metric-value {
  display:block;
  font-size:38px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;
  margin:20px 0 10px;
  overflow-wrap:anywhere
}
.metric-value small {
  font-size:15px;
  letter-spacing:0;
  font-weight:400
}
.metric-note {
  display:block;
  font-size:11px;
  color:var(--text-muted)
}
.metric-hero {
  grid-column:span 2;
  background:var(--bg-sidebar);
  color:white;
  border-color:var(--bg-sidebar);
  position:relative;
  overflow:hidden
}
.metric-hero .metric-label,.metric-hero .metric-note {
  color:#bdc9db
}
.metric-hero .metric-value {
  font-size:64px;
  color:var(--accent);
  position:relative;
  z-index:1
}
.metric-hero::after {
  content:'';
  position:absolute;
  width:150px;
  height:150px;
  border:1px solid #4b576b;
  border-radius:32px;
  transform:rotate(35deg);
  right:-20px;
  top:48px;
  box-shadow:0 0 0 24px #222a37,0 0 0 25px #354053
}
.metric-satisfaction {
  background:#eff3e4
}
.distribution {
  grid-column:span 2;
  grid-row:span 2
}
.distribution h3 {
  font-size:18px;
  margin-bottom:6px
}
.distribution>p {
  color:var(--text-muted);
  font-size:12px;
  margin-bottom:24px
}
.distribution-row {
  margin:20px 0
}
.distribution-label {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  margin-bottom:8px;
  overflow-wrap:anywhere
}
.distribution-label strong {
  font-variant-numeric:tabular-nums
}
.distribution-track {
  height:7px;
  border-radius:4px;
  background:var(--surface-soft);
  overflow:hidden
}
.distribution-bar {
  height:100%;
  background:var(--primary);
  border-radius:4px;
  transform-origin:left;
  animation:bar-in .3s ease-out
}
.metric-escalated {
  grid-column:span 2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}
.metric-escalated .metric-value {
  margin:0
}
.toast-region {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:min(400px,calc(100vw - 32px))
}
.toast {
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid var(--border);
  border-left:3px solid var(--primary);
  border-radius:8px;
  background:white;
  padding:16px;
  box-shadow:var(--shadow-float);
  animation:enter .18s
}
.toast p {
  flex:1;
  white-space:pre-line;
  font-size:13px;
  overflow-wrap:anywhere
}
.toast button {
  min-height:32px;
  width:32px;
  padding:4px;
  background:transparent
}
.toast-error {
  border-left-color:var(--danger)
}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  padding:12px;
  background:white;
  z-index:250
}
.skip-link:focus {
  top:16px
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(4px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes fade {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
@keyframes dialog-in {
  from {
    opacity:0;
    transform:scale(.98)
  }
  to {
    opacity:1;
    transform:scale(1)
  }
}
@keyframes pulse {
  50% {
    opacity:.45
  }
}
@keyframes bar-in {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }
}
@media(max-width:1279px) {
  .sidebar {
    width:208px;
    padding-inline:12px
  }
  .view {
    padding:28px 24px
  }
  .workspace-bar {
    padding-inline:24px
  }
  .asistente-context-panel {
    width:200px
  }
  .ticket-row-actions {
    grid-column:1 / -1;
    grid-row:auto;
    justify-content:flex-end
  }
  .ticket-summary {
    grid-column:1 / -1
  }
  .detail-meta {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .metric {
    padding:20px
  }
  .metric-value {
    font-size:32px
  }
}
@media(max-width:1023px) {
  .sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:260px;
    transform:translateX(-100%);
    transition:transform .2s;
    visibility:hidden
  }
  .sidebar-open .sidebar {
    transform:translateX(0);
    visibility:visible
  }
  .sidebar-open .sidebar-backdrop {
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.5);
    border-radius:0;
    z-index:50
  }
  .mobile-menu {
    display:inline-flex;
    border:0;
    background:transparent;
    padding:8px
  }
  .workspace-path {
    flex:1
  }
  .workspace-note {
    display:none
  }
  .workspace-bar {
    gap:8px
  }
  .asistente-context-panel {
    width:200px
  }
  .ticket-row-actions {
    grid-column:2;
    grid-row:2 / 4
  }
  .ticket-summary {
    grid-column:1
  }
}
@media(max-width:767px) {
  .workspace-bar {
    height:56px;
    padding-inline:12px
  }
  .workspace-path {
    font-size:11px;
    gap:8px
  }
  .view {
    padding:24px 16px 32px
  }
  .view>header {
    align-items:flex-start!important;
    flex-wrap:wrap;
    margin-bottom:24px;
    gap:16px
  }
  .view>header>div {
    min-width:0
  }
  h2 {
    font-size:27px
  }
  .subtitle {
    font-size:13px
  }
  .eyebrow {
    font-size:9px
  }
  .filters {
    gap:8px
  }
  .filters select,.filters input {
    flex:1;
    min-width:0;
    width:100%!important
  }
  .filters label {
    width:100%
  }
  .filters button {
    padding-inline:12px
  }
  .ticket-general {
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:16px
  }
  .ticket-header {
    align-items:stretch;
    flex-direction:column;
    gap:8px
  }
  .ticket-header-status {
    gap:8px;
    max-width:none;
    width:100%;
    justify-content:space-between
  }
  .ticket-status-badge {
    font-size:11px;
    overflow-wrap:normal;
    max-width:calc(100% - 52px)
  }
  .ticket-row-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:stretch;
    gap:8px
  }
  .ticket-row-actions button {
    flex:1;
    font-size:12px;
    padding-inline:10px
  }
  .ticket-meta {
    gap:10px
  }
  .ticket-title {
    font-size:15px
  }
  .detail-overview {
    padding:20px
  }
  .detail-meta {
    gap:16px
  }
  .bitacora-list {
    padding-left:18px
  }
  .bitacora-item {
    padding:16px
  }
  .bitacora-item::before {
    left:-24px
  }
  .timeline-title {
    flex-wrap:wrap
  }
  .modal-overlay {
    padding:12px
  }
  .modal {
    padding:20px;
    max-height:calc(100dvh - 24px);
    width:100%!important
  }
  .form-grid,.modal form>div[style*="grid-template-columns"] {
    grid-template-columns:1fr!important
  }
  .modal-actions {
    gap:8px
  }
  .modal-actions button {
    flex:1
  }
  .team-cards {
    grid-template-columns:1fr 1fr
  }
  .ki-type-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .ki-stat-card {
    padding:0 16px;
    min-width:95px
  }
  .ki-stat-num {
    font-size:24px
  }
  .ki-item-card {
    padding:18px
  }
  .ki-item-header {
    flex-direction:column;
    gap:8px
  }
  .ki-item-actions {
    order:2
  }
  .ki-item-meta {
    font-size:11px
  }
  .dashboard-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .metric {
    padding:20px 16px
  }
  .metric-value {
    font-size:30px
  }
  .metric-hero {
    grid-column:1 / -1
  }
  .metric-hero .metric-value {
    font-size:56px
  }
  .distribution {
    grid-column:1 / -1;
    grid-row:auto
  }
  .metric-escalated {
    grid-column:1 / -1
  }
  .metric-label {
    font-size:11px
  }
  #view-asistente-ia {
    height:calc(100dvh - 56px);
    padding:20px 12px 12px
  }
  #view-asistente-ia>header {
    margin-bottom:16px
  }
  #view-asistente-ia>header .subtitle {
    display:none
  }
  .asistente-layout {
    flex-direction:column;
    gap:10px
  }
  .asistente-context-panel {
    order:0;
    width:100%;
    padding:10px 14px;
    border-radius:8px
  }
  .context-toggle {
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:0;
    min-height:36px;
    background:transparent;
    font-size:12px
  }
  .context-label {
    display:none
  }
  .asistente-context-panel:not(.context-expanded) .context-ticket-info,.asistente-context-panel:not(.context-expanded) .btn-link {
    display:none!important
  }
  .context-ticket-info {
    padding:8px 0
  }
  .asistente-history {
    padding:20px 16px;
    gap:20px
  }
  .asistente-msg {
    max-width:96%
  }
  .asistente-msg-content {
    font-size:14px;
    padding:10px 12px
  }
  .asistente-input-area {
    padding:12px
  }
  .asistente-input-area form {
    gap:6px
  }
  .asistente-input-area input[type=text] {
    font-size:16px;
    padding-inline:8px
  }
  .asistente-input-area button {
    padding-inline:10px
  }
  .composer-note {
    font-size:9px
  }
  .assistant-welcome {
    padding:8px 0
  }
  .assistant-welcome h3 {
    font-size:30px
  }
  .assistant-symbol {
    width:48px;
    height:48px;
    margin-bottom:16px
  }
  .welcome-topics {
    gap:6px;
    margin-top:16px
  }
  .welcome-topics span {
    font-size:10px
  }
  .toast-region {
    right:16px;
    bottom:16px
  }
  .ai-extract-box input {
    min-width:0
  }
  #chat-form {
    gap:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.view h2[tabindex="-1"]:focus {
  outline:none
}
.modal .modal-close {
  position:sticky;
  top:0;
  z-index:1;
  background:white;
  flex-shrink:0
}
.asistente-history img {
  max-width:100%;
  height:auto
}
.asistente-msg-content pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.asistente-msg-content table {
  display:block;
  max-width:100%;
  overflow:auto
}
.asistente-msg-content ul,.asistente-msg-content ol {
  padding-left:20px
}
.modal input,.modal select,.modal textarea {
  scroll-margin:60px
}

/* Native confirmation dialog keeps the decision explicit. */
.confirm-dialog {
  width:480px;
  max-width:calc(100vw - 32px);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  margin:auto;
  box-shadow:var(--shadow-dialog);
  color:var(--text-main);
}
.confirm-dialog::backdrop { background:rgba(15,23,42,.5); }
.confirm-dialog h3 { margin-bottom:16px; }
.confirm-dialog p { white-space:pre-line; overflow-wrap:anywhere; color:var(--text-muted); }
.btn-danger { background:var(--danger); color:white; }

/* Ticket workspace: counts, compact rows and local filtering. */
#view-tickets { background:#f6f9ff; }
#view-tickets>header { margin-bottom:14px; }
#view-tickets h2 { font-size:32px; letter-spacing:-1.2px; color:#111b38; }
#view-tickets .subtitle { color:#41577e; }
#view-tickets #btn-new-ticket { background:#0750e9; min-height:52px; border-radius:8px; padding:0 22px; font-size:15px; }
#view-tickets .ticket-overview { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding:0 0 16px; }
#view-tickets .ticket-overview .overview-card { display:flex; align-items:center; gap:16px; min-width:0; padding:16px; border:1px solid #dce6f5; border-radius:10px; background:#fff; box-shadow:0 3px 10px #17366a0a; }
.overview-icon { width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:16px; background:#edf3ff; color:#0750e9; font-size:26px; }
.overview-derived .overview-icon { background:#f2edff; color:#6035e8; }.overview-closed .overview-icon { background:#e7f8ee; color:#009756; }.overview-critical .overview-icon { background:#fff0f2; color:#e81928; }
#view-tickets .ticket-overview .overview-card>div { display:flex; flex-direction:column; min-width:0; }
#view-tickets .ticket-overview strong { font-size:27px; line-height:1.1; color:#111b38; }
#view-tickets .ticket-overview span:not(.overview-icon) { font-size:14px; font-weight:600; color:#314b78; }
#view-tickets .ticket-overview small { font-size:11px; color:#52698e; white-space:normal; }
#view-tickets .ticket-filters { position:static; display:grid; grid-template-columns:minmax(260px,1fr) 140px 140px 160px 190px 52px; gap:12px; padding:0; margin-bottom:10px; background:transparent; }
#view-tickets .ticket-filters input,#view-tickets .ticket-filters select,#view-tickets .ticket-filters button { width:100%; min-width:0; height:50px; border:1px solid #ccdaee; border-radius:8px; background:#fff; color:#263d67; box-shadow:0 2px 7px #17366a08; }
#view-tickets .ticket-filters input { padding:0 18px; }
#view-tickets .ticket-filters select { padding:0 10px; font-size:13px; }
#view-tickets .ticket-filters button { display:grid; place-items:center; padding:0; }
.ticket-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; color:#52698e; font-size:12px; }
.ticket-toolbar #ticket-active-filters { display:inline-block; padding:5px 12px; border-radius:20px; background:#e8eff9; color:#25446f; }
.ticket-toolbar select { min-height:34px; margin-left:8px; padding:5px 30px 5px 10px; border:1px solid #ccdaee; border-radius:8px; background:#fff; color:#263d67; }
#view-tickets .tickets-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:12px; }
#view-tickets .ticket-general { display:flex; flex-direction:column; gap:0; min-height:260px; padding:16px 20px 12px 24px; border:1px solid #dce6f5; border-left:7px solid #8da0bb; border-radius:10px; background:#fff; box-shadow:0 3px 10px #17366a0b; }
#view-tickets .ticket-general:hover { background:#fff; transform:translateY(-2px); }
#view-tickets .ticket-general.priority-p1 { border-left-color:#ff3544; }#view-tickets .ticket-general.priority-p2 { border-left-color:#f59b14; }#view-tickets .ticket-general.priority-p3 { border-left-color:#3275fb; }
.ticket-card-top { display:flex; align-items:center; gap:14px; min-width:0; min-height:32px; }
.ticket-card-top .ticket-id { color:#4b6189; font:600 13px var(--font); white-space:nowrap; }
.priority-badge { min-width:48px; padding:5px 10px; text-align:center; border-radius:11px; background:#eaf1ff; color:#0852df; font-weight:700; }
.priority-badge.p1 { background:#ffe7e9; color:#cb0b21; }.priority-badge.p2 { background:#fff0d9; color:#a95100; }.priority-badge.p4 { background:#eaf0f8; color:#39557b; }
.ticket-card-top .ticket-status-badge { padding:6px 16px; border-radius:20px; font-size:12px; }
.ticket-card-top .status-derived { background:#eee7ff; color:#5934bd; }
.ticket-age { margin-left:auto; color:#425c87; font-size:12px; white-space:nowrap; }
.ticket-card-top .ticket-menu { position:relative; top:auto; right:auto; flex:none; }.ticket-card-top .btn-ticket-menu { width:28px; min-height:30px; line-height:1; font-size:16px; }
#view-tickets .ticket-title { margin:8px 0 2px; color:#111b38; font-size:18px; line-height:1.25; }
#view-tickets .ticket-meta { gap:9px; color:#405a86; font-size:12px; }
.ticket-description { margin:3px 0 10px; color:#425b86; font-size:12px; line-height:1.4; min-height:17px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ticket-derived-note { margin:0 0 10px; padding:6px 10px; border-radius:7px; background:#eef0ff; color:#3b37c8; font-size:12px; }
.ticket-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding:10px 0 8px; border-top:1px solid #d7e2f1; }
.ticket-requester { display:flex; align-items:center; gap:10px; min-width:0; color:#101d38; font-size:12px; }.ticket-requester strong,.ticket-requester small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ticket-requester small { color:#50668d; }.requester-icon { font-size:28px; line-height:1; color:#405b8b; }
.ticket-time { width:38%; color:#3e5883; font-size:11px; }.ticket-time-track { display:block; height:8px; margin-top:5px; border-radius:8px; background:#dce5f1; }.ticket-time-track i { display:block; width:34%; height:100%; border-radius:8px; background:#00a663; }.priority-p1 .ticket-time-track i { background:#fa3545; }
#view-tickets .ticket-row-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:0; }
#view-tickets .btn-enfocar-asistente { display:flex; align-items:center; gap:12px; min-width:240px; min-height:45px; padding:5px 16px; border:0; border-radius:7px; background:#4c47f4; color:white; text-align:left; font-weight:600; font-size:13px; }
#view-tickets .btn-enfocar-asistente>span:first-child { font-size:27px; line-height:1; }.btn-enfocar-asistente small { display:block; font-size:11px; font-weight:400; }
.ticket-view-link { display:flex; align-items:center; gap:12px; margin-left:auto; border:0; background:transparent; color:#0750e9; font-size:13px; white-space:nowrap; }.ticket-view-link span { font-size:20px; }
@media (max-width:1400px) { #view-tickets .ticket-overview { grid-template-columns:repeat(3,minmax(0,1fr)); } #view-tickets .ticket-filters { grid-template-columns:minmax(200px,1fr) repeat(2,minmax(120px,150px)); } }
@media (max-width:900px) { #view-tickets .tickets-list { grid-template-columns:1fr; } #view-tickets .ticket-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { #view-tickets h2 { font-size:26px; } #view-tickets .ticket-overview { grid-template-columns:1fr 1fr; } #view-tickets .ticket-overview .overview-card { padding:10px; gap:8px; } .overview-icon { width:38px; height:38px; font-size:20px; } #view-tickets .ticket-filters { grid-template-columns:1fr 1fr; } #view-tickets #ticket-search { grid-column:1/-1; } .ticket-toolbar { align-items:flex-start; flex-direction:column; } .ticket-card-top { flex-wrap:wrap; gap:8px; } .ticket-age { margin-left:0; } #view-tickets .btn-enfocar-asistente { min-width:0; } }
.ticket-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:0 0 24px; }
.ticket-overview>div { display:flex; align-items:baseline; gap:12px; border-left:2px solid var(--border); padding-left:14px; }
.ticket-overview strong { font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; }
.ticket-overview span { color:var(--text-muted); font-size:12px; }
.ticket-filters { position:sticky; top:0; z-index:15; background:var(--bg-dark); padding-top:16px; }
.ticket-filters #ticket-search { flex:1; min-width:220px; }
.ticket-priority { margin-left:12px; font-family:var(--font); color:var(--text-main); }
.tickets-list { gap:16px; border:none; background:transparent; }
.ticket-general { border:1px solid var(--border); border-radius:12px; padding:18px 24px; row-gap:8px; column-gap:20px; background:white; box-shadow:0 4px 12px rgba(0,0,0,0.03); transition:transform 0.2s, box-shadow 0.2s; }
.ticket-general:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.06); background:#fafbfe; }
.ticket-general .ticket-header { grid-column:1; }
.ticket-general .ticket-title { font-size:14px; }
.ticket-general .ticket-meta { grid-column:1; font-size:11px; }
.ticket-general .ticket-summary { display:none; }
.ticket-general .ticket-row-actions { grid-column:2; grid-row:1 / 4; flex-direction:column; align-items:stretch; gap:4px; }
.ticket-general .ticket-row-actions button { min-height:36px; font-size:12px; padding:6px 12px; }
.ticket-general .ticket-header-status { flex-shrink:0; }
.ticket-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.ticket-pagination>div { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ticket-pagination select { width:70px; }
/* Layout is row to keep chat and context panel side-by-side */
.asistente-layout { flex-direction:row; gap:12px; }
.asistente-context-panel { order:1; width:300px; padding:16px; border-left: 1px solid var(--border); border-bottom: none; }
.context-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:36px; background:none; padding:0; }
.context-label { display:none; }
.asistente-context-panel:not(.context-expanded) .context-ticket-info,.asistente-context-panel:not(.context-expanded) .btn-link { display:none!important; }
.context-ticket-row { flex-direction:row; flex-wrap:wrap; padding:8px 0; gap:16px; }
.asistente-chat-container { width:auto; flex:1; max-width:850px; margin:0 auto; min-height:600px; display:flex; flex-direction:column; }
.asistente-history { padding:24px 32px; gap:24px; }
.error-highlight { border-color: var(--danger) !important; background-color: rgba(220, 53, 69, 0.05); }
.asistente-msg.system { max-width:100%; width:100%; }
.asistente-msg-content { max-width:none; font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
.asistente-msg.user { max-width:85%; }
.asistente-input-area textarea { flex:1; min-width:0; min-height:64px; max-height:180px; resize:vertical; font-size:16px; }
.agent-expanded #view-asistente-ia { position:fixed; inset:0; z-index:75; background:var(--bg-dark); max-width:none; height:100dvh; padding:24px max(24px,calc((100vw - 1400px)/2)); }
@media(max-width:767px) {
 .ticket-overview { gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ticket-overview strong { font-size:24px; }
 .ticket-filters #ticket-search { flex-basis:100%; min-width:0; }
 .ticket-general { padding:16px; gap:8px; }
 .ticket-general .ticket-header { flex-direction:column; }
 .ticket-general .ticket-row-actions { flex-direction:row; width:100%; }
 .ticket-general .ticket-row-actions button { min-height:44px; }
 .ticket-pagination>div { width:100%; }
 .ticket-pagination button { flex:1; padding:8px; }
 #expand-agent { min-height:36px; padding:6px 10px; font-size:11px; }
 #view-asistente-ia>header { gap:8px; }
 .asistente-history { padding:20px 16px; }
 .asistente-msg-content { font-size:15px; }
 .agent-expanded #view-asistente-ia { padding:12px; }
 .asistente-input-area form { gap:6px!important; }
}
#view-tickets .ticket-general { display:flex; flex-direction:column; gap:0; padding:16px 20px 12px 24px; }
#view-tickets .ticket-general .ticket-title { font-size:18px; }
#view-tickets .ticket-general .ticket-meta { font-size:12px; }
#view-tickets .ticket-general .ticket-row-actions { grid-column:auto; grid-row:auto; flex-direction:row; align-items:center; width:100%; gap:12px; }
#view-tickets .ticket-general .ticket-row-actions button { min-height:45px; font-size:13px; }
#view-tickets .ticket-general .ticket-row-actions .ticket-view-link { min-height:36px; padding:0; }
#view-tickets .ticket-overview { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding:0 0 16px; }
#view-tickets .ticket-overview .overview-card { display:flex; align-items:center; gap:16px; border:1px solid #dce6f5; padding:16px; }
#view-tickets .ticket-overview strong { font-size:27px; }
#view-tickets .ticket-filters { position:static; display:grid; grid-template-columns:minmax(260px,1fr) 140px 140px 160px 190px 52px; gap:12px; padding:0; background:transparent; }
#view-tickets .ticket-filters #ticket-search { flex:auto; min-width:0; }
#view-tickets .tickets-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; border:0; background:transparent; }
#view-tickets .ticket-general .ticket-card-top .ticket-menu { position:relative; top:auto; right:auto; }
@media(max-width:1400px) { #view-tickets .ticket-overview { grid-template-columns:repeat(3,minmax(0,1fr)); } #view-tickets .ticket-filters { grid-template-columns:minmax(200px,1fr) repeat(2,minmax(120px,150px)); } }
@media(max-width:900px) { #view-tickets .tickets-list { grid-template-columns:1fr; } #view-tickets .ticket-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { #view-tickets .ticket-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } #view-tickets .ticket-filters { grid-template-columns:1fr 1fr; } #view-tickets .ticket-filters #ticket-search { grid-column:1/-1; } }

/* Tickets: restrained enterprise palette and larger local SVG icons. */
.ticket-icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
#view-tickets { background:#f7f8fa; }
#view-tickets h2,#view-tickets .ticket-title { color:#1d2939; }
#view-tickets .subtitle,#view-tickets .ticket-meta,#view-tickets .ticket-description { color:#526174; }
#view-tickets #btn-new-ticket { background:#24476b; }
#view-tickets .ticket-overview .overview-card { border-color:#dbe1e8; box-shadow:none; }
#view-tickets .ticket-overview .overview-card>div { align-items:flex-start; }
#view-tickets .ticket-overview .overview-card strong,#view-tickets .ticket-overview .overview-card span:not(.overview-icon) { color:#243348; }
#view-tickets .overview-icon { width:58px; height:58px; border-radius:12px; background:#eef1f5; color:#344d69; }
#view-tickets .ticket-icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#view-tickets .overview-icon .ticket-icon { width:32px; height:32px; }
#view-tickets .ticket-filters { grid-template-columns:minmax(260px,1fr) 185px 185px; margin-bottom:18px; }
#view-tickets .ticket-filters input,#view-tickets .ticket-filters select { border-color:#cfd8e3; color:#34465c; box-shadow:none; }
#view-tickets .ticket-general { border-color:#dce2e9; border-left:4px solid #8898aa; box-shadow:0 2px 8px #10182808; }
#view-tickets .ticket-general.priority-p1 { border-left-color:#a94242; }
#view-tickets .ticket-general.priority-p2 { border-left-color:#9a7442; }
#view-tickets .ticket-general.priority-p3 { border-left-color:#507096; }
#view-tickets .priority-badge,#view-tickets .priority-badge.p1,#view-tickets .priority-badge.p2,#view-tickets .priority-badge.p4 { background:#eef1f5; color:#34465c; border-radius:5px; }
#view-tickets .ticket-card-top .ticket-status-badge,#view-tickets .ticket-card-top .status-derived { background:#eef1f5; color:#34465c; border-radius:5px; }
#view-tickets .ticket-age { display:flex; align-items:center; gap:6px; }
#view-tickets .ticket-age .ticket-icon { width:19px; height:19px; }
#view-tickets .ticket-card-top .btn-ticket-menu { display:grid; place-items:center; width:36px; min-height:36px; }
#view-tickets .ticket-card-top .btn-ticket-menu .ticket-icon { width:25px; height:25px; }
#view-tickets .ticket-derived-note { display:flex; align-items:center; gap:5px; background:#f2f4f7; color:#34465c; }
#view-tickets .ticket-derived-note .ticket-icon { width:18px; height:18px; }
#view-tickets .requester-icon .ticket-icon { width:31px; height:31px; }
#view-tickets .btn-enfocar-asistente { background:#344d69; min-width:220px; }
#view-tickets .btn-enfocar-asistente .ticket-icon { width:28px; height:28px; }
#view-tickets .btn-enfocar-asistente>span:first-of-type { font-size:13px; line-height:1.25; }
#view-tickets .ticket-view-link { color:#24476b; }
#view-tickets .ticket-view-link .ticket-icon { width:22px; height:22px; }
@media(max-width:900px) { #view-tickets .ticket-filters { grid-template-columns:minmax(200px,1fr) 160px 160px; } }
@media(max-width:600px) { #view-tickets .ticket-filters { grid-template-columns:1fr 1fr; } #view-tickets .ticket-filters #ticket-search { grid-column:1/-1; } #view-tickets .overview-icon { width:46px; height:46px; } #view-tickets .overview-icon .ticket-icon { width:27px; height:27px; } }

/* Unified ticket cards and management report. */
#view-tickets .ticket-overview { grid-template-columns:repeat(5,minmax(0,1fr)); }
#view-tickets .ticket-overview .overview-card { min-height:86px; align-items:center; padding:14px; border-left:1px solid #dbe1e8; }
#view-tickets .ticket-overview .overview-card>div { gap:2px; }
#view-tickets .ticket-overview .overview-card strong { margin:0; font-size:26px; line-height:1; }
#view-tickets .ticket-overview .overview-card span:not(.overview-icon) { font-size:12px; line-height:1.3; }
#view-tickets .ticket-filters { grid-template-columns:minmax(220px,1fr) 180px 190px; align-items:center; }
#view-tickets .tickets-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#view-tickets .ticket-general { min-height:250px; padding:18px 20px; gap:0; }
#view-tickets .ticket-card-top { display:flex; align-items:center; flex-wrap:wrap; gap:9px; width:100%; min-height:36px; }
#view-tickets .ticket-card-top .ticket-id { font-size:12px; }
#view-tickets .ticket-card-top .ticket-status-badge { flex:none; max-width:170px; }
#view-tickets .ticket-card-top .ticket-age { margin-left:auto; white-space:nowrap; }
#view-tickets .ticket-card-top .ticket-menu { flex:none; }
#view-tickets .ticket-general .ticket-title { margin:9px 0 4px; font-size:17px; line-height:1.3; }
#view-tickets .ticket-general .ticket-meta { display:flex; gap:8px; font-size:12px; }
#view-tickets .ticket-general .ticket-description { min-height:34px; margin:6px 0 12px; }
#view-tickets .ticket-card-bottom { width:100%; margin-top:auto; min-height:50px; }
#view-tickets .ticket-time { width:auto; flex:none; text-align:right; font-size:11px; }
#view-tickets .ticket-general .ticket-row-actions { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; }
#view-tickets .ticket-general .ticket-row-actions .btn-enfocar-asistente { display:flex; align-items:center; gap:10px; width:auto; min-width:0; min-height:46px; padding:7px 14px; line-height:1.2; }
#view-tickets .ticket-general .ticket-row-actions .ticket-view-link { display:flex; align-items:center; gap:8px; margin-left:auto; color:#24476b; white-space:nowrap; }
#view-tickets .ticket-general .ticket-row-actions .ticket-view-link:hover { text-decoration:underline; }
#view-dashboard { background:#f7f8fa; }
#view-dashboard>header { margin-bottom:20px; }
#view-dashboard h2 { color:#1d2939; }
.report-intro { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; margin-bottom:16px; background:#e9eef3; border-radius:10px; color:#243348; }
.report-intro h3 { font-size:17px; }.report-intro p { color:#526174; font-size:12px; margin-top:3px; }.report-intro>span { padding:7px 12px; border-radius:6px; background:white; font-size:12px; font-weight:700; white-space:nowrap; }
.report-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.report-metric { display:flex; flex-direction:column; min-width:0; min-height:142px; padding:18px; background:white; border:1px solid #dbe1e8; border-radius:10px; }
.report-metric>span { color:#526174; font-size:12px; font-weight:600; }.report-metric strong { margin:12px 0 7px; color:#1d2939; font-size:27px; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }.report-metric small { margin-top:auto; color:#66788d; font-size:11px; line-height:1.35; }
.report-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.report-panel { min-width:0; padding:20px; border:1px solid #dbe1e8; border-radius:10px; background:white; }
.report-panel h3 { color:#243348; font-size:16px; }.report-panel p { margin:4px 0 14px; color:#66788d; font-size:12px; }
.report-chart { display:block; width:100%; height:auto; overflow:visible; color:#66788d; font:11px var(--font); }
.chart-grid-line { stroke:#e3e9ef; stroke-width:1; }.chart-line { fill:none; stroke:#344d69; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.chart-point { fill:#344d69; stroke:white; stroke-width:2; }
.chart-bar { fill:#344d69; }
.chart-empty,.report-footnote { color:#66788d; font-size:12px; }.report-footnote { margin-top:14px; line-height:1.5; }
@media(max-width:1450px) { #view-tickets .ticket-overview { grid-template-columns:repeat(3,minmax(0,1fr)); } .report-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1050px) { #view-tickets .tickets-list,.report-charts { grid-template-columns:1fr; } }
@media(max-width:720px) { #view-tickets .ticket-overview,.report-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } #view-tickets .ticket-filters { grid-template-columns:1fr 1fr; } #view-tickets #ticket-search { grid-column:1/-1; } }
@media(max-width:520px) { #view-tickets .ticket-overview,.report-metrics { grid-template-columns:1fr; } #view-tickets .ticket-general .ticket-row-actions { align-items:stretch; flex-direction:column; } #view-tickets .ticket-general .ticket-row-actions .btn-enfocar-asistente,#view-tickets .ticket-general .ticket-row-actions .ticket-view-link { width:100%; justify-content:center; } .report-intro { align-items:flex-start; flex-direction:column; } }
#view-tickets .ticket-card-top .status-closed { background:#b91c1c; color:#fff; }
#view-tickets .ticket-card-top .status-derived { background:#facc15; color:#422006; }
#view-tickets .ticket-card-top .status-open { background:#15803d; color:#fff; }
#view-tickets .ticket-card-top .priority-badge.p1 { background:#b91c1c; color:#fff; border:2px solid #7f1d1d; }
#view-tickets .ticket-card-top .priority-badge.p2 { background:#ffedd5; color:#9a3412; border:2px solid #ea580c; }
#view-tickets .ticket-card-top .priority-badge.p3 { background:#dbeafe; color:#1e40af; border:2px solid #2563eb; }
#view-tickets .ticket-card-top .priority-badge.p4 { background:#ede9fe; color:#5b21b6; border:2px solid #7c3aed; }