html, body { height: 100% !important; }
* { box-sizing: border-box; }

:root{
  --mati-blue: #3CA3DB;
  --mati-blue-soft: #EAF6FC;
  --mati-blue-soft-2: #D8EEF9;
  --davissa-green: #8AB225;
  --davissa-green-soft: #F2F8E3;
  --davissa-green-soft-2: #E4F0C2;
  --mati-ink: #23313F;
  --mati-text: #2E3A46;
  --mati-text-soft: #66717D;
  --surface: rgba(255,255,255,0.86);
  --surface-2: rgba(255,255,255,0.72);
  --surface-border: rgba(60,163,219,0.16);
  --shadow-soft: 0 16px 40px rgba(31,16,11,0.08);
  --shadow-mid: 0 10px 28px rgba(31,16,11,0.10);
}

body{
  background:
    radial-gradient(1000px 560px at 12% 8%, rgba(60,163,219,0.16) 0%, rgba(60,163,219,0.00) 58%),
    radial-gradient(760px 420px at 88% 12%, rgba(138,178,37,0.12) 0%, rgba(138,178,37,0.00) 56%),
    linear-gradient(180deg, #F7FBFD 0%, #EEF6F9 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  mix-blend-mode: normal;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 7px);
  filter: blur(.2px);
}

main#mainContainer,
#layoutContainer,
.container,
.portal-container,
section,
main,
.Layout__twoColumn,
.Layout__oneColumn,
.Layout__layout1,
.Layout__layout2,
.commonStyle__positionRel,
.commonStyle__marginAuto{
  background: transparent !important;
}

header, .hc-header, .portal-header{
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(60,163,219,0.10) !important;
  box-shadow: 0 4px 16px rgba(31,16,11,0.04) !important;
}

/* NEW TICKET */
.Layout__twoColumn:has(form#ticketform_fields_container){
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
}

.Layout__twoColumn:has(form#ticketform_fields_container) .Layout__layout2{
  display: none !important;
}

.Layout__twoColumn:has(form#ticketform_fields_container) .Layout__layout1{
  width: 100% !important;
}

form#ticketform_fields_container,
#newTicketContainer form,
.ticket-form-container form,
.ticket-form form{
  position: relative;
  z-index: 2;
  max-width: 920px !important;
  margin: 52px auto 84px auto !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82)) !important;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border-radius: 22px !important;
  border: 1px solid rgba(60,163,219,0.14) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.55),
    0 18px 45px rgba(31,16,11,0.08),
    0 6px 16px rgba(31,16,11,0.06) !important;
  padding: 38px 40px !important;
  transform: translateZ(0);
}

form#ticketform_fields_container::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 21px;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

form#ticketform_fields_container::after{
  content:"";
  position:absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  border-radius: 22px;
  pointer-events:none;
  background: radial-gradient(700px 150px at 18% 0%, rgba(60,163,219,0.12) 0%, rgba(60,163,219,0.00) 72%);
  opacity: .9;
}

@media (min-width: 769px){
  form#ticketform_fields_container:hover{
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.55),
      0 22px 52px rgba(31,16,11,0.09),
      0 8px 18px rgba(31,16,11,0.07) !important;
  }
}

h1, .page-title, .ticket-title{
  color: var(--mati-text) !important;
  letter-spacing: -0.6px !important;
  font-weight: 800 !important;
}

label, .form-label{
  font-size: 13px !important;
  font-weight: 650 !important;
  color: var(--mati-text-soft) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  width: 100% !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(60,163,219,0.18) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  min-height: 44px !important;
  color: var(--mati-text) !important;
  transition: all 160ms ease !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 2px rgba(31,16,11,0.04) !important;
}

input:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(60,163,219,0.48) !important;
  box-shadow:
    0 0 0 4px rgba(60,163,219,0.10),
    0 8px 20px rgba(60,163,219,0.08) !important;
  transform: translateY(-1px);
}

.btn-primary,
input[type="submit"],
button[type="submit"]{
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #3CA3DB 0%, #8AB225 100%) !important;
  box-shadow:
    0 8px 18px rgba(60,163,219,0.16),
    0 4px 10px rgba(138,178,37,0.10) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow:
    0 12px 24px rgba(60,163,219,0.18),
    0 6px 12px rgba(138,178,37,0.12) !important;
}

.DropDown__main{
  width: 100% !important;
  margin-top: 6px !important;
  margin-bottom: 16px !important;
}

