/*
Theme Name: SUNINN CPI
Description: Portal privado SUNINN CPI.
Version: 0.2.0
Requires PHP: 8.3
Text Domain: suninn-cpi
*/
.cpi-context-portal {
  color-scheme:dark;
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:var(--cpi-font);
  color:var(--cpi-text);
  background:var(--cpi-bg);
  font-size:var(--cpi-text-base);
  line-height:var(--cpi-line-height)
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(5,16,25,.13),rgba(4,13,21,.32) 36%,rgba(3,11,17,.76)),url('assets/sunset-generated.png') center center/cover no-repeat
}
a {
  color:var(--orange);
  text-underline-offset:4px
}
button,input {
  font:inherit
}
button,a,input {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a,button,input {
  transition:background-color .18s,border-color .18s,box-shadow .18s
}
a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid #6ddcd0;
  outline-offset:4px
}
svg {
  width:24px;
  height:24px;
  flex-shrink:0
}
h1,h2,h3,p {
  margin-top:0
}
button {
  color:inherit
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:99;
  background:var(--navy);
  padding:12px
}
.skip-link:focus {
  top:10px
}
.site-header {
  height:88px;
  background:rgba(0,84,94,.96);
  border-radius:0 0 20px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px max(5.3vw,24px);
  gap:30px;
  box-shadow:0 5px 25px #0002
}
.brand {
  display:block;
  line-height:0
}
.brand img {
  width:104px;
  height:66px;
  object-fit:contain
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:28px
}
.site-header nav>a {
  font-size:16px;
  white-space:nowrap;
  text-decoration:none;
  color:#f6f8fb
}
.site-header nav>a:hover {
  text-decoration:underline
}
.site-header .contact-link {
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 19px;
  border-radius:25px;
  background:#ff9900;
  color:#10202b
}
.contact-link svg {
  width:18px;
  height:18px
}
.language {
  border-left:1px solid #78a4aa;
  padding:8px 0 8px 28px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:14px
}
.menu-toggle {
  display:none;
  background:none;
  border:1px solid #ffffff45;
  border-radius:8px;
  padding:9px;
  line-height:0
}
.auth-layout {
  max-width:var(--cpi-container);
  margin:auto;
  min-height:calc(100svh - 88px);
  padding:48px 4% 56px 5.4%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8%;
  align-items:center
}
.intro {
  padding-top:90px;
  max-width:590px;
  text-shadow:0 2px 14px #0007
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:16px;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:2px;
  color:#ffb024;
  font-weight:700;
  margin-bottom:25px
}
.eyebrow::before {
  content:"";
  height:3px;
  width:46px;
  background:var(--orange)
}
h1 {
  font-size:clamp(32px,3.2vw,46px);
  line-height:1.17;
  letter-spacing:-.7px;
  margin-bottom:23px
}
.intro-copy {
  font-size:20px;
  line-height:1.45;
  margin-bottom:38px
}
.benefits {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:34px
}
.benefits li {
  display:flex;
  gap:27px;
  align-items:center
}
.feature-icon {
  width:80px;
  height:80px;
  display:grid;
  place-items:center;
  border-radius:50%;
  flex-shrink:0;
  border:1px solid #ba79174d;
  box-shadow:inset 0 0 22px #ffa0000a
}
.feature-icon svg {
  width:39px;
  height:39px
}
.amber {
  color:#ffa310;
  background:#62400955
}
.teal {
  color:#3ebbae;
  background:#064c4c55;
  border-color:#207c7855
}
.benefits h2 {
  font-size:20px;
  line-height:1.3;
  margin:0 0 4px
}
.benefits p {
  font-size:17px;
  line-height:1.4;
  color:#d6dde6;
  margin:0
}
.auth-card {
  background:linear-gradient(135deg,rgba(11,28,40,.97),rgba(5,16,25,.97));
  border:1px solid #365263;
  border-radius:var(--cpi-radius-lg);
  padding:42px 44px 40px;
  box-shadow:var(--cpi-shadow-card);
  min-width:0
}
.card-logo {
  display:block;
  width:126px;
  height:92px;
  object-fit:contain;
  margin:0 auto 32px
}
.auth-card>h2 {
  font-size:clamp(28px,2.8vw,39px);
  line-height:1.2;
  text-align:center;
  letter-spacing:-.5px;
  margin:0 0 13px
}
.card-description {
  font-size:22px;
  line-height:1.35;
  color:var(--muted);
  text-align:center;
  margin-bottom:38px
}
.field {
  display:block;
  margin-bottom:24px;
  min-width:0
}
.field>span:first-child {
  display:block;
  font-size:17px;
  font-weight:600;
  margin-bottom:8px
}
.input-wrap {
  display:flex;
  align-items:center;
  position:relative;
  background:#142431a6;
  border:1px solid var(--line);
  border-radius:12px;
  min-height:58px;
  box-shadow:inset 0 2px 4px #0002
}
.input-wrap>svg {
  margin-left:18px;
  color:#bdccdb
}
.input-wrap input {
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#f5f7fa;
  padding:15px 16px;
  font-size:17px;
  border-radius:12px
}
.input-wrap:focus-within {
  border-color:#57c6c0;
  box-shadow:0 0 0 2px #36b8ae30
}
.input-wrap input:focus-visible {
  outline:none
}
.input-wrap input::placeholder {
  color:#93a4b4;
  opacity:1
}
.password-toggle {
  border:0;
  background:transparent;
  padding:12px 16px 12px 2px;
  display:flex;
  color:#bccbd7
}
.form-options {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin:24px 0 32px;
  font-size:15px
}
.remember,.privacy {
  display:flex;
  gap:12px;
  align-items:center
}
.remember {
  white-space:nowrap
}
input[type=checkbox] {
  width:22px;
  height:22px;
  accent-color:var(--orange);
  flex-shrink:0;
  margin:0;
  cursor:pointer
}
.primary-button {
  border:1px solid #ffad23;
  border-radius:20px;
  min-height:60px;
  padding:15px 20px;
  background:linear-gradient(110deg,#ff9e00,#ff9100);
  color:#14212a;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  font-size:19px;
  font-weight:700;
  text-decoration:none;
  width:100%;
  box-shadow:0 3px 12px #0002
}
.primary-button:hover {
  background:#ffb329;
  box-shadow:0 5px 20px #ff99002b
}
.primary-button svg {
  width:25px
}
.divider {
  display:flex;
  align-items:center;
  gap:22px;
  color:#8295a6;
  font-size:16px;
  margin:24px 0 20px
}
.divider::before,.divider::after {
  content:"";
  height:1px;
  background:#293d49;
  flex:1
}
.signup-link {
  border:1px solid #273f4e;
  border-radius:14px;
  padding:22px 16px;
  background:#ffffff03;
  display:grid;
  justify-items:center;
  gap:4px;
  color:#ced8e2;
  font-size:16px
}
.signup-link a {
  font-size:20px;
  font-weight:700;
  text-decoration:none
}
.signup-link a:hover {
  text-decoration:underline
}
.signup-link a span {
  padding-left:8px
}
.message {
  padding:16px;
  border:1px solid #3fa698;
  border-radius:10px;
  background:#124c434d;
  color:#d6f3ed;
  font-size:16px;
  line-height:1.5
}
.message.error {
  border-color:#e8a17e;
  background:#72341c40;
  color:#ffe2d2
}
.back-link {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:25px 0 0;
  font-size:16px
}
.text-button {
  display:block;
  border:0;
  background:none;
  color:var(--orange);
  text-decoration:underline;
  margin:24px auto 0;
  padding:10px
}
.cpi-recover .auth-layout,.cpi-reset .auth-layout,.cpi-portal .auth-layout {
  display:block;
  max-width:740px;
  padding-top:70px
}
.register-layout {
  max-width:1360px;
  margin:auto;
  padding:42px 35px 60px;
  display:grid;
  grid-template-columns:2.15fr 1fr;
  gap:24px
}
.register-heading {
  grid-column:1/-1
}
.register-heading .eyebrow {
  margin-bottom:14px
}
.register-heading h1 {
  margin-bottom:8px
}
.register-heading>p:last-child {
  font-size:22px;
  color:#d4dfeb;
  margin-bottom:0
}
.register-card {
  padding:28px
}
.register-card>h2 {
  text-align:left;
  font-size:27px
}
.register-card .card-description {
  text-align:left;
  font-size:15px;
  margin-bottom:24px
}
.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px
}
.field em {
  color:#ffb09c;
  font-style:normal
}
.register-card .field {
  margin-bottom:18px
}
.register-card .input-wrap input {
  font-size:15px;
  padding:12px
}
.register-card .input-wrap {
  min-height:48px
}
.register-card .field>span:first-child {
  font-size:15px
}
.privacy {
  align-items:flex-start;
  padding:18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#ffffff03;
  margin:8px 0 22px;
  font-size:14px
}
.steps {
  padding:28px;
  border-radius:15px;
  align-self:start
}
.steps>h2 {
  text-align:left;
  font-size:27px
}
.steps p {
  font-size:16px;
  color:var(--muted)
}
.steps ol {
  list-style:none;
  padding:0;
  counter-reset:step;
  margin:34px 0
}
.steps li {
  position:relative;
  padding:0 0 24px 50px;
  counter-increment:step
}
.steps li::before {
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  border:1px solid #9a7428;
  border-radius:50%;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:var(--orange);
  background:#493515
}
.steps h3 {
  font-size:19px;
  margin-bottom:7px
}
@media(min-width:1500px) {
  .auth-layout {
    gap:100px
  }
  .intro {
    padding-top:60px
  }
}
@media(max-width:1150px) {
  .site-header {
    padding-inline:30px
  }
  .site-header nav {
    gap:18px
  }
  .site-header nav>a {
    font-size:14px
  }
  .language {
    padding-left:17px
  }
  .auth-layout {
    gap:5%;
    padding-inline:4%
  }
  .auth-card {
    padding:32px 27px
  }
  .card-description {
    font-size:19px
  }
  .intro {
    padding-top:30px
  }
  .intro-copy {
    font-size:18px
  }
  .benefits li {
    gap:18px
  }
  .feature-icon {
    width:62px;
    height:62px
  }
  .benefits h2 {
    font-size:18px
  }
  .benefits p {
    font-size:16px
  }
  .form-options {
    flex-wrap:wrap;
    gap:14px
  }
  .register-layout {
    grid-template-columns:1.8fr 1fr
  }
}
@media(max-width:900px) {
  .site-header {
    height:78px
  }
  .brand img {
    height:58px;
    width:92px
  }
  .menu-toggle {
    display:block
  }
  .site-header nav {
    display:none;
    position:absolute;
    top:77px;
    left:0;
    right:0;
    z-index:10;
    padding:25px;
    background:#07515a;
    flex-direction:column;
    align-items:stretch;
    box-shadow:0 12px 25px #0005
  }
  .menu-toggle[aria-expanded=true]+nav {
    display:flex
  }
  .language {
    border-left:0;
    padding:0
  }
  .site-header .contact-link {
    justify-content:center
  }
  .auth-layout {
    min-height:calc(100svh - 78px);
    gap:32px;
    padding:36px 25px;
    grid-template-columns:1fr 1.05fr
  }
  .intro {
    padding-top:0
  }
  h1 {
    font-size:34px
  }
  .auth-card {
    padding:30px 23px
  }
  .auth-card>h2 {
    font-size:29px
  }
  .card-logo {
    margin-bottom:24px
  }
  .benefits {
    gap:25px
  }
  .benefits li {
    align-items:flex-start
  }
  .feature-icon {
    width:44px;
    height:44px
  }
  .feature-icon svg {
    width:26px;
    height:26px
  }
  .desktop-break {
    display:none
  }
  .register-layout {
    display:block;
    padding:30px 24px
  }
  .register-heading {
    margin-bottom:28px
  }
  .steps {
    margin-top:24px
  }
  .steps ol {
    display:flex;
    gap:25px;
    margin-bottom:0
  }
  .steps li {
    flex:1
  }
  .steps h3 {
    font-size:17px
  }
}
@media(max-width:650px) {
  body {
    font-size:16px
  }
  body::before {
    background-position:40% top
  }
  .site-header {
    padding-inline:23px;
    border-radius:0 0 15px 15px
  }
  .auth-layout {
    display:flex;
    flex-direction:column;
    padding:27px 18px 42px;
    gap:40px
  }
  .auth-card {
    width:100%;
    padding:29px 23px;
    border-radius:19px;
    order:0
  }
  .intro {
    order:1;
    padding:0 7px;
    max-width:520px
  }
  .card-logo {
    width:110px;
    height:76px;
    margin-bottom:22px
  }
  .auth-card>h2 {
    font-size:29px
  }
  .card-description {
    font-size:18px;
    margin-bottom:28px
  }
  .input-wrap {
    min-height:54px
  }
  .field>span:first-child {
    font-size:15px
  }
  .input-wrap input {
    font-size:16px
  }
  .form-options {
    font-size:14px;
    justify-content:space-between;
    margin:22px 0
  }
  .primary-button {
    font-size:18px;
    min-height:56px;
    border-radius:16px
  }
  .signup-link {
    padding:17px
  }
  .intro h1 {
    font-size:32px
  }
  .intro-copy {
    font-size:17px
  }
  .eyebrow {
    font-size:11px;
    margin-bottom:18px
  }
  .benefits h2 {
    font-size:18px
  }
  .benefits {
    gap:24px
  }
  .feature-icon {
    width:56px;
    height:56px
  }
  .feature-icon svg {
    width:30px;
    height:30px
  }
  .cpi-recover .auth-layout,.cpi-reset .auth-layout,.cpi-portal .auth-layout {
    padding:30px 18px
  }
  .field-grid {
    display:block
  }
  .register-layout {
    padding:30px 18px
  }
  .register-heading h1 {
    font-size:32px
  }
  .register-heading>p:last-child {
    font-size:18px
  }
  .steps ol {
    display:block
  }
  .steps li {
    padding-bottom:20px
  }
  .privacy {
    padding:14px
  }
  .register-card {
    padding:24px 20px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}

/* Shared surface motion; closing elements remain mounted until the transition ends. */
@media(max-width:900px) {.site-header nav.motion-closing {display:flex;pointer-events:none}}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* Shared portal/login logo; other auth views and the public event shell stay unchanged. */
.cpi-portal .site-header .brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.cpi-login .site-header .brand-logo,
.cpi-portal .site-header .brand-logo {
  display:block;
  width:180px;
  height:auto;
  flex-shrink:0;
}
.cpi-portal .site-header .header-partners {
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}
.cpi-login .site-header .header-suninn,
.cpi-portal .site-header .header-suninn {
  display:block;
  width:64px;
  height:auto;
  flex-shrink:0;
}
@media (min-width:901px) and (max-width:1000px) {
  .cpi-login .site-header, .cpi-portal .site-header { padding-inline:20px; gap:12px; }
  .cpi-login .site-header nav, .cpi-portal .site-header nav { gap:8px; }
  .cpi-portal .site-header .brand { gap:10px; }
  .cpi-login .site-header .brand-logo, .cpi-portal .site-header .brand-logo { width:160px; }
  .cpi-portal .site-header .header-partners { gap:12px; }
}
@media (max-width:900px) {
  .cpi-login .site-header .brand-logo, .cpi-portal .site-header .brand-logo { width:154px; }
  .cpi-portal .site-header .header-partners { gap:18px; }
}
@media (max-width:360px) {
  .cpi-portal .site-header { padding-inline:18px; gap:16px; }
  .cpi-portal .site-header .brand { gap:10px; }
  .cpi-login .site-header .brand-logo, .cpi-portal .site-header .brand-logo { width:142px; }
}

/* Login keeps the shared SUNINN image visible outside the collapsed navigation. */
.cpi-login .site-header > .brand { flex-shrink:0; }
.cpi-login .site-header > nav { margin-left:auto; }
@media (min-width:1001px) and (max-width:1150px) {
  .cpi-login .site-header { gap:16px; }
}
@media (max-width:900px) {
  .cpi-login .site-header { gap:12px; }
  .cpi-login .site-header .menu-toggle { margin-left:auto; flex-shrink:0; }
  .cpi-login .site-header .header-suninn { width:48px; }
}
@media (max-width:360px) {
  .cpi-login .site-header { padding-inline:18px; gap:10px; }
}