/* ============================================================
   CLOUDPELIZZON PORTAL DO CLIENTE
   DESIGN SYSTEM PREMIUM V15.4
   ============================================================ */


/* ============================================================
   BASE VISUAL
   ============================================================ */

html[data-theme="light"]{
  color-scheme:light;

  --cp154-bg:#e8f2f7;
  --cp154-bg-deep:#dcecf3;

  --cp154-card:#ffffff;
  --cp154-card-soft:#f5fafc;

  --cp154-navy:#08283a;
  --cp154-navy-2:#123f56;

  --cp154-text:#0b2a3b;
  --cp154-text-2:#496a7a;
  --cp154-muted:#718c99;

  --cp154-cyan:#04bde9;
  --cp154-blue:#078ee8;
  --cp154-blue-deep:#0667ba;

  --cp154-line:#b8d9e6;
  --cp154-line-strong:#85c9de;

  --cp154-shadow:
    0 14px 34px rgba(23,78,105,.09);

  --cp154-shadow-hover:
    0 20px 44px rgba(16,83,114,.14);
}


html[data-theme="light"] body{
  background:
    radial-gradient(
      circle at 84% 3%,
      rgba(20,184,235,.11),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      #eff7fa 0%,
      #e6f1f6 52%,
      #dcecf3 100%
    )!important;

  color:var(--cp154-text)!important;
}


/* ============================================================
   GRID DE FUNDO
   ============================================================ */

html[data-theme="light"] .cyber-bg{
  background:
    linear-gradient(
      rgba(17,114,151,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17,114,151,.035) 1px,
      transparent 1px
    )!important;

  background-size:42px 42px!important;

  opacity:.75!important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

html[data-theme="light"] .cp7-sidebar{
  background:
    linear-gradient(
      180deg,
      #f9fcfd 0%,
      #edf6fa 100%
    )!important;

  border-right:1px solid #b8d6e2!important;

  box-shadow:
    12px 0 34px rgba(15,77,105,.07)!important;
}


/* LOGO - CORREÇÃO DO BRANCO DA MARCA */

html[data-theme="light"] .cp7-brand{
  position:relative!important;

  overflow:hidden!important;

  background:
    radial-gradient(
      circle at 40% 15%,
      rgba(0,199,255,.20),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #061827 0%,
      #082d43 100%
    )!important;

  border:1px solid rgba(22,166,218,.55)!important;

  box-shadow:
    0 14px 30px rgba(3,45,67,.18),
    inset 0 0 26px rgba(0,191,245,.07)!important;
}


html[data-theme="light"] .cp7-brand::after{
  content:""!important;

  position:absolute!important;
  left:10%!important;
  right:10%!important;
  bottom:0!important;

  height:2px!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      #1edcff,
      transparent
    )!important;
}


html[data-theme="light"] .cp7-brand img{
  opacity:1!important;

  filter:
    drop-shadow(
      0 5px 12px rgba(0,0,0,.28)
    )!important;
}


html[data-theme="light"] .cp7-brand span{
  color:#dff8ff!important;

  letter-spacing:.18em!important;
}


/* MENU */

html[data-theme="light"] .cp7-nav-item{
  color:#244b5d!important;

  border:1px solid transparent!important;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease!important;
}


html[data-theme="light"] .cp7-nav-item:hover{
  color:#062f44!important;

  background:#e5f5fb!important;

  border-color:#aadceb!important;

  transform:translateX(2px)!important;
}


html[data-theme="light"] .cp7-nav-item.active{
  color:#062d42!important;

  background:
    linear-gradient(
      90deg,
      rgba(0,178,235,.18),
      rgba(0,122,225,.08)
    )!important;

  border-color:#5bbce0!important;

  box-shadow:
    inset 3px 0 0 #039fe5,
    0 6px 18px rgba(20,124,166,.09)!important;
}


/* ============================================================
   MAIN / CONTEÚDO
   ============================================================ */

html[data-theme="light"]
.cp14-main:not(.is-home){
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(19,181,232,.08),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #edf6f9,
      #e4f0f5
    )!important;
}


html[data-theme="light"]
.cp14-main:not(.is-home)
.cp14-content{
  width:100%!important;

  max-width:1700px!important;

  margin:0 auto!important;

  padding:
    20px
    24px
    34px!important;
}


