:root { --sf-primary: #0d6efd; }
body { background: #f6f8fb; }
.card { border: 0; border-radius: 12px; }
.card, .btn, .form-control, .form-select { transition: all .2s ease-in-out; }
.nav-link { color: rgba(255,255,255,.85); border-radius: 8px; padding: .4rem .7rem !important; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav-link.active { color: #fff !important; background: rgba(255,255,255,.22); font-weight: 600; }

/* Foco visible AA */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #86b7fe; outline-offset: 2px;
}

/* Badges de estado con contraste AA */
.badge-st-abierta { background: #e7f1ff; color: #084298; }
.badge-st-resuelta { background: #d1e7dd; color: #0f5132; }
.badge-st-escalada { background: #fff3cd; color: #664d03; }
.badge-st-inicio { background: #e2e3e5; color: #41464b; }

/* Chat simulador */
.chat-box { height: 60vh; min-height: 320px; overflow-y: auto; background: #eef2f7; border-radius: 12px 12px 0 0; }
.chat-row { display: flex; margin-bottom: .5rem; }
.chat-row.yo { justify-content: flex-end; }
.chat-bubble { max-width: 75%; padding: .55rem .85rem; border-radius: 16px; overflow-wrap: anywhere; }
.chat-row.yo .chat-bubble { background: var(--sf-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-row.bot .chat-bubble { background: #fff; color: #212529; border: 1px solid #dee2e6; border-bottom-left-radius: 4px; }
.chat-meta { font-size: .72rem; color: #6c757d; margin-top: .15rem; }

/* Cola en vivo */
.queue-delayed { border-left: 4px solid #dc3545; }
.queue-warn { border-left: 4px solid #ffc107; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Navegación del panel */
[x-cloak] { display: none !important; }
.sf-navbar { box-shadow: 0 2px 12px rgba(16, 42, 80, .12); }
.sf-navbar .navbar-brand { letter-spacing: .2px; }
.sf-navbar .nav-link { white-space: nowrap; }
.min-width-0 { min-width: 0; }

/* Login */
.login-body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% 0%, rgba(13, 110, 253, .20), transparent 45%),
    linear-gradient(160deg, #f3f7fc 0%, #e8eff8 100%);
  display: flex;
  align-items: center;
}
.login-card { max-width: 430px; border: 0; border-radius: 18px; }
.login-logo {
  width: 58px; height: 46px; border-radius: 10px;
  background: #fff; border: 1px solid #dbe4f0;
  display: grid; place-items: center; padding: 3px 5px;
}
.login-logo img { max-width: 100%; height: auto; }

/* Tablas y conversaciones */
.conversation-thread { background: #f7f9fc; }
.table > :not(caption) > * > * { vertical-align: middle; }
.badge { font-weight: 600; }
.badge-st-abierta { background: #e7f1ff; color: #084298; }
.badge-st-resuelta { background: #d1e7dd; color: #0f5132; }
.badge-st-escalada { background: #fff3cd; color: #664d03; }
.badge-st-inicio { background: #e2e3e5; color: #41464b; }
.badge-st-done { background: #d1e7dd; color: #0f5132; }

/* Formularios */
.card-header { background: #fff; }
.form-label { font-weight: 600; color: #34465e; }
.form-text { color: #6b7a90; }

@media (max-width: 991.98px) {
  .sf-navbar .navbar-nav { overflow-x: auto; padding-bottom: .25rem; }
}

/* Marca */
.brand-logo {
  background: #fff;
  border-radius: 8px;
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
}
.brand-logo img { display: block; }