:root{
  --bg:#f3f3f3;
  --sidebar-bg:#ffffff;
  --text:#0b1f33;
  --muted:#6b7280;
  --line:#e7e7e7;

  --nav-icon:#003D68;
  --nav-text:#001A45;
  --nav-hover:#f6f7f9;

  --active-bg:#f6e3cf;

  --pill-bg:#f6e3cf;
  --pill-text:#6a3b00;

  --btn:#e77700;
  --btn-hover:#d76f00;

  --input-border:#cfd7e2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Overlay (mobile) */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.30);
  z-index:60;
}

/* Layout */
.app{
  display:grid;
  grid-template-columns: 320px 1fr;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid var(--line);
  padding:26px 18px;
}

.brand{
  padding:8px 10px 18px;
}

.brand-logo{
  width:190px;
  height:auto;
  display:block;
  overflow:visible;
}

/* Nav */
.nav{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 16px;
  border-radius:10px;
  text-decoration:none;
  color:var(--nav-text);
  font-weight:600;
  font-size:14px;
  line-height:1;
  transition:background .12s ease;
}

.nav-item:hover{ background:var(--nav-hover); }

.nav-item.active{
  background:var(--active-bg);
}

.nav-item .ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  color:var(--nav-icon);
}

.nav-item .ico svg{
  width:22px;
  height:22px;
  display:block;
}

.nav-item .caret{
  margin-left:auto;
  color: var(--nav-icon);
  font-size:14px;
  transform: translateY(1px);
}

/* Deshabilitados */
.nav-item.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}
.nav-item.is-disabled:hover{
  background:transparent;
}

/* Main */
.main{
  padding:24px 34px;
}

/* Topbar */
.topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
}

/* Hamburguesa */
.menu-btn{
  display:none; /* desktop: oculta */
  width:36px;
  height:36px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--nav-icon);
}

.menu-btn svg{
  width:20px;
  height:20px;
  display:block;
}

/* Botón derecha */
.pill{
  border:0;
  background:var(--pill-bg);
  color:var(--pill-text);
  font-weight:700;
  font-size:12px;
  padding:9px 14px;
  border-radius:10px;
  cursor:pointer;
  white-space:nowrap;
}

.page-title{
  margin:34px 0 0 42px;
  font-size:26px;
  font-weight:600;
  color:#001A45;
}

/* Centro */
.center-wrap{
  min-height: calc(100vh - 170px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:60px;
}

.pay-box{
  width:min(560px, 92%);
  text-align:center;
  transform: translateY(14px);
}

.center-icon{
  width:56px;
  height:56px;
  margin:0 auto 10px;
  display:block;
  color:var(--nav-icon);
}

.pay-box h2{
  margin:10px 0 6px;
  font-size:16px;
  font-weight:800;
  color:#001A45;
}

.pay-box p{
  margin:0 0 18px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.field{
  width:min(360px, 92%);
  margin:0 auto;
  text-align:left;
}

label{
  display:block;
  font-size:12px;
  font-weight:700;
  margin:0 0 8px;
  color:#001A45;
}

.req{ color:#e11d48; margin-left:2px; }

input{
  width:100%;
  height:46px;
  border:1px solid var(--input-border);
  border-radius:4px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  font-size:13px;
}

input:focus{
  border-color:#9bb4c9;
  box-shadow:0 0 0 3px rgba(11,58,92,.10);
}

.cta{
  margin-top:18px;
  height:36px;
  padding:0 18px;
  border-radius:4px;
  border:0;
  background:var(--btn);
  color:#fff;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
}
.cta:hover{ background:var(--btn-hover); }

/* ===== Responsive / Mobile ===== */
@media (max-width: 980px){
  /* En mobile NO ocultamos topbar (ahí vive la hamburguesa) */
  .app{ display:block; }

  .topbar{
    justify-content:space-between; /* hamburguesa izq - botón der */
  }
  .menu-btn{
    display:inline-flex; /* mobile: visible */
  }

  /* Sidebar drawer */
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:320px;
    max-width:85vw;
    transform:translateX(-105%);
    transition:transform .22s ease;
    z-index:70;
    border-right:1px solid var(--line);
    padding:18px 16px;
  }

  body.menu-open .sidebar{
    transform:translateX(0);
  }

  body.menu-open{
    overflow:hidden;
  }

  .main{
    padding:16px 18px;
  }

  .page-title{
    margin:18px 0 0 16px;
  }

  /* Subir contenido (antes te quedaba muy abajo) */
  .center-wrap{
    min-height:auto;
    padding:22px 0 52px;
    align-items:flex-start;
  }

  .pay-box{
    transform:none;
    margin-top:18px;
  }
}
/* Sidebar: asegurar look + iconos visibles */
.nav-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  text-align:left;
}

.nav-item .ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0b2a4a;
}

.nav-item .ico svg{
  width:20px;
  height:20px;
  display:block;
}

.nav-item:not(.active){
  color:#1f2937;
  opacity: .9;
}

.nav-item.active{
  background:#fcefe3;
  border:1px solid #f4c7a1;
  color:#0b2a4a;
}