/* ============================================================
   CABEÇALHO DE TODAS AS SUBPÁGINAS
   ============================================================ */

html[data-theme="light"]
.cp14-main:not(.is-home)
.cp7-page-head{
  position:relative!important;

  min-height:142px!important;

  padding:
    27px
    31px!important;

  margin-bottom:18px!important;

  overflow:hidden!important;

  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(0,190,244,.14),
      transparent 27%
    ),
    linear-gradient(
      115deg,
      #ffffff 0%,
      #f8fcfe 58%,
      #e2f3fa 100%
    )!important;

  border:
    1px solid
    #a8d5e5!important;

  border-radius:18px!important;

  box-shadow:
    0 14px 34px rgba(20,86,113,.08)!important;
}


html[data-theme="light"]
.cp14-main:not(.is-home)
.cp7-page-head::before{
  content:""!important;

  position:absolute!important;

  left:0!important;
  top:24px!important;
  bottom:24px!important;

  width:4px!important;

  background:
    linear-gradient(
      180deg,
      #21ddff,
      #078beb
    )!important;

  border-radius:
    0 5px 5px 0!important;
}


html[data-theme="light"]
.cp7-page-head small{
  color:#0479aa!important;

  font-weight:900!important;

  letter-spacing:.15em!important;
}


html[data-theme="light"]
.cp7-page-head h1{
  margin:
    7px 0
    4px!important;

  color:#08283a!important;

  font-size:
    clamp(
      31px,
      2.5vw,
      48px
    )!important;

  line-height:1.02!important;

  letter-spacing:-.045em!important;
}


html[data-theme="light"]
.cp7-page-head p{
  color:#426878!important;

  font-size:13px!important;
}


/* ============================================================
   PAINEL PADRÃO
   ============================================================ */

html[data-theme="light"]
.cp7-panel{
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f9fcfd 100%
    )!important;

  border:
    1px solid
    #b7dbe8!important;

  border-radius:18px!important;

  box-shadow:
    var(--cp154-shadow)!important;
}


html[data-theme="light"]
.cp7-panel:hover{
  border-color:#93cfe2!important;
}


/* ============================================================
   ÍCONES
   ============================================================ */

html[data-theme="light"]
.cp7-icon3d{
  background:
    radial-gradient(
      circle at 35% 25%,
      #ffffff,
      #e2f5fb
    )!important;

  border:
    1px solid
    #9dd8e9!important;

  border-radius:15px!important;

  box-shadow:
    inset 0 0 18px rgba(0,176,226,.10),
    0 8px 20px rgba(12,113,155,.10)!important;
}


/* ============================================================
   MINHA INSTALAÇÃO
   ============================================================ */

html[data-theme="light"]
.page-instalacao
.cp7-install-hero{
  min-height:145px!important;

  padding:25px!important;

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(0,198,239,.08),
      transparent 29%
    ),
    #ffffff!important;
}


html[data-theme="light"]
.page-instalacao
.cp7-metrics{
  gap:16px!important;
}


html[data-theme="light"]
.page-instalacao
.cp7-metric{
  min-height:175px!important;

  padding:22px!important;

  position:relative!important;

  overflow:hidden!important;
}


html[data-theme="light"]
.page-instalacao
.cp7-metric::after{
  content:""!important;

  position:absolute!important;

  left:0!important;
  right:0!important;
  bottom:0!important;

  height:3px!important;

  background:
    linear-gradient(
      90deg,
      #08bde9,
      #087ee8
    )!important;
}


html[data-theme="light"]
.page-instalacao
.cp7-metric h3{
  color:#08283a!important;

  font-size:28px!important;
}


/* ============================================================
   MÓDULOS - VITRINE COMERCIAL PREMIUM
   ============================================================ */

.page-modulos
.cp7-module-grid{
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    )!important;

  gap:18px!important;
}


.page-modulos
.cp7-module-card{
  position:relative!important;

  overflow:hidden!important;

  min-height:555px!important;

  padding:
    190px
    22px
    22px!important;

  transition:
    transform .22s ease,
    box-shadow .22s ease!important;
}


.page-modulos
.cp7-module-card:hover{
  transform:translateY(-4px)!important;

  box-shadow:
    0 24px 48px rgba(13,68,94,.17)!important;
}


/* ARTE */