.DropDown__dropdown{
  width: 100% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86)) !important;
  border: 1px solid rgba(60,163,219,0.18) !important;
  border-radius: 14px !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 2px rgba(31,16,11,0.04) !important;
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

.DropDown__selectedText{
  font-size: 14px !important;
  color: var(--mati-text) !important;
  font-weight: 550 !important;
}

.DropDown__arrowOpen{
  opacity: .75 !important;
  transition: transform 180ms ease !important;
}

.DropDown__dropdown:hover{
  border-color: rgba(60,163,219,0.32) !important;
  box-shadow:
    0 8px 18px rgba(60,163,219,0.08),
    0 4px 10px rgba(31,16,11,0.05) !important;
  transform: translateY(-1px);
}

.DropDown__dropdown[aria-expanded="true"] .DropDown__arrowOpen{
  transform: rotate(180deg) scale(.92) !important;
}

.DropDown__menu,
.DropDown__list{
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  border-radius: 14px !important;
  border: 1px solid rgba(60,163,219,0.12) !important;
  box-shadow:
    0 16px 40px rgba(31,16,11,0.08),
    0 6px 14px rgba(31,16,11,0.06) !important;
  overflow: hidden !important;
}

.DropDown__option{
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--mati-text) !important;
}

.DropDown__option:hover{
  background: rgba(60,163,219,0.08) !important;
}

.DropDown__option.selected{
  background: rgba(138,178,37,0.10) !important;
  font-weight: 700 !important;
}

@media (max-width: 768px){
  form#ticketform_fields_container{
    padding: 22px 18px !important;
    margin: 20px 12px 44px 12px !important;
    border-radius: 18px !important;
  }

  .DropDown__dropdown{
    min-height: 50px !important;
  }
}

/* MI AREA / TICKET DETAIL */
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container))::before,
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container))::before{
  opacity: .02 !important;
  mix-blend-mode: normal !important;
}

.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)),
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)){
  display: flex !important;
  gap: 22px !important;
  align-items: flex-start !important;
}

.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout2,
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout2{
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.72)) !important;
  border: 1px solid rgba(60,163,219,0.12) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  box-shadow: 0 14px 34px rgba(31,16,11,0.08) !important;
  overflow: hidden !important;
}

.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout1,
.Layout__twoColumn:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__layout2,
.Layout__twoColumn:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__layout2{
  padding: 16px !important;
}

body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer,
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer{
  color: var(--mati-text) !important;
}

body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer small,
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer small,
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="meta"],
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="meta"],
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="sub"],
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="sub"],
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="time"],
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="time"]{
  color: var(--mati-text-soft) !important;
}

body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer hr,
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer hr,
body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="divider"],
body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) #layoutContainer [class*="divider"]{
  border-color: rgba(60,163,219,0.10) !important;
}

body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__twoColumn .Layout__layout1{
  flex: 1 1 auto !important;
  min-width: 540px !important;
}

body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__twoColumn .Layout__layout2{
  flex: 0 0 360px !important;
  width: 360px !important;
}

