:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#102033;
  --muted:#6b7280;
  --primary:#0f766e;
  --primary-dark:#115e59;
  --danger:#b91c1c;
  --border:#dbe3ea;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}

.app{
  max-width:480px;
  min-height:100vh;
  margin:0 auto;
  padding:20px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:22px;
  box-shadow:0 12px 35px rgba(15,23,42,.08);
  margin-bottom:18px;
}

.logo{
  text-align:center;
  margin:28px 0;
}

.logo h1{
  margin:0;
  font-size:34px;
  letter-spacing:.5px;
}

.logo p{
  color:var(--muted);
  margin:8px 0 0;
}

h2{
  margin:0 0 14px;
  font-size:24px;
}

label{
  display:block;
  margin:14px 0 6px;
  font-weight:700;
}

input,select,textarea{
  width:100%;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  font-size:16px;
  background:white;
}

textarea{
  min-height:90px;
  resize:vertical;
}

button{
  width:100%;
  border:0;
  border-radius:16px;
  padding:15px 18px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  margin-top:14px;
}

.primary{
  background:var(--primary);
  color:white;
}

.primary:active{
  background:var(--primary-dark);
}

.secondary{
  background:#e7eef5;
  color:#102033;
}

.danger{
  background:#fee2e2;
  color:var(--danger);
}

.msg{
  margin-top:14px;
  font-weight:700;
}

.ok{color:var(--primary)}
.err{color:var(--danger)}
.muted{color:var(--muted)}
.hidden{display:none!important}

.grid{
  display:grid;
  gap:12px;
}

.stat{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}

.stat strong{
  display:block;
  font-size:20px;
}

.ticket-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  margin:12px 0;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}

.ticket-img{
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
  margin-bottom:12px;
}

.ticket-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ticket-main strong{
  font-size:22px;
}

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#e7eef5;
  color:#102033;
  font-size:13px;
  font-weight:800;
}

.ticket-meta{
  display:grid;
  gap:4px;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

.stats-row{
  grid-template-columns:1fr 1fr;
}


.benefits-grid{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.benefit-card{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
}

.benefit-card span{
  display:block;
  color:var(--muted);
  font-weight:800;
  margin-bottom:6px;
}

.benefit-card strong{
  display:block;
  font-size:24px;
  margin-bottom:6px;
}

.benefit-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}


.wallet-box{
  margin-top:16px;
}

.wallet-total{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  margin-bottom:18px;
}

.wallet-total span{
  display:block;
  color:var(--muted);
  font-weight:800;
  margin-bottom:6px;
}

.wallet-total strong{
  display:block;
  font-size:28px;
  margin-bottom:6px;
}

.wallet-total p{
  margin:0;
  color:var(--muted);
}

.wallet-timeline{
  display:grid;
  gap:0;
}

.wallet-step{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:12px;
  position:relative;
  padding-bottom:18px;
}

.wallet-step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:8px;
  top:20px;
  bottom:0;
  width:2px;
  background:var(--border);
}

.wallet-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--primary);
  margin-top:2px;
  position:relative;
  z-index:1;
}

.wallet-step strong{
  display:block;
  font-size:17px;
}

.wallet-step span{
  display:block;
  font-weight:800;
  margin:3px 0;
}

.wallet-step p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}


.finance-hero{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  margin:16px 0;
}

.finance-hero span,
.finance-card span,
.finance-list span,
.goal-head span{
  display:block;
  color:var(--muted);
  font-weight:800;
}

.finance-hero strong{
  display:block;
  font-size:30px;
  margin:6px 0;
}

.finance-hero p{
  margin:0;
  color:var(--muted);
}

.finance-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.finance-card{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
}

.finance-card strong{
  display:block;
  font-size:20px;
  margin-top:6px;
}

.finance-list{
  display:grid;
  gap:10px;
}

.finance-list div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}

.goal-box{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
}

.goal-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.progress{
  width:100%;
  height:14px;
  background:#e7eef5;
  border-radius:999px;
  overflow:hidden;
}

.progress-fill{
  height:100%;
  width:0%;
  background:var(--primary);
}


.profile-hero{
  display:flex;
  align-items:center;
  gap:14px;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:20px;
  padding:16px;
  margin:16px 0;
}

.avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--primary);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:900;
}

.profile-hero strong{
  display:block;
  font-size:20px;
}

.profile-list{
  display:grid;
  gap:10px;
}

.profile-list div{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}

.profile-list span{
  display:block;
  color:var(--muted);
  font-weight:800;
  margin-bottom:4px;
}

.profile-list strong{
  display:block;
  word-break:break-word;
}

.profile-note{
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:18px;
  padding:14px;
  margin-top:16px;
}

.profile-note p{
  margin:6px 0 0;
  color:var(--muted);
}


.business-card{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  margin:12px 0;
}

.business-card strong{
  display:block;
  font-size:18px;
}

.business-card p{
  margin:10px 0;
}

.map-link{
  display:block;
  text-align:center;
  text-decoration:none;
  background:#e7eef5;
  color:#102033;
  border-radius:16px;
  padding:14px 18px;
  font-weight:800;
  margin-top:12px;
}


.network-hero{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  margin:16px 0;
}

.network-hero span,
.network-card span,
.network-levels span{
  display:block;
  color:var(--muted);
  font-weight:800;
  margin-bottom:6px;
}

.network-hero strong{
  display:block;
  font-size:28px;
  margin-bottom:6px;
  word-break:break-word;
}

.network-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.network-card{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
}

.network-card strong{
  display:block;
  font-size:20px;
}

.network-levels{
  display:grid;
  gap:10px;
}

.network-levels div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}


/* v2-011 UX CONSOLIDATION */

