/* =============================================
   BONAFIDE MICROBANK - Zammad Custom Theme v5
   DEFINITIVO
   ============================================= */

/* ─── VARIABLES INTERNAS DE ZAMMAD ─── */
:root, html {
  --background-tertiary:            #1a1a2e !important;
  --background-quaternary:          #16213e !important;
  --menu-background-primary:        #16213e !important;
  --menu-background-secondary:      #1a1a2e !important;
  --menu-background-active:         #e85d20 !important;
  --menu-text:                      #b0b8c1 !important;
  --menu-text-active:               #ffffff !important;
  --menu-icon:                      #b0b8c1 !important;
  --background-primary:             #ffffff !important;
  --background-secondary:           #ffffff !important;
  --background-primary-alt:         #f5f2ee !important;
  --button-primary-background:      #e85d20 !important;
  --button-primary-background-active: #c0390a !important;
  --button-primary-text:            #ffffff !important;
  --text-link:                      #c0390a !important;
  --text-nav:                       #b0b8c1 !important;
  --highlight:                      #e85d20 !important;
  --border-highlight:               #e85d20 !important;
  --text-normal:                    #333333 !important;
  --text-muted:                     #888888 !important;
}

/* ─── FONDO GLOBAL ─── */
html, body {
  background-color: #f5f2ee !important;
  color: #333333 !important;
}

/* ═══════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════ */

/* Fondo beige claro */
body.login { background-color: #f5f2ee !important; }

/* Círculos decorativos - esquina superior derecha */
body.login::before {
  content: '' !important;
  position: fixed !important;
  top: -150px !important;
  right: -150px !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(232,93,32,0.18) 0%, rgba(192,57,10,0.05) 70%) !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Círculo decorativo - esquina inferior izquierda */
body.login::after {
  content: '' !important;
  position: fixed !important;
  bottom: -100px !important;
  left: -100px !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(232,93,32,0.10) 0%, rgba(192,57,10,0.02) 70%) !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Card del login */
.login .box {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: none !important;
  border-top: 4px solid #e85d20 !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.10),
    0 8px 24px rgba(232,93,32,0.08) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Labels */
.login label {
  color: #999999 !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Inputs */
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
  background: #f8f6f3 !important;
  border: 1.5px solid #ebe6df !important;
  border-radius: 10px !important;
  color: #333 !important;
  font-size: 14px !important;
}

.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus {
  border-color: #e85d20 !important;
  box-shadow: 0 0 0 3px rgba(232,93,32,0.12) !important;
  background: #ffffff !important;
  outline: none !important;
}

/* BOTÓN INICIAR SESIÓN - solo el botón, no los links */
.login input[type="submit"],
.login button[type="submit"] {
  background: linear-gradient(135deg, #e85d20 0%, #c0390a 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.4px !important;
  box-shadow: 0 6px 20px rgba(192,57,10,0.35) !important;
  cursor: pointer !important;
}

/* Link ¿Olvidaste? - SIN fondo naranja */
.login a {
  color: #c0390a !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.login a:hover {
  color: #e85d20 !important;
  background: transparent !important;
}

/* Texto debajo del card */
.login p,
.login-footer {
  color: #999999 !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR IZQUIERDA
═══════════════════════════════════════════ */
#navigation {
  background: #16213e !important;
}

/* Items normales */
#navigation a,
#navigation span,
#navigation li {
  color: #333333 !important;
}

/* Item activo - naranja */
#navigation .active,
#navigation li.is-active {
  background: #e85d20 !important;
  border-radius: 8px !important;
}

#navigation .active a,
#navigation .active span,
#navigation li.is-active a {
  color: #ffffff !important;
}

.menu-item .icon {
    fill: #333333;
}

/* ═══════════════════════════════════════════
   CONTENIDO PRINCIPAL
═══════════════════════════════════════════ */
.main, .main-content, .app-content,
.content, .overview, .dashboard,
.ticket-overview, .ticket-index {
  background: #f5f2ee !important;
}

/* Tarjetas dashboard */
.stat-item,
[class*="stat-item"],
[class*="overview-item"] {
  background: #ffffff !important;
  border: 1px solid #ebe6df !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
  color: #333 !important;
}

