:root{
  --dark:#0D2240;      /* azul oscuro */
  --pri:#00338D;       /* azul principal */
  --bg:#f7f8fb;        /* fondo claro */
  --white:#fff;
  --text:#0D2240;      /* texto */
  --muted:#55565A;     /* gris medio */
  --ok:#EBB700;        /* ahora amarillo (antes verde) */
  --err:#a41515;
  --warn-bg:#fff3cd; --warn-bd:#ffec99; --warn-tx:#7a5d00;
}



*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
.wrap{max-width:800px; margin:0 auto; padding:16px}
.hdr{margin:18px 0 12px}
.hdr h1{margin:0 0 6px; color:var(--dark)}
.hdr .sub{margin:0; color:var(--muted)}
.card{
  background:var(--white); border-radius:14px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.info{color:var(--muted); margin-bottom:10px}
.msg{padding:.85rem; border-radius:10px}
.warn{background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn-tx)}
.result{margin-top:10px; font-size:.95rem}
.ok{color:var(--ok)}
.err{color:var(--err)}
.hidden{display:none}

.block{display:block; font-weight:700; margin-bottom:8px}
.muted{color:var(--muted); font-weight:400; margin-left:4px}

.picker{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; margin-bottom:12px;
}
.select label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px}
select{
  width:100%; padding:.75rem .9rem; border:1px solid #c9d4d5; border-radius:10px;
  background:#fff; color:#0a1516; font-size:1rem; outline:none;
}
select:focus{border-color:var(--pri); box-shadow:0 0 0 3px rgba(28,165,171,.18)}

.btn{
  border:none; border-radius:10px; padding:.85rem 1rem; cursor:pointer; font-weight:700;
  background:var(--dark); color:#fff;
}
.btn.primary{background:var(--pri)}
.btn.full{width:100%}
.btn:active{transform:translateY(1px)}