/* ═══════════════════════════════════════════════════════════════
   Sistema de Tickets v8.3 — Design System
   Modo oscuro por defecto · Modo claro via toggle
═══════════════════════════════════════════════════════════════ */

/* ── Tokens: Dark (default) ── */
:root,
[data-bs-theme="dark"] {
  --bg-main:        #0d1117;
  --bg-secondary:   #161b22;
  --bg-card:        #1a2130;
  --bg-elevated:    #1f2937;
  --border-color:   #30404d;
  --text-primary:   #e0e9f5;
  --text-secondary: #8fa3b4;
  --link:           #79b8ff;
  --primary:        #4f8ef7;
  --primary-strong: #2f6ee8;
  --success:        #3fb950;
  --warning:        #f0c040;
  --danger:         #f87171;
  --info:           #38bdf8;

  --shadow-card:  0 2px 8px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.50);

  /* Kanban columns */
  --col-open-bg:      #0d2018;
  --col-open-accent:  #3fb950;
  --col-prog-bg:      #0d1f34;
  --col-prog-accent:  #4f8ef7;
  --col-res-bg:       #1c1030;
  --col-res-accent:   #c084fc;
  --col-closed-bg:    #161b22;
  --col-closed-accent:#6b7d8f;

  /* Priority */
  --pri-high-bg:    rgba(248,113,113,.14);
  --pri-high-text:  #fca5a5;
  --pri-high-brd:   rgba(248,113,113,.40);
  --pri-med-bg:     rgba(240,192,64,.14);
  --pri-med-text:   #fde68a;
  --pri-med-brd:    rgba(240,192,64,.40);
  --pri-low-bg:     rgba(63,185,80,.12);
  --pri-low-text:   #86efac;
  --pri-low-brd:    rgba(63,185,80,.35);
}

/* ── Tokens: Light ── */
[data-bs-theme="light"] {
  --bg-main:        #f0f4f9;
  --bg-secondary:   #e8edf5;
  --bg-card:        #ffffff;
  --bg-elevated:    #ffffff;
  --border-color:   #d0dae8;
  --text-primary:   #1a2535;
  --text-secondary: #5a6e85;
  --link:           #1a56c2;
  --primary:        #1a56c2;
  --primary-strong: #1040a0;
  --success:        #15803d;
  --warning:        #b45309;
  --danger:         #b91c1c;
  --info:           #0369a1;

  --shadow-card:  0 1px 4px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --shadow-hover: 0 6px 20px rgba(0,0,0,.12);

  --col-open-bg:      #f0faf1;
  --col-open-accent:  #16a34a;
  --col-prog-bg:      #eff6ff;
  --col-prog-accent:  #1a56c2;
  --col-res-bg:       #faf5ff;
  --col-res-accent:   #7c3aed;
  --col-closed-bg:    #f8f9fa;
  --col-closed-accent:#6b7280;

  --pri-high-bg:    #fef2f2;
  --pri-high-text:  #991b1b;
  --pri-high-brd:   #fca5a5;
  --pri-med-bg:     #fffbeb;
  --pri-med-text:   #92400e;
  --pri-med-brd:    #fcd34d;
  --pri-low-bg:     #f0fdf4;
  --pri-low-text:   #166534;
  --pri-low-brd:    #86efac;
}

/* ═══════════════════════════════════
   BASE
═══════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', Arial, sans-serif;
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: .875rem;
  line-height: 1.5;
  margin: 0;
}

[data-bs-theme="dark"] body {
  background:
    radial-gradient(ellipse at top left,  rgba(79,142,247,.07) 0%, transparent 50%),
    radial-gradient(ellipse at top right, rgba(192,132,252,.05) 0%, transparent 40%),
    var(--bg-main);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--primary); text-decoration: underline; }

/* ═══════════════════════════════════
   SCROLLBAR
═══════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ═══════════════════════════════════
   NAVBAR
═══════════════════════════════════ */
.bg-nav {
  background: linear-gradient(135deg, #0f1b30 0%, #142040 60%, #1a2e5a 100%) !important;
}
[data-bs-theme="light"] .bg-nav {
  background: linear-gradient(135deg, #1240a8 0%, #1a56c2 55%, #2167d4 100%) !important;
}
.navbar {
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 20px rgba(0,0,0,.30) !important;
  padding: .5rem 1rem;
}
.navbar-brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.navbar-brand .brand-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #4f8ef7, #7c5af7);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.navbar .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-size: .82rem;
  font-weight: 500;
  padding: .4rem .7rem !important;
  border-radius: 8px;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  background: rgba(255,255,255,.12);
  color: #fff !important;
}
.navbar .nav-link i { font-size: .8rem; opacity: .85; }
.navbar .dropdown-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  padding: .4rem;
  margin-top: .4rem;
}
.navbar .dropdown-item {
  color: var(--text-primary);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .82rem;
  transition: background .12s;
}
.navbar .dropdown-item:hover { background: rgba(127,127,127,.12); }
.navbar .dropdown-divider { border-color: var(--border-color); margin: .3rem 0; }