.page-modulos
.cp7-module-card::before{
  content:""!important;

  position:absolute!important;

  top:0!important;
  left:0!important;
  right:0!important;

  height:166px!important;

  opacity:1!important;

  background-size:cover!important;
  background-position:center!important;

  border-radius:
    17px 17px
    0 0!important;

  transform:none!important;

  filter:none!important;

  z-index:0!important;
}


.page-modulos
.cp7-module-card::after{
  content:""!important;

  position:absolute!important;

  top:0!important;
  left:0!important;
  right:0!important;

  height:166px!important;

  background:
    linear-gradient(
      180deg,
      rgba(1,13,22,.08),
      rgba(2,18,29,.60)
    )!important;

  z-index:1!important;
}


/* ÍCONE E STATUS SOBRE A ARTE */

.page-modulos
.cp7-module-top{
  position:absolute!important;

  top:18px!important;
  left:18px!important;
  right:18px!important;

  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;

  z-index:3!important;
}


.page-modulos
.cp7-module-top
.cp7-icon3d{
  background:
    rgba(3,25,38,.78)!important;

  border-color:
    rgba(92,226,255,.50)!important;

  backdrop-filter:
    blur(10px)!important;
}


.page-modulos
.cp7-module-top
.cp7-badge{
  background:
    rgba(255,255,255,.93)!important;

  color:#075b7d!important;

  border-color:
    rgba(135,220,245,.75)!important;

  box-shadow:
    0 6px 20px rgba(0,0,0,.12)!important;
}


html[data-theme="light"]
.page-modulos
.cp7-module-card{
  background:#ffffff!important;
}


.page-modulos
.cp7-module-card h3{
  margin-top:2px!important;

  color:#092a3d!important;

  font-size:24px!important;
}


.page-modulos
.cp7-module-card > p{
  min-height:49px!important;

  color:#486a79!important;

  line-height:1.55!important;
}


.page-modulos
.cp7-module-card ul{
  min-height:86px!important;

  color:#345769!important;
}


.page-modulos
.cp7-module-price{
  margin-top:auto!important;

  padding:
    15px
    17px!important;

  background:
    linear-gradient(
      100deg,
      #edf9fd,
      #ffffff
    )!important;

  border:
    1px solid
    #a8dceb!important;

  border-radius:14px!important;
}


.page-modulos
.cp7-module-price strong{
  color:#08283a!important;

  font-size:31px!important;
}


.page-modulos
.cp7-module-card form{
  margin-top:11px!important;
}


.page-modulos
.cp7-module-card
.cp7-secondary{
  width:100%!important;

  min-height:48px!important;

  justify-content:center!important;

  color:#ffffff!important;

  background:
    linear-gradient(
      90deg,
      #078ee8,
      #05bce7
    )!important;

  border:0!important;

  box-shadow:
    0 9px 20px rgba(0,138,215,.17)!important;
}


/* ============================================================
   PLANOS
   ============================================================ */

html[data-theme="light"]
.page-planos
.cp7-plan-grid{
  gap:18px!important;
}


html[data-theme="light"]
.page-planos
.cp7-plan-card{
  position:relative!important;

  min-height:495px!important;

  padding:24px!important;

  overflow:hidden!important;
}


html[data-theme="light"]
.page-planos
.cp7-plan-card::before{
  content:""!important;

  position:absolute!important;

  left:0!important;
  right:0!important;
  top:0!important;

  height:5px!important;

  background:
    linear-gradient(
      90deg,
      #06c5e9,
      #087be6
    )!important;
}


html[data-theme="light"]
.page-planos
.cp7-plan-card:nth-child(2){
  border-color:#72bfdf!important;

  box-shadow:
    0 18px 42px rgba(0,116,176,.13)!important;
}


html[data-theme="light"]
.page-planos
.cp7-plan-price strong{
  color:#08283a!important;

  font-size:46px!important;
}


html[data-theme="light"]
.page-planos
.cp7-plan-card ul{
  color:#3e6172!important;
}


html[data-theme="light"]
.page-planos
.cp7-plan-card
.cp7-secondary{
  margin-top:auto!important;

  min-height:48px!important;

  background:
    linear-gradient(
      90deg,
      #eef9fd,
      #e3f3fa
    )!important;

  border-color:#9bd5e7!important;

  color:#075d82!important;
}


/* ============================================================
   CHAMADOS
   ============================================================ */

