body {
  font-family: 'Roboto', sans-serif;
  background: #f9fbfd;
  margin: 0; padding: 0; color: #333;
}
header {
  background: #0069d9; color: white;
  padding: 1rem; text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo-small { height: 48px; vertical-align: middle; }
.container { max-width: 1200px; margin: auto; padding: 1rem; }
.actions-top { display: flex; gap: .5rem; justify-content: flex-end; margin-bottom: 1rem; }
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;
}
.filters input, .filters button {
  padding: .5rem; border-radius: 4px; border: 1px solid #ccc;
}
.filters button {
  background: #007bff; color: white; border: none; cursor: pointer;
}
.filters .secondary { background: #6c757d; }
.container form.filters + form.filters { margin-top: 0; }
table {
  width: 100%; border-collapse: collapse; background: white;
  border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
th, td { padding: .75rem; border-bottom: 1px solid #eee; text-align: left; }
th { background: #f1f1f1; }
tr:hover { background: #f5faff; }
.tag { padding: .25rem .5rem; border-radius: 12px; font-size: .75rem; }
.tag.azul { background: #007bff; color: white; }
.center { text-align: center; margin-top: 1rem; }
.error { color: red; margin: .5rem 0; }

.btn-conta {
  padding: 6px 12px;
  background:#4caf50;
  color:#fff;
  border-radius:4px;
  text-decoration:none;
}
.btn-conta:hover{ background:#45a049; }

/* =========================
   LOGIN (pantalla de acceso)
   ========================= */
.auth-bg {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(1200px 600px at -10% -10%, #e8f1ff 0, rgba(232,241,255,0) 60%),
    radial-gradient(900px 500px at 110% 0%, #e7fff6 0, rgba(231,255,246,0) 60%),
    linear-gradient(180deg, #f7fbff 0%, #f3f7fb 100%);
  display: grid;
  place-items: center;
  font-family: 'Roboto', system-ui, -apple-system, Arial, sans-serif;
}

.auth-wrapper {
  width: min(420px, 92vw);
  padding: 16px;
}

.auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 58, 120, .10);
  padding: 28px 24px;
  border: 1px solid #eef3f9;
}

.brand {
  text-align: center;
  margin-bottom: 16px;
}
.brand-logo {
  max-height: 72px;     /* ← logo más chico */
  width: auto;
  display: inline-block;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}
.brand h1 {
  margin: 12px 0 4px;
  font-size: 1.4rem;
  color: #0c2d57;
}
.brand-sub {
  margin: 0;
  color: #667085;
  font-size: .95rem;
}

.auth-form { margin-top: 16px; }
.input-group { margin-bottom: 14px; }
.input-group label {
  display: block;
  font-size: .9rem;
  color: #425466;
  margin-bottom: 6px;
}
.input-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d7e2ee;
  border-radius: 10px;
  font-size: 1rem;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
  background: #fbfdff;
}
.input-group input:focus {
  border-color: #76a7ff;
  box-shadow: 0 0 0 4px rgba(0, 105, 217, .12);
}

/* campo contraseña con botón ojo */
.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrap input { padding-right: 44px; }
.password-wrap .eye {
  position: absolute;
  right: 8px;
  height: 36px;
  width: 36px;
  border: 0;
  border-radius: 8px;
  background: #f1f5fb;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.password-wrap .eye:hover { background: #e7eef8; }

.actions {
  margin-top: 10px;
}
.btn-primary {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #2f7bff 0%, #1c5fde 100%);
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 18px rgba(32, 93, 200, .25);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }

.alert-error {
  background: #fff3f3;
  color: #b42318;
  border: 1px solid #ffd9d9;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .95rem;
  margin: 6px 0 12px;
}

.auth-footer {
  margin-top: 14px;
  text-align: center;
  color: #8a97a8;
  font-size: .85rem;
}
header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.userbar{
  margin-left:auto; display:flex; align-items:center; gap:.5rem;
  font-size:.95rem; color:#425466;
}
.btn-logout{
  display:inline-block; padding:.4rem .8rem; border-radius:999px;
  background:#f1f5fb; color:#0c2d57; text-decoration:none; font-weight:600;
  transition:filter .2s ease, transform .05s ease;
  border:1px solid #d7e2ee;
}
.btn-logout:hover{ filter:brightness(1.05); }
.btn-logout:active{ transform:translateY(1px); }