/* ═══════════════════════════════════════
   FUENTES — debe ir primero
═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════
   TIPOGRAFÍA GLOBAL
═══════════════════════════════════════ */

body,
p, span, div, td, li, a, input,
textarea, select, button, label {
  font-family: 'Inter', Arial, Helvetica, sans-serif !important;
}

h1, h2, h3, h4,
.Header__searchTitle,
.Footer__footerQus,
.Signin__loginTitle {
  font-family: 'Inter', Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════
   FONDO GENERAL
═══════════════════════════════════════ */

body {
  background-color: #F7F9FF !important;
}

/* ═══════════════════════════════════════
   HEADER — barra superior blanca
═══════════════════════════════════════ */

.Header__header {
  background-color: #ffffff !important;
  border-bottom: 2px solid #16264C !important;
  box-shadow: 0 1px 4px rgba(22,38,76,0.08) !important;
}

.Header__navbar {
  background-color: #ffffff !important;
  height: 80px !important;
  min-height: 80px !important;
}

.Header__container {
  height: auto !important;
  min-height: unset !important;
  align-items: center !important;
  display: flex !important;
}

.Header__logo {
  display: flex !important;
  align-items: center !important;
  height: 80px !important;
}

.Header__logoImg {
  display: flex !important;
  align-items: center !important;
}

.Header__logoImg img,
img[data-id="portal_logo"] {
  height: 48px !important;
  width: auto !important;
  max-width: 200px !important;
}

.Header__name {
  display: none !important;
}

.Header__tabs__link {
  color: rgba(22,38,76,0.6) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.Header__tabs__link:hover {
  color: #16264C !important;
}

.Header__tabsTab {
  border-bottom: 2px solid transparent !important;
}

.Header__tabsTab:hover {
  border-bottom: 2px solid rgba(47,164,217,0.4) !important;
}

.LoginDetail__tabLink {
  color: rgba(22,38,76,0.6) !important;
  font-size: 13px !important;
}

.LoginDetail__tabLink:hover {
  color: #16264C !important;
}

.LoginDetail__active .LoginDetail__tabLink {
  color: #16264C !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════
   HERO — bienvenida + buscador
═══════════════════════════════════════ */

.Header__searchSection {
  background-color: #16264C !important;
  padding: 72px 32px 48px 32px !important;
}

.Header__searchSection .Header__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  height: auto !important;
}

.Header__searchTitle {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  margin: 0 0 8px 0 !important;
  width: 100% !important;
  text-align: left !important;
}

.Header__description {
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
  margin: 0 0 16px 0 !important;
  width: 100% !important;
}

.Input__headerSearch {
  background-color: #ffffff !important;
  color: #444655 !important;
  font-size: 14px !important;
}

.Input__headerSearch::placeholder {
  color: #A8AABC !important;
}

[data-id="searchButton"],
.SearchContainer__searchIcon,
.commonStyle__zt3BrandBg {
  background-color: #ffffff !important;
}

[data-id="searchButton"] svg,
[data-id="searchButton"] .Icon__icon,
.SearchContainer__searchIcon svg,
.SearchContainer__searchIcon .Icon__icon {
  fill: #2FA4D9 !important;
  color: #2FA4D9 !important;
  stroke: #2FA4D9 !important;
}

#headerContent {
  padding: 80px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 220px !important;
}

#headerContent .Header__container {
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 700px !important;
}

#headerContent .Header__searchTitle {
  text-align: center !important;
}

#headerContent .Header__description {
  text-align: center !important;
}

/* ═══════════════════════════════════════
   ICONOS Y COLORES DE MARCA
═══════════════════════════════════════ */