/* ── Nav pill for active page ── */
.navbar .nav-link.nav-active {
  background: rgba(79,142,247,.20);
  color: #7db8ff !important;
}

/* ═══════════════════════════════════
   LAYOUT
═══════════════════════════════════ */
.container-fluid { max-width: 98%; padding: 0 1rem; }
main.py-3 { padding-top: 1.25rem !important; }

/* ═══════════════════════════════════
   CARDS
═══════════════════════════════════ */
.card, .form-container, .chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.card { padding: 1.1rem; }
.form-container { padding: 1rem 1.1rem; border-radius: 12px; }
.card:hover { box-shadow: var(--shadow-hover); transition: box-shadow .2s; }

/* ═══════════════════════════════════
   METRIC CARDS (KPIs)
═══════════════════════════════════ */
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  min-height: 100px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.metric-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.03), transparent);
  pointer-events: none;
}
.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.metric-card-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
}
.metric-value {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.metric-label {
  font-size: .73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-top: .4rem;
}
.metric-icon {
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  opacity: .08;
}
.metric-trend {
  font-size: .72rem;
  margin-top: .3rem;
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* ── KPI accent colors ── */
.metric-card.kpi-total   .metric-accent { color: var(--primary); }
.metric-card.kpi-open    .metric-accent { color: var(--danger);  }
.metric-card.kpi-closed  .metric-accent { color: var(--success); }
.metric-card.kpi-avg     .metric-accent { color: var(--info);    }
.metric-card.kpi-assign  .metric-accent { color: var(--warning); }
.metric-card.kpi-unasgn  .metric-accent { color: var(--text-secondary); }
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }

/* ═══════════════════════════════════
   CHART CARDS
═══════════════════════════════════ */
.chart-card {
  padding: 1.1rem;
  height: 100%;
}
.chart-card-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.chart-card-title .title-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-wrap { position: relative; }

/* ═══════════════════════════════════
   TABLES
═══════════════════════════════════ */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-color);
  --bs-table-color: var(--text-primary);
  font-size: .8rem;
}
.table th {
  padding: .45rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  border-bottom-color: var(--border-color) !important;
  white-space: nowrap;
}
.table td { padding: .45rem .6rem; border-color: var(--border-color) !important; vertical-align: middle; }
.table thead th { background: var(--bg-secondary); color: var(--primary); letter-spacing: .03em; }
[data-bs-theme="light"] .table thead th { background: #f0f5ff; color: var(--primary-strong); }
.table-hover tbody tr:hover { background: var(--bg-secondary) !important; }
.table-divided { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }

/* ═══════════════════════════════════
   FORMS
═══════════════════════════════════ */
.form-control, .form-select {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
  font-size: .82rem;
  border-radius: 8px;
  padding: .35rem .6rem;
  transition: border-color .15s, box-shadow .15s;
}
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  background: #fff;
  border-color: #c8d6e8;
}
.form-control:focus, .form-select:focus {
  background: var(--bg-secondary);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,142,247,.18);
  color: var(--text-primary);
}
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus { background: #fff; }
.form-control::placeholder { color: var(--text-secondary); opacity: .7; }
.form-label { font-size: .78rem; font-weight: 600; margin-bottom: .3rem; color: var(--text-secondary); }
.form-check-input { background-color: var(--bg-secondary); border-color: var(--border-color); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* ═══════════════════════════════════
   BUTTONS
═══════════════════════════════════ */
.btn { font-size: .8rem; padding: .35rem .75rem; border-radius: 8px; font-weight: 500; transition: all .15s; }
.btn-sm { font-size: .74rem; padding: .22rem .5rem; border-radius: 6px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,142,247,.35); }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-danger  { background: var(--danger);  border-color: var(--danger);  }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: rgba(79,142,247,.12); color: var(--primary); }
.btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-color); }
.btn-outline-secondary:hover { background: var(--bg-secondary); color: var(--text-primary); }
.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover { background: rgba(63,185,80,.12); color: var(--success); }
.btn-outline-danger  { color: var(--danger);  border-color: var(--danger); }
.btn-outline-danger:hover  { background: rgba(248,113,113,.12); color: var(--danger); }
.btn-warning { background: var(--pri-med-bg); border-color: var(--pri-med-brd); color: var(--warning); }
.btn-warning:hover { filter: brightness(1.08); }

