:root{
  --azul:#1B3A5C; --verde:#78B400; --gris:#FAFBFC; --txt:#243447;
  --txt2:#5a6b7b; --linea:#e3e9f0; --rojo:#c0392b; --okbg:#dcfce7; --okfg:#166534;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--gris);color:var(--txt);line-height:1.5}
.wrap{max-width:880px;margin:0 auto;padding:0 18px}
a{text-decoration:none}

.top{background:var(--azul);border-bottom:3px solid var(--verde)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{color:#fff;font-weight:700;font-size:18px}
.brand small{display:block;font-weight:400;font-size:11px;color:#9fd35a}
.logout{color:#cfd8e3;font-size:14px}
.logout:hover{color:#fff}

main.wrap{padding-top:26px;padding-bottom:40px}

.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.flash.error{background:#fee2e2;color:var(--rojo)}
.flash.ok{background:var(--okbg);color:var(--okfg)}

.card{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:24px;margin-bottom:18px}
.card h2{font-size:18px;color:var(--azul);margin-bottom:12px}
.sub{color:var(--txt2);font-size:14px;margin-bottom:14px}
.vacio{color:var(--txt2);font-style:italic;font-size:14px}

.card.login{max-width:380px;margin:40px auto}
.card.login h1{font-size:22px;color:var(--azul);margin-bottom:6px}
.card.login label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px}
.card.login input{width:100%;padding:11px;border:1px solid var(--linea);border-radius:8px;font-size:15px}
.card.login input:focus{outline:none;border-color:var(--verde)}
.hint{margin-top:16px;font-size:12.5px;color:var(--txt2);text-align:center}

.btn{display:inline-block;background:var(--verde);color:#fff;font-weight:600;border:none;
     padding:12px 22px;border-radius:8px;font-size:15px;cursor:pointer;margin-top:8px;transition:.15s}
.btn:hover{background:#5f9000}
.btn.sm{padding:6px 14px;font-size:13px;margin:0}

.bienvenida{margin-bottom:18px}
.bienvenida h1{font-size:24px;color:var(--azul)}
.bienvenida p{color:var(--txt2)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

ul.docs{list-style:none}
ul.docs li{display:flex;align-items:center;justify-content:space-between;
           padding:10px 0;border-bottom:1px solid var(--linea)}
ul.docs li:last-child{border-bottom:none}
ul.docs span{font-size:14.5px}

.pie{padding:24px 0;text-align:center;color:var(--txt2);font-size:13px}