/* =====================================================================
   TICKETPRO — Tema Velzon (variante azul)
   ===================================================================== */

:root,
[data-bs-theme="light"] {
  --tp-primary: #405189;
  --tp-primary-rgb: 64, 81, 137;
  --tp-accent: #3577f1;
  --tp-accent-rgb: 53, 119, 241;
  --tp-success: #0ab39c;
  --tp-info: #299cdb;
  --tp-warning: #f7b84b;
  --tp-danger: #f06548;
  --tp-secondary: #878a99;

  --tp-body-bg: #f3f3f9;
  --tp-card-bg: #ffffff;
  --tp-border: #eff2f7;
  --tp-text: #212529;
  --tp-text-muted: #878a99;

  --tp-sidebar-bg: #2a3042;
  --tp-sidebar-bg-active: #2f3549;
  --tp-sidebar-text: #9698a7;
  --tp-sidebar-text-active: #ffffff;

  --tp-topbar-bg: #ffffff;
  --tp-radius: .5rem;
  --tp-shadow: 0 2px 4px rgba(15, 34, 58, .07);
  --tp-sidebar-w: 250px;
  --tp-sidebar-w-sm: 70px;
}

[data-bs-theme="dark"] {
  --tp-body-bg: #1a1d21;
  --tp-card-bg: #212529;
  --tp-border: #32363e;
  --tp-text: #d7d9dd;
  --tp-text-muted: #9a9ea7;
  --tp-topbar-bg: #212529;
  --tp-sidebar-bg: #1a1d21;
  --tp-sidebar-bg-active: #262a30;
  --tp-input-bg: #26292f;
  --tp-hover-bg: #262a30;
}
[data-bs-theme="light"] { --tp-input-bg: #fff; --tp-hover-bg: #f3f6f9; }

/* ---------------------------------------------------------------- MODO OSCURO: componentes Bootstrap */
[data-bs-theme="dark"] body { color: var(--tp-text); }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .fw-bold, [data-bs-theme="dark"] .fw-semibold,
[data-bs-theme="dark"] label, [data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-check-label { color: var(--tp-text); }

[data-bs-theme="dark"] .text-muted { color: var(--tp-text-muted) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--tp-text) !important; }

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .tp-customizer-panel {
  background-color: var(--tp-card-bg);
  color: var(--tp-text);
  border-color: var(--tp-border);
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer { border-color: var(--tp-border); color: var(--tp-text); }

[data-bs-theme="dark"] .table { color: var(--tp-text); --bs-table-color: var(--tp-text); }
[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: var(--tp-card-bg); color: var(--tp-text); border-bottom-color: var(--tp-border); box-shadow: none; }
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > * { background-color: var(--tp-hover-bg) !important; color: var(--tp-text) !important; }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--tp-hover-bg); color: var(--tp-text); }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--tp-input-bg);
  border-color: var(--tp-border);
  color: var(--tp-text);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { background-color: var(--tp-input-bg); color: var(--tp-text); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--tp-text-muted); }
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled { background-color: var(--tp-border); }

[data-bs-theme="dark"] .dropdown-item { color: var(--tp-text); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--tp-hover-bg); color: var(--tp-text); }
[data-bs-theme="dark"] .dropdown-divider { border-color: var(--tp-border); }