html[data-theme="light"]
.page-chamados
.cp7-ticket-kpis{
  gap:14px!important;

  margin-bottom:16px!important;
}


html[data-theme="light"]
.page-chamados
.cp7-ticket-kpis article{
  min-height:105px!important;

  padding:19px!important;

  background:#ffffff!important;

  border:
    1px solid
    #b8dae6!important;

  border-radius:16px!important;

  box-shadow:
    0 10px 26px rgba(20,81,108,.07)!important;
}


html[data-theme="light"]
.page-chamados
.cp7-ticket-kpis strong{
  color:#08283a!important;

  font-size:31px!important;
}


html[data-theme="light"]
.page-chamados
.cp7-ticket-layout{
  gap:18px!important;
}


html[data-theme="light"]
.page-chamados
.cp7-ticket-form{
  padding:23px!important;
}


html[data-theme="light"]
.page-chamados
input,
html[data-theme="light"]
.page-chamados
select,
html[data-theme="light"]
.page-chamados
textarea{
  background:#ffffff!important;

  border:
    1px solid
    #a8cfdd!important;

  border-radius:12px!important;

  box-shadow:
    inset 0 1px 2px rgba(15,75,98,.03)!important;

  color:#12384a!important;
}


/* ============================================================
   EQUIPAMENTOS + MANUTENÇÕES
   ============================================================ */

html[data-theme="light"]
:is(.page-equipamentos,.page-manutencoes)
.cp7-equipment-hero{
  display:grid!important;

  grid-template-columns:
    76px 1fr auto!important;

  align-items:center!important;

  gap:23px!important;

  min-height:160px!important;

  padding:25px!important;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(0,184,235,.08),
      transparent 30%
    ),
    #ffffff!important;
}


html[data-theme="light"]
:is(.page-equipamentos,.page-manutencoes)
.cp7-equipment-hero h2{
  color:#08283a!important;

  font-size:28px!important;
}


html[data-theme="light"]
:is(.page-equipamentos,.page-manutencoes)
.cp7-empty-state{
  min-height:245px!important;

  margin-top:16px!important;

  padding:34px!important;

  display:flex!important;

  flex-direction:column!important;

  align-items:center!important;

  justify-content:center!important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,188,235,.08),
      transparent 36%
    ),
    rgba(255,255,255,.82)!important;

  border:
    1px dashed
    #9ecfdf!important;

  border-radius:18px!important;
}


html[data-theme="light"]
:is(.page-equipamentos,.page-manutencoes)
.cp7-empty-state h3{
  color:#08283a!important;

  font-size:22px!important;
}


/* ============================================================
   ATUALIZAÇÕES
   ============================================================ */

html[data-theme="light"]
.page-atualizacoes
.cp7-update-grid{
  gap:18px!important;
}


html[data-theme="light"]
.page-atualizacoes
.cp7-update-card{
  position:relative!important;

  min-height:230px!important;

  padding:24px!important;

  overflow:hidden!important;
}


html[data-theme="light"]
.page-atualizacoes
.cp7-update-card::after{
  content:""!important;

  position:absolute!important;

  left:0!important;
  right:0!important;
  bottom:0!important;

  height:4px!important;

  background:
    linear-gradient(
      90deg,
      #08bde9,
      #087de7
    )!important;
}


html[data-theme="light"]
.page-atualizacoes
.cp7-update-card h3{
  color:#08283a!important;

  font-size:31px!important;
}


/* ============================================================
   DOCUMENTAÇÃO
   ============================================================ */

html[data-theme="light"]
.page-documentacao
.cp7-doc-grid{
  gap:18px!important;
}


html[data-theme="light"]
.page-documentacao
.cp7-doc-card{
  min-height:255px!important;

  padding:24px!important;

  transition:
    transform .18s ease,
    box-shadow .18s ease!important;
}


html[data-theme="light"]
.page-documentacao
.cp7-doc-card:hover{
  transform:translateY(-3px)!important;

  box-shadow:
    var(--cp154-shadow-hover)!important;
}


html[data-theme="light"]
.page-documentacao
.cp7-doc-card h3{
  color:#08283a!important;

  font-size:22px!important;
}


/* ============================================================
   MINHA CONTA
   ============================================================ */

html[data-theme="light"]
.page-conta
.cp7-account-hero{
  min-height:155px!important;

  padding:24px!important;

  display:grid!important;

  grid-template-columns:
    72px 1fr auto!important;

  align-items:center!important;

  gap:22px!important;
}


