*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,Arial,sans-serif;
  background:#f6f8ff;          /* fondo claro */
  color:#0b1f3a;               /* letras azul oscuro */
}
a{color:#1b3fa6;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1150px;margin:0 auto;padding:16px}

/* Barra superior */
.topbar{
  background:#ffffff;
  border-bottom:1px solid rgba(10,30,70,.10);
  position:sticky;top:0;z-index:50
}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.2px;color:#0b1f3a}
.nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Etiqueta usuario */
.badge{
  padding:6px 10px;
  background:#e9f0ff;
  border:1px solid rgba(27,63,166,.15);
  border-radius:999px;
  font-size:12px;
  color:#0b1f3a;
}
.danger{color:#b00020}

/* Alerts */
.alert{
  padding:12px;border-radius:12px;margin:12px 0;
  background:#ffffff;
  border:1px solid rgba(10,30,70,.10)
}
.alert.success{background:#eaf7ef;border-color:rgba(20,120,60,.20)}
.alert.error{background:#fdecef;border-color:rgba(176,0,32,.20)}

/* Cards */
.card{
  background:#ffffff;
  border:1px solid rgba(10,30,70,.10);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
  box-shadow:0 6px 22px rgba(10,30,70,.06);
}

/* Layout */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

.small{opacity:.85;font-size:13px;color:#17345c}

/* Inputs */
input,select,textarea{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(10,30,70,.18);
  background:#ffffff;
  color:#0b1f3a;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(27,63,166,.45);
  box-shadow:0 0 0 4px rgba(27,63,166,.12);
}

/* Botones */
button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(27,63,166,.25);
  background:#1b3fa6;
  color:#fff;
  cursor:pointer;
}
button:hover{filter:brightness(1.05)}

/* Tablas */
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  border-bottom:1px solid rgba(10,30,70,.10);
  padding:10px;text-align:left;vertical-align:top
}
.table th{color:#0b1f3a}

/* Acordeón */
.hidden{display:none}
.acc-btn{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;padding:10px;border-radius:12px;
  background:#f3f7ff;
  border:1px solid rgba(27,63,166,.15);
  color:#0b1f3a;
}
.pill{
  padding:4px 8px;border-radius:999px;
  background:#e9f0ff;border:1px solid rgba(27,63,166,.15);
  font-size:12px;color:#0b1f3a
}

/* Footer */
.footer{
  padding:18px 0;
  border-top:1px solid rgba(10,30,70,.10);
  background:#ffffff;
  margin-top:20px
}