.commonStyle__zt3BrandColor,
.commonStyle__zt3BrandBg,
.HomeContent__iconContainer svg,
.HomeContent__iconContainer svg path,
.HomeContent__iconContainer svg rect,
.HomeContent__iconContainer svg circle {
  color: #2FA4D9 !important;
  fill: #2FA4D9 !important;
  stroke: #2FA4D9 !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════
   TIPOGRAFÍA GENERAL
═══════════════════════════════════════ */

h1, h2, h3, h4 {
  color: #16264C !important;
}

a {
  color: #2FA4D9 !important;
}

a:hover {
  color: #16264C !important;
}

.HomeContent__title {
  color: #2FA4D9 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════
   BOTONES
═══════════════════════════════════════ */

button[type="submit"],
input[type="submit"] {
  background-color: #2FA4D9 !important;
  color: #16264C !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: #16264C !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════
   TABLAS
═══════════════════════════════════════ */

thead tr {
  background-color: #16264C !important;
}

thead th {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
}

tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

tbody tr:nth-child(even) {
  background-color: #F7F9FF !important;
}

tbody tr:hover {
  background-color: #E9EFFF !important;
}

tbody td {
  padding: 12px 16px !important;
  color: #444655 !important;
  font-size: 13px !important;
}

/* ═══════════════════════════════════════
   FORMULARIOS
═══════════════════════════════════════ */

input[type="text"],
input[type="email"],
textarea,
select {
  border-radius: 7px !important;
  font-size: 13px !important;
  color: #444655 !important;
  background-color: #ffffff !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(47,164,217,0.12) !important;
}

label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #16264C !important;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */

.Footer__footerInfo {
  background-color: #16264C !important;
  padding: 48px 32px !important;
  border-top: 2px solid #2FA4D9 !important;
  margin-top: 0 !important;
}

.Footer__footerQus {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.Footer__footerDescription span {
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
}

.Button__footerBtn {
  background-color: #2FA4D9 !important;
  color: #16264C !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 7px !important;
  padding: 10px 24px !important;
  border: none !important;
  margin-top: 20px !important;
}

.Button__footerBtn:hover {
  background-color: #ffffff !important;
  color: #16264C !important;
}

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

.UserContainer__innerContainer1 {
  background-color: #ffffff !important;
  border: 1px solid #E9EFFF !important;
  border-radius: 12px !important;
  padding: 28px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

.Signin__loginTitle {
  color: #16264C !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.Signin__loginSubTitle {
  color: #747687 !important;
  font-size: 14px !important;
}

#loginHeader {
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #E9EFFF !important;
}

/* ═══════════════════════════════════════
   OCULTAR ELEMENTOSs
═══════════════════════════════════════ */


/* Sidebar artículos populares en formulario de ticket */
.TicketFormRightContainer__widgetRight {
  display: none !important;
}
/* Botón Editar en propiedades del ticket */
.ListHeader__editOption {
  display: none !important;
}
/* Ocultar botón Cerrar Ticket */
[data-id="closeTicket"] {
  display: none !important;
}
/* Ocultar botón Comentario */
[aria-label="comment"] {
  display: none !important;
}
/* Ocultar Skills y Canal en detalle de ticket */
.ticket_entityskills,
.ticket_channel {
  display: none !important;
}
/* Ocultar hero en páginas de Knowledge Base */
.articleList #headerContent,
.conocimientoGeneral #headerContent {
  display: none !important;
}
/* Ocultar hero en Mi área y Base de conocimientos */
.ticketList #headerContent,
.articleList #headerContent {
  display: none !important;
}
/* Centrar artículos populares en el inicio */
.WidgetContainer__boxSplit.popularAricles {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.WidgetContainer__boxSplit.popularAricles > * {
  text-align: center !important;
  max-width: 400px !important;
}
/* Cambiar naranja a colores BlueVex */
.HomeContent__iconContainer svg path,
.HomeContent__iconContainer svg rect,
.HomeContent__iconContainer svg circle,
.HomeContent__iconContainer svg {
  fill: #2FA4D9 !important;
  stroke: #2FA4D9 !important;
  color: #2FA4D9 !important;
}

/* Textos naranja a cyan */
.commonStyle__zt3BrandColor,
[class*="zt3Brand"] {
  color: #2FA4D9 !important;
  fill: #2FA4D9 !important;
}

/* Fondos naranja a navy */
.commonStyle__zt3BrandBg,
[class*="zt3BrandBg"] {
  background-color: #16264C !important;
}

/* Botones naranja */
.commonStyle__zt3ButtonPrimaryBg,
[class*="zt3ButtonPrimary"] {
  background-color: #2FA4D9 !important;
  color: #16264C !important;
  border-color: #2FA4D9 !important;
}
/* Filtros Mi área — color y hover */
.TicketFilterPopup__filterValue {
  color: #16264C !important;
}

.TicketFilterPopup__filterValue:hover,
.TicketFilterPopup__active {
  color: #2FA4D9 !important;
}
/* Botón Agregar Ticket */
.Button__primary {
  background-color: #16264C !important;
  color: #ffffff !important;
  border-color: #16264C !important;
}

.Button__primary:hover {
  background-color: #2FA4D9 !important;
  color: #ffffff !important;
  border-color: #2FA4D9 !important;
}
/* Icono overdue — cambiar rojo a cyan */
.Icon__red1 {
  color: #2FA4D9 !important;
  fill: #2FA4D9 !important;
}

.Icon__red1 svg,
.Icon__red1 svg path {
  fill: #2FA4D9 !important;
  color: #2FA4D9 !important;
}
/* Botón Seguir — borde y texto cyan */
.Button__primaryBorder {
  border-color: #2FA4D9 !important;
  color: #2FA4D9 !important;
}

.Button__primaryBorder:hover {
  background-color: #2FA4D9 !important;
  color: #ffffff !important;
}
/* Dropdown búsqueda — hover y activo */
.SearchContainer__searchModule:hover,
.SearchContainer__selected {
  color: #2FA4D9 !important;
}

.commonStyle__zt3LinkActive {
  color: #2FA4D9 !important;
}
/* Botón lupa — fondo blanco con icono cyan */
.SearchContainer__searchIcon {
  background-color: #ffffff !important;
}

.SearchContainer__searchIcon svg,
.SearchContainer__searchIcon svg path {
  fill: #2FA4D9 !important;
  color: #2FA4D9 !important;
  stroke: #2FA4D9 !important;
}
/* Flecha barra búsqueda — triángulo CSS */
.SearchContainer__downArrow {
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid #2FA4D9 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
}
/* Título ticket — hover cyan */
.TicketListItem__ticketCardTitle {
  color: #16264C !important;
}

.TicketListItem__ticketCardTitle:hover {
  color: #2FA4D9 !important;
}
/* Botón Responder en detalle de ticket */
.ConversationForm__replay a,
.ConversationForm__replay [aria-label="Reply"] {
  color: #2FA4D9 !important;
}

.ConversationForm__replay svg,
.ConversationForm__replay svg path,
.ConversationForm__replay svg rect {
  fill: #2FA4D9 !important;
  color: #2FA4D9 !important;
  stroke: #2FA4D9 !important;
}
/* Botón Responder — hover en cyan */
.ConversationForm__replay a,
.ConversationForm__replay [aria-label="Reply"] {
  color: #444655 !important;
}

.ConversationForm__replay svg,
.ConversationForm__replay svg path,
.ConversationForm__replay svg rect,
.ConversationForm__replay svg circle {
  fill: #444655 !important;
  color: #444655 !important;
  stroke: #444655 !important;
}

.ConversationForm__replay:hover a,
.ConversationForm__replay:hover [aria-label="Reply"] {
  color: #2FA4D9 !important;
}

.ConversationForm__replay:hover svg,
.ConversationForm__replay:hover svg path,
.ConversationForm__replay:hover svg rect,
.ConversationForm__replay:hover svg circle {
  fill: #2FA4D9 !important;
  color: #2FA4D9 !important;
  stroke: #2FA4D9 !important;
}
/* Ocultar filtro Todos los canales */
[data-id="channelFilter_arrow_icon"] {
  display: none !important;
}
/* Ocultar filtro Todos los canales */
.TicketList__filter_channel {
  display: none !important;
}
/* Quitar hover naranja de iconos Mi área */
.Icon__hoverbrand:hover,
.Icon__hoverbrand:hover svg,
.Icon__hoverbrand:hover svg path,
.Icon__hoverbrand:hover svg rect,
.Icon__hoverbrand:hover svg circle {
  fill: #444655 !important;
  color: #444655 !important;
  stroke: none !important;
}

.TicketList__actions .Icon__icon:hover svg,
.TicketList__actions .Icon__icon:hover svg path {
  fill: #2FA4D9 !important;
  color: #2FA4D9 !important;
}