/* ═══════════════════════════════════════════
   BOTONES PRIMARIOS (global)
═══════════════════════════════════════════ */
.btn.btn--primary,
button.btn--primary,
a.btn.btn--primary {
  background: linear-gradient(135deg, #e85d20 0%, #c0390a 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(192,57,10,0.28) !important;
}

.btn.btn--primary:hover,
button.btn--primary:hover {
  background: linear-gradient(135deg, #d04e15 0%, #a82f08 100%) !important;
  box-shadow: 0 6px 20px rgba(192,57,10,0.42) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════
   INPUTS GLOBAL
═══════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea, select {
  background: #f8f6f3 !important;
  border: 1.5px solid #ebe6df !important;
  border-radius: 8px !important;
  color: #333 !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #e85d20 !important;
  box-shadow: 0 0 0 3px rgba(232,93,32,0.12) !important;
  background: #ffffff !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: #c0b8ae !important;
}

/* ═══════════════════════════════════════════
   LINKS GLOBAL
═══════════════════════════════════════════ */
a:not(.btn):not(button) { color: #c0390a !important; }
#navigation a { color: #b0b8c1 !important; }
.activity-stream a { color: #333333 !important; }
body.login { background-color: #f5f2ee !important; }
a:hover { color: #e85d20 !important; }

/* ═══════════════════════════════════════════
   PORTAL CLIENTE - HERO
═══════════════════════════════════════════ */
.help-center nav,
.help-center .top-navigation {
  background: #ffffff !important;
  border-bottom: 1px solid #ebe6df !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.help-center-header,
.help-center .header {
  background: linear-gradient(160deg, #e85d20 0%, #c0390a 100%) !important;
  color: #ffffff !important;
  padding: 72px 20px 100px !important;
  clip-path: ellipse(120% 100% at 50% 0%) !important;
  text-align: center !important;
}

.help-center-header h1,
.help-center-header p,
.help-center .header h1,
.help-center .header p { color: #ffffff !important; }

.help-center,
.help-center .main { background: #f5f2ee !important; }

/* Formulario portal */
.help-center .ticket-create,
[class*="ticket-create"] {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #ebe6df !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
}

.help-center .ticket-create .header,
[class*="ticket-create"] .header {
  background: linear-gradient(135deg, #e85d20, #c0390a) !important;
  color: #ffffff !important;
  padding: 18px 24px !important;
}

.help-center .ticket-create .header * { color: #ffffff !important; }

/* ═══════════════════════════════════════════
   TICKETS
═══════════════════════════════════════════ */
.ticket-article, .article-content {
  background: #ffffff !important;
  border: 1px solid #ebe6df !important;
  border-radius: 12px !important;
}

.ticket-header, .page-header {
  background: linear-gradient(135deg, #e85d20 0%, #c0390a 100%) !important;
  color: #ffffff !important;
  border-radius: 12px 12px 0 0 !important;
}

.ticket-header *, .page-header * { color: #ffffff !important; }

html[data-theme="dark"] {
    color-scheme: light !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app
html[data-theme="dark"] #navigation,
html[data-theme="dark"] .tasks,
html[data-theme="dark"] .content {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.menu.js-menu {
    background: #ffffff !important;
	border-right: 0px !important;
}

.user.dropup{
	background: #ffffff !important;
	border-right: 0px !important;
}

.settings{
	background: #ffffff !important;
	border-right: 0px !important;
}

.avatar{
	background-position: unset !important;
	background: #d6341f !important;
}

.user-menu-icon{
	fill: #d6341f !important;
}

.user-menu-icon.icon-plus {
    fill: #d6341f !important;
}

.search {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.tasks-navigation .nav-tab:not(.is-active):hover {
    background: #d5d5d81a !important;
    border-bottom-color: rgba(213, 213, 216, 0.1);
}

.tab.active {
    color: #d6341f !important;
}

.sidebar.optional h2 {
    color: #d6341f !important;
}

.nav-tab.task-state-open.is-active {
    background-color: #d6341f !important;
}


/* ─── OCULTAR POWERED BY ZAMMAD ─── */
.powered-by,
[class*="powered"],
a[href*="zammad.com"],
.login-powered {
  display: none !important;
}

/* ─── FONDO LOGIN: BEIGE EN VEZ DE OSCURO ─── */
body.login,
html.login,
#app.login {
  background: #f5f2ee !important;
}

/* ─── LINKS FLUJO ACTIVIDAD: sin naranja ─── */
.activity-stream a,
[class*="activity"] a {
  color: #333333 !important;
}

/* ─── SIDEBAR: links normales gris claro ─── */
#navigation a {
  color: #333333 !important;
}

/* ─── OCULTAR "Entrar a ..." ─── */
.login-title,
.login > h1,
.login > p:first-child,
[class*="login-title"],
.fqdn-title {
  display: none !important;
}

/* ─── OCULTAR "Entrar a..." y "Powered by" ─── */
.fullscreen-body > p { display: none !important; }
.poweredBy { display: none !important; }

/* ─── FONDO LOGIN ─── */
.login.fullscreen,
.fullscreen { background: #f5f2ee !important; }

/* ─── LINK "¿Olvidaste?" sin fondo naranja ─── */
.btn--text.btn--secondary,
a.btn--text,
a.btn--secondary {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #c0390a !important;
  border: none !important;
}

/* ─── REEMPLAZAR ZUNZÚN CON FAVICON ─── */
.navigation .logo,
#navigation .logo {
  position: relative !important;
}

.navigation .logo svg,
#navigation .logo svg,
.navigation .logo .icon-logo,
#navigation .logo .icon-logo {
  display: none !important;
}

.navigation .logo::after,
#navigation .logo::after {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  background-image: url('/api/v1/system_assets/product_logo/1778934034') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ─── REEMPLAZAR ZUNZÚN CON FAVICON ─── */
.navigation .logo,
#navigation .logo {
  position: relative !important;
}

.navigation .logo svg,
#navigation .logo svg,
.navigation .logo .icon-logo,
#navigation .logo .icon-logo {
  display: none !important;
}

.navigation .logo::after,
#navigation .logo::after {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  background-image: url('/api/v1/system_assets/product_logo/1778934034') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ─── LOGO MÁS GRANDE EN TOPBAR ─── */
.navigation .logo,
#navigation .logo {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
}

.navigation .logo::after,
#navigation .logo::after {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
}

/* ─── AJUSTE POSICIÓN LOGO TOPBAR ─── */
.navigation .logo,
#navigation .logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navigation .logo::after,
#navigation .logo::after {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  position: static !important;
}

/* ─── BOTÓN SUCCESS ─── */
.btn--success {
  background: #d6341f !important;
}

/* ─── FAVICON EN TOPBAR ─── */
.navigation .logo::after,
#navigation .logo::after {
  background-image: url('/favicon.ico') !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* ─── FAVICON TOPBAR MÁS GRANDE ─── */
.navigation .logo::after,
#navigation .logo::after {
  background-image: url('/apple-touch-icon.png') !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}

/* ─── FAVICON BONAFIDE MÁS GRANDE ─── */
.navigation .logo::after,
#navigation .logo::after {
  background-image: url('/favicon.ico') !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}

.dropdown-menu.dropdown-menu--light>li>a:hover {
    background: #f4f5ef !important;
}

/* ─── SPLASH: OCULTAR PÁJARO ─── */
.splash svg,
.splash .icon-logo {
  display: none !important;
}

/* ─── SPLASH: PONER LOGO BONAFIDE ─── */
.splash {
  background: #f5f2ee !important;
}

.splash::before {
  content: '' !important;
  display: block !important;
  width: 280px !important;
  height: 100px !important;
  background-image: url('/apple-touch-icon.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-bottom: 16px !important;
}

/* ─── OCULTAR "Registrarse como nuevo cliente" ─── */
.js-footer a[href="#signup"],
a[href="#signup"] {
  display: none !important;
}

/* ─── OCULTAR LINKS DOCUMENTACIÓN ─── */
.js-administratorGuide,
.js-userGuide {
  display: none !important;
}

/* ─── FLUJO ACTIVIDAD: texto gris oscuro ─── */
.activity-stream a,
.activity-stream .activity-text,
[class*="activity"] a,
[class*="activity"] span {
  color: #333333 !important;
}

/* ─── OCULTAR DOCUMENTACIÓN ─── */
.js-administratorGuide { display: none !important; }
.js-userGuide { display: none !important; }

/* ─── OCULTAR DOCUMENTACIÓN ─── */
li.navbar-link-admin-docs,
li.navbar-link-agent-docs {
  display: none !important;
}

/* ─── FLUJO ACTIVIDAD: texto gris oscuro ─── */
.activity-body,
.activity-body .activity-text,
.activity-body .activity-time {
  color: #333333 !important;
}

/* ─── ICONOS DASHBOARD: verde → naranja Bonafide ─── */
/* Convierte #38AE6A y #50E3C2 a naranja #e85d20 */
.mood-icon,
.stat-icon.mood-icon,
.in-process-icon,
.stat-icon.in-process-icon,
.reopening-icon,
.stat-icon.reopening-icon,
.one-ticket,
.stat-icon.stopwatch-icon {
  filter: brightness(0) saturate(100%) invert(42%) sepia(74%) saturate(1200%) hue-rotate(345deg) brightness(95%) contrast(95%) !important;
}