@media (max-width: 900px){
  body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__twoColumn,
  body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__twoColumn{
    display: block !important;
  }

  body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__twoColumn .Layout__layout1,
  body:has([data-id="ticketList"]):not(:has(form#ticketform_fields_container)) .Layout__twoColumn .Layout__layout2,
  body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__twoColumn .Layout__layout1,
  body:has([data-id="ticketDetail"]):not(:has(form#ticketform_fields_container)) .Layout__twoColumn .Layout__layout2{
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 14px !important;
  }
}

/* FOOTER OFF */
#footerContainer,
.Footer__footerBg,
.Footer__footerCopyright,
.Footer__footerCopyRight,
.Footer__container2{
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

main#mainContainer{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* LOGIN CLEAN */
body:has(#login_id) #layoutContainer .Layout__twoColumn,
body:has(#login_id) #layoutContainer [class*="twoColumn"]{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 28px !important;
}

body:has(#login_id) #signin_flow.signin_box{
  width: min(440px, 92vw) !important;
  padding: 26px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)) !important;
  border: 1px solid rgba(60,163,219,0.14) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  box-shadow: 0 16px 36px rgba(31,16,11,0.08) !important;
}

body:has(#login_id) .UserContainer__innerContainer2{
  max-width: 560px !important;
  width: 100% !important;
  padding: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.68)) !important;
  border: 1px solid rgba(138,178,37,0.12) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  box-shadow: 0 14px 30px rgba(31,16,11,0.06) !important;
}

body:has(#login_id) .signin_box h1,
body:has(#login_id) .signin_box h2,
body:has(#login_id) .signin_box h3,
body:has(#login_id) .signin_div h1,
body:has(#login_id) .signin_div h2,
body:has(#login_id) .signin_div h3{
  color: var(--mati-text) !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
}

body:has(#login_id) .signin_box *,
body:has(#login_id) .signin_div *,
body:has(#login_id) .UserContainer__innerContainer2 *{
  color: var(--mati-text) !important;
}

body:has(#login_id) input#login_id,
body:has(#login_id) input[type="email"],
body:has(#login_id) input[type="text"],
body:has(#login_id) input[type="password"]{
  width: 100% !important;
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(60,163,219,0.16) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  min-height: 46px !important;
  color: var(--mati-text) !important;
  box-shadow: 0 1px 2px rgba(31,16,11,0.04) !important;
}

body:has(#login_id) input::placeholder{
  color: #8A95A1 !important;
}

body:has(#login_id) input:focus{
  outline: none !important;
  border-color: rgba(60,163,219,0.42) !important;
  box-shadow: 0 0 0 4px rgba(60,163,219,0.10) !important;
}

body:has(#login_id) button#nextbtn,
body:has(#login_id) button.btn.blue,
body:has(#login_id) input[type="submit"]{
  width: 100% !important;
  margin-top: 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #3CA3DB 0%, #8AB225 100%) !important;
  box-shadow: 0 8px 18px rgba(60,163,219,0.14) !important;
}

body:has(#login_id) a,
body:has(#login_id) a:link,
body:has(#login_id) a:visited{
  color: #6E9E1F !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body:has(#login_id) a:hover{
  text-decoration: underline !important;
}

@media (max-width: 768px){
  body:has(#login_id) #layoutContainer .Layout__twoColumn,
  body:has(#login_id) #layoutContainer [class*="twoColumn"]{
    display: block !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:has(#login_id) #signin_flow.signin_box,
  body:has(#login_id) .UserContainer__innerContainer2{
    margin: 16px 0 !important;
  }
}
/* ===== FIX HEADER / MENÚ SUPERIOR / TABS ===== */

.Header__tabs__link,
.Header__tabs__link:link,
.Header__tabs__link:visited,
.Header__tabs__link:hover,
.Header__tabs__link:active,
.Header__tabsTab,
.Header__tabsTab a,
.Header__tabsTab a:link,
.Header__tabsTab a:visited,
.Header__tabsTab a:hover,
.Header__tabsTab a:active,
#portal_tabCases .Header__tabs__link,
#portal_tabSolutions .Header__tabs__link,
#portal_tabContacts .Header__tabs__link,
#portal_tabReports .Header__tabs__link,
#portal_tabCases a,
#portal_tabSolutions a,
#portal_tabContacts a,
#portal_tabReports a{
  color: var(--mati-text) !important;
  fill: var(--mati-text) !important;
  opacity: 1 !important;
}

/* estado activo */
.Header__active .Header__tabs__link,
.Header__active a,
li.Header__active .Header__tabs__link,
li.Header__active a,
#portal_tabCases.Header__active .Header__tabs__link,
#portal_tabSolutions.Header__active .Header__tabs__link,
#portal_tabContacts.Header__active .Header__tabs__link,
#portal_tabReports.Header__active .Header__tabs__link{
  color: #6E9E1F !important;
  fill: #6E9E1F !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* hover */
.Header__tabsTab:hover .Header__tabs__link,
.Header__tabsTab:hover a,
.Header__tabs__link:hover,
.Header__tabsTab a:hover{
  color: #3CA3DB !important;
  fill: #3CA3DB !important;
}

/* idioma, iconos y links del header derecho */
header a,
header a:link,
header a:visited,
.portal-header a,
.portal-header a:link,
.portal-header a:visited,
.hc-header a,
.hc-header a:link,
.hc-header a:visited{
  color: var(--mati-text) !important;
}

/* íconos del header */
header svg,
header i,
.portal-header svg,
.portal-header i,
.hc-header svg,
.hc-header i{
  color: var(--mati-text) !important;
  fill: var(--mati-text) !important;
  stroke: currentColor !important;
}

/* placeholder y texto del buscador superior */
header input,
.portal-header input,
.hc-header input,
header .searchphrase,
.portal-header .searchphrase,
.hc-header .searchphrase{
  color: var(--mati-text) !important;
}

header input::placeholder,
.portal-header input::placeholder,
.hc-header input::placeholder{
  color: #8A95A1 !important;
  opacity: 1 !important;
}