/* IMAGINA PLATFORM UI v2 - account, security and ticket submit */

body:not(.login-bg) .iw-ticket-hero,
body:not(.login-bg) .iw-ticket-area-wrap,
body:not(.login-bg) .iw-ticket-guide,
body:not(.login-bg) .theme-open-ticket-page,
body:not(.login-bg) .iw-account-page-layout,
body:not(.login-bg) .user-security-page-main-sec,
body:not(.login-bg) .theme-clientdetail-page {
  display: grid !important;
  gap: 18px !important;
}

body:not(.login-bg) .iw-ticket-hero {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--iwp-border) !important;
  border-radius: var(--iwp-radius-lg) !important;
  box-shadow: var(--iwp-shadow-soft) !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  margin: 0 0 18px !important;
  overflow: hidden !important;
  padding: 24px !important;
}

body:not(.login-bg) .iw-ticket-kicker,
body:not(.login-bg) .iw-ticket-section-title span,
body:not(.login-bg) .iw-ticket-guide-head span {
  color: var(--iwp-primary) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

body:not(.login-bg) .iw-ticket-hero h1,
body:not(.login-bg) .iw-ticket-section-title h2,
body:not(.login-bg) .iw-ticket-guide-head h2 {
  color: var(--iwp-text) !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  margin: 6px 0 8px !important;
}

body:not(.login-bg) .iw-ticket-hero p,
body:not(.login-bg) .iw-ticket-guide p,
body:not(.login-bg) .iw-ticket-card-copy small {
  color: var(--iwp-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body:not(.login-bg) .iw-ticket-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  margin-top: 16px !important;
}

body:not(.login-bg) .iw-ticket-primary,
body:not(.login-bg) .iw-ticket-secondary,
body:not(.login-bg) .iw-ticket-card-cta {
  align-items: center !important;
  border-radius: var(--iwp-radius-sm) !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
}

body:not(.login-bg) .iw-ticket-primary,
body:not(.login-bg) .iw-ticket-card-cta {
  background: var(--iwp-primary) !important;
  border: 1px solid var(--iwp-primary) !important;
  color: #fff !important;
}

body:not(.login-bg) .iw-ticket-secondary {
  background: #fff !important;
  border: 1px solid var(--iwp-border) !important;
  color: var(--iwp-text-soft) !important;
}

body:not(.login-bg) .iw-ticket-hero-media {
  align-items: center !important;
  background: var(--iwp-primary-soft) !important;
  border: 1px solid rgba(15, 118, 110, .16) !important;
  border-radius: var(--iwp-radius-md) !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  padding: 18px !important;
}

body:not(.login-bg) .iw-ticket-hero-media img,
body:not(.login-bg) .iw-ticket-card-icon img,
body:not(.login-bg) .iw-ticket-empty img {
  max-height: 74px !important;
  max-width: 74px !important;
  object-fit: contain !important;
}

body:not(.login-bg) .iw-ticket-grid,
body:not(.login-bg) .iw-ticket-guide-steps {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body:not(.login-bg) .iw-ticket-area-card,
body:not(.login-bg) .iw-ticket-guide-steps > div,
body:not(.login-bg) .submit-ticket-upper-bar,
body:not(.login-bg) .submit-ticket-inner-section,
body:not(.login-bg) .main-card-accountdetail-section,
body:not(.login-bg) .user-security-page-main-sec .card,
body:not(.login-bg) .linked-account-section,
body:not(.login-bg) .security-question-section,
body:not(.login-bg) .two-factor-available-section {
  background: #fff !important;
  border: 1px solid var(--iwp-border) !important;
  border-radius: var(--iwp-radius-md) !important;
  box-shadow: var(--iwp-shadow-soft) !important;
}

body:not(.login-bg) .iw-ticket-area-card {
  align-items: center !important;
  color: var(--iwp-text) !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  min-height: 116px !important;
  padding: 16px !important;
  text-decoration: none !important;
}

body:not(.login-bg) .iw-ticket-card-icon {
  align-items: center !important;
  background: var(--iwp-primary-soft) !important;
  border-radius: var(--iwp-radius-sm) !important;
  display: inline-flex !important;
  height: 62px !important;
  justify-content: center !important;
  width: 62px !important;
}

body:not(.login-bg) .iw-ticket-card-copy strong,
body:not(.login-bg) .iw-ticket-guide-steps strong {
  color: var(--iwp-text) !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
}

body:not(.login-bg) .iw-ticket-guide-steps > div {
  padding: 16px !important;
}

body:not(.login-bg) .submit-ticket-upper-bar,
body:not(.login-bg) .submit-ticket-inner-section {
  margin: 0 !important;
  padding: 16px !important;
}

body:not(.login-bg) .service-dept-section {
  align-items: center !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.login-bg) .priority-section {
  display: grid !important;
  gap: 7px !important;
}

body:not(.login-bg) .priority-label {
  color: var(--iwp-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

body:not(.login-bg) .custom-select-box-drop {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--iwp-border) !important;
  border-radius: var(--iwp-radius-sm) !important;
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  min-height: 42px !important;
  overflow: hidden !important;
}

body:not(.login-bg) .input-group-addon {
  align-items: center !important;
  background: var(--iwp-surface-soft) !important;
  border: 0 !important;
  color: var(--iwp-muted) !important;
  display: inline-flex !important;
  height: 100% !important;
  justify-content: center !important;
}

body:not(.login-bg) .custom-select-box-drop select,
body:not(.login-bg) .custom-select-box-drop .form-control {
  border: 0 !important;
  box-shadow: none !important;
  min-height: 40px !important;
}

body:not(.login-bg) .formBox {
  background: #fff !important;
  border: 1px solid var(--iwp-border) !important;
  border-radius: var(--iwp-radius-md) !important;
  margin: 0 0 16px !important;
  padding: 18px !important;
}

body:not(.login-bg) .form-inner-section {
  row-gap: 14px !important;
}

body:not(.login-bg) .inputBox {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
}

body:not(.login-bg) .inputText,
body:not(.login-bg) .inputBox label {
  color: var(--iwp-text-soft) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

body:not(.login-bg) .inputBox .input,
body:not(.login-bg) .inputBox input,
body:not(.login-bg) .inputBox select,
body:not(.login-bg) .inputBox textarea,
body:not(.login-bg) .custom-select {
  background: #fff !important;
  border: 1px solid var(--iwp-border) !important;
  border-radius: var(--iwp-radius-sm) !important;
  box-shadow: none !important;
  color: var(--iwp-text) !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  width: 100% !important;
}

body:not(.login-bg) .markdown-editor,
body:not(.login-bg) textarea.input {
  min-height: 180px !important;
  resize: vertical !important;
}

body:not(.login-bg) .ticket-attachment-section,
body:not(.login-bg) .upload-file-sec {
  background: var(--iwp-surface-soft) !important;
  border: 1px dashed var(--iwp-border) !important;
  border-radius: var(--iwp-radius-md) !important;
  padding: 14px !important;
}

body:not(.login-bg) .attachments-label {
  color: var(--iwp-text) !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}

body:not(.login-bg) .label-attachment-sec {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body:not(.login-bg) .ticket-extension-allowed {
  color: var(--iwp-muted) !important;
}

body:not(.login-bg) .btn-footer-submit-ticket,
body:not(.login-bg) .btn-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  justify-content: flex-end !important;
  margin-top: 16px !important;
}

body:not(.login-bg) .wgs_cancel_button {
  background: #fff !important;
  border: 1px solid var(--iwp-border) !important;
  color: var(--iwp-text-soft) !important;
}

body:not(.login-bg) .iw-account-page-layout {
  align-items: start !important;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) !important;
}

body:not(.login-bg) .iw-account-page-main {
  min-width: 0 !important;
}

body:not(.login-bg) .iw-unified-account-page form.bg-white,
body:not(.login-bg) .user-security-page-main-sec.bg-white {
  background: transparent !important;
  margin: 0 !important;
}

body:not(.login-bg) .main-card-accountdetail-section,
body:not(.login-bg) .main-body-accountdetail-section,
body:not(.login-bg) .user-security-page-main-sec .card-body {
  padding: 0 !important;
}

body:not(.login-bg) .user-security-page-main-sec .card {
  padding: 18px !important;
}

body:not(.login-bg) .twofa-config-link {
  color: var(--iwp-muted) !important;
  font-size: 14px !important;
}

@media (max-width: 1100px) {
  body:not(.login-bg) .iw-ticket-hero,
  body:not(.login-bg) .iw-account-page-layout {
    grid-template-columns: 1fr !important;
  }

  body:not(.login-bg) .service-dept-section {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body:not(.login-bg) .iw-ticket-grid,
  body:not(.login-bg) .iw-ticket-guide-steps {
    grid-template-columns: 1fr !important;
  }

  body:not(.login-bg) .iw-ticket-area-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  body:not(.login-bg) .iw-ticket-card-cta {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body:not(.login-bg) .btn-footer-submit-ticket,
  body:not(.login-bg) .btn-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* IW 2026-07-12 - compactar items del menu lateral en mobile */
@media (max-width:991px){
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-nav-body,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-nav-body{
    padding:6px 8px 10px!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-nav-list,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-nav-list{
    display:grid!important;
    gap:3px!important;
    margin:0!important;
    padding:0!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-nav-item,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-nav-item,
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .wgsDataCst,
  body:not(.login-bg) #sidebar.wgssidebaraddon .wgsDataCst{
    margin:0!important;
    padding:0!important;
    min-height:0!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-nav-link,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-nav-link{
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr) 16px!important;
    align-items:center!important;
    gap:8px!important;
    min-height:36px!important;
    height:auto!important;
    margin:0!important;
    padding:5px 8px!important;
    border-radius:8px!important;
    line-height:1.1!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-icon-box,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-icon-box{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    flex:0 0 28px!important;
    border-radius:7px!important;
    font-size:13px!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-nav-label,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-nav-label{
    display:block!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:12.5px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-chevron,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-chevron{
    width:16px!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-sub-list,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-sub-list{
    margin:3px 0 5px 19px!important;
    padding:0 0 0 8px!important;
    gap:2px!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-sub-link,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-sub-link{
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    min-height:30px!important;
    height:auto!important;
    margin:0!important;
    padding:4px 7px!important;
    border-radius:7px!important;
    line-height:1.1!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-sub-icon,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-sub-icon{
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    font-size:11px!important;
  }
  body:not(.login-bg) nav#sidebar.wgssidebaraddon .iw-sub-link span:last-child,
  body:not(.login-bg) #sidebar.wgssidebaraddon .iw-sub-link span:last-child{
    font-size:12px!important;
    line-height:1.12!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}