:root{
  --azul:#073b90;
  --azul2:#0a58ca;
  --fondo:#f5f7fb;
  --texto:#152033;
  --muted:#667085;
  --borde:#d9e0ea;
  --ok:#157347;
  --error:#b42318;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--fondo);color:var(--texto);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh}
.shell{max-width:620px;margin:0 auto;padding:20px 14px 36px}
.card{background:#fff;border:1px solid var(--borde);border-radius:22px;padding:22px;box-shadow:0 8px 24px rgba(16,24,40,.08)}
.brand{text-align:center;margin-bottom:18px}
.logo{display:block;width:min(250px,68%);height:auto;margin:0 auto 8px}
h1{font-size:28px;margin:4px 0 6px;color:var(--azul)}
h2{font-size:22px;margin:0 0 8px;color:var(--azul)}
p{line-height:1.5;margin:8px 0}
.center{text-align:center}
.muted{color:var(--muted)}
label{display:block;font-weight:700;margin:16px 0 8px}
input[type=password]{width:100%;font-size:20px;padding:14px 16px;border:1px solid #aeb8c7;border-radius:14px;outline:none}
input[type=password]:focus{border-color:var(--azul2);box-shadow:0 0 0 3px rgba(10,88,202,.15)}
button,.btn{font-family:inherit}
.primary,.btn{display:block;width:100%;border:0;border-radius:14px;padding:15px 16px;font-size:18px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
.primary{background:var(--azul);color:white;margin-top:14px}
.secondary{background:#eef4ff;color:var(--azul);border:1px solid #c9dcff;margin-top:12px}
.hidden{display:none!important}
.message{margin-top:12px;font-weight:700}
.error{color:var(--error)}
.portal-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.portal-header h1{margin:0}
.portal-subtitle{margin:2px 0 0;color:var(--muted)}
.check{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#e9f7ef;color:var(--ok);font-size:27px;font-weight:700;flex:0 0 52px}
.welcome{padding:16px;border-radius:16px;background:#f7f9fc;border:1px solid #e4e9f0;margin-bottom:16px}

.menu-grid{display:grid;gap:12px}
.menu-card{
  width:100%;
  min-height:92px;
  display:grid;
  grid-template-columns:52px 1fr 24px;
  align-items:center;
  gap:12px;
  padding:15px 14px;
  text-align:left;
  background:#fff;
  border:1px solid #d8e0ea;
  border-radius:17px;
  cursor:pointer;
  color:var(--texto);
  text-decoration:none;
}
.menu-card:active{background:#f2f6fc}
.menu-card:focus-visible{outline:3px solid rgba(10,88,202,.25);outline-offset:2px}
.menu-icon{
  width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:#eef4ff;
  font-size:28px
}
.menu-copy strong{
  display:block;color:var(--azul);
  font-size:19px;line-height:1.15;margin-bottom:5px
}
.menu-copy small{display:block;color:var(--muted);font-size:15px;line-height:1.3}
.menu-arrow{font-size:34px;color:var(--azul);line-height:1}

.install-box{margin-top:18px;padding:18px;border-radius:16px;background:#f1f6ff;border:1px solid #cfe0ff}
.install-box strong{display:block;color:var(--azul);margin-bottom:6px}
.small{font-size:14px;color:var(--muted)}

.back-button{
  border:0;background:#eef4ff;color:var(--azul);
  border-radius:12px;padding:11px 15px;
  font-size:17px;font-weight:700;cursor:pointer;margin-bottom:18px
}
.section-heading{display:flex;gap:13px;align-items:center;margin-bottom:16px}
.section-heading h1{margin:0}
.section-icon{
  width:56px;height:56px;border-radius:15px;
  display:grid;place-items:center;background:#eef4ff;font-size:30px;flex:0 0 56px
}
.section-content{
  padding:20px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;
  font-size:17px
}

@media (max-width:420px){
  .shell{padding:12px 9px 24px}
  .card{padding:18px 14px}
  h1{font-size:25px}
  .logo{width:min(230px,72%)}
  .portal-header{align-items:flex-start}
  .menu-card{min-height:96px;padding:14px 12px;grid-template-columns:48px 1fr 20px}
  .menu-icon{width:48px;height:48px;font-size:26px}
  .menu-copy strong{font-size:18px}
  .menu-copy small{font-size:14px}
}