/* Layout general */
.layout {
    display: flex;
    min-height: 100vh;
    font-family: Arial, sans-serif;
}

/* ==== SIDEBAR (MENÚ LATERAL) ==== */
.sidebar {
    background-color: #004080;   /* Azul corporativo */
    width: 260px;
    min-height: 100vh;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-title {
    font-size: 18px;
    font-weight: bold;
}

.sidebar-menu {
    flex: 1;
    padding-top: 8px;
}

/* Enlace del menú */
.menu-link {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: #ffffff;                 /* texto blanco por defecto */
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

/* Iconos dentro del menú */
.menu-icon {
    margin-right: 10px;
    font-size: 16px;
}

/* Texto */
.menu-text {
    flex: 1;
}

/* Hover: fondo azul tipo título, letras blancas */
.menu-link:hover {
    background-color: #4da3ff;
    color: #ffffff;
    padding-left: 22px;             /* ligero efecto de desplazamiento */
}

/* Opción activa (seleccionada): mismo azul, letras blancas */
.menu-link.active {
    background-color: #4da3ff;
    color: #ffffff !important;
    font-weight: bold;
    border-left: 4px solid #ffffff; /* opcional, puedes cambiarlo o quitarlo */
}

/* Forzar color blanco al texto y al icono cuando estamos activos */
.menu-link.active .menu-text,
.menu-link.active .menu-icon {
    color: #ffffff !important;
}

/* ==== CONTENIDO PRINCIPAL ==== */
.content {
    flex: 1;
    background-color: #f5f5f5;
    padding: 20px 24px;
}

.content-header {
    border-bottom: 1px solid #ddd;
    margin-bottom: 16px;
}

.content-title {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #004080;
}

.content-body {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 16px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* ===== Pantalla de Login L&M ===== */
/* Fondo de la pantalla de login */
.login-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    /* NUEVO degradado: gris claro -> gris oscuro */
     background: linear-gradient(135deg, #9ca3af 0%, #111827 100%);
    /* #9ca3af = gris medio, #111827 = gris muy oscuro/azulado */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}


.login-card{
  width:100%;
  max-width:420px;
  background:#ffffff;
  border-radius:20px;
  padding:26px 26px 22px;
  box-shadow:
    0 18px 50px rgba(15,23,42,0.45),
    0 0 0 1px rgba(148,163,184,0.3);
}

.login-logo{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.login-logo img{
  max-width:260px;
  height:auto;
}

.login-title{
  text-align:center;
  font-size:20px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:4px;
}

.login-subtitle{
  text-align:center;
  font-size:13px;
  color:#64748b;
  margin-bottom:20px;
}

.login-card label{
  display:block;
  font-size:13px;
  color:#0f172a;
  margin-bottom:4px;
}
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"]{
  width:100%;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid #d4d9e6;
  font-size:13px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.login-card input:focus{
  border-color:#4f46e5;
  box-shadow:0 0 0 1px rgba(79,70,229,0.2);
}

.login-card .btn-primary{
  width:100%;
  margin-top:12px;
  padding:9px 12px;
  border-radius:999px;
  border:none;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  background:linear-gradient(135deg,#1d4ed8,#0f172a);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.login-card .btn-primary span.icon{
  font-size:16px;
}

.login-footer{
  margin-top:14px;
  text-align:center;
  font-size:12px;
  color:#94a3b8;
}
.login-footer strong{ color:#0f172a; }

/* alertas reutilizables */
.alert{
  margin-bottom:10px;
  font-size:13px;
  padding:8px 10px;
  border-radius:10px;
}
.alert-error{
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
}
.alert-info{
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
}