[data-bs-theme="dark"] .btn-light { background-color: var(--tp-hover-bg); border-color: var(--tp-border); color: var(--tp-text); }
[data-bs-theme="dark"] .btn-light:hover { background-color: var(--tp-border); color: var(--tp-text); }
[data-bs-theme="dark"] .btn-outline-secondary { color: var(--tp-text); border-color: var(--tp-border); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

[data-bs-theme="dark"] .badge.bg-light { background-color: var(--tp-hover-bg) !important; color: var(--tp-text) !important; border-color: var(--tp-border) !important; }
[data-bs-theme="dark"] .border { border-color: var(--tp-border) !important; }
[data-bs-theme="dark"] hr { border-color: var(--tp-border); opacity: .5; }

[data-bs-theme="dark"] .tp-topbar-btn { color: var(--tp-text); }
[data-bs-theme="dark"] .tp-topbar-btn:hover { background: var(--tp-hover-bg); }
[data-bs-theme="dark"] .tp-chat-msg.other { background: var(--tp-hover-bg); color: var(--tp-text); }
[data-bs-theme="dark"] .alert-light,
[data-bs-theme="dark"] .bg-light { background-color: var(--tp-hover-bg) !important; color: var(--tp-text) !important; }
[data-bs-theme="dark"] .nav-tabs { border-color: var(--tp-border); }
[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--tp-text-muted); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--tp-card-bg); color: var(--tp-text); border-color: var(--tp-border) var(--tp-border) var(--tp-card-bg); }
[data-bs-theme="dark"] .ql-toolbar, [data-bs-theme="dark"] .ql-container { background: var(--tp-input-bg); color: var(--tp-text); border-color: var(--tp-border) !important; }
[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: var(--tp-text-muted); }
[data-bs-theme="dark"] .ql-snow .ql-picker { color: var(--tp-text-muted); }