/* ═══════════════════════════════════
   BADGES
═══════════════════════════════════ */
.badge { border-radius: 999px; padding: .28rem .6rem; font-weight: 600; font-size: .72rem; }

/* Estado */
.badge-state { border: 1px solid transparent; font-weight: 700; letter-spacing: .02em; }
[data-bs-theme="dark"] .badge-state.abierta    { background: rgba(63,185,80,.12);   color: #6ee7a0; border-color: rgba(63,185,80,.35);  }
[data-bs-theme="dark"] .badge-state.en-progreso{ background: rgba(79,142,247,.12);  color: #93bbff; border-color: rgba(79,142,247,.35); }
[data-bs-theme="dark"] .badge-state.resuelta   { background: rgba(192,132,252,.12); color: #d8b4fe; border-color: rgba(192,132,252,.35);}
[data-bs-theme="dark"] .badge-state.cerrada    { background: rgba(107,125,141,.12); color: #9eb3c4; border-color: rgba(107,125,141,.35);}
[data-bs-theme="light"] .badge-state.abierta   { background: #dcfce7; color: #166534; border-color: #86efac; }
[data-bs-theme="light"] .badge-state.en-progreso{ background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
[data-bs-theme="light"] .badge-state.resuelta  { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }
[data-bs-theme="light"] .badge-state.cerrada   { background: #f3f4f6; color: #374151; border-color: #d1d5db; }

/* Prioridad */
.badge-priority { border: 1px solid transparent; font-weight: 700; }
.badge-priority.baja    { background: var(--pri-low-bg);  color: var(--pri-low-text);  border-color: var(--pri-low-brd);  }
.badge-priority.media   { background: var(--pri-med-bg);  color: var(--pri-med-text);  border-color: var(--pri-med-brd);  }
.badge-priority.alta,
.badge-priority.critica { background: var(--pri-high-bg); color: var(--pri-high-text); border-color: var(--pri-high-brd); }

/* SLA */
.badge-sla, .badge-flag { border: 1px solid transparent; font-weight: 700; }
.badge-sla.on_track { background: rgba(63,185,80,.12);  color: #4ade80; border-color: rgba(63,185,80,.30); }
.badge-sla.due_soon { background: rgba(240,192,64,.14); color: #fbbf24; border-color: rgba(240,192,64,.35);}
.badge-sla.overdue  { background: rgba(248,113,113,.14);color: #f87171; border-color: rgba(248,113,113,.34);}
.badge-sla.no_due, .badge-sla.closed { background: rgba(107,125,141,.10); color: var(--text-secondary); border-color: rgba(107,125,141,.25); }
[data-bs-theme="light"] .badge-sla.on_track { color: #15803d; }
[data-bs-theme="light"] .badge-sla.due_soon { color: #92400e; }
[data-bs-theme="light"] .badge-sla.overdue  { color: #991b1b; }

/* ═══════════════════════════════════
   PAGINATION
═══════════════════════════════════ */
.pagination .page-link { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); border-radius: 8px; margin: 0 2px; }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .page-link:hover { background: var(--bg-secondary); }

/* ═══════════════════════════════════
   ALERTS
═══════════════════════════════════ */
.alert { border-radius: 12px; border-width: 1px; font-size: .83rem; }

/* ═══════════════════════════════════
   MODAL
═══════════════════════════════════ */
.modal-content { background: var(--bg-card); border-color: var(--border-color); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.50); }
.modal-header, .modal-footer { border-color: var(--border-color); }

/* Modal nuevo ticket: mejor comportamiento en pantallas bajas/chicas */
.ticket-create-modal .modal-dialog {
  margin: .75rem auto;
}
.ticket-create-modal .modal-content {
  max-height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
}
.ticket-create-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 991.98px), (max-height: 820px) {
  .ticket-create-modal .modal-dialog {
    margin: .5rem;
  }
  .ticket-create-modal .modal-content {
    max-height: calc(100vh - 1rem);
  }
}

@media (max-width: 575.98px), (max-height: 700px) {
  .ticket-create-modal .modal-dialog {
    margin: .25rem;
  }
  .ticket-create-modal .modal-content {
    max-height: calc(100vh - .5rem);
    border-radius: 12px;
  }
  .ticket-create-modal .modal-body {
    padding: 1rem;
  }
}

/* ═══════════════════════════════════
   NOTIFICATIONS
═══════════════════════════════════ */
.notification-nav .nav-link { position: relative; }
.notification-badge { position: absolute; top: 2px; right: -2px; font-size: .6rem; min-width: 1rem; padding: .1rem .3rem; }
.notification-menu { width: min(380px, 92vw); border-radius: 14px; overflow: hidden; }
.notification-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-color); background: var(--bg-elevated); }
.notification-list { max-height: 420px; overflow: auto; }
.notification-item { display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border-color); background: transparent; color: var(--text-primary); cursor: pointer; transition: background .12s; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: var(--bg-secondary); }
.notification-item.unread { background: rgba(79,142,247,.08); border-left: 3px solid var(--primary); }
.notification-item-title { font-weight: 600; font-size: .82rem; }
.notification-item-message { color: var(--text-secondary); font-size: .75rem; margin-top: .15rem; }
.notification-empty { padding: 20px; text-align: center; color: var(--text-secondary); font-size: .8rem; }

/* ═══════════════════════════════════
   THEME TOGGLE
═══════════════════════════════════ */
.theme-toggle { background: transparent; border: 0; color: rgba(255,255,255,.8); cursor: pointer; font-size: .9rem; padding: .4rem .5rem; border-radius: 8px; transition: background .15s; }
.theme-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ═══════════════════════════════════
   FILTERS
═══════════════════════════════════ */
.filters-grid {
  display: grid;
  grid-template-columns: minmax(280px,1.6fr) 160px 180px 280px minmax(260px,1.2fr) minmax(240px,1.2fr);
  gap: .5rem .6rem;
  align-items: end;
}
.filters-grid.filters-grid-compact {
  grid-template-columns: minmax(220px,1.8fr) repeat(5,minmax(120px,.72fr)) minmax(180px,1.2fr) minmax(130px,.8fr);
}
.filters-grid.filters-grid-extended {
  grid-template-columns: minmax(260px,1.5fr) 170px 180px 180px 220px 180px;
}
.filters-grid .form-label { margin-bottom: .2rem; }
.filters-collapsible { margin-bottom: 1rem; }
.filters-collapsible-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.filters-toggle-btn { display: inline-flex; align-items: center; white-space: nowrap; }
.filters-toggle-btn .toggle-chevron { transition: transform .2s ease; }
.filters-toggle-btn.is-collapsed .toggle-chevron { transform: rotate(180deg); }
.filters-collapsible-body { overflow: hidden; transition: max-height .25s ease, opacity .2s ease; opacity: 1; }
.filters-collapsible-body.is-collapsed { opacity: 0; }
.filter-actions-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.saved-filters-panel { border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); padding: .65rem; }
.compact-panel .form-label { font-size: .72rem; margin-bottom: .2rem; }
.compact-fields-row { display: grid; grid-template-columns: minmax(180px,220px) auto minmax(180px,240px) auto; gap: .5rem; align-items: end; }
.compact-buttons { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.filters-toolbar { display: grid; grid-template-columns: auto minmax(260px,420px) auto; gap: .75rem; align-items: end; }
.filters-toolbar-main, .filters-toolbar-search { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.filters-toolbar-search { flex-direction: column; min-width: 0; }
.filters-toolbar-search .form-label { font-size: .72rem; font-weight: 600; color: var(--text-secondary); }
.saved-filters-toggle { justify-self: end; }

.form-container-compact { padding: .85rem 1rem; }
.classification-hint {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .75rem; border-radius: 10px;
  border: 1px solid rgba(240,192,64,.38);
  background: rgba(240,192,64,.08);
  color: var(--text-primary); font-size: .84rem; line-height: 1.35;
}
[data-bs-theme="light"] .classification-hint { background: rgba(251,243,205,.9); border-color: rgba(251,193,7,.35); color: #6b4f00; }

/* ═══════════════════════════════════
   KANBAN BOARD — v8.3 redesign
═══════════════════════════════════ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(270px, 1fr));
  gap: 1rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: .5rem;
}

.kanban-column {
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-self: start;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s;
}

/* Column per-state backgrounds */
.kanban-column[data-state="ABIERTA"]    { background: var(--col-open-bg);   border-color: rgba(63,185,80,.25);   }
.kanban-column[data-state="EN PROGRESO"]{ background: var(--col-prog-bg);   border-color: rgba(79,142,247,.25);  }
.kanban-column[data-state="RESUELTA"]   { background: var(--col-res-bg);    border-color: rgba(192,132,252,.25); }
.kanban-column[data-state="CERRADA"]    { background: var(--col-closed-bg); border-color: rgba(107,125,141,.20); }

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-bs-theme="light"] .kanban-column-header { border-bottom-color: rgba(0,0,0,.06); }

/* Header accent line per column */
.kanban-column[data-state="ABIERTA"]     .kanban-column-header { border-top: 3px solid var(--col-open-accent);   }
.kanban-column[data-state="EN PROGRESO"] .kanban-column-header { border-top: 3px solid var(--col-prog-accent);   }
.kanban-column[data-state="RESUELTA"]    .kanban-column-header { border-top: 3px solid var(--col-res-accent);    }
.kanban-column[data-state="CERRADA"]     .kanban-column-header { border-top: 3px solid var(--col-closed-accent); }

.kanban-column-title {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.kanban-column[data-state="ABIERTA"]     .kanban-column-title { color: var(--col-open-accent);   }
.kanban-column[data-state="EN PROGRESO"] .kanban-column-title { color: var(--col-prog-accent);   }
.kanban-column[data-state="RESUELTA"]    .kanban-column-title { color: var(--col-res-accent);    }
.kanban-column[data-state="CERRADA"]     .kanban-column-title { color: var(--col-closed-accent); }

.kanban-column-count {
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--text-secondary);
  min-width: 1.8rem;
  text-align: center;
}
[data-bs-theme="light"] .kanban-column-count { background: rgba(0,0,0,.06); }

.kanban-column-body {
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  outline: 2px dashed transparent;
  outline-offset: -8px;
  border-radius: 0 0 18px 18px;
  transition: background .18s ease, outline-color .18s ease;
  min-height: 80px;
}
.kanban-column-body.drag-over {
  background: rgba(79,142,247,.10);
  outline-color: rgba(79,142,247,.45);
}

.kanban-empty {
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: .8rem;
}

/* ── Kanban cards ── */
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: .78rem .85rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.kanban-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.025), transparent 50%);
  pointer-events: none;
}

/* State left border on cards */
.kanban-card[data-state="ABIERTA"]    { border-left: 3px solid var(--col-open-accent);   }
.kanban-card[data-state="EN PROGRESO"]{ border-left: 3px solid var(--col-prog-accent);   }
.kanban-card[data-state="RESUELTA"]   { border-left: 3px solid var(--col-res-accent);    }
.kanban-card[data-state="CERRADA"]    { border-left: 3px solid var(--col-closed-accent); }

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(79,142,247,.40);
}
[data-bs-theme="light"] .kanban-card { background: #fff; border-color: #d8e4f0; }
[data-bs-theme="light"] .kanban-card:hover { border-color: var(--primary); }

.kanban-card.dragging, .kanban-card.drag-source { opacity: .35; transform: scale(.98); cursor: grabbing; }
.kanban-drag-ghost { position: fixed; z-index: 2050; pointer-events: none; transform: rotate(-1deg) scale(1.03); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
body.kanban-dragging, body.kanban-dragging * { cursor: grabbing !important; }
.kanban-card.drop-settle { animation: kanbanDropSettle .22s ease-out; }
@keyframes kanbanDropSettle { 0%{transform:scale(1.02)} 100%{transform:scale(1)} }

.kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.kanban-ticket-code { font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.kanban-card-actions { display: flex; gap: .3rem; flex: 0 0 auto; }

.icon-btn {
  width: 1.75rem; height: 1.75rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(127,127,127,.08);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: .75rem;
  transition: all .15s;
}
.icon-btn:hover { background: rgba(79,142,247,.15); border-color: rgba(79,142,247,.40); color: var(--primary); }

.kanban-title { font-size: .9rem; font-weight: 700; line-height: 1.35; margin-bottom: .42rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kanban-classification { display: flex; flex-wrap: wrap; gap: .22rem; align-items: center; font-size: .74rem; color: var(--text-secondary); margin-bottom: .5rem; }
.kanban-separator { opacity: .5; }
.kanban-badges-row, .kanban-chip-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.kanban-badges-row { margin-bottom: .45rem; }
.kanban-chip-row { margin-bottom: .5rem; }
.kanban-chip { display: inline-flex; align-items: center; gap: .28rem; border: 1px solid var(--border-color); border-radius: 999px; padding: .18rem .5rem; font-size: .7rem; line-height: 1.2; color: var(--text-secondary); background: rgba(127,127,127,.06); }
.badge-flag-unassigned  { background: rgba(56,189,248,.10); color: #38bdf8; border-color: rgba(56,189,248,.30); border: 1px solid transparent; }
.badge-flag-warning     { background: var(--pri-med-bg);    color: var(--pri-med-text); border: 1px solid var(--pri-med-brd); }
.badge-flag-overdue     { background: var(--pri-high-bg);   color: var(--pri-high-text); border: 1px solid var(--pri-high-brd); }
.kanban-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .42rem .6rem; }
.kanban-info-item { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.kanban-info-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.kanban-info-value { font-size: .77rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-info-value.empty { color: var(--danger); }

/* ═══════════════════════════════════
   DASHBOARD ACTIVITY
═══════════════════════════════════ */
.dashboard-activity-list { display: flex; flex-direction: column; gap: .75rem; }
.activity-item {
  padding: .8rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--primary);
  transition: background .12s;
}
.activity-item:hover { background: var(--bg-elevated); }

/* ═══════════════════════════════════
   SECTOR SCORE BADGE
═══════════════════════════════════ */
.sector-score-badge {
  font-size: .7rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
footer {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary);
  font-size: .72rem;
  padding: .6rem 0;
  border-top: 1px solid var(--border-color);
  margin-top: 2rem;
}

/* ═══════════════════════════════════
   TOAST
═══════════════════════════════════ */
.app-toast { background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-primary); min-width: 260px; }
.app-toast .toast-header { background: var(--bg-elevated); color: var(--text-primary); border-bottom-color: var(--border-color); }

/* ═══════════════════════════════════
   MISC UTILITIES
═══════════════════════════════════ */
.actions-col .btn { border-radius: 8px !important; }
.actions-col .btn-group { gap: 5px; }
.actions-col .btn-group .btn { border-radius: 8px !important; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-secondary); }
.breadcrumb .breadcrumb-item a { color: var(--link); }
.breadcrumb .breadcrumb-item.active { color: var(--text-secondary); }
.dropdown-menu { background: var(--bg-elevated); border-color: var(--border-color); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); padding: .4rem; }
.dropdown-item { color: var(--text-primary); border-radius: 8px; padding: .45rem .75rem; font-size: .82rem; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(127,127,127,.10); color: var(--text-primary); }
.dropdown-divider { border-color: var(--border-color); margin: .3rem 0; }
h1, h2, h3, h4, h5, h6 { font-size: calc(.9rem + .3vw); font-weight: 700; }
.navbar-brand { font-size: 1rem !important; }

/* Tables with full border frame */
.table.users-table, .table.employees-table, .table.config-table { border-collapse: separate !important; border-spacing: 0 !important; }
.table.users-table > thead > tr > th:first-child,
.table.employees-table > thead > tr > th:first-child,
.table.config-table > thead > tr > th:first-child,
.table.users-table > tbody > tr > td:first-child,
.table.employees-table > tbody > tr > td:first-child,
.table.config-table > tbody > tr > td:first-child { border-left: 1px solid var(--border-color) !important; }
.table.users-table > thead > tr > th:last-child,
.table.employees-table > thead > tr > th:last-child,
.table.config-table > thead > tr > th:last-child,
.table.users-table > tbody > tr > td:last-child,
.table.employees-table > tbody > tr > td:last-child,
.table.config-table > tbody > tr > td:last-child { border-right: 1px solid var(--border-color) !important; }
.table.users-table > tbody > tr:last-child > td,
.table.employees-table > tbody > tr:last-child > td,
.table.config-table > tbody > tr:last-child > td { border-bottom: 1px solid var(--border-color) !important; }
.table.users-table > thead > tr > th,
.table.employees-table > thead > tr > th,
.table.config-table > thead > tr > th { border-top: 1px solid var(--border-color) !important; }

/* Column dividers */
.table.table-divided th, .table.table-divided td { border-right: 1px solid var(--border-color) !important; }
.table.table-divided th:last-child, .table.table-divided td:last-child { border-right: 0 !important; }
.table.table-divided thead th { border-bottom: 1px solid var(--border-color) !important; }

/* Tickets table column dividers */
#ticketsTable thead th:nth-child(4), #ticketsTable tbody td:nth-child(4),
#ticketsTable thead th:nth-child(10), #ticketsTable tbody td:nth-child(10) { border-left: 1px solid var(--border-color); }

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (min-width: 1600px) {
  .filters-grid { grid-template-columns: minmax(380px,2fr) 170px 200px 320px minmax(300px,1.2fr) minmax(280px,1.2fr); }
}
@media (max-width: 1399.98px) {
  .kanban-board { grid-template-columns: repeat(2, minmax(270px, 1fr)); }
  .filters-grid { grid-template-columns: 1.2fr 180px 200px 280px 1fr 1fr; }
  .filters-grid.filters-grid-compact { grid-template-columns: minmax(220px,1.5fr) repeat(3,minmax(130px,.85fr)) minmax(170px,1fr) minmax(140px,.8fr); }
  .filters-toolbar { grid-template-columns: 1fr; }
  .saved-filters-toggle { justify-self: start; }
}
@media (max-width: 1199.98px) {
  .filters-grid, .filters-grid.filters-grid-compact, .filters-grid.filters-grid-extended { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .kanban-board { grid-template-columns: 1fr; }
  .filters-grid, .filters-grid.filters-grid-compact { grid-template-columns: 1fr 1fr; }
  .form-container-compact { padding: .8rem; }
  .compact-fields-row { grid-template-columns: 1fr 1fr; }
  .filters-collapsible-header { flex-direction: column; align-items: stretch; }
}
@media (max-width: 575.98px) {
  .filters-grid, .filters-grid.filters-grid-compact { grid-template-columns: 1fr; }
  .compact-fields-row { grid-template-columns: 1fr; }
  .saved-filters-toggle { width: 100%; }
  .saved-filters-toggle .btn { width: 100%; }
  .filters-toolbar-main > .btn { width: 100%; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════ */
.login-page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: var(--bg-main);
  display: flex;
  flex-direction: column;
}
[data-bs-theme="dark"] .login-page {
  background:
    radial-gradient(ellipse at top left,  rgba(79,142,247,.10) 0%, transparent 45%),
    radial-gradient(ellipse at bottom right, rgba(124,90,247,.07) 0%, transparent 40%),
    var(--bg-main);
}
[data-bs-theme="light"] .login-page {
  background:
    radial-gradient(ellipse at top left,  rgba(26,86,194,.08) 0%, transparent 45%),
    radial-gradient(ellipse at bottom right, rgba(124,90,247,.05) 0%, transparent 40%),
    var(--bg-main);
}

.login-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* Left showcase panel */
.login-showcase {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 3rem;
  background: linear-gradient(160deg, #0f1b30 0%, #142040 50%, #1a2e5a 100%);
  position: relative;
  overflow: hidden;
}
[data-bs-theme="light"] .login-showcase {
  background: linear-gradient(160deg, #1240a8 0%, #1a56c2 55%, #2167d4 100%);
}
.login-showcase::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,142,247,.15), transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
}
.login-showcase::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,90,247,.12), transparent 70%);
  bottom: -150px; left: -100px;
  pointer-events: none;
}

.login-showcase__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  width: fit-content;
}

.login-showcase__content h1 {
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: .7rem;
}
.login-showcase__content p {
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 440px;
}

.login-highlights {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.login-highlight {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
}
.login-highlight__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.9);
  font-size: .85rem;
  flex-shrink: 0;
}
.login-highlight strong {
  display: block;
  color: rgba(255,255,255,.92);
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .15rem;
}
.login-highlight small {
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  line-height: 1.4;
}

/* Right form panel */
.login-panel {
  width: min(420px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.2rem;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.login-card__header {
  margin-bottom: 1.75rem;
}
.login-card__brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .75rem;
}
.login-brand-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f8ef7, #7c5af7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(79,142,247,.35);
}
.login-brand-overline {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary);
  margin-bottom: .15rem;
}
.login-card__brand h2 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}
.login-card__header > p {
  font-size: .82rem;
  color: var(--text-secondary);
  margin: 0;
}

.login-alerts { margin-bottom: 1.2rem; }
.login-alert { font-size: .82rem; border-radius: 10px; }

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.login-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: .35rem;
}
.login-input-wrap {
  position: relative;
}
.login-input-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: .8rem;
  pointer-events: none;
  z-index: 1;
}
.login-input {
  padding-left: 2.2rem !important;
  height: 42px;
  font-size: .85rem;
  border-radius: 10px;
  border-color: var(--border-color);
}
.login-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,142,247,.18);
}
[data-bs-theme="light"] .login-input { background: #fff; }
.login-input--password { padding-right: 2.6rem !important; }
.login-password-toggle {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: .3rem;
  font-size: .82rem;
  line-height: 1;
  border-radius: 6px;
  transition: color .15s;
}
.login-password-toggle:hover { color: var(--text-primary); }

.login-submit {
  height: 42px;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 10px;
  background: linear-gradient(135deg, #2b6fdd, #4f8ef7);
  border: none;
  letter-spacing: .02em;
  transition: all .2s;
  margin-top: .3rem;
}
.login-submit:hover {
  background: linear-gradient(135deg, #2362c7, #3f8cff);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79,142,247,.40);
}

/* Responsive: stack vertically on small screens */

/* Login: quitar padding del main y ocultar footer para que entre en 100vh */
body.login-page > main {
  padding: 0 !important;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.login-page footer {
  display: none !important;
}
body.login-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 768px) {
  .login-shell { flex-direction: column; }
  .login-showcase { padding: 2rem 1.5rem; flex: none; }
  .login-showcase__content h1 { font-size: 1.3rem; }
  .login-showcase__content p { display: none; }
  .login-highlights { display: none; }
  .login-panel { width: 100%; border-left: none; border-top: 1px solid var(--border-color); padding: 2rem 1.2rem; }
}

/* ── Accesibilidad Kanban: navegación por teclado ───────────────────────── */
.kanban-card:focus {
  outline: 3px solid var(--accent, #4f8ef7);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(79, 142, 247, .25);
  position: relative;
  z-index: 10;
}

.kanban-card:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.kanban-card:focus-visible {
  outline: 3px solid var(--accent, #4f8ef7);
  outline-offset: 2px;
}

/* Estado "agarrado" con teclado */
.kanban-card.kb-grabbed {
  outline: 3px dashed var(--accent, #4f8ef7);
  outline-offset: 3px;
  opacity: .85;
  transform: rotate(1deg) scale(1.02);
  z-index: 20;
  position: relative;
  box-shadow: 0 8px 24px rgba(79,142,247,.35);
  transition: transform .15s, box-shadow .15s;
}

/* Visually-hidden helper (por si no está Bootstrap) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Indicador de ticket sin leer ───────────────────────────────────────── */
.unread-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #378ADD;
  flex-shrink: 0;
  align-self: center;
  box-shadow: 0 0 0 2px var(--bg-card, #fff);
  animation: dot-pop .25s ease;
}
.unread-dot.has-unread {
  display: inline-block;
}
@keyframes dot-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Kanban card top: make room for the dot */
.kanban-card-top {
  display: flex;
  align-items: center;
  gap: 5px;
}
.kanban-ticket-code {
  flex: 1;
}

/* List view codigo cell */
.codigo-cell {
  white-space: nowrap;
}
.codigo-cell .unread-dot {
  vertical-align: middle;
  margin-right: 5px;
}

/* ── Copiar código de ticket ─────────────────────────────────────────────── */
.copy-code-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary, #888);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
  vertical-align: middle;
  line-height: 1;
}
/* Show on card/row hover */
.kanban-card:hover .copy-code-btn,
.kanban-card:focus-within .copy-code-btn,
tr:hover .copy-code-btn {
  opacity: 1;
}
.copy-code-btn:hover {
  background: var(--bg-hover, rgba(55,138,221,.12));
  color: #378ADD;
}
/* Feedback: checkmark state */
.copy-code-btn.copy-code-ok {
  opacity: 1;
  color: #1D9E75;
}
.copy-code-btn.copy-code-ok svg rect,
.copy-code-btn.copy-code-ok svg path {
  stroke: #1D9E75;
}