body{
  background:linear-gradient(180deg,#eef7f6 0%,#f4f7fb 40%,#f4f7fb 100%);
}

.logo{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:24px;
  padding:22px 18px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.logo h1{
  color:var(--primary);
}

.card h2{
  line-height:1.15;
}

button,
.map-link{
  transition:transform .08s ease, opacity .08s ease;
}

button:active,
.map-link:active{
  transform:scale(.98);
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.screen-title{
  font-size:24px;
  margin:0 0 8px;
}

.msg{
  border-radius:14px;
  padding:10px 12px;
}

.msg.err{
  background:#fee2e2;
}

.msg.ok{
  background:#dcfce7;
}

.stat,
.benefit-card,
.wallet-total,
.finance-card,
.finance-hero,
.goal-box,
.profile-list div,
.business-card,
.network-card,
.network-hero{
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}

input:focus,
select:focus,
textarea:focus{
  outline:2px solid rgba(15,118,110,.25);
  border-color:var(--primary);
}

@media (max-width:420px){
  .app{
    padding:14px;
  }

  .card{
    padding:18px;
    border-radius:20px;
  }

  .finance-grid,
  .network-grid,
  .stats-row{
    grid-template-columns:1fr;
  }

  .ticket-main{
    align-items:flex-start;
    flex-direction:column;
  }
}


.doc-card{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  margin:12px 0;
}

.doc-card strong{
  display:block;
  font-size:18px;
}

.doc-link{
  display:block;
  text-align:center;
  text-decoration:none;
  background:#ffffff;
  color:#102033;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 18px;
  font-weight:800;
  margin:14px 0;
}

.doc-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:700;
  margin:0;
}

.doc-check input{
  width:auto;
  margin-top:3px;
}

.doc-status{
  background:#eef7f6;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  margin-top:14px;
}

/* GLOBWSY v2-015 Consumer Dashboard UX */
.consumer-dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 4px 0 2px;
}

.dash-label {
  margin: 0 0 4px;
  font-size: 12px;
  color: #667085;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dash-hero h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
}

.dash-user {
  margin: 6px 0 0;
  color: #667085;
  font-size: 14px;
}

.dash-status {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  background: #ecfdf3;
  color: #027a48;
  padding: 8px 10px;
  border-radius: 999px;
}

.dash-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dash-summary-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 10px 8px;
  background: #fff;
}

.dash-summary-card span {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.dash-summary-card small {
  display: block;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.dash-summary-card strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.dash-main-action {
  margin-top: 2px;
}

.dash-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dash-action {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 16px;
  padding: 14px 10px;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  min-height: 52px;
}

.dash-action span {
  margin-left: 4px;
}

.dash-logout {
  margin-top: 2px;
}

/* GLOBWSY v2-015 Consumer Dashboard UX */
.consumer-dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-hero-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .08);
  overflow: hidden;
}

.dash-hero-img {
  display: block;
  width: 100%;
  max-height: 112px;
  object-fit: contain;
  border-radius: 18px;
}

.dash-user-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 14px;
}

.dash-label {
  margin: 0 0 4px;
  font-size: 12px;
  color: #667085;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dash-user-card h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.1;
}

.dash-user {
  margin: 6px 0 0;
  color: #667085;
  font-size: 14px;
}

.dash-status {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  background: #ecfdf3;
  color: #027a48;
  padding: 8px 10px;
  border-radius: 999px;
}

.dash-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dash-summary-card {
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 10px 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .05);
}