html[data-theme="light"]
.page-conta
.cp7-account-hero h2{
  color:#08283a!important;

  font-size:30px!important;
}


html[data-theme="light"]
.page-conta
.cp7-account-plan{
  min-width:190px!important;

  padding-left:25px!important;

  border-left:
    1px solid
    #bddce7!important;
}


html[data-theme="light"]
.page-conta
.cp7-data-grid{
  gap:14px!important;
}


html[data-theme="light"]
.page-conta
.cp7-data-card{
  position:relative!important;

  min-height:126px!important;

  padding:19px!important;

  background:#ffffff!important;

  border:
    1px solid
    #b9dbe7!important;

  border-radius:16px!important;

  box-shadow:
    0 10px 24px rgba(17,75,101,.06)!important;

  overflow:hidden!important;
}


html[data-theme="light"]
.page-conta
.cp7-data-card::before{
  content:""!important;

  position:absolute!important;

  top:0!important;
  left:0!important;
  right:0!important;

  height:3px!important;

  background:
    linear-gradient(
      90deg,
      #06c0e7,
      #087ee7
    )!important;
}


html[data-theme="light"]
.page-conta
.cp7-data-card small{
  color:#527282!important;
}


html[data-theme="light"]
.page-conta
.cp7-data-card strong{
  color:#08283a!important;

  font-size:18px!important;
}


html[data-theme="light"]
.page-conta
.cp7-data-card:last-child
strong{
  text-transform:capitalize!important;
}


/* ============================================================
   ARQUIVOS / EMPTY STATE
   ============================================================ */

html[data-theme="light"]
.page-arquivos
.cp7-empty-state{
  min-height:300px!important;

  display:flex!important;

  flex-direction:column!important;

  justify-content:center!important;

  align-items:center!important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,188,236,.10),
      transparent 38%
    ),
    #ffffff!important;

  border:
    1px dashed
    #9bcddd!important;
}


/* ============================================================
   BADGES
   ============================================================ */

html[data-theme="light"]
.cp7-badge{
  background:#edf9fd!important;

  color:#086487!important;

  border:
    1px solid
    #a6d8e8!important;
}


html[data-theme="light"]
.cp7-badge.success{
  background:#edf9f4!important;

  color:#087452!important;

  border-color:#a5dec9!important;
}


/* ============================================================
   BOTÕES
   ============================================================ */

html[data-theme="light"]
.cp7-primary{
  color:#ffffff!important;

  background:
    linear-gradient(
      90deg,
      #078de7,
      #05bee7
    )!important;

  box-shadow:
    0 9px 22px rgba(0,139,216,.17)!important;
}


html[data-theme="light"]
.cp7-secondary{
  color:#075e82!important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #edf8fc
    )!important;

  border:
    1px solid
    #9fd4e5!important;

  border-radius:12px!important;
}


/* ============================================================
   THEME SWITCH
   ============================================================ */

html[data-theme="light"]
.cp-theme-sidebar{
  background:
    rgba(255,255,255,.78)!important;

  border-color:#b9dce8!important;

  box-shadow:
    0 8px 20px rgba(20,83,108,.05)!important;
}


/* ============================================================
   FOOTER
   ============================================================ */

html[data-theme="light"]
.cp14-main footer,
html[data-theme="light"]
.cp7-footer{
  border-top:
    1px solid
    rgba(124,180,201,.28)!important;

  color:#617f8e!important;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width:1400px){

  .page-modulos
  .cp7-module-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      )!important;
  }

}


@media (max-width:980px){

  html[data-theme="light"]
  .cp14-main:not(.is-home)
  .cp14-content{
    padding:
      14px
      14px
      26px!important;
  }


  .page-modulos
  .cp7-module-grid{
    grid-template-columns:
      1fr!important;
  }


  html[data-theme="light"]
  :is(.page-equipamentos,.page-manutencoes)
  .cp7-equipment-hero{
    grid-template-columns:
      1fr!important;
  }


  html[data-theme="light"]
  .page-conta
  .cp7-account-hero{
    grid-template-columns:
      1fr!important;
  }


  html[data-theme="light"]
  .page-conta
  .cp7-account-plan{
    border-left:0!important;
    padding-left:0!important;
  }

}