/* Color de marca alterno (selector del customizer) */
[data-tema-color="azul"]     { --tp-primary: #405189; --tp-accent: #3577f1; }
[data-tema-color="verde"]    { --tp-primary: #0ab39c; --tp-accent: #10b981; }
[data-tema-color="morado"]   { --tp-primary: #6f42c1; --tp-accent: #8b5cf6; }
[data-tema-color="naranja"]  { --tp-primary: #e07a2c; --tp-accent: #fd7e14; }
[data-tema-color="rojo"]     { --tp-primary: #c0392b; --tp-accent: #e74c3c; }
[data-tema-color="cyan"]     { --tp-primary: #0e7c8c; --tp-accent: #17a2b8; }
[data-tema-color="rosa"]     { --tp-primary: #c2255c; --tp-accent: #ec4899; }
[data-tema-color="grafito"]  { --tp-primary: #495057; --tp-accent: #6c757d; }

* { box-sizing: border-box; }

body {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--tp-body-bg);
  color: var(--tp-text);
  font-size: .875rem;
  overflow-x: hidden;
}

a { text-decoration: none; }

/* ---------------------------------------------------------------- LAYOUT */
.tp-wrapper { display: flex; min-height: 100vh; }

.tp-sidebar {
  width: var(--tp-sidebar-w);
  background: var(--tp-sidebar-bg);
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 1030;
  transition: width .25s ease;
  display: flex;
  flex-direction: column;
}
.tp-sidebar.collapsed { width: var(--tp-sidebar-w-sm); }

/* Modo "hover": igual que compacto, pero se expande temporalmente (superpuesto,
   sin empujar el contenido) al pasar el mouse por encima — igual al layout
   "vertical hovered" de Velzon. */
.tp-sidebar.modo-hover { width: var(--tp-sidebar-w-sm); transition: width .2s ease, box-shadow .2s ease; }
.tp-sidebar.modo-hover .tp-nav-link span,
.tp-sidebar.modo-hover .tp-nav-title,
.tp-sidebar.modo-hover .tp-badge-count { display: none; }
.tp-sidebar.modo-hover .tp-nav-link { justify-content: center; }
.tp-sidebar.modo-hover:hover {
  width: var(--tp-sidebar-w);
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
  z-index: 1040;
}
.tp-sidebar.modo-hover:hover .tp-nav-link span,
.tp-sidebar.modo-hover:hover .tp-nav-title,
.tp-sidebar.modo-hover:hover .tp-badge-count { display: inline; }
.tp-sidebar.modo-hover:hover .tp-nav-link { justify-content: flex-start; }
.tp-main.modo-hover-main { margin-left: var(--tp-sidebar-w-sm); }

.tp-sidebar-brand {
  height: 70px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.tp-sidebar-brand span { color: var(--tp-accent); }

.tp-nav { flex: 1; overflow-y: auto; padding: 1rem 0; }
.tp-nav::-webkit-scrollbar { width: 5px; }
.tp-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }

.tp-nav-title {
  color: #5f6478; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .85rem 1.25rem .35rem; font-weight: 600;
}
.tp-sidebar.collapsed .tp-nav-title { display: none; }

.tp-nav-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.25rem; color: var(--tp-sidebar-text);
  font-size: .875rem; font-weight: 500; border-radius: 0;
  white-space: nowrap; overflow: hidden;
}
.tp-nav-link i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.tp-nav-link:hover { color: var(--tp-sidebar-text-active); background: rgba(255,255,255,.04); }
.tp-nav-link.active {
  color: var(--tp-sidebar-text-active);
  background: var(--tp-sidebar-bg-active);
  border-left: 3px solid var(--tp-accent);
  padding-left: calc(1.25rem - 3px);
}
.tp-sidebar.collapsed .tp-nav-link span { display: none; }
.tp-sidebar.collapsed .tp-nav-link { justify-content: center; }

.tp-badge-count {
  margin-left: auto; background: var(--tp-accent); color: #fff;
  font-size: .65rem; padding: .1rem .4rem; border-radius: 10px;
}
.tp-sidebar.collapsed .tp-badge-count { display: none; }

/* ---------------------------------------------------------------- MAIN */
.tp-main {
  margin-left: var(--tp-sidebar-w);
  flex: 1; min-width: 0;
  transition: margin-left .25s ease;
  display: flex; flex-direction: column;
}
.tp-main.expanded { margin-left: var(--tp-sidebar-w-sm); }

.tp-topbar {
  height: 70px; background: var(--tp-topbar-bg);
  border-bottom: 1px solid var(--tp-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem; position: sticky; top: 0; z-index: 1020;
  box-shadow: var(--tp-shadow);
}
.tp-topbar-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--tp-text); border: none; background: transparent; position: relative;
}
.tp-topbar-btn:hover { background: var(--tp-body-bg); }
.tp-notif-dot {
  position: absolute; top: 6px; right: 6px; background: var(--tp-danger);
  color: #fff; font-size: .6rem; min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.tp-content { padding: 1.5rem; flex: 1; }

/* ---------------------------------------------------------------- CARDS */
.card {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  background: var(--tp-card-bg);
  box-shadow: var(--tp-shadow);
}
.card-header { background: transparent; border-bottom: 1px solid var(--tp-border); font-weight: 600; }

.tp-kpi { border-radius: var(--tp-radius); padding: 1.25rem; position: relative; overflow: hidden; }
.tp-kpi .tp-kpi-icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: #fff;
}
.tp-kpi .tp-kpi-value { font-size: 1.65rem; font-weight: 700; }
.tp-kpi .tp-kpi-label { color: var(--tp-text-muted); font-size: .8rem; }

/* ---------------------------------------------------------------- BOTONES */
.btn-primary { background: var(--tp-primary); border-color: var(--tp-primary); }
.btn-primary:hover { background: var(--tp-accent); border-color: var(--tp-accent); }
.btn-outline-primary { color: var(--tp-primary); border-color: var(--tp-primary); }
.btn-outline-primary:hover { background: var(--tp-primary); }
.text-primary { color: var(--tp-primary) !important; }
.bg-primary { background: var(--tp-primary) !important; }

/* ---------------------------------------------------------------- ESTADOS TICKET */
.badge-estado { font-size: .72rem; font-weight: 600; padding: .35em .65em; border-radius: 20px; }

/* ---------------------------------------------------------------- CUSTOMIZER (engrane flotante) */
.tp-customizer-fab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; background: var(--tp-primary); color: #fff;
  border-radius: 8px 0 0 8px; display: flex; align-items: center; justify-content: center;
  z-index: 1050; cursor: pointer; box-shadow: -2px 0 10px rgba(0,0,0,.15);
  animation: tp-spin-hint 5s linear infinite;
}
.tp-customizer-fab:hover { animation-play-state: paused; }
@keyframes tp-spin-hint {
  0%, 85%, 100% { transform: translateY(-50%) rotate(0deg); }
  90% { transform: translateY(-50%) rotate(45deg); }
  95% { transform: translateY(-50%) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .tp-customizer-fab { animation: none; } }

.tp-customizer-panel {
  position: fixed; right: -320px; top: 0; bottom: 0; width: 320px;
  background: var(--tp-card-bg); z-index: 1060; box-shadow: -4px 0 20px rgba(0,0,0,.15);
  transition: right .3s ease; padding: 1.25rem; overflow-y: auto;
}
.tp-customizer-panel.open { right: 0; }
.tp-customizer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1055;
  display: none;
}
.tp-customizer-overlay.open { display: block; }

.tp-swatch {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.tp-swatch.active { border-color: var(--tp-text); }

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width: 991.98px) {
  .tp-sidebar { width: var(--tp-sidebar-w-sm); }
  .tp-sidebar.mobile-open { width: var(--tp-sidebar-w); }
  .tp-sidebar .tp-nav-link span, .tp-sidebar .tp-nav-title { display: none; }
  .tp-sidebar.mobile-open .tp-nav-link span, .tp-sidebar.mobile-open .tp-nav-title { display: inline; }
  .tp-main { margin-left: var(--tp-sidebar-w-sm); }
  .tp-content { padding: 1rem; }
}
@media (max-width: 575.98px) {
  .tp-sidebar { transform: translateX(-100%); width: var(--tp-sidebar-w); }
  .tp-sidebar.mobile-open { transform: translateX(0); }
  .tp-main { margin-left: 0; }
  .tp-topbar { padding: 0 .75rem; }
}

/* Foco visible accesible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tp-accent); outline-offset: 2px;
}

/* Chat de ticket */
.tp-chat-scroll { max-height: 460px; overflow-y: auto; padding-right: .25rem; }
.tp-chat-row { display: flex; gap: .6rem; margin-bottom: .9rem; align-items: flex-start; }
.tp-chat-row.mine { flex-direction: row-reverse; }
.tp-chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tp-chat-msg { max-width: 74%; border-radius: 14px; padding: .6rem .9rem; position: relative; }
.tp-chat-msg.mine { background: var(--tp-primary); color: #fff; border-bottom-right-radius: 4px; }
.tp-chat-msg.other { background: var(--tp-body-bg); border-bottom-left-radius: 4px; }
.tp-chat-msg img { max-width: 100%; border-radius: 8px; }
.tp-chat-reply-ref {
  font-size: .72rem; opacity: .85; border-left: 3px solid var(--tp-accent);
  padding-left: .5rem; margin-bottom: .3rem; cursor: pointer;
}
.tp-chat-fecha-sep { text-align: center; margin: .75rem 0; }
.tp-chat-fecha-sep span { background: var(--tp-border); color: var(--tp-text-muted); font-size: .7rem; padding: .2rem .7rem; border-radius: 10px; }

/* Adjuntos dentro de un mensaje de chat */
.tp-chat-adjuntos { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.tp-chat-adjuntos a { font-size: .75rem; }

/* Selector de archivos con previsualización (múltiple) */
.tp-file-chip {
  display: flex; align-items: center; gap: .4rem; background: var(--tp-body-bg); border: 1px solid var(--tp-border);
  border-radius: 8px; padding: .3rem .5rem; max-width: 220px; font-size: .78rem;
}
.tp-file-thumb { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.tp-file-icon { font-size: 1.3rem; color: var(--tp-primary); flex-shrink: 0; }
.tp-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.tp-file-remove { border: none; background: transparent; color: var(--tp-danger); font-size: 1.1rem; line-height: 1; cursor: pointer; margin-left: auto; }
.tp-file-chip.is-comprimiendo { opacity: .7; }
.tp-file-comprimiendo-icon { animation: tp-spin 1s linear infinite; color: var(--tp-primary); }
@keyframes tp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Icono de ayuda contextual, más visible */
.tp-help-btn {
  position: relative;
  background: linear-gradient(135deg, var(--tp-primary), var(--tp-accent)) !important;
  color: #fff !important;
}
.tp-help-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(53,119,241,.55); animation: tp-help-pulse 2.4s infinite;
}
@keyframes tp-help-pulse {
  0% { box-shadow: 0 0 0 0 rgba(53,119,241,.5); }
  70% { box-shadow: 0 0 0 8px rgba(53,119,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,119,241,0); }
}
@media (prefers-reduced-motion: reduce) { .tp-help-btn::after { animation: none; } }

/* Logo compacto (NYR) ajustado para caber en el ancho reducido del menú */
.logo-sm { font-size: 1.05rem !important; letter-spacing: .02em; }

/* ---------------------------------------------------------------- FIX: sidebar realmente oscuro en modo oscuro
   Velzon usa el color de marca (azul) como fondo del sidebar "dark" por defecto, y solo lo
   vuelve gris oscuro cuando --vz-vertical-menu-bg-dark se redefine bajo [data-bs-theme=dark].
   Forzamos aquí un valor garantizado para que el sidebar combine con el resto del modo oscuro. */
[data-bs-theme="dark"] {
  --vz-vertical-menu-bg-dark: #1a1d21 !important;
  --vz-twocolumn-menu-bg-dark: #1a1d21 !important;
}
[data-bs-theme="dark"] .app-menu,
[data-bs-theme="dark"] .navbar-menu {
  background-color: #1a1d21 !important;
}

/* ---------------------------------------------------------------- FIX: topbar realmente oscuro en modo oscuro
   Mismo problema que el sidebar de arriba: como header.php usa el mismo valor para
   data-topbar que para el modo claro/oscuro, Velzon aplica su variante "topbar dark"
   (que en realidad es el azul de marca, --vz-header-bg-dark: #405189 — pensado como
   una opción de color de topbar independiente, no como "modo oscuro") en vez de un
   gris oscuro acorde al resto de la interfaz. Forzamos el fondo del topbar a que
   combine con el resto del modo oscuro. */
[data-bs-theme="dark"] #page-topbar {
  background-color: var(--tp-topbar-bg) !important;
  border-color: var(--tp-border) !important;
}
[data-bs-theme="dark"] .topbar-user {
  background-color: var(--tp-hover-bg) !important;
}

/* Los editores de texto enriquecido (Quill) mantienen fondo blanco siempre; el texto debe
   verse oscuro sobre ese fondo blanco sin importar si el resto de la página está en modo oscuro. */
.ql-editor {
  color: #212529 !important;
}
.ql-editor.ql-blank::before {
  color: #878a99 !important;
}

/* ------------------------------------------------------------ PROCESOS (tarjetas + IA) */
.tp-proceso-card {
  border-top: 3px solid var(--tp-accent);
  transition: box-shadow .15s ease, transform .15s ease;
}
.tp-proceso-card:hover {
  box-shadow: 0 .25rem 1rem rgba(var(--tp-primary-rgb), .12);
  transform: translateY(-2px);
}
.tp-proceso-icono {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--tp-accent-rgb), .12);
  color: var(--tp-accent);
  font-size: 1.2rem;
}
.tp-proceso-titulo { min-height: 2.6em; }

/* ------------------------------------------------------------ MENÚ LATERAL EN MÓVIL
   Elimina el retraso de "doble toque para hacer zoom" de los navegadores móviles en los
   enlaces del menú (causa común de que un toque se registre tarde o en el elemento
   equivocado), y evita el resaltado azul/gris feo de iOS/Android al tocar. */
#navbar-nav .nav-link,
.vertical-menu-btn,
.vertical-overlay {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}