body { font-family: Calibri, Arial, sans-serif; color: #17365D; margin: 0; background: #f6f9fb; }
main { max-width: 560px; margin: 32px auto; padding: 0 16px; }
h1 { font-size: 22px; border-bottom: 3px solid #00B0F0; padding-bottom: 8px; }
h2 { font-size: 17px; margin-top: 0; }
section { background: #fff; border: 1px solid #d6e2ea; border-radius: 8px; padding: 16px; margin: 16px 0; }
button { background: #17365D; color: #fff; border: 0; border-radius: 6px; padding: 10px 16px; font-size: 15px; cursor: pointer; }
button:hover { background: #00B0F0; }
input { display: block; width: 100%; box-sizing: border-box; padding: 8px; margin: 4px 0 12px; font-size: 16px; border: 1px solid #9fb4c4; border-radius: 6px; letter-spacing: 1px; }
label { font-weight: bold; font-size: 14px; }
.nota { font-size: 13px; color: #555; }
#mensaje { font-weight: bold; min-height: 1.5em; }
#mensaje.error { color: #a31e1e; }
#mensaje.ok { color: #1b6e3c; }
code { background: #eef4f8; padding: 1px 4px; border-radius: 3px; }