:root {
  --gris: #3E3E40;
  --gris-claro: #A8A8AA;
  --azul: #13448B;
  --azul-claro: #EAF0F8;
  --rojo: #DA0C28;
  --rojo-claro: #FCE9EA;
  --verde: #3F6B4A;
  --verde-claro: #E9F1EA;
  --borde: #E7E2D5;
  --fondo: #F7F5EF;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--fondo); color: #232323;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; flex-shrink: 0; background: var(--gris); color: #fff;
  padding: 24px 16px; display: flex; flex-direction: column; gap: 4px;
}
.sidebar img { width: 100%; border-radius: 8px; background: #fff; padding: 8px; margin-bottom: 20px; }
.sidebar a { color: #BFBFC2; padding: 10px 12px; border-radius: 8px; display: block; font-size: 14px; }
.sidebar a.activo, .sidebar a:hover { background: #55555A; color: #fff; text-decoration: none; }
.main { flex-grow: 1; padding: 28px 36px; }

.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 22px 26px; margin-bottom: 20px; }
.titulo { font-size: 22px; font-weight: 700; color: var(--gris); margin: 0 0 4px 0; }
.subtitulo { color: #6B6B63; font-size: 13.5px; margin: 0 0 18px 0; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8A8578; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
td { padding: 10px 12px; border-bottom: 1px solid #F0EDE3; font-size: 13.5px; }

.badge { padding: 3px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 600; }
.badge-activo { background: var(--verde-claro); color: var(--verde); }
.badge-licencia { background: var(--azul-claro); color: var(--azul); }
.badge-suspendido { background: #FBF2E4; color: #8A6231; }
.badge-baja { background: var(--rojo-claro); color: var(--rojo); }
.badge-confidencial { background: var(--rojo-claro); color: var(--rojo); }

.btn { display: inline-block; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-secundario { background: #fff; border: 1px solid #D9D9D7; color: #3A3A34; }
.btn-oscuro { background: var(--gris); color: #fff; }

.form-grupo { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.form-grupo label { font-size: 13px; font-weight: 600; color: #3A3A34; }
.form-grupo input, .form-grupo select, .form-grupo textarea {
  height: 40px; border-radius: 8px; border: 1px solid #D9D9D7; padding: 0 12px; font-size: 14px;
}
.form-grupo textarea { height: auto; padding: 10px 12px; }

.mensajes { margin-bottom: 16px; }
.mensaje { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 13.5px; }
.mensaje-success { background: var(--verde-claro); color: var(--verde); }
.mensaje-error { background: var(--rojo-claro); color: var(--rojo); }

.login-wrap { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--fondo); }
.login-caja { background: #fff; padding: 40px; border-radius: 12px; border: 1px solid var(--borde); width: 360px; }
.login-caja img { width: 160px; display: block; margin: 0 auto 24px auto; }