.dash-summary-card span {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.dash-summary-card small {
  display: block;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.dash-summary-card strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

.dash-main-action {
  margin-top: 2px;
  min-height: 52px;
  font-weight: 900;
  font-size: 16px;
}

.dash-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.dash-action {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 18px;
  padding: 13px 10px;
  font-size: 14px;
  font-weight: 850;
  text-align: left;
  min-height: 50px;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .04);
}

.dash-action span {
  margin-left: 4px;
}

.dash-logout {
  margin-top: 2px;
}

.notice-soft{
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dbe5f0;
  border-radius: 18px;
  background: #f3f7fb;
}
.notice-soft strong{
  display:block;
  margin-bottom: 8px;
}
.notice-soft p{
  margin: 8px 0 0;
}

/* 011-A FINAL UX - aviso importante amarillo claro */
.notice-soft{
  margin-top:18px;
  padding:18px;
  border:1px solid #E8C766;
  border-radius:18px;
  background:#FFF8E6;
}
.notice-soft strong:first-child{
  display:block;
  margin-bottom:10px;
  color:#8A5A00;
  font-weight:700;
  letter-spacing:.3px;
}
.notice-soft p{
  margin:8px 0 0;
}

/* IMPLANTACION 012 SEGURA - Acompañamiento sin presión */
.finance-institutional-card,
.finance-program-card{
  margin-top:18px;
  padding:18px;
  border-radius:20px;
  border:1px solid #dbe5f0;
  background:#f7fbf8;
}
.finance-institutional-card h3,
.finance-program-card h3{
  margin:0 0 8px;
}
.finance-institutional-card p,
.finance-program-card p{
  margin:0;
}
.finance-program-card{
  background:#f6f8fb;
}

/* IMPLANTACION 012 - Pulido de acompañamiento */
.goal-box .goal-head span{
  line-height:1.3;
}
.finance-program-card p{
  line-height:1.45;
}

/* IMPLANTACION 013-A - Centro de Conocimiento GLOBWSY */
.knowledge-grid{
  display:grid;
  gap:14px;
  margin:18px 0;
}
.knowledge-card{
  padding:16px;
  border:1px solid #dbe5f0;
  border-radius:18px;
  background:#f7fbf8;
}
.knowledge-card h3{
  margin:0 0 8px;
}
.knowledge-card p{
  margin:0;
}
.mini-btn{
  margin-top:14px;
}

/* IMPLANTACION 013-B - Botones Centro de Conocimiento */
.knowledge-action{
  width:100%;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.knowledge-action:hover{
  transform:translateY(-1px);
}
.knowledge-detail{
  margin:18px 0;
  padding:18px;
  border:1px solid #dbe5f0;
  border-radius:18px;
  background:#f7fbf8;
}
.knowledge-detail p{
  margin:0 0 14px;
}
.knowledge-detail p:last-child{
  margin-bottom:0;
}

/* IMPLANTACION 014 - Centro de Conocimiento GLOBWSY */
.knowledge-card small{
  display:block;
  margin-top:12px;
  color:#64748b;
  font-weight:700;
}
.knowledge-topic p{
  color:#64748b;
  font-weight:700;
}

/* GLOBWSY 015-B Academia */
.academyGrid{
  display:grid;
  gap:16px;
  margin-top:22px;
}

.academyCard{
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid #e7ecf3;
  border-radius:18px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.academyCard strong{
  display:block;
  color:#0d2240;
  font-size:17px;
  margin-bottom:8px;
}

.academyCard span,
.academyCard small{
  display:block;
  color:#667085;
  line-height:1.45;
}

.academyCard em{
  display:block;
  margin-top:14px;
  color:#0d2240;
  font-style:normal;
  font-weight:700;
}

/* GLOBWSY 015-C Centro de Conocimiento */
.libraryHero{
  padding:10px 0 18px;
}

.libraryHero h1{
  margin:0 0 8px;
  font-size:26px;
  line-height:1.15;
  color:#0d2240;
}

.libraryHero p{
  margin:0;
  color:#667085;
  line-height:1.45;
}

.libraryList{
  display:flex;
  flex-direction:column;
  border-top:1px solid #e7ecf3;
  margin-top:10px;
}

.libraryRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 2px;
  background:transparent;
  border:0;
  border-bottom:1px solid #e7ecf3;
  text-align:left;
}

.libraryRow strong{
  display:block;
  color:#0d2240;
  font-size:17px;
  margin-bottom:4px;
}

.libraryRow span{
  display:block;
  color:#667085;
  font-size:14px;
}

.libraryRow em{
  font-style:normal;
  font-weight:800;
  color:#0d2240;
  white-space:nowrap;
}

/* GLOBWSY 015-C Refinamiento Centro de Conocimiento */
.libraryHero h1{
  font-size:24px;
  letter-spacing:-.4px;
}

.libraryHero p{
  font-size:15px;
}

.librarySearch{
  margin:10px 0 8px;
  padding:12px 14px;
  border:1px solid #e7ecf3;
  border-radius:14px;
  background:rgba(255,255,255,.55);
  color:#667085;
  font-weight:600;
}

.librarySearch span::before{
  content:"🔎 ";
}

.libraryRow{
  padding:12px 2px;
  min-height:64px;
}

.libraryRow strong{
  font-size:16px;
  margin-bottom:2px;
}

.libraryRow span{
  font-size:13px;
  opacity:.9;
}

.libraryRow em{
  font-size:13px;
}

.libraryRow em.soon{
  color:#667085;
  font-weight:700;
}

.libraryRow em.available{
  color:#0d2240;
  font-weight:800;
}

/* GLOBWSY 016-A Lector Inteligente */
.readerScreen h1{
  margin-top:12px;
  font-size:26px;
  line-height:1.18;
  color:#0d2240;
}

.readerMeta{
  margin-top:12px;
  color:#667085;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}

.readerMeta span,
.readerMeta strong{
  display:block;
}

.readerMeta strong{
  margin-top:4px;
  color:#0d2240;
}

.readerArticle{
  margin-top:22px;
  font-size:16px;
  line-height:1.75;
  color:#25364d;
}

.readerArticle p{
  margin:0 0 16px;
}

.readerNav{
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid #e7ecf3;
  margin-top:30px;
  padding-top:16px;
}

.readerNav button{
  flex:1;
}

/* ========= GLOBWSY 016-B Centro de Conocimiento Final ========= */

.libraryHero{
    margin-top:12px;
    margin-bottom:8px;
}

.libraryHero h1{
    font-size:22px;
    margin-bottom:6px;
}

.libraryHero p{
    font-size:15px;
    color:#667085;
}

.librarySearch{
    margin:18px 0 14px;
    padding:14px 18px;
    border-radius:14px;
}

.libraryRow{
    min-height:72px;
    padding:10px 0;
}

.libraryRow strong{
    font-size:16px;
    margin-bottom:2px;
}

.libraryRow span{
    font-size:13px;
    color:#7b8699;
}

.libraryRow em{
    font-size:14px;
    font-weight:700;
}

.libraryRow em.soon{
    color:#98a2b3;
}

.libraryRow em.available{
    font-size:22px;
    font-weight:600;
    color:#0d2240;
}

.topbar{
    margin-top:12px;
    margin-bottom:16px;
}

/* GLOBWSY 017-A Motor Visual Centro de Conocimiento */
.quickAnswer{
  margin:18px 0;
  padding:16px;
  border-radius:16px;
  background:#eef6ff;
  color:#0d2240;
  font-weight:700;
  line-height:1.5;
}

.visualFlow{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:22px 0;
}

.flowStep{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid #e7ecf3;
  border-radius:14px;
  background:#fff;
}

.flowStep span{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0d2240;
  color:#fff;
  font-weight:800;
  flex:0 0 28px;
}

.flowStep strong{
  color:#0d2240;
  font-size:15px;
}

.exampleBox,
.importantBox,
.relatedBox{
  margin-top:18px;
  padding:16px;
  border-radius:16px;
  background:#fff;
  border:1px solid #e7ecf3;
}

.exampleBox h3{
  margin:0 0 10px;
  color:#0d2240;
}

.exampleBox ul{
  margin:0;
  padding-left:18px;
  color:#25364d;
  line-height:1.6;
}

.legalNote{
  margin:14px 0 0;
  font-size:12px;
  color:#667085;
  line-height:1.45;
}

.importantBox{
  background:#fff8e6;
}

.importantBox strong,
.relatedBox strong{
  display:block;
  color:#0d2240;
  margin-bottom:8px;
}

.importantBox p,
.relatedBox p{
  margin:6px 0;
  color:#25364d;
  line-height:1.5;
}

/* GLOBWSY 017-B Diagrama de Red */
.networkDiagram{
  margin-top:20px;
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e7ecf3;
}

.networkDiagram h3{
  margin:0 0 14px;
  color:#0d2240;
}

.networkLevels{
  display:grid;
  gap:10px;
}

.networkLevel{
  border:1px solid #e7ecf3;
  border-radius:14px;
  padding:14px;
  background:#f8fbff;
}

.networkLevel strong{
  color:#0d2240;
}

.networkNumber{
  font-size:30px;
  font-weight:900;
  color:#0d2240;
  margin:6px 0;
}

.networkLevel span{
  display:block;
  font-weight:800;
  color:#25364d;
}

.networkLevel p{
  margin:6px 0 0;
  color:#667085;
  font-size:13px;
}

.calcTable{
  display:grid;
  border:1px solid #e7ecf3;
  border-radius:12px;
  overflow:hidden;
}

.calcTable div{
  display:grid;
  grid-template-columns:1.1fr .8fr 1.2fr 1fr;
}

.calcTable strong,
.calcTable span{
  padding:10px 8px;
  border-bottom:1px solid #e7ecf3;
  font-size:12px;
}

.calcTable strong{
  background:#f2f6fb;
  color:#0d2240;
}

.calcTable span{
  color:#25364d;
}

/* GLOBWSY 018-A Infografía Centro de Conocimiento */
.infoGraphic{
  margin:22px 0;
  background:#fff;
  border:1px solid #e7ecf3;
  border-radius:18px;
  overflow:hidden;
}

.infoGraphic img{
  display:block;
  width:100%;
  height:auto;
}

.infoGraphic small{
  display:block;
  padding:14px 18px;
  color:#667085;
  font-size:12px;
  line-height:1.5;
  border-top:1px solid #eef2f6;
}

/* GLOBWSY IMPLANTACION 021 */
.globwsy-library-access-021 {
  margin: 18px 0 10px;
}

.globwsy-library-access-card {
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .06);
}

.globwsy-library-access-card p {
  margin: 6px 0 14px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
}

.globwsy-library-access-btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  background: #0f172a;
  color: #ffffff;
}

/* CENTRO DE CONOCIMIENTO GLOBWSY — MOTOR v1 */
.knowledge-screen {
  padding-bottom: 32px;
}

.cc-hero {
  margin: 14px 0 18px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 14px 35px rgba(15,23,42,.08);
}

.cc-hero span {
  display: block;
  font-size: 13px;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 8px;
}

.cc-hero h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

.cc-hero h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.cc-hero p {
  margin: 0;
  color: #475569;
  line-height: 1.45;
}

.cc-diagram {
  margin: 18px 0;
  display: grid;
  gap: 8px;
}

.cc-node {
  width: 100%;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 15px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.cc-node strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.cc-node span {
  display: block;
  color: #64748b;
  font-size: 14px;
}

.cc-arrow {
  text-align: center;
  font-weight: 900;
  color: #94a3b8;
}

.cc-card {
  margin: 16px 0;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

.cc-card h3 {
  margin: 0 0 12px;
}

.cc-card ul {
  margin: 0;
  padding-left: 20px;
}

.cc-card li {
  margin: 8px 0;
  color: #334155;
}

.cc-related {
  display: grid;
  gap: 10px;
}

/* IMPLANTACIÓN 022 — CENTRO DE CONOCIMIENTO */
.knowledge-screen {
  padding-bottom: 36px;
}

.cc-hero {
  margin: 14px 0 18px;
  padding: 22px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15,23,42,.07);
}

.cc-hero span {
  display: block;
  color: #64748b;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cc-hero h1 {
  margin: 0 0 8px;
}

.cc-hero h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.cc-hero p {
  margin: 0;
  color: #475569;
  line-height: 1.45;
}

.cc-index {
  display: grid;
  gap: 14px;
}

.cc-index-card,
.cc-node {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.cc-index-card strong,
.cc-node strong {
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
}

.cc-index-card span,
.cc-node span {
  color: #64748b;
  font-size: 15px;
}

.cc-diagram {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.cc-arrow {
  text-align: center;
  color: #94a3b8;
  font-weight: 900;
}

.cc-card {
  margin: 16px 0;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.cc-card h3 {
  margin: 0 0 10px;
}

.cc-card li {
  margin: 8px 0;
}

.cc-related {
  display: grid;
  gap: 10px;
}

/* GLOBWSY 027E - Infografía Cartera */
.cartera-infografia-027E{
  margin: 18px 0 20px;
  padding: 18px;
  border: 1px solid #d9e4ef;
  border-radius: 22px;
  background: #f8fafc;
}
.cartera-infografia-027E div:not(.arrow){
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5edf5;
  margin-bottom: 8px;
}
.cartera-infografia-027E strong{
  display:block;
  font-size: 18px;
}
.cartera-infografia-027E span{
  display:block;
  color:#667085;
  margin-top:4px;
}
.cartera-infografia-027E .arrow{
  text-align:center;
  font-size:22px;
  font-weight:800;
  color:#0f766e;
  margin: 2px 0 8px;
}

/* GLOBWSY 027F - Infografía oficial Cartera */
.cartera-infografia-oficial{
  margin: 18px 0 20px;
}
.cartera-infografia-oficial img{
  width: 100%;
  display: block;
  border-radius: 22px;
  border: 1px solid #d9e4ef;
  background: #fff;
}
.cartera-infografia-oficial p{
  margin-top: 10px;
  font-size: 13px;
}

/* GLOBWSY 028E - Visor infografía */
.cc-infographic-img{
  width:100%;
  display:block;
  border-radius:18px;
  cursor:zoom-in;
}

.cc-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(8,18,32,.96);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.cc-lightbox img{
  max-width:96vw;
  max-height:82vh;
  object-fit:contain;
  border-radius:18px;
  background:#fff;
  touch-action:pinch-zoom;
}

.cc-lightbox-close{
  position:absolute;
  top:18px;
  right:18px;
  background:#fff;
  color:#0f172a;
  border:0;
  border-radius:999px;
  width:44px;
  height:44px;
  font-size:22px;
  font-weight:800;
}

.cc-lightbox p{
  color:#fff;
  margin-top:14px;
  text-align:center;
}

/* =====================================================
   CONSUMER PRESENTATION — PRE-LOGIN EXPERIENCE
===================================================== */

body.consumer-presentation-active{
  background:
    radial-gradient(circle at 50% 12%, rgba(15,118,110,.28), transparent 34%),
    linear-gradient(180deg,#071827 0%,#092334 55%,#061520 100%);
  color:#eefaff;
}

body.consumer-presentation-active .app{
  max-width:none;
  padding:0;
}

.consumerPresentation{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.consumerPresentationShell{
  width:min(1120px,100%);
  border:1px solid rgba(111,243,255,.22);
  border-radius:26px;
  background:rgba(6,35,49,.92);
  box-shadow:0 30px 90px rgba(0,0,0,.28);
  overflow:hidden;
}

.consumerPresentationHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:24px 32px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.consumerPresentationHeader div{
  display:flex;
  flex-direction:column;
}

.consumerPresentationHeader strong{
  font-size:28px;
  letter-spacing:.08em;
}

.consumerPresentationHeader strong span{
  color:#6ff3ff;
}

.consumerPresentationHeader small,
.consumerPresentationHeader > span{
  color:#a9cbd4;
  font-weight:700;
}

.consumerPresentationCard{
  min-height:520px;
  padding:76px 9%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.consumerPresentationKicker{
  color:#6ff3ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}

.consumerPresentationCard h1{
  max-width:900px;
  margin:18px 0 24px;
  color:#ffffff;
  font-size:clamp(42px,6vw,78px);
  line-height:.98;
  letter-spacing:-.045em;
}

.consumerPresentationCard > p{
  max-width:880px;
  margin:0;
  color:#d4e8ed;
  font-size:21px;
  line-height:1.7;
}

.consumerPresentationKey{
  max-width:900px;
  margin-top:42px;
  padding:24px 26px;
  border-left:4px solid #f59e0b;
  border-radius:0 18px 18px 0;
  background:rgba(255,255,255,.035);
}

.consumerPresentationKey strong{
  display:block;
  margin-bottom:8px;
  color:#f7b34b;
  font-size:12px;
  letter-spacing:.14em;
}

.consumerPresentationKey p{
  margin:0;
  color:#ffffff;
  font-size:18px;
  line-height:1.55;
  font-weight:700;
}

.consumerPresentationNav{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:22px 32px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
}

.consumerPresentationNav button{
  width:auto;
  min-width:160px;
  margin:0;
  border-radius:14px;
}

.consumerPresentationPrimary{
  background:#f59e0b;
  color:#071827;
}

.consumerPresentationSecondary{
  border:1px solid rgba(111,243,255,.22);
  background:rgba(255,255,255,.04);
  color:#eefaff;
}

.consumerPresentationSecondary:disabled{
  opacity:.3;
  cursor:not-allowed;
}

@media(max-width:700px){
  .consumerPresentation{
    padding:12px;
  }

  .consumerPresentationHeader{
    padding:20px;
  }

  .consumerPresentationCard{
    min-height:520px;
    padding:54px 24px;
  }

  .consumerPresentationCard h1{
    font-size:42px;
  }

  .consumerPresentationCard > p{
    font-size:17px;
  }

  .consumerPresentationNav{
    padding:18px 20px;
  }

  .consumerPresentationNav button{
    min-width:0;
    flex:1;
    padding:14px 10px;
  }
}

/* =====================================================
   CONSUMER ACCESS — VISUAL ALIGNMENT
===================================================== */

body:not(.consumer-presentation-active){
  background:
    radial-gradient(circle at 50% 0%, rgba(15,118,110,.18), transparent 34%),
    linear-gradient(180deg,#07111f 0%,#0b1727 100%);
  color:#eef5fb;
}

body:not(.consumer-presentation-active) .app{
  width:min(460px,100%);
  min-height:100vh;
  padding:32px 18px 60px;
}

body:not(.consumer-presentation-active) .logo{
  margin:10px 0 20px;
  padding:24px 20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(17,31,51,.92);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}

body:not(.consumer-presentation-active) .logo h1{
  color:#f5f8fb;
  letter-spacing:.06em;
}

body:not(.consumer-presentation-active) .logo p{
  color:#94a3b8;
}

body:not(.consumer-presentation-active) .card{
  background:rgba(17,31,51,.96);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}

body:not(.consumer-presentation-active) .card h2,
body:not(.consumer-presentation-active) label{
  color:#f1f5f9;
}

body:not(.consumer-presentation-active) input{
  color:#f1f5f9;
  background:#091424;
  border-color:rgba(255,255,255,.12);
}

body:not(.consumer-presentation-active) input::placeholder{
  color:#64748b;
}

body:not(.consumer-presentation-active) .primary{
  background:#0f766e;
}

body:not(.consumer-presentation-active) .secondary{
  color:#e2e8f0;
  background:#18263c;
  border:1px solid rgba(255,255,255,.08);
}

body:not(.consumer-presentation-active) .muted{
  color:#94a3b8;
}

#globwsyLanguageSelector{
  width:auto !important;
  min-width:118px;
  max-width:150px;
  margin:0 !important;
  color:#0f172a;
  font-size:14px;
  cursor:pointer;
}

@media (max-width:520px){
  #globwsyLanguageSelector{
    top:10px !important;
    right:10px !important;
    min-width:104px;
    padding:7px 10px !important;
  }

  body:not(.consumer-presentation-active) .app{
    padding-top:58px;
  }
}

/* CONSUMER FREE AFFILIATION NOTICE */

.consumerFreeAffiliationNotice{
  margin:0 0 18px;
  padding:14px;
  border:1px solid rgba(16,185,129,.28);
  border-radius:16px;
  background:rgba(16,185,129,.08);
}

.consumerFreeAffiliationNotice strong{
  display:block;
  margin-bottom:5px;
  color:#6ee7b7;
  font-size:15px;
}

.consumerFreeAffiliationNotice p{
  margin:0;
  color:#cbd5e1;
  font-size:14px;
  line-height:1.45;
}

/* CONSUMER QR AND INVITATION LINK */

.consumerReferralNotice{
  margin:12px 0 0;
  padding:12px 14px;
  border:1px solid rgba(249,115,22,.30);
  border-radius:14px;
  background:rgba(249,115,22,.08);
}

.consumerReferralNotice strong{
  display:block;
  margin-bottom:4px;
  color:#fb923c;
}

.consumerReferralNotice p{
  margin:0;
  color:#cbd5e1;
  font-size:13px;
  line-height:1.45;
}

#registerReferredBy[readonly]{
  color:#fb923c;
  border-color:rgba(249,115,22,.35);
  cursor:not-allowed;
}

/* =====================================================
   CONSUMER CENTER POST-LOGIN RECOVERY
===================================================== */

.dashBrandHero{
  display:flex;
  min-height:112px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(15,118,110,.26),transparent 55%),
    linear-gradient(145deg,#101f34,#13273b);
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}

.dashBrandHero strong{
  color:#f8fafc;
  font-size:clamp(30px,7vw,48px);
  line-height:1;
  letter-spacing:.08em;
}

.dashBrandHero strong span{
  color:#2dd4bf;
}

.dashBrandHero small{
  color:#94a3b8;
  font-weight:700;
  letter-spacing:.04em;
}

/* Light operational surfaces require dark readable text. */

body:not(.consumer-presentation-active)
:is(
  .stat,
  .benefit-card,
  .wallet-total,
  .finance-hero,
  .finance-card,
  .finance-list > div,
  .goal-box,
  .profile-hero,
  .profile-list > div,
  .business-card,
  .network-hero,
  .network-card,
  .network-levels > div,
  .cc-hero,
  .cc-index-card,
  .cc-node,
  .cc-card,
  .knowledge-card,
  .finance-institutional-card,
  .finance-program-card,
  .notice-soft
){
  color:#172033;
}

body:not(.consumer-presentation-active)
:is(
  .stat,
  .benefit-card,
  .wallet-total,
  .finance-hero,
  .finance-card,
  .finance-list > div,
  .goal-box,
  .profile-hero,
  .profile-list > div,
  .business-card,
  .network-hero,
  .network-card,
  .network-levels > div,
  .cc-hero,
  .cc-index-card,
  .cc-node,
  .cc-card,
  .knowledge-card
) .muted{
  color:#526178;
}

body:not(.consumer-presentation-active)
:is(
  .benefit-card,
  .wallet-total,
  .finance-hero,
  .finance-card,
  .finance-list > div,
  .profile-hero,
  .profile-list > div,
  .business-card,
  .network-hero,
  .network-card,
  .network-levels > div,
  .cc-hero,
  .cc-index-card,
  .cc-node,
  .cc-card
) strong{
  color:#172033;
}

body:not(.consumer-presentation-active)
:is(
  .benefit-card,
  .wallet-total,
  .finance-hero,
  .finance-card,
  .profile-list > div,
  .network-hero,
  .network-card,
  .network-levels > div
) span{
  color:#526178;
}

body:not(.consumer-presentation-active) .profile-note{
  color:#5f3a00;
}

body:not(.consumer-presentation-active) .profile-note p{
  color:#704800;
}

body:not(.consumer-presentation-active) .notice-soft,
body:not(.consumer-presentation-active) .finance-institutional-card{
  color:#584000;
}

body:not(.consumer-presentation-active) .finance-program-card{
  color:#172033;
}

body:not(.consumer-presentation-active) .business-card .map-link{
  color:#102033;
}

body:not(.consumer-presentation-active) .cc-card li,
body:not(.consumer-presentation-active) .cc-hero p,
body:not(.consumer-presentation-active) .cc-index-card span,
body:not(.consumer-presentation-active) .cc-node span{
  color:#475569;
}

/* =====================================================
   CONSUMER FINAL VISUAL AND PURCHASE FIX
===================================================== */

body:not(.consumer-presentation-active) .dash-user-card{
  color:#172033;
}

body:not(.consumer-presentation-active) .dash-user-card h2,
body:not(.consumer-presentation-active) .dash-user-card strong{
  color:#172033;
}

body:not(.consumer-presentation-active) .dash-user-card .dash-label,
body:not(.consumer-presentation-active) .dash-user-card .dash-user{
  color:#526178;
}

body:not(.consumer-presentation-active) .dash-summary-card{
  color:#172033;
}

body:not(.consumer-presentation-active) .dash-summary-card small{
  color:#526178;
}

body:not(.consumer-presentation-active) .dash-summary-card strong{
  color:#172033;
}

.ticketFilePicker{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:58px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:#091424;
}

.ticketFilePicker input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.ticketFileButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  margin:0;
  padding:9px 14px;
  border-radius:12px;
  background:#e7eef5;
  color:#102033 !important;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

#ticketFileName{
  min-width:0;
  overflow:hidden;
  color:#cbd5e1;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:420px){
  .ticketFilePicker{
    grid-template-columns:1fr;
  }

  #ticketFileName{
    text-align:center;
  }
}

/* CONSUMER PRE-REGISTRATION INFOGRAPHIC RESPONSIVE EXPERIENCE */

.consumerPresentationInfographic{
  width:100%;
  margin-top:18px;
}

.consumerPresentationInfographic img{
  width:100%;
  max-height:62vh;
  height:auto;
  object-fit:contain;
  display:block;
}

@media (max-width:600px){
  body.consumer-presentation-active{
    overflow-y:auto;
  }

  .consumerPresentation{
    min-height:100vh;
    padding:10px;
  }

  .consumerPresentationShell{
    width:100%;
  }

  .consumerPresentationCard{
    padding:18px;
  }

  .consumerPresentationInfographic img{
    max-height:none;
  }

  .consumerPresentationNav{
    gap:8px;
    flex-wrap:wrap;
  }

  .consumerPresentationNav button{
    min-width:0;
    flex:1 1 140px;
  }
}

/* CONSUMER CENTER BUSINESS-LIKE PRESENTATION */
body:not(.consumer-presentation-active) #app {
  width: min(1280px, calc(100% - 40px));
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 0 40px;
}

body:not(.consumer-presentation-active) .consumer-dashboard {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

body:not(.consumer-presentation-active) .consumer-dashboard > .dash-hero-card {
  grid-column: span 4;
  margin: 0;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body:not(.consumer-presentation-active) .consumer-dashboard > .dash-user-card {
  grid-column: span 8;
  margin: 0;
  min-height: 150px;
  padding: 28px;
}

body:not(.consumer-presentation-active) .dash-information-card,
body:not(.consumer-presentation-active) .dash-state-card,
body:not(.consumer-presentation-active) .dash-participation-card {
  grid-column: span 4;
  margin: 0;
  min-height: 100%;
  padding: 24px;
}

body:not(.consumer-presentation-active) .dash-summary-grid {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  gap: 16px;
}

body:not(.consumer-presentation-active) .dash-summary-card {
  min-height: 120px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body:not(.consumer-presentation-active) .dash-main-action {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 54px;
  margin: 0;
}

body:not(.consumer-presentation-active) .dash-centers-card {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 26px;
}

body:not(.consumer-presentation-active) .dash-actions-grid {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body:not(.consumer-presentation-active) .dash-action {
  min-height: 76px;
  padding: 18px;
  justify-content: flex-start;
}

body:not(.consumer-presentation-active) .dash-logout {
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 0;
}

@media (max-width: 900px) {
  body:not(.consumer-presentation-active) .consumer-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.consumer-presentation-active) .consumer-dashboard > .dash-hero-card,
  body:not(.consumer-presentation-active) .consumer-dashboard > .dash-user-card,
  body:not(.consumer-presentation-active) .dash-information-card,
  body:not(.consumer-presentation-active) .dash-state-card,
  body:not(.consumer-presentation-active) .dash-participation-card {
    grid-column: span 1;
  }

  body:not(.consumer-presentation-active) .dash-participation-card {
    grid-column: 1 / -1;
  }

  body:not(.consumer-presentation-active) .dash-summary-grid,
  body:not(.consumer-presentation-active) .dash-main-action,
  body:not(.consumer-presentation-active) .dash-centers-card,
  body:not(.consumer-presentation-active) .dash-actions-grid,
  body:not(.consumer-presentation-active) .dash-logout {
    grid-column: 1 / -1;
  }

  body:not(.consumer-presentation-active) .dash-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body:not(.consumer-presentation-active) #app {
    width: min(100% - 24px, 520px);
    padding: 14px 0 28px;
  }

  body:not(.consumer-presentation-active) .consumer-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  body:not(.consumer-presentation-active) .consumer-dashboard > .dash-hero-card,
  body:not(.consumer-presentation-active) .consumer-dashboard > .dash-user-card {
    min-height: auto;
  }

  body:not(.consumer-presentation-active) .dash-actions-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* CONSUMER DESKTOP FULL-WIDTH FINAL OVERRIDE */
@media (min-width: 901px) {
  body:not(.consumer-presentation-active) {
    display: block !important;
    width: 100% !important;
  }

  body:not(.consumer-presentation-active) #app {
    width: calc(100vw - 64px) !important;
    max-width: 1280px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 28px 0 48px !important;
  }

  body:not(.consumer-presentation-active) .consumer-dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body:not(.consumer-presentation-active) .dash-hero-card {
    grid-column: span 4 !important;
  }

  body:not(.consumer-presentation-active) .dash-user-card {
    grid-column: span 8 !important;
  }

  body:not(.consumer-presentation-active) .dash-information-card,
  body:not(.consumer-presentation-active) .dash-state-card,
  body:not(.consumer-presentation-active) .dash-participation-card {
    grid-column: span 4 !important;
  }

  body:not(.consumer-presentation-active) .dash-summary-grid,
  body:not(.consumer-presentation-active) .dash-main-action,
  body:not(.consumer-presentation-active) .dash-centers-card,
  body:not(.consumer-presentation-active) .dash-actions-grid,
  body:not(.consumer-presentation-active) .dash-logout {
    grid-column: 1 / -1 !important;
  }

  body:not(.consumer-presentation-active) .dash-actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* CONSUMER AUTHENTICATED LEARNING JOURNEY */
body.consumer-authenticated-journey-active #app{
  width:min(1180px,calc(100% - 32px));
  max-width:1180px;
  margin:0 auto;
  padding:24px 0;
}

.consumerAuthenticatedJourney{
  min-height:calc(100vh - 48px);
  display:flex;
  align-items:center;
}

.consumerAuthenticatedJourneyShell{
  width:100%;
  background:#0f2138;
  border:1px solid #244461;
  border-radius:22px;
  overflow:hidden;
}

.consumerAuthenticatedJourney header,
.consumerAuthenticatedJourney footer{
  padding:20px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.consumerAuthenticatedJourney header{
  border-bottom:1px solid #244461;
}

.consumerAuthenticatedJourney header strong{
  font-size:30px;
  letter-spacing:3px;
}

.consumerAuthenticatedJourney header strong span{
  color:#35d1ca;
}

.consumerAuthenticatedJourney header small{
  display:block;
  color:#9eb2c8;
}

.consumerAuthenticatedJourney main{
  padding:38px;
}

.consumerAuthenticatedJourney main > small{
  color:#35d1ca;
  font-weight:800;
}

.consumerAuthenticatedJourney main h1{
  margin:10px 0 14px;
  font-size:clamp(30px,4vw,50px);
}

.consumerAuthenticatedJourney main > p{
  max-width:850px;
  color:#c5d2df;
  line-height:1.65;
}

.consumerAuthenticatedDiagram{
  margin:30px 0;
  display:grid;
  grid-template-columns:repeat(9,auto);
  align-items:center;
  justify-content:center;
  gap:12px;
}

.consumerAuthenticatedDiagram article{
  min-width:150px;
  min-height:110px;
  padding:18px;
  border-radius:16px;
  background:#fff;
  color:#10213a;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.consumerAuthenticatedDiagram article span{
  margin-top:8px;
  color:#526276;
}

.consumerAuthenticatedDiagram b{
  color:#35d1ca;
  font-size:28px;
}

.consumerAuthenticatedInfographic img{
  display:block;
  width:min(900px,100%);
  max-height:58vh;
  object-fit:contain;
  margin:26px auto 14px;
  border-radius:18px;
  background:#fff;
}

.consumerAuthenticatedInfographic p{
  text-align:center;
  color:#c5d2df;
}

.consumerAuthenticatedKey{
  margin-top:26px;
  padding:18px 20px;
  border-left:4px solid #35d1ca;
  background:#152b45;
}

.consumerAuthenticatedKey p{
  margin-bottom:0;
}

.consumerAuthenticatedJourney footer{
  border-top:1px solid #244461;
}

.consumerAuthenticatedJourney footer button{
  min-width:190px;
}

@media(max-width:800px){
  .consumerAuthenticatedJourney main{
    padding:24px;
  }

  .consumerAuthenticatedDiagram{
    display:flex;
    flex-direction:column;
  }

  .consumerAuthenticatedDiagram article{
    width:100%;
  }

  .consumerAuthenticatedDiagram b{
    transform:rotate(90deg);
  }

  .consumerAuthenticatedJourney footer{
    flex-wrap:wrap;
  }

  .consumerAuthenticatedJourney footer button{
    flex:1 1 180px;
  }
}

/* CONSUMER ANALYTICAL ENGINE FULL-WIDTH LAYOUT */
body:not(.consumer-presentation-active) .consumer-guidance-screen{
  width:min(100%,1000px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

body:not(.consumer-presentation-active) .consumer-guidance-card{
  width:100%;
  margin:0;
  padding:30px;
}

body:not(.consumer-presentation-active) .consumer-guidance-card h2{
  margin-top:0;
  font-size:clamp(28px,4vw,42px);
}

body:not(.consumer-presentation-active) .consumer-guidance-card textarea{
  display:block;
  width:100%;
  min-height:150px;
  resize:vertical;
  margin:10px 0 18px;
}

body:not(.consumer-presentation-active) .consumer-guidance-card button{
  width:100%;
  min-height:52px;
  margin-top:12px;
}

body:not(.consumer-presentation-active) .consumer-guidance-result{
  width:100%;
  display:grid;
  gap:18px;
}

body:not(.consumer-presentation-active) .consumer-guidance-result .card{
  width:100%;
  margin:0;
  padding:26px;
}

@media(max-width:600px){
  body:not(.consumer-presentation-active) .consumer-guidance-card,
  body:not(.consumer-presentation-active) .consumer-guidance-result .card{
    padding:20px;
  }
}

/* CONSUMER PUBLIC LANDING FULLSCREEN EXPERIENCE */
body.consumer-presentation-active{
  margin:0;
  width:100%;
  min-height:100vh;
}

body.consumer-presentation-active #app{
  width:100%;
  min-height:100vh;
}

body.consumer-presentation-active .consumerPresentation{
  width:100%;
  min-height:100vh;
  padding:0;
}

body.consumer-presentation-active .consumerPresentationShell{
  width:100%;
  max-width:none !important;
  min-height:100vh;
  border-radius:0 !important;
  box-sizing:border-box;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

body.consumer-presentation-active .consumerPresentationCard{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
}

body.consumer-presentation-active .consumerPresentationInfographic img{
  display:block;
  width:100%;
  height:auto;
  max-height:68vh;
  object-fit:contain;
  margin:18px auto 0;
}

body.consumer-presentation-active .consumerPresentationNav{
  width:100%;
}

@media (max-width:600px){
  body.consumer-presentation-active .consumerPresentationShell{
    padding:16px;
  }

  body.consumer-presentation-active .consumerPresentationInfographic img{
    max-height:56vh;
  }
}

/* CONSUMER REGISTRATION CONSENT OPTIONS */
.consumerConsentOption{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:14px 0;
  line-height:1.45;
  cursor:pointer;
}

.consumerConsentOption input{
  width:18px;
  height:18px;
  margin:2px 0 0;
  flex:0 0 auto;
}

.consumerConsentOption span{
  font-weight:400;
}

/* CONSUMER LEGAL DOCUMENT LINKS */
.consumerConsentOption label{
  flex:1;
  font-weight:400;
  line-height:1.45;
}

.consumerConsentOption a{
  font-weight:700;
  text-decoration:underline;
  cursor:pointer;
}

.consumerConsentOption a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:3px;
}

/* CONSUMER LEGAL LINK SOFT COLOR OVERRIDE */
a[href*="terminos-consumidor.html"],
a[href*="aviso-privacidad.html"]{
  color:#b9d7e6 !important;
  text-decoration-color:rgba(185,215,230,.65) !important;
  text-underline-offset:3px;
  font-weight:600;
}

a[href*="terminos-consumidor.html"]:hover,
a[href*="terminos-consumidor.html"]:focus,
a[href*="aviso-privacidad.html"]:hover,
a[href*="aviso-privacidad.html"]:focus{
  color:#dceef6 !important;
  text-decoration-color:rgba(220,238,246,